＊このドキュメントは編集中です

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;