list

Dictionary

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

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

Tag

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

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

Ordered List

  1. Fundamental Design Principle
  2. Product Design Principle
  3. Communication Design Principle

Unordered List

  • Fundamental Design Principle
  • Product Design Principle
  • Communication Design Principle

Density

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

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

Dense

  • Fundamental Design Principle
  • Product Design Principle
  • Communication Design Principle

Normal

  • Fundamental Design Principle
  • Product Design Principle
  • Communication Design Principle

Comfort

  • Fundamental Design Principle
  • Product Design Principle
  • Communication Design Principle

Size

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

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

S

  • Fundamental Design Principle
  • Product Design Principle
  • Communication Design Principle

M

  • Fundamental Design Principle
  • Product Design Principle
  • Communication Design Principle

L

  • Fundamental Design Principle
  • Product Design Principle
  • Communication Design Principle

Background

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

Modifier class
Background.-has-background

Background

  • Fundamental Design Principle
  • Product Design Principle
  • Communication Design Principle
  • Fundamental Design Principle
  • Product Design Principle
  • Communication Design Principle
  • Fundamental Design Principle
  • Product Design Principle
  • Communication Design Principle

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;