list
Dictionary
あるオブジェクトの集合を順序なしリスト及び、順序つきリストとして表示します。 開始位置はデフォルトでは左から右ですが、右から左への言語の場合は反転する必要があります。
リストは入れ子にすることもできます。順序なしリストと順序つきリストを混在させて入れ子にすることも可能です。
Tag
ol(順序付きリスト)もしくはul(順序なしリスト)のどちらかを指定します。
Modifier class | ||
---|---|---|
Ordered List | .in-ol | |
Unordered List | .in-ul |
Ordered List
- Fundamental Design Principle
- Product Design Principle
- 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;