The Wheels

Dropdown

trigger / panel slots · placement · Floating UI

Preview

Button を trigger に

アカウント

placement

ファイル
共有
表示

HTML

<tw-dropdown>
  <tw-button slot="trigger">アカウント</tw-button>
  <div slot="panel" class="ks-menu-panel">
    <button type="button">プロフィール</button>
    <button type="button">通知設定</button>
    <button type="button">ログアウト</button>
  </div>
</tw-dropdown>

<tw-dropdown placement="bottom-start">
  <tw-button slot="trigger" variant="stroke">ファイル</tw-button>
  <div slot="panel" class="ks-menu-panel">
    <button type="button">新規作成</button>
    <button type="button">アップロード</button>
    <button type="button">フォルダを開く</button>
  </div>
</tw-dropdown>
import "@b4moss/the-wheels";
import "@b4moss/the-wheels";
// tw-dropdown は import 時に自動登録されます