Dictionary

役割と種類

スナックバーは、システムが実行した結果をユーザーにフィードバックします。画面の下部に一時的に表示されます。一定時間の経過によって自動で消えることで、比較的重要度の低い内容であることを醸し出しつつユーザーへのフィードバックを表現します。

スナックバーには、実行された操作に直接関連する1行のテキストが含まれています。自動で消えても構わない簡素な内容をフィードバックします。テキストに加え、1つまでアクションのトリガーを配置できます。

いつ使うべきか / 使わないべきか

操作結果がGUI上に現れず、システム側に隠蔽された場面で、何かフィードバックとして知覚できる情報を受け取れた方がいい場合にはSnackbarを用いたフィードバックを検討しましょう。

ユーザーの操作に対する結果がそのままオブジェクトの変化として現れるように設計した方が、自然で率直なGUIになります。そしてSnackbarを用いる必然性も低くなります。

詳しく読解する必要のない単純な内容のフィードバックのみSnackbarで表現しましょう。エラーのような重要なフィードバックには不適切です。エラーが解消されるまで消えないテキストのような、揮発性の低い表現でエラーに関するフィードバックを受け取れるようにしましょう。

Color

色（状態）を指定します。

	Modifier class
Neutral*	.-color-neutral
Positive	.-color-positive
Negative	.-color-negative
Notice	.-color-notice

Inline

inline要素として表示します。

	Modifier class
Inline	.-inline

Active

表示/非表示を切り替えます。

	Modifier class
Active	.—active

Code

Mixin-based

HTML

<div
  class='snackbar-component'
  aria-live="polite"
>
  <span class="icon-component" data-icon="check" />
  <span>アイテム1を削除しました</span>
  <div class="trailing">
    <button class="button-component">
      <div class="_body">もとに戻す</div>
    </button>
  </div>
</div>

SCSS

@use '@pepabo-inhouse/components-web' as inhouse;

.snackbar-component {
  @include inhouse.snackbar-style(
    $options: (
      color: positive,
      size: l,
    )
  );

  > .trailing {
    margin-left: auto;
  }
}

Class-based

HTML

<div
  class='in-snackbar -color-neutral --active -inline'
  aria-live="polite"
>
  <span class="in-icon" data-icon="check" />
  <span>アイテム1を削除しました</span>
  <div class="_trailing">
    <button class="in-button -size-s -appearance-transparent">
      <div class="_body">もとに戻す</div>
    </button>
  </div>
</div>

SCSS

@use '@pepabo-inhouse/components-web' as inhouse;

@include inhouse.snackbar-export;