Listリスト

リストは、テキストや画像を表示するための縦方向に並んだ項目のリストで、ユーザーが関連情報をすばやく参照したり、それにアクセスしたりできるようにします。

使用方法

コンポーネントを必要に応じてインポートします：

import 'mdui/components/list.js';
import 'mdui/components/list-item.js';
import 'mdui/components/list-subheader.js';

コンポーネントの TypeScript 型を必要に応じてインポートします：

import type { List } from 'mdui/components/list.js';
import type { ListItem } from 'mdui/components/list-item.js';
import type { ListSubheader } from 'mdui/components/list-subheader.js';

使用例：

Subheader

Item 1

Item 2

<mdui-list>
  <mdui-list-subheader>Subheader</mdui-list-subheader>
  <mdui-list-item>Item 1</mdui-list-item>
  <mdui-list-item>Item 2</mdui-list-item>
</mdui-list>

例

テキストコンテンツ

<mdui-list-item> コンポーネントに headline 属性を設定すると、リスト項目のメインテキストを設定できます。description 属性を設定すると、サブテキストを設定できます。

<mdui-list>
  <mdui-list-item headline="Headline"></mdui-list-item>
  <mdui-list-item headline="Headline" description="Supporting text"></mdui-list-item>
</mdui-list>

ソース

デフォルトスロットでメインテキストを設定し、description スロットでサブテキストを設定することもできます。

Headline

Headline Supporting text

<mdui-list>
  <mdui-list-item>Headline</mdui-list-item>
  <mdui-list-item>
    Headline
    <span slot="description">Supporting text</span>
  </mdui-list-item>
</mdui-list>

ソース

デフォルトでは、メインテキストとサブテキストは長さに関係なくそのまま表示されます。headline-line と description-line 属性を設定することで、メインテキストとサブテキストに行数制限を追加でき、最大 3 行まで制限できます。

Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text

<mdui-list>
  <mdui-list-item headline-line="1" description-line="2">
    Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline
    <span slot="description">Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text</span>
  </mdui-list-item>
</mdui-list>

ソース

両側のコンテンツ

<mdui-list-item> コンポーネントに icon と end-icon 属性を設定すると、リスト項目の左側と右側に Material Icons アイコンを追加できます。

Headline

<mdui-list>
  <mdui-list-item icon="people" end-icon="arrow_right">Headline</mdui-list-item>
</mdui-list>

ソース

icon と end-icon スロットを使用して、リスト項目の左側と右側に要素を追加することもできます。

Headline

<mdui-list>
  <mdui-list-item>
    Headline
    <mdui-avatar slot="icon" src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>
    <mdui-checkbox slot="end-icon"></mdui-checkbox>
  </mdui-list-item>
</mdui-list>

ソース

リンク

href 属性を設定すると、リスト項目をリンクに変換できます。この場合、リンク関連の属性 download、target、rel も使用できます。

Headline

<mdui-list>
  <mdui-list-item href="https://www.mdui.org" target="_blank">Headline</mdui-list-item>
</mdui-list>

ソース

無効状態

<mdui-list-item> コンポーネントに disabled 属性を追加すると、そのリスト項目を無効にできます。この場合、リスト項目内の checkbox、radio、switch などのコンポーネントも無効になります。

Headline

<mdui-list>
  <mdui-list-item disabled>Headline</mdui-list-item>
  <mdui-list-item>Headline</mdui-list-item>
</mdui-list>

ソース

アクティブ状態

<mdui-list-item> コンポーネントに active 属性を追加すると、そのリスト項目をアクティブ状態にできます。

Headline

<mdui-list>
  <mdui-list-item active>Headline</mdui-list-item>
  <mdui-list-item>Headline</mdui-list-item>
</mdui-list>

ソース

クリック不可状態

<mdui-list-item> コンポーネントに nonclickable 属性を追加すると、リスト項目からマウスホバーとクリックリップルを削除できます。

Headline

<mdui-list>
  <mdui-list-item nonclickable>Headline</mdui-list-item>
  <mdui-list-item>Headline</mdui-list-item>
</mdui-list>

ソース

角丸形状

<mdui-list-item> コンポーネントに rounded 属性を追加すると、そのリスト項目を角丸形状にできます。

Headline

<mdui-list>
  <mdui-list-item rounded>Headline</mdui-list-item>
  <mdui-list-item rounded>Headline</mdui-list-item>
</mdui-list>

ソース

垂直方向の配置

<mdui-list-item> コンポーネントに alignment 属性を設定すると、リスト項目の左右の要素とリスト項目自体の配置を調整できます。値は以下の通りです：

start：上揃え
center：中央揃え
end：下揃え

Headline

<mdui-list>
  <mdui-list-item alignment="start" description="Supporting text">
    Headline
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
  <mdui-list-item alignment="center" description="Supporting text">
    Headline
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
  <mdui-list-item alignment="end" description="Supporting text">
    Headline
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
</mdui-list>

ソース

カスタムコンテンツ

<mdui-list-item> コンポーネントで custom スロットを使用すると、リスト項目のコンテンツを完全にカスタマイズできます。

test

<mdui-list>
  <mdui-list-item>
    <div slot="custom" style="display: flex;">
      <mdui-icon name="people"></mdui-icon>
      <div>test</div>
    </div>
  </mdui-list-item>
</mdui-list>

ソース

`mdui-list-item` API

プロパティ

HTML 属性	JavaScript プロパティ	型	デフォルト値
`headline`	`headline`	`string`	-
メインテキストです。デフォルトスロットで設定することもできます。
`headline-line`	`headlineLine`	`1 \| 2 \| 3`	-
メインテキストの行数です。制限を超えると切り捨てて表示されます。デフォルトでは行数制限はありません。次の値を指定します： `1`：1行で表示し、超えた場合は切り捨て `2`：2行で表示し、超えた場合は切り捨て `3`：3行で表示し、超えた場合は切り捨て
`description`	`description`	`string`	-
サブテキストです。`slot="description"` で設定することもできます。
`description-line`	`descriptionLine`	`1 \| 2 \| 3`	-
サブテキストの行数です。制限を超えると切り捨てて表示されます。デフォルトでは行数制限はありません。次の値を指定します： `1`：1行で表示し、超えた場合は切り捨て `2`：2行で表示し、超えた場合は切り捨て `3`：3行で表示し、超えた場合は切り捨て
`icon`	`icon`	`string`	-
左側に表示するMaterial Iconsのアイコン名です。`slot="icon"` で設定することもできます。
`end-icon`	`endIcon`	`string`	-
右側に表示するMaterial Iconsのアイコン名です。`slot="end-icon"` で設定することもできます。
`disabled`	`disabled`	`boolean`	`false`
このリストアイテムを無効にするかどうかを指定します。無効にすると、リストアイテムがグレー表示になり、その中の `<mdui-checkbox>`、`<mdui-radio>`、`<mdui-switch>` なども無効になります。
`active`	`active`	`boolean`	`false`
このリストアイテムをアクティブにするかどうかを指定します。
`nonclickable`	`nonclickable`	`boolean`	`false`
リストアイテムをクリック不可にするかどうかを指定します。設定後も、リストアイテム内の `<mdui-checkbox>`、`<mdui-radio>`、`<mdui-switch>` などは引き続き操作可能です。
`rounded`	`rounded`	`boolean`	`false`
角丸形状のリストアイテムを使用するかどうかを指定します。
`alignment`	`alignment`	`'start' \| 'center' \| 'end'`	`'center'`
リストアイテムの垂直方向の配置です。次の値を指定します： `start`：上揃え `center`：中央揃え `end`：下揃え
`href`	`href`	`string`	-
リンク先のURLです。この属性を設定すると、コンポーネント内部は `<a>` 要素としてレンダリングされ、リンク関連の属性が使用可能になります。
`download`	`download`	`string`	-
ダウンロードリンクの対象ファイル名です。注：`href` 属性が設定されている場合にのみ有効です。
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
リンクの開き方です。次の値を指定します： `_blank`：新しいウィンドウで開く `_parent`：親フレームで開く `_self`：デフォルト。現在のフレームで開く `_top`：最上位のウィンドウで開く注：`href` 属性が設定されている場合にのみ有効です。
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
現在のドキュメントとリンク先ドキュメントの関係です。次の値を指定します： `alternate`：現在のドキュメントの代替バージョン `author`：現在のドキュメントまたは記事の作成者 `bookmark`：直近の祖先セクションへのパーマリンク `external`：参照先ドキュメントが現在のサイトとは異なるサイトにあることを示します `help`：関連するヘルプドキュメントへのリンク `license`：現在のドキュメントのメインコンテンツが、参照先ファイルの著作権ライセンスの対象であることを示します `me`：現在のドキュメントがリンク先コンテンツの所有者を表します `next`：現在のドキュメントがシリーズの一部であり、参照先ドキュメントがシリーズの次のドキュメントです `nofollow`：現在のドキュメントの作成者または発行者が、参照先ファイルを推奨していないことを示します `noreferrer`：`Referer` ヘッダーを含めません。`noopener` と同様の効果です `opener`：ハイパーリンクが最上位のブラウジングコンテキストを作成する場合（つまり `target` 属性値が `_blank`）、補助ブラウジングコンテキストを作成します `prev`：現在のドキュメントがシリーズの一部であり、参照先ドキュメントがシリーズの前のドキュメントです `search`：現在のファイルとその関連ページを検索するために使用できるリソースへのリンクを提供します `tag`：現在のドキュメントに適用されるタグ（指定されたアドレスで識別される）を提供します注：`href` 属性が指定されている場合にのみ使用できます。
`autofocus`	`autofocus`	`boolean`	`false`
ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
`tabindex`	`tabIndex`	`number`	-
Tab キーによるフォーカス移動時の、要素の順序を指定します。

メソッド

名前	パラメーター	戻り値
`click`		`void`
要素のマウスクリックをシミュレートします。
`focus`	`options: FocusOptions` (オプション)	`void`
現在の要素にフォーカスを設定します。オプションとして、以下のプロパティを持つオブジェクトを渡すことができます： `preventScroll`：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを `true` に設定します。
`blur`		`void`
現在の要素からフォーカスを外します。

イベント

名前
`focus`
フォーカスを取得したときに発生します。
`blur`
フォーカスを失ったときに発生します。

Slots

名前
デフォルト
メインテキスト
`description`
サブテキスト
`icon`
リストアイテム左側の要素
`end-icon`
リストアイテム右側の要素
`custom`
任意のカスタムコンテンツ

CSS Parts

名前
`container`
リストアイテムコンテナ
`icon`
左側のアイコン
`end-icon`
右側のアイコン
`body`
中央部分
`headline`
メインタイトル
`description`
サブタイトル

CSS カスタムプロパティ

名前
`--shape-corner`
リストアイテムの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。
`--shape-corner-rounded`
`rounded` 属性が指定されている場合のリストアイテムの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。

`mdui-list-subheader` API

Slots

名前
デフォルト
リストサブヘッダーテキスト

`mdui-list` API

Slots

名前
デフォルト
`<mdui-list-item>` 要素

前の章

LinearProgress 線形プログレス

次の章

Menu メニュー