머티리얼 디자인 3 및 웹 컴포넌트 기반의 새로운 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>

스크롤 가능

기본 활성화 탭

<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>

너비 100%

아래는 표준 탭입니다. 모바일에서는 너비의 100%를 차지하며 각 탭의 너비는 동일합니다. 태블릿/PC에서는 왼쪽 정렬됩니다.

<div class="mdui-tab">에 .mdui-tab-scrollable 클래스를 추가하여 탭을 가로로 스크롤할 수 있게 합니다. 모바일 기기에서 탭이 많을 때 주로 사용됩니다.

예시

<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>

아이콘 포함

<div class="mdui-tab"></div> 요소에 .mdui-tab-centered 클래스를 추가하면 태블릿/PC에서 탭을 가운데로 정렬할 수 있습니다.

<div class="mdui-tab"></div> 요소에 .mdui-tab-full-width 클래스를 추가하면 탭이 항상 너비의 100%를 차지하며 각 탭의 너비가 동일해집니다.

<div class="mdui-tab"></div> 요소에 .mdui-color-[color] 클래스를 추가하여 탭에 배경색을 부여할 수 있습니다.

예시

<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>

아이콘 및 텍스트 포함

<a> 요소에 .mdui-tab-active 클래스를 추가하면 해당 탭이 기본으로 활성화됩니다.

<a> 요소에 disabled 속성을 추가하여 해당 탭을 비활성화할 수 있습니다.

CSS 클래스 목록

클래스 이름	설명
`.mdui-table`	이 방식을 사용하면 JavaScript 코드를 작성할 필요 없이 <code><div class="mdui-tab"></div></code> 요소에 <code>mdui-tab="<a href="#option">options</a>"</code> 속성을 추가하여 컴포넌트를 활성화할 수 있습니다.
`.mdui-table-fluid`	컴포넌트가 동적으로 생성된 경우 <a href="/ko/docs/1/global#mutation"><code>mdui.mutation()</code></a>을 호출하여 초기화해야 합니다.
`.mdui-table-hoverable`	컴포넌트 인스턴스화:
`.mdui-table-col-numeric`	selector는 .mdui-tab 요소의 CSS 선택자 또는 DOM 요소입니다.
`.mdui-table-selectable`	options는 플러그인 매개변수입니다. 아래 매개변수 목록을 참조하세요.
`.mdui-table-row-selected`	탭 전환 트리거 방식.

스낵바

다이알로그

테이블