如何使ui-grid的圓角變圓？

Listview有一個數據插入屬性來使其四角變圓。但是，我不能使用listview，因爲我的列表是嵌套列表，並且框架的默認行爲是隱藏嵌套列表並在點擊其主列表後顯示它。所以，我選擇使用主列表視圖行看起來像下面裏面UI的網格視圖：如何使ui-grid的圓角變圓？

<ul data-role="listview"> 
<li><h1 class="ui-title" role="heading" aria-level="1">Completeness</h1></li> 
<li> 
<div class="ui-grid-b"> 
<div>Secondary Title</div> 
<div>Content.....</div> 
<div>Blah Blah</div> 
</div 
</li> 
<li>Footer</li> 
</ul>

我的問題是UI格的角應該是圓角。我試圖把data-inset =「true」，但沒有奏效。

來源

2012-01-30 kaz

您可以使用jQuery Mobile的增加了窗口小部件，在這種情況下，你要尋找的ui-corner-all類穿四角角落類，然後你可能會想在box-shadow是ui-shadow適用於：

<div class="ui-grid-b ui-corner-all ui-shadow" style="padding: 5px;">

我添加了填充，因爲網格元素沒有默認值。此外還有ui-corner-top和ui-corner-bottom類，它們只圍繞它們所應用的元素的頂部/底部。

這裏是一個演示：http://jsfiddle.net/VXrxv/

相反，如果你想圓的li元素是ui-grid元素，你可以添加margin給他們的父母：

<li class="ui-corner-all ui-shadow" style="margin: 5px;">

這裏是一個演示： http://jsfiddle.net/VXrxv/1/

來源

2012-01-30 08:11:09 Jasper

這正是我期待的！謝謝！ – kaz 2012-01-30 08:18:36

嘗試使用CSS屬性border-radius。例如，嘗試border-radius: 0.5em 0.5em;

來源

2012-01-30 07:51:49 Pablo

感謝，它會創建半徑但網格的半徑看起來與頁面上的箱子的與衆不同。框架本身沒有方法或屬性可以做到這一點嗎？ – kaz 2012-01-30 08:02:39

在Bootstrap上舍入是有效的;

這似乎是我最快的解決方案;

具有以下格裹霧部件

<div class="k-block" style="padding:0px">

來源

2015-03-04 18:31:25

如何使ui-grid的圓角變圓？

回答

相關問題