Select
*このドキュメントは編集中です
Dictionary
Element
AContainer
セレクトボックスのかたちをつくる要素です。この要素の大きさが、セレクトボックスをタップ/クリックできる範囲です。
BInput text
セレクトボックスで選べる選択肢のうちのひとつをテキストで表示します。選択していない、または空の選択肢(HTMLのvalue属性が空のoption要素)を選択している場合は、表示しません。
CTrailing icon
セレクトボックスの機能を伝えるためのアイコンです。下向きの三角形の形をしていて、アイコンの形は変えられません。
Appearance
Selectの見た目を指定できます。
Modifier class | ||
---|---|---|
Outlined* | .-appearance-outlined | |
Filled | .-appearance-filled |
Color
Semantic Colorを指定して配色できます。
Modifier class | Pepper flavor | |
---|---|---|
Neutral* | .-color-neutral | Pepper Gray |
Negative | .-color-negative | Pepper Red |
Size
どのくらいの大きさで表示するか指定できます。
Modifier class | ||
---|---|---|
S | .-size-s | |
M* | .-size-m | |
L | .-size-l |
Width
親要素の幅に対してどのくらいの幅で表示するか指定できます。
Modifier class | ||
---|---|---|
Auto* | .-width-auto | |
Full | .-width-full | |
Half | .-width-half | |
Third | .-width-third |
Mixin-based
HTML
<span class="select-component">
<select class="_select">
<option class="_option">Option A</option>
<option class="_option">Option B</option>
<option class="_option">Option C</option>
</select>
<span class="_icon"></span>
</span>
SCSS
@use '@pepabo-inhouse/components-web' as inhouse;
.select-component {
@include inhouse.select-style(
$options: (
appearance: outlined,
color: neutral,
size: m,
width: auto,
)
);
}
Class-based
HTML
<span class="in-select -appearance-outlined -color-neutral -size-m -width-auto">
<select class="_select">
<option class="_option">Option A</option>
<option class="_option">Option B</option>
<option class="_option">Option C</option>
</select>
<span class="_icon"></span>
</span>
SCSS
@use '@pepabo-inhouse/components-web' as inhouse;
@include inhouse.select-export;