module-toggle

echo-toggle

メニューを展開するためのトグルボタンを表示する。
.echo-button.echo-button-square と同じ高さと幅を持つ。サイズの詳細は.echo-buttonを参照。

aria-expanded 属性を付与する前提となっており、値が true のときにアイコンがアニメーションを伴い変化する。

aria-expanded = "false"

aria-expanded = "true"

<button class="echo-toggle" aria-expanded="false" aria-label="Menu"><span class="echo-toggle-line"></span><span class="echo-sr">メニュー</span></button>

<button class="echo-toggle" aria-expanded="true" aria-label="Menu"><span class="echo-toggle-line"></span><span class="echo-sr">メニュー</span></button>

sub class echo-toggle-fixed

(breakpoint) に関わらず常に同じサイズとなる。
デザイン等の理由で大きさを変更したくない場合に使用する。

aria-expanded = "false"

aria-expanded = "true"

<button class="echo-toggle echo-toggle-fixed" aria-expanded="false" aria-label="Menu"><span class="echo-toggle-line"></span><span class="echo-sr">メニュー</span></button>

<button class="echo-toggle echo-toggle-fixed" aria-expanded="true" aria-label="Menu"><span class="echo-toggle-line"></span><span class="echo-sr">メニュー</span></button>

sub class echo-toggle-inverse

トグルボタンの色を反転する。包括要素に濃い背景色を指定する必要がある。

aria-expanded = "false"

aria-expanded = "true"

<button class="echo-toggle echo-toggle-inverse" aria-expanded="false" aria-label="Menu"><span class="echo-toggle-line"></span><span class="echo-sr">メニュー</span></button>

<button class="echo-toggle echo-toggle-inverse" aria-expanded="true" aria-label="Menu"><span class="echo-toggle-line"></span><span class="echo-sr">メニュー</span></button>