near_me
開始使用
keyboard_arrow_downwidgets
組件
keyboard_arrow_downlocal_mall
資源
keyboard_arrow_down基於 Material Design 3 與 Web Components 的全新 mdui 2 現已發佈，前往查看 mdui 2 開發文件。
表格
呼叫方式
表格在頁面載入完後會自動初始化。對於動態產生的表格，需要呼叫 mdui.mutation() 進行初始化。
範例
<div class="mdui-table-fluid">
<table class="mdui-table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td></td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>回應式
如果表格寬度過大，可能會導致頁面出現橫向捲動條。將 .mdui-table 元素包裹在 .mdui-table-fluid 元素內，即可在表格寬度超出頁面寬度時，使表格支援水平捲動。
<div class="mdui-table-fluid">
<table class="mdui-table">
...
</table>
</div>範例
<div class="mdui-table-fluid">
<table class="mdui-table mdui-table-hoverable">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td></td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>欄對齊方式
按照 Material Design 的規範，應該把表格中的文字欄左對齊，數值欄右對齊。
mdui 中表格欄預設使用左對齊，在數值欄的 <th> 標籤上添加類別 .mdui-table-col-numeric 即可使該欄右對齊。
範例
<div class="mdui-table-fluid">
<table class="mdui-table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th class="mdui-table-col-numeric">age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>21</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td></td>
<td>9</td>
</tr>
</tbody>
</table>
</div>欄選擇
在 .mdui-table 元素上添加類別 .mdui-table-selectable 即可在每一列的前面添加一個核取方塊。
選取核取方塊後，會在該列的 <tr> 元素上添加類別 .mdui-table-row-selected。
也可以預先在 <tr> 元素上添加類別 .mdui-table-row-selected，使該列處於預設選取狀態。
範例
<div class="mdui-table-fluid">
<table class="mdui-table mdui-table-selectable">
<thead>
<tr>
<th>Dessert (100g serving)</th>
<th
class="mdui-table-col-numeric"
mdui-tooltip="{content: 'The total amount of food energy in the given serving size.'}"
>
Calories
</th>
<th class="mdui-table-col-numeric">Fat (g)</th>
<th class="mdui-table-col-numeric">Carbs (g)</th>
<th class="mdui-table-col-numeric">Protein (g)</th>
<th class="mdui-table-col-numeric">Sodium (mg)</th>
<th
class="mdui-table-col-numeric"
mdui-tooltip="{content: 'The amount of calcium as a percentage of the recommended daily amount.'}"
>
Calcium (%)
</th>
<th class="mdui-table-col-numeric">Iron (%)</th>
</tr>
</thead>
<tbody>
<tr class="mdui-table-row-selected">
<td>Frozen yogurt</td>
<td>159</td>
<td>6.0</td>
<td>24</td>
<td>4.0</td>
<td>87</td>
<td>14%</td>
<td>1%</td>
</tr>
<tr>
<td>Ice cream sandwich</td>
<td>237</td>
<td>9.0</td>
<td>37</td>
<td>4.3</td>
<td>129</td>
<td>8%</td>
<td>1%</td>
</tr>
<tr>
<td>Eclair</td>
<td>262</td>
<td>16.0</td>
<td>24</td>
<td>6.0</td>
<td>337</td>
<td>6%</td>
<td>7%</td>
</tr>
</tbody>
</table>
</div>動態產生的表格
如果您的表格是動態產生的，則需要呼叫 mdui.mutation() 進行初始化。
如果您動態修改了表格屬性，則需要呼叫 mdui.updateTables() 方法來重新初始化表格。該方法可以接受一個 CSS 選取器（用於選擇 <table class="mdui-table"> 元素）、一個 DOM 元素或一個 DOM 元素陣列作為參數，表示只重新初始化指定的表格。如果沒有傳入參數，則將重新初始化頁面中所有的表格。