Dictionary

あるオブジェクトの集合を順序なしリスト及び、順序つきリストとして表示します。 開始位置はデフォルトでは左から右ですが、右から左への言語の場合は反転する必要があります。

リストは入れ子にすることもできます。順序なしリストと順序つきリストを混在させて入れ子にすることも可能です。

Tag

ol（順序付きリスト）もしくはul（順序なしリスト）のどちらかを指定します。

	Modifier class
Ordered List	.in-ol
Unordered List	.in-ul

Density

要素間の密度を決定します。 Dence / Normal / Comfort から選択できます。

	Modifier class
Dense	.-density-dense
Normal*	.-density-normal
Comfort	.-density-comfort

Size

サイズを決定します。 S / M / L から選択できます。

	Modifier class
S	.-size-s
M*	.-size-m
L	.-size-l

Background

上下のスペースを確保するかどうかを選択できます。

	Modifier class
Background	.-has-background

Code

Mixin-based

HTML

<ul class="list-bomponent" role="list">
  <li>Fundamental Design Principle</li>
  <li>Product Design Principle</li>
  <li>Communication Design Principle</li>
</ul>

SCSS

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

.list-component {
  @include inhouse.list-style(
    $options: (
      density: dense,
      list-style-type: disc,
      size: l,
    )
  );
}

Class-based

HTML

<ul class="in-ul -size-l -density-dense -has-background" role="list">
  <li>Fundamental Design Principle</li>
  <li>Product Design Principle</li>
  <li>Communication Design Principle</li>
</ul>

SCSS

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

@include inhouse.list-export;