2020-11-12/2023-05-23

【Material Design】Listsの使い方

【Material Design】Listsの使い方

今回はMaterial Design の Lists の使い方を紹介します。

メニュー用として表示することもできますし、チェックボックスと共に使用してリスト内から選択することもできます。

サイドバーに使用するにも向いていて、汎用性の高いコンポーネントです。

今回作成例とするのは以下のタイプです。

  • 1行テキストタイプ
  • 2行テキストタイプ
  • 複数リスト
  • 区切りリスト
  • 単一選択リスト
  • 単一選択リスト(リップルなし、テキストハイライト)
  • ラジオボタンリスト
  • チェックボックスリスト

Listsの使用方法

上記タイプの作成をしていきます。

基本的にCSS、JS部は同じです。そのためHTMLに焦点を当てて説明していきます。

ラジオボタン、チェックボックスでは追加があります。

CSS

@use "@material/list";
@include list.core-styles;

基本スタイルの読み込みをしています。

JS

import {MDCList} from '@material/list';
const lists = [].map.call(document.querySelectorAll('.mdc-list'), (el) => new MDCList(el) );
const listItemRipples = lists.map((list) => list.listElements.map( (el) => new MDCRipple(el) ) );

リストのインスタンス化に加えてリスト内のリップル対象要素でリップのインスタンス化が必要になります。

上記方法ですべてのリストのインスタンス化、リップル対象要素のインスタンス化が可能です。

1行テキストタイプ

material-design-lists - 20201112114435
  <ul class="mdc-list">
<li class="mdc-list-item" tabindex="0">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Single-line item</span>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Single-line item</span>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Single-line item</span>
</li>
</ul>

基本的なリスト構造で簡単な作りをしています。

「mdc-list」「mddc-list-item」の構成になります。

2行テキストタイプ

material-design-lists - 20201112114440
<ul class="mdc-list mdc-list--two-line">
<li class="mdc-list-item" tabindex="0">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">
<span class="mdc-list-item__primary-text">Two-line item</span>
<span class="mdc-list-item__secondary-text">Secondary text</span>
</span>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">
<span class="mdc-list-item__primary-text">Two-line item</span>
<span class="mdc-list-item__secondary-text">Secondary text</span>
</span>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">
<span class="mdc-list-item__primary-text">Two-line item</span>
<span class="mdc-list-item__secondary-text">Secondary text</span>
</span>
</li>
</ul>

1行テキストの方ではテキストを1行で表示する前提です。

そのため2行表示したい場合には上のように「mdc-list-item__primary-text」「mdc-list-item__secondary-text」のようにして表示させます。

複数リスト

material-design-lists - 20201112114443
  <div class="mdc-list-group">
<h3 class="mdc-list-group__subheader">List 1</h3>
<ul class="mdc-list">
<li class="mdc-list-item" tabindex="0">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">line item</span>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">line item</span>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">line item</span>
</li>
</ul>
<h3 class="mdc-list-group__subheader">List 2</h3>
<ul class="mdc-list">
<li class="mdc-list-item">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">line item</span>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">line item</span>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">line item</span>
</li>
</ul>
</div>

関連した複数のリストを表示したい場合には「mdc-list-group」で覆ってあげます。

また、それぞれリストの見出しとして「mdc-list-group__subheader」を使用できます。

区切りリスト

material-design-lists - 20201112114446
<div class="list">
<h3 class="list-title">Single-line</h3>
<ul class="mdc-list">
<li class="mdc-list-item" tabindex="0">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Item 1 - Division 1</span>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Item 2 - Division 1</span>
</li>
<li role="separator" class="mdc-list-divider"></li>
<li class="mdc-list-item">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Item 1 - Division 2</span>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Item 2 - Division 2</span>
</li>
</ul>
</div>

上記のように明示的に複数リストにするのではなくさりげなく実装したい場合に有効です。

リストとしてクラス「mdc-class-divider」、role「separator」を付与しています。

その部分がセパレーターとして表示されています。

単一選択リスト

material-design-lists - 20201112114450
<ul id="my-list" class="mdc-list" role="listbox">
<li class="mdc-list-item" role="option" tabindex="0">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Single-line item</span>
</li>
<li class="mdc-list-item" role="option">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Single-line item</span>
</li>
<li class="mdc-list-item" role="option">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Single-line item</span>
</li>
</ul>
const list = new MDCList(document.getElementById('my-list'));
list.singleSelection = true;

selectに近い使用方法です。選択したものが選択状態になります。

javascriptで「singleSelection」プロパティを「true」にする必用があります。

HTML側では明示的にroleで「listbox」「option」としておくと良いです。

単一選択リスト(リップルなし、テキストハイライト)

material-design-lists - 20201112114455
<ul id="my-list" class="mdc-list" role="listbox">
<li class="mdc-list-item" role="option" aria-selected="false">
<span class="mdc-list-item__text">Single-line item</span>
</li>
<li class="mdc-list-item mdc-list-item--selected" role="option" aria-selected="true" tabindex="0">
<span class="mdc-list-item__text">Single-line item</span>
</li>
<li class="mdc-list-item" role="option" aria-selected="false">
<span class="mdc-list-item__text">Single-line item</span>
</li>
</ul>
const list = new MDCList(document.getElementById('my-list'));
list.singleSelection = true;

選択されたものがハイライトされます。

選択状態にあるものは「aria-selected」がtrueになり、「mdc-list-item–selected」クラスが付与されます。

ラジオボタンリスト

material-design-lists - 20201112114501
<ul class="mdc-list" role="radiogroup">
<li class="mdc-list-item" role="radio" aria-checked="false">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__graphic">
<div class="mdc-radio">
<input class="mdc-radio__native-control"
type="radio"
id="demo-list-radio-item-1"
name="demo-list-radio-item-group"
value="1">
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
</span>
<label class="mdc-list-item__text" for="demo-list-radio-item-1">Option 1</label>
</li>
<li class="mdc-list-item" role="radio" aria-checked="true" tabindex="0">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__graphic">
<div class="mdc-radio">
<input class="mdc-radio__native-control"
type="radio"
id="demo-list-radio-item-2"
name="demo-list-radio-item-group"
value="2"
checked>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
</span>
<label class="mdc-list-item__text" for="demo-list-radio-item-2">Option 2</label>
</li>
<li class="mdc-list-item" role="radio" aria-checked="false">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__graphic">
<div class="mdc-radio">
<input class="mdc-radio__native-control"
type="radio"
id="demo-list-radio-item-3"
name="demo-list-radio-item-group"
value="3">
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
</span>
<label class="mdc-list-item__text" for="demo-list-radio-item-3">Option 3</label>
</li>
</ul>
@use "@material/radio/mdc-radio";
import {MDCRadio} from '@material/radio';
const radio = new MDCRadio(document.querySelector('.mdc-radio'));

ラジオボタンを利用したリストを作成できます。

ラジオボタンの取り扱いはそれのみの取り扱いで別記事で解説します。

「mdc-list-item__graphic」内にラジオボタンを利用しています。

チェックボックスリスト

material-design-lists - 20201112114503
<ul class="mdc-list" role="group" aria-label="List with checkbox items">
<li class="mdc-list-item" role="checkbox" aria-checked="false">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__graphic">
<div class="mdc-checkbox">
<input type="checkbox"
class="mdc-checkbox__native-control"
id="demo-list-checkbox-item-1" />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark"
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
</span>
<label class="mdc-list-item__text" for="demo-list-checkbox-item-1">Option 1</label>
</li>
<li class="mdc-list-item" role="checkbox" aria-checked="true" tabindex="0">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__graphic">
<div class="mdc-checkbox">
<input type="checkbox"
class="mdc-checkbox__native-control"
id="demo-list-checkbox-item-2"
checked />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark"
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
</span>
<label class="mdc-list-item__text" for="demo-list-checkbox-item-2">Option 2</label>
</li>
<li class="mdc-list-item" role="checkbox" aria-checked="false">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__graphic">
<div class="mdc-checkbox">
<input type="checkbox"
class="mdc-checkbox__native-control"
id="demo-list-checkbox-item-3" />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark"
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
</span>
<label class="mdc-list-item__text" for="demo-list-checkbox-item-3">Option 3</label>
</li>
</ul>
@use "@material/checkbox";
@include checkbox.core-styles;
import {MDCCheckbox} from '@material/checkbox';
const checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));

ラジオボタンとほとんど同様です。

チェックボックスも別記事にて単独で取り扱いします。

mixinの利用

色の変更やスタイル変更のためのmixinを紹介します。

テキストの色変更

リストのテキストの色を変更します。

.my-list {
@include list.item-primary-text-ink-color(#ff0000);
@include list.item-secondary-text-ink-color(#00ff00);
}

primaryは1行テキストタイプの場合はその行に、2行テキストタイプの場合は1行目に適応されます。

secondaryは2行テキストタイプの場合の2行目に適応されます。

material-design-lists - 20201112115150

アイコンの色変更

アイコンの色変更をします。

背景と塗りつぶしの色を指定可能です。

   <li class="mdc-list-item" tabindex="0">
<span class="mdc-list-item__ripple"></span>
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">category</i>
<span class="mdc-list-item__text">Single-line item</span>
</li>
.my-list {
@include list.item-graphic-fill-color(#ff0000);
@include list.item-graphic-ink-color(#00ff00);
}

fillでアイコン背景の色が変更され、inkでアイコンの塗りつぶしの色が変更されました。

アイコンの種類によって適応のされ方が異なるかもしれません。

カテゴリーアイコンを使用した場合は以下のようになりました。

material-design-lists - 20201112115848

区切り線の色変更

区切り線を利用したリストを使用する場合の区切り線の色を変更することができます。

.my-list {
@include list.divider-color(#ff0000);
}

「divider-color」で色指定するだけで簡単にできます。

material-design-lists - 20201112120445

まとめ

用意されているもので実装したい形が簡単にできてしまいそうなぐらい設定できることが多いです。

紹介した内容を組み合わせたり、変更を加えて使用してみてください。

2020 KumaTechLab.