KumaTechLab
2020-11-12/2023-05-23

【Material Design】Listsの使い方

【Material Design】Listsの使い方

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

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

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

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

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

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

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

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

１行テキストタイプ

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」の構成になります。

２行テキストタイプ

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>

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

そのため２行表示したい場合には上のように「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は１行テキストタイプの場合はその行に、２行テキストタイプの場合は１行目に適応されます。

secondaryは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.