ドロップダウン
stimeo--dropdown
ボタンのクリックで開閉する開示(disclosure)。ARIA 状態・キーボード・外側クリックを制御します。
stimeo--dropdown コントローラは、トリガーボタンとメニュー領域の開閉を管理する開示(disclosure)パターンです。開閉に合わせて aria-expanded を切り替え、メニューの hidden 属性をトグルします。Esc キーを押すとメニューを閉じ、フォーカスをトリガーへ戻します。領域外をクリックした場合もメニューを閉じます。見た目(CSS)はこの Playground 側が持ち、ライブラリは挙動のみを提供します。
実行中
キーボード操作
| キー | 動作 |
|---|---|
| Enter / Space | トリガーにフォーカスがある状態でメニューを開閉する(ネイティブ button)。 |
| Esc | メニューを閉じ、フォーカスをトリガーへ戻す。 |
<%# Markup for the dropdown demo.
The single source used for both the live render and the copy-paste code.
Connect to stimeo--dropdown via data-controller / data-*-target / data-action.
The behavior is the library's; the look (classes) is the Playground's CSS. %>
<div class="dropdown" data-controller="stimeo--dropdown">
<button
type="button"
class="dropdown__trigger"
aria-expanded="false"
data-stimeo--dropdown-target="trigger"
data-action="click->stimeo--dropdown#toggle">
<%= t("components.dropdown.demo.trigger") %>
</button>
<%# The toggled menu. Starts hidden (closed).
Each link uses click->stimeo--dropdown#close to close the menu on selection.
(The links are inside the controller element, so an outside click won't close
it — wire it explicitly.) %>
<ul class="dropdown__menu" data-stimeo--dropdown-target="menu" hidden>
<li><a href="#profile" data-action="click->stimeo--dropdown#close"><%= t(
"components.dropdown.demo.profile"
) %></a></li>
<li><a href="#settings" data-action="click->stimeo--dropdown#close"><%= t(
"components.dropdown.demo.settings"
) %></a></li>
<li><a href="#sign-out" data-action="click->stimeo--dropdown#close"><%= t(
"components.dropdown.demo.sign_out"
) %></a></li>
</ul>
</div>
/*
* Presentation-only styles for the dropdown demo.
* Stimeo UI itself ships behavior only (no CSS), so styling that makes the demo
* readable lives here. When adding a new component, create its
* demos/<name>/demo.css the same way.
*/
.dropdown {
position: relative;
display: inline-block;
}
.dropdown__trigger {
padding: 0.5rem 1rem;
font-size: 1rem;
cursor: pointer;
border: 1px solid var(--border-interactive);
border-radius: 0.375rem;
background: var(--surface-card);
}
/* Accent the trigger's border while open (detected via aria-expanded). */
.dropdown__trigger[aria-expanded="true"] {
border-color: var(--accent);
}
.dropdown__menu {
position: absolute;
left: 0;
margin: 0.25rem 0 0;
padding: 0.25rem;
list-style: none;
min-width: 12rem;
background: var(--surface-card);
border: 1px solid var(--border-strong);
border-radius: 0.375rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.dropdown__menu li {
margin: 0;
}
.dropdown__menu a {
display: block;
padding: 0.5rem 0.75rem;
color: var(--color-text);
text-decoration: none;
border-radius: 0.25rem;
}
.dropdown__menu a:hover {
background: var(--surface-subtle);
}
このデモに固有の消費側 JS はありません(挙動はコントローラが担います)。
これらのスタイルは共通のデザイントークン(ライト/ダーク両対応)を使います。 共通スタイルも一緒にコピーし、ルート要素の data-theme を切り替えればダークになります。
このコンポーネントを動かすために HTML へ記述する data-* 属性です。ルート要素に下の data-controller を付け、その内側に各 target / value / action を配置します。
ルート要素に付与
data-controller="stimeo--dropdown"
ターゲット
| 名前 | 説明 | 属性 |
|---|---|---|
trigger
必須
|
メニューを開閉するボタン。aria-expanded で開閉状態を反映する。 |
data-stimeo--dropdown-target="trigger" |
menu
必須
|
開示される領域。hidden 属性で表示状態を反映する。 | data-stimeo--dropdown-target="menu" |
アクション
| 名前 | 説明 | アクション |
|---|---|---|
close
|
メニューを隠し、トリガーの aria-expanded を false にする。 |
stimeo--dropdown#close |
open
|
メニューを表示し、トリガーの aria-expanded を true にする。 |
stimeo--dropdown#open |
toggle
|
メニューの開閉を切り替える。 | stimeo--dropdown#toggle |
状態フック
ライブラリが操作するのはこれらの ARIA / data 属性、カスタムプロパティだけです。見た目は利用側 CSS がこれらに反応して作ります([aria-selected] / [aria-expanded] / var(--stimeo--…) などのセレクタでフックします)。
| フック | 対象 | 意味 |
|---|---|---|
aria-expanded |
トリガー | メニューが開いている間は "true"、閉じると "false"。 |
hidden |
メニュー | 開くと外れ、閉じると付与される。 |