# Rabee UI ドキュメント全文 > このファイルは、AIツールがRabee UIライブラリの全ドキュメントを一度に取得するためのものです。 > 各コンポーネントのプロパティ、使い方、コード例が含まれています。 > サイト: https://rabeeui.com --- # Rabee UI とは Rabee UIは、Svelte × Tailwind CSSで構築された、カスタマイズを前提としたUIコンポーネント集です。必要なUIコンポーネントのコードを自分のプロジェクトにコピーするだけで、素早く、簡単にUIを構築できます。 ![Rabee UI](/images/rabeeui.png) ---- ## Svelte × Tailwind CSSでカスタマイズ Rabee UIは、カスタマイズして使用することを前提とした「UIコンポーネントの種」です。デザインを変更したいときは、Tailwind CSSのクラスを組み合わせるだけで柔軟に調整できます。また、Tailwind CSSの設定ファイルを上書きすることで、プロジェクト全体のデザイントークンを一括で変更することもできます。 ## コンポーネント単位で使える Rabee UIはUIライブラリではなく、コードをコンポーネント単位でコピー＆ペーストして使える「UIコンポーネント集」です。プロジェクトごとに、必要なUIコンポーネントのみを選んで使うことができます。 ## ダークモード・ライトモードに対応 すべてのコンポーネントがダークモード・ライトモードの切り替えに対応しています。プロダクト立ち上げの段階から、コストをかけずにダークモードを提供することができます。 ## 日本語利用のためのデザイン UIコンポーネントのサイズや余白は、日本語で使ったときに美しく見えるよう調整されています。他言語をベースとしたコンポーネントと比較して、導入や細かなカスタマイズをスムーズに進められます。 ## コードと一致したFigmaファイル 実際のコードと同じ仕様を再現できるFigmaファイルを公開しています。FigmaのVariables機能を活用しており、デザイナーとエンジニアが同じデザインシステムを共有することで、デザインから実装までがシームレスにつながります。 Figmaデータは[Figma Community](https://www.figma.com/community/file/1479376628733075423/rabee-ui)で確認できます。 ---- ## 最新情報はこちら 最新情報は以下のLP、Discordで公開中です。 - [LP](https://rabeeui.com/) - [Discord](https://discord.gg/VjtgZ4dkQa) --- # セットアップの手順 Rabee UIの利用にあたって、Lucide Icons、Class Variance Authority、Tailwind CSSのインストールを行います。セットアップは以下の手順で進めることができます。 ## 1. Lucide Svelteのセットアップ Rabee UIで使用する[Lucide Icons](https://lucide.dev/guide/packages/lucide-svelte)のセットアップを行います。 ``` yarn add @lucide/svelte@next ``` ## 2. Class Variance Authorityのセットアップ Rabee UIで使用する[CVA](https://cva.style/docs/getting-started/installation)のセットアップを行います。 ``` yarn add class-variance-authority ``` ## 3. Tailwind CSSのセットアップ Rabee UIはTailwind CSS を基盤として構築されているため、Tailwind CSSのインストールが必要です。 インストール方法は[Tailwind CSSの公式ガイド](https://tailwindcss.com/docs/installation/framework-guides/sveltekit)を参照してください。 ## 4. CSSファイルのセットアップ Rabee UI では以下のCSSを利用しています。カラー定義を独立して管理できるよう、`rabeeui.css` として別ファイルに配置することをおすすめします（`app.css` に直接書いても動作します）。 ```less:rabeeui.css @theme { /* surface */ --color-surface: #FFF; --color-subtle: #FAFAFA; --color-inverse: #18181B; --color-muted: #E4E4E7; --color-accent: #F4F4F5; --color-subarea: #FAFAFA; --color-subarea-accent: #F4F4F5; /* foreground */ --color-foreground: #18181B; --color-accent-foreground: #18181B; --color-muted-foreground: #71717A; --color-subtle-foreground: #A1A1AA; --color-inverse-foreground: #FAFAFA; --color-bright-foreground: #FAFAFA; --color-subarea-foreground: #3F3F46; --color-subarea-accent-foreground: #18181B; --color-link: #2563EB; --color-link-visited: #7E22CE; /* border */ --color-border: #E4E4E7; --color-input: #E4E4E7; --color-ring: #2563EB; /* function */ --color-destructive: #DC2626; --color-destructive-foreground: #FEF2F2; --color-warning: #FBBF24; --color-warning-foreground: #451A03; --color-success: #16A34A; --color-success-foreground: #F0FDF4; --color-primary: #2563EB; --color-primary-foreground: #EFF6FF; /* overlay */ --color-overlay-bright: #FFFFFF; --color-overlay-dark: #09090B; /* line-height */ --text-xs--line-height: 1.5; --text-sm--line-height: 1.5; --text-base--line-height: 1.5; --text-lg--line-height: 1.5; --text-xl--line-height: 1.5; --text-2xl--line-height: 1.5; --text-3xl--line-height: 1.5; --text-4xl--line-height: 1.5; --text-5xl--line-height: 1.5; --text-6xl--line-height: 1.5; --text-7xl--line-height: 1.5; --text-8xl--line-height: 1.5; --text-9xl--line-height: 1.5; } @layer theme { html.dark { /* surface */ --color-surface: #09090B; --color-subtle: #18181B; --color-inverse: #FAFAFA; --color-muted: #27272A; --color-accent: #27272A; --color-subarea: #18181B; --color-subarea-accent: #27272A; /* foreground */ --color-foreground: #FAFAFA; --color-accent-foreground: #FAFAFA; --color-muted-foreground: #A1A1AA; --color-subtle-foreground: #71717A; --color-inverse-foreground: #18181B; --color-bright-foreground: #FAFAFA; --color-subarea-foreground: #F4F4F5; --color-subarea-accent-foreground: #FAFAFA; --color-link: #60A5FA; --color-link-visited: #C084FC; /* border */ --color-border: #3F3F46; --color-input: #3F3F46; --color-ring: #1D4ED8; /* function */ --color-destructive: #B91C1C; --color-destructive-foreground: #FEF2F2; --color-warning: #F59E0B; --color-warning-foreground: #451A03; --color-success: #15803D; --color-success-foreground: #F0FDF4; --color-primary: #1D4ED8; --color-primary-foreground: #EFF6FF; /* overlay */ --color-overlay-bright: #FFFFFF; --color-overlay-dark: #09090B; } } ``` `app.css` で Tailwind と `rabeeui.css` を読み込みます。 ```less:app.css @import 'tailwindcss'; @import './rabeeui.css'; ``` `rabeeui.css` を分けない場合は、`@import './rabeeui.css';` の代わりに `rabeeui.css` の内容をコピーして貼り付けてください。 > 2026年4月28日より前のバージョン（旧カラー命名 `base-container-*` / `base-stroke-*` などを使用）から移行する場合は、[カラークラス名の移行ガイド](/docs/migration/colors)を参照してください。 ## 5. さっそく使ってみましょう 気になるコンポーネントを探して、さっそく使いはじめられます。

Button

Button

Input

Input

Switch

Switch --- # Figma Rabee UIは、Figma Communityでデザインデータを公開しています。デザイナーとエンジニアが同じデザインシステムを共有することで、デザインから実装までがシームレスにつながります。 ![Figma](/images/figma.png) ---- ## 実装と一致したUIコンポーネントを用意 見た目と機能がコードとほとんど一致したデザインをFigmaデータとして提供しています。たとえば、デザインにボタンコンポーネントを使った場合は、実装者に「Rabee UIのボタンを使っています」と伝えるだけでコミュニケーションが完了します。 ## スタイルはVariables機能で管理 カラー、サイズ、テキストなどのスタイル設定は、FigmaのVariables機能を活用して実際のコードに近い仕様を再現しています。スタイルを変更したいときも、Variablesの編集によってスピーディーに対応できます。 ## エラー、ホバー等のステータスも網羅 それぞれのコンポーネントに対して、HoveredやDisabledなどの必要な状態を完備。デザイン段階でのステータス考慮漏れも削減することができます。 ---- ## Figmaデータのダウンロードはこちら デザインデータは無料で公開中です。現在開発中のコンポーネントのデザインも先行公開しています。 [Figma Community](https://www.figma.com/community/file/1479376628733075423/rabee-ui) --- # 変更履歴 Rabee UI のリリースごとの変更点をまとめています。アップデート時の参考にしてください。 ---- ## 2026年5月27日 コンポーネント1種とサンプル1種を新たに追加しました。詳細は[プレスリリース](https://prtimes.jp/main/html/rd/p/000000028.000097622.html)をご覧ください。 ### 追加 - [Link](/docs/components/link) ... 別タブで開くリンクに ExternalLink アイコンを自動表示するテキストリンクコンポーネント - [Pricing](/docs/samples/pricing) ... 月払い／年払いを切り替えられる料金プランのサンプル ### 変更 - [Button](/docs/components/button#heading-sub-9) ... Loading 状態のサンプルを連打防止パターンに刷新 ---- ## 2026年4月28日 サンプル4種を新たに追加し、カラー定義を刷新しました。詳細は[プレスリリース](https://prtimes.jp/main/html/rd/p/000000028.000097622.html)をご覧ください。 ### 追加 - [Error Layout](/docs/samples/errorlayout) ... エラーページ用のレイアウトサンプル - [Admin Layout](/docs/samples/adminlayout) ... 管理画面向けのレイアウトサンプル - [Authentication](/docs/samples/authentication) ... サインイン / サインアップ / 登録のサンプル - [Header](/docs/samples/header) ... ロゴつきヘッダー / スニペットなどのサンプル ### 変更 - [Lucide Icons](/docs/setup) ... v1 対応に伴い、インストールコマンドと import のパスが変更 - [Sidebar](/docs/samples/sidebar) ... ヘッダーメニュー項目に `onclick` を追加 ### 修正 - [Toast](/docs/components/toast) ... AutoClose の scale 計算を修正し、最新トーストが等倍で表示されるようになりました ### 移行が必要な変更 - [カラー定義](/docs/colors) ... カラークラスの命名を刷新。詳細は[移行ガイド](/docs/migration/colors)をご覧ください - [Chip](/docs/components/chip) ... Badge から Chip にリネーム。バリアント・トーンを追加 - [Modal](/docs/components/modal) ... Dialog から Modal にリネーム。フォーカストラップと `aria-modal` を追加 --- # カラー定義について Rabee UIで使用している色と用途の一覧です。実際に使用するCSSは[セットアップの手順](/docs/setup)で確認できます。 ## 概要 Rabee UIのカラーは、適用対象によって分類されるカラーと、機能によって分類されるカラーがあります。 適用対象によって分類するカラーは、Surface、Foreground、Border、Overlayの4種類があります。 機能によって分類するカラーは、Primary、Destructive、Success、Warningの4種類があります。 ## Surface ページ、カード、ボタンなどの背景に使用するカラーです。 | 名前 | 値 (Light) | 値 (Dark) | 用途 | |---|---|---|---| | surface | `#FFF` | `#09090B` | 基準となる背景色です。 | | inverse | `#18181B` | `#FAFAFA` | ライトモードでは暗く、ダークモードでは明るい背景色です。Tooltipなど周囲とのコントラストを強めたい要素に使います。 | | muted | `#E4E4E7` | `#27272A` | 主張を抑えた背景色です。Disabled状態などに使います。 | | subtle | `#FAFAFA` | `#18181B` | surfaceより控えめな背景色です。Tableのヘッダーなどに使います。 | | accent | `#F4F4F5` | `#27272A` | hoverなどのやや目立たせたい状態に使う背景色です。 | | subarea | `#FAFAFA` | `#18181B` | Sidebarなど、メインではない補助的なエリアの背景色です。 | | subarea-accent | `#F4F4F5` | `#27272A` | subarea内で、hoverなどのやや目立たせたい状態に使う背景色です。 | ## Foreground テキスト・アイコンなどの前景に使用するカラーです。 | 名前 | 値 (Light) | 値 (Dark) | 用途 | |---|---|---|---| | foreground | `#18181B` | `#FAFAFA` | 基準となるテキスト・アイコンの色です。 | | inverse-foreground | `#FAFAFA` | `#18181B` | inverseの背景色の上に乗せるテキスト・アイコンの色です。 | | bright-foreground | `#FAFAFA` | `#FAFAFA` | ライト・ダークを問わず常に明るく表示するテキスト・アイコンの色です。primaryなどの色が濃い背景の上に使います。 | | muted-foreground | `#71717A` | `#A1A1AA` | プレースホルダーなど、主張を抑えたテキスト・アイコンの色です。 | | subtle-foreground | `#A1A1AA` | `#71717A` | 補足説明など、最も主張の弱いテキスト・アイコンの色です。 | | accent-foreground | `#18181B` | `#FAFAFA` | hoverなどのやや目立たせたい状態に使うテキスト・アイコンの色です。 | | subarea-foreground | `#3F3F46` | `#F4F4F5` | subareaで使うテキスト・アイコンの色です。 | | subarea-accent-foreground | `#18181B` | `#FAFAFA` | subareaで、hoverなどのやや目立たせたい状態に使うテキスト・アイコンの色です。 | | link | `#2563EB` | `#60A5FA` | リンクテキストの色です。 | | link-visited | `#7E22CE` | `#C084FC` | 訪問済みのリンクテキストの色です。 | ## Border ボーダーに使用するカラーです。 | 名前 | 値 (Light) | 値 (Dark) | 用途 | |---|---|---|---| | border | `#E4E4E7` | `#3F3F46` | 基準となるボーダーの色です。 | | input | `#E4E4E7` | `#3F3F46` | InputやTextareaなど、フォーム要素に使うボーダー色です。 | | ring | `#2563EB` | `#1D4ED8` | フォーカス時に表示するリングの色です。 | ## Overlay モーダルなど、要素の前面に重ねて使うカラーです。 | 名前 | 値 (Light) | 値 (Dark) | 用途 | |---|---|---|---| | overlay-bright | `#FFF` | `#FFF` | ライト・ダークを問わず常に明るいオーバーレイの色です。 | | overlay-dark | `#09090B` | `#09090B` | ライト・ダークを問わず常に暗いオーバーレイの色です。 | ## Function 機能を示すカラーです。背景、前景、ボーダーのいずれにも使うことができます。 | 名前 | 値 (Light) | 値 (Dark) | 用途 | |---|---|---|---| | primary | `#2563EB` | `#1D4ED8` | 主要なアクションを示す色です。 | | primary-foreground | `#EFF6FF` | `#EFF6FF` | primary背景の上に乗せるテキスト・アイコンの色です。 | | destructive | `#DC2626` | `#B91C1C` | 削除など、破壊的なアクションを示す色です。 | | destructive-foreground | `#FEF2F2` | `#FEF2F2` | destructive背景の上に乗せるテキスト・アイコンの色です。 | | success | `#16A34A` | `#15803D` | 成功・完了を示す色です。 | | success-foreground | `#F0FDF4` | `#F0FDF4` | success背景の上に乗せるテキスト・アイコンの色です。 | | warning | `#FBBF24` | `#F59E0B` | 警告・注意を示す色です。 | | warning-foreground | `#451A03` | `#451A03` | warning背景の上に乗せるテキスト・アイコンの色です。 | --- # Accordion Accordionは、クリックするとコンテンツが展開・折りたためる見出しのリストです。 必要な情報をコンパクトに整理し、ユーザーが見たい内容だけを表示できます。 ```svelte ここにコンテンツ内容が入ります ここにコンテンツ内容が入ります ここにコンテンツ内容が入ります ``` ## プロパティ Accordionは、以下のプロパティをサポートしています。 | 名前 | 型 | デフォルト値 | 説明 | | --- | --- | --- | --- | | **`title`** | `string` || 見出しの文言を設定できます。 | ## インストールの手順 以下のコンポーネントのコードを、使いたいプロジェクトにコピー＆ペーストします。 パスは実際のプロジェクトの構成にあわせて更新します。 ```svelte:atoms/Accordion.svelte
{title} {@render children()}
``` ## 使い方 ```svelte ここにコンテンツ内容が入ります ここにコンテンツ内容が入ります ここにコンテンツ内容が入ります ``` --- ## サンプル ### Default 特に操作が行われていない、デフォルトの状態です。 ```svelte ここにコンテンツ内容が入ります ここにコンテンツ内容が入ります ここにコンテンツ内容が入ります ``` --- # Breadcrumb Breadcrumbは、ユーザーが現在の位置を把握しやすくするための階層型ナビゲーションコンポーネントです。 ```svelte ``` ## プロパティ Breadcrumbは、以下のプロパティをサポートしています。 | 名前 | 型 | デフォルト値 | 説明 | | --- | --- | --- | --- | | **`items`** | `BreadcrumbItem[]` || 階層の配列を渡します。 | ### BreadcrumbItem BreadcrumbItemは、各階層の情報を表すオブジェクトです。 | 名前 | 型 | デフォルト値 | 説明 | | --- | --- | --- | --- | | **`label`** | `string` || 階層のラベルです。| | **`link`** | `string` || 階層のリンク先です。 | ## インストールの手順 以下のコンポーネントのコードを、使いたいプロジェクトにコピー＆ペーストします。 パスは実際のプロジェクトの構成にあわせて更新します。 ```svelte:modules/Breadcrumb.svelte ``` ## 使い方 ```svelte ``` --- ## サンプル ### Default 特に操作が行われていない、デフォルトの状態です。 ```svelte ``` --- # Button Buttonは、押下することで特定の操作を実行するコンポーネントです。 ボタン内部の構造はテキストやアイコン等に柔軟に変更できます。 ```svelte ``` ## プロパティ Buttonは、以下のプロパティをサポートしています。 | 名前 | 型 | デフォルト値 | 説明 | | --- | --- | --- | --- | | **`variant`** | `string` | `primary` | ボタンのスタイルを指定します。`primary`, `secondary`, `success`, `danger` のいずれかを選択できます。 | | **`size`** | `string` | `medium` | ボタンのサイズを指定します。`small`, `medium`, `large` のいずれかを選択できます。 | | **`tone`** | `string` | `solid` | ボタンのトーンを指定します。`solid`, `ghost` のいずれかを選択できます。 | | **`isSquare`** | `boolean` | `false` | ボタンを正方形にします。 | | **`disabled`** | `boolean` | `false` | ボタンを無効化します。無効化されたボタンはクリックできません。 | ## インストールの手順 以下のコンポーネントのコードを、使いたいプロジェクトにコピー＆ペーストします。 パスは実際のプロジェクトの構成にあわせて更新します。 ```svelte:atoms/Button.svelte ``` ## 使い方 ```svelte ``` --- ## サンプル ### Default 最も優先度の高いアクションに使うコンポーネントです。 基本的には1画面に1つのみ使用します。 ```svelte ``` ### Disabled 利用不可の状態です。 ```svelte ``` ### Variants ボタンのタイプを変更することもできます。 ```svelte ``` ### Sizes ボタンのサイズを変更することもできます。 ```svelte ``` ### Tones ボタンのトーンを変更することもできます。 ```svelte ``` ### Square ボタンを正方形にすることもできます。 ```svelte ``` ### Click 一般的な` ``` ### With Icon アイコンを追加することもできます。 ```svelte ``` ### Loading `disabled` フラグを活用することで、ローディング状態のボタンを表現することができます。 ```svelte
``` ### Only Style `` タグ等に Buttonのクラスやスタイルのみを適用することで、同じ見た目を再現できます。 ```svelte a タグ ``` ### Toggle Button フラグで variant 属性や中身のコンテンツを切り替えることで Toggle Button を実現することができます。 ```svelte ``` --- # Calendar Calendarは、日付の表示や選択ができるコンポーネントです。 ```svelte ``` ## プロパティ Calendarは、以下のプロパティをサポートしています。 | 名前 | 型 | デフォルト値 | 説明 | | --- | --- | --- | --- | | **`value`** | `string` | `''` | 日付(YYYY-MM-DD)を渡すことができます。 | | **`min`** | `string` | `0001-01-01` | 選択できる最小値を設定できます。 | | **`max`** | `string` | `9999-12-31` | 選択できる最大値を設定できます。 | | **`start`** | `string` | `''` | 範囲選択の開始日を指定できます。 | | **`end`** | `string` | `''` | 範囲選択の終了日を指定できます。 | | **`months`** | `number` | `1` | 表示する月数を指定できます。 | | **`enableRange`** | `boolean` | `false` | 範囲選択が可能になります。 | | **`onChange`** | `(value: string) => void` || 日付が選択されたときのコールバック関数です。 | | **`onRangeChange`** | `(value: CalendarRange) => void` || 日付が範囲選択されたときのコールバック関数です。 | **`autoFocusDate`** | `boolean` | `false` | 日付に自動でフォーカスします。 ### CalendarDate CalendarDateは、1日分の情報を表すオブジェクトです。 | 名前 | 型 | デフォルト値 | 説明 | | --- | --- | --- | --- | | **`value`** | `number` || 日付（数値）です。| | **`outOfMonth`** | `boolean` || 表示範囲外の月かどうか。 | | **`disabled`** | `boolean` || 選択できるかどうか。 | | **`formatDate`** | `string` || フォーマット済みの日付文字列です。 | ### CalendarRange CalendarRangeは、範囲選択された日付の情報を表すオブジェクトです。 | 名前 | 型 | デフォルト値 | 説明 | | --- | --- | --- | --- | | **`start`** | `string` | `''` | 開始日です。| | **`end`** | `string` | `''` | 終了日です。 | ## インストールの手順 以下のコンポーネントのコードを、使いたいプロジェクトにコピー＆ペーストします。 パスは実際のプロジェクトの構成にあわせて更新します。 ```svelte:modules/Calendar.svelte {#if type === 'date'} {#each calendars as calendar} {@const year = calendar.year} {@const month = calendar.month} {@const year_disabled = yearDisabled(year)} {@const month_disabled = monthDisabled(month)} {/each} {:else if type === 'month'} {@const year = displayDate.getFullYear()} {@const disabled = yearDisabled(year)} {:else}

{yearLabel}

{/if} {#each Array(months) as _} {#each WEEK_DAYS as week} {week} {/each} {/each} {#if type === 'date'} {#each calendars as calendar} {#each calendar.weeks as week} {#each week as day} {day.value} {/each} {/each} {/each} {:else} {#if type === 'month'} {#each Array(DISPLAY_MONTH_NUM) as _, m} {@const isDisabled = monthDisabled(m)} changeDisplayMonth(m)} onkeydown={(e) => handleKeyDownMonth(e, m)}>

{m + 1}月

{/each} {:else if type === 'year'} {#each yearRange as y} {@const year_disabled = yearDisabled(y)} changeDisplayYear(y)} onkeydown={(e) => handleKeyDownYear(e, y)}>

{y}

{/each} {/if} {/if} ``` ## 使い方 ```svelte ``` --- ## サンプル ### Default 日付を表示・選択できます。 ```svelte ``` ### Min・Max 選択可能な範囲を指定できます。 ```svelte ``` ### Date 指定の日付を渡すことができます。 ```svelte ``` ### Range 日付を範囲選択することができます。 ```svelte ``` ### Month 表示する月数を指定することができます。 ```svelte ``` ### OnChange コールバック関数で値を受け取ることができます。 ```svelte ``` ### With Input InputDateとも組み合わせることができます。 ```svelte {#snippet endContent()} {/snippet} {#if isCalendarOpen} {/if} ``` --- # Card Cardは、コンテンツを整理し、視覚的にグループ化するためのコンポーネントです。 ```svelte

ここに要素が入ります。

 ``` ## インストールの手順 以下のコンポーネントのコードを、使いたいプロジェクトにコピー＆ペーストします。 パスは実際のプロジェクトの構成にあわせて更新します。 ```svelte:atoms/Card.svelte {@render children?.()} ``` ## 使い方 ```svelte

タイトル

ここに補足文が入ります。

 ``` --- ## サンプル ### Image 画像を使ったサンプルです。 ```svelte

タイトル

ここに補足文が入ります。

 ``` ### Form 入力要素を使ったサンプルです。 ```svelte
e.preventDefault()}> タイトル

ここに補足文が入ります。

{#if indeterminate} {:else} {/if} ``` ## 使い方 ```svelte ``` ## サンプル ### Default 特に操作が行われていない、デフォルトの状態です。 ```svelte ``` ### Error 入力内容に問題があり、エラーが表示されている状態です。 ```svelte ``` ### Disabled 利用不可の状態です。 ```svelte ``` ### Indeterminate 一部のみ選択された状態や、不確定な状態を示します。 ツリービューで親が一部の子だけ選ばれている場合などに使用されます。 ```svelte ``` ### Group `bind:group`を使うことで、複数のチェックボックスをグループ化し、同じ値を共有できます。 これにより、複数のチェックボックスの状態を一括で管理できます。 ```svelte ``` --- # Chip Chipは、主に情報を表示するためのコンポーネントです。 必要に応じて、リンクやボタンとして遷移可能なパーツとしても活用できます。 ```svelte チップ ``` ## プロパティ Chipは、以下のプロパティをサポートしています。 | 名前 | 型 | デフォルト値 | 説明 | | --- | --- | --- | --- | | **`variant`** | `string` | - | チップのバリアントを指定します。`primary`, `secondary`, `success`, `warning`, `danger` のいずれかを選択できます。 | | **`tone`** | `string` | `filled` | チップのトーンを指定します。`filled`, `outlined`, `soft` のいずれかを選択できます。 | | **`link`** | `boolean` | `false` | リンクやボタンとして使用する場合に指定します。 | ## インストールの手順 以下のコンポーネントのコードを、使いたいプロジェクトにコピー＆ペーストします。 パスは実際のプロジェクトの構成にあわせて更新します。 ```svelte:atoms/Chip.svelte {@render children?.()} ``` ## 使い方 ```svelte チップ ``` --- ## サンプル ### Default Defaultでの表示です。 ```svelte チップ ``` ### Variants チップのタイプを変更することもできます。 ```svelte primary secondary success warning danger ``` ### Tones チップのトーンを変更することもできます。 ```svelte filled outlined soft ``` ### Link リンクとして Chip を利用したい場合は、`` タグ等にChipのクラスやスタイルを適用することで、同じ見た目を再現できます。 ```svelte {#each TONES as tone} {#each VARIANTS as variant} チップ {/each} {/each} ``` --- # Combobox Comboboxは、入力フィールドと候補リストを組み合わせて、ユーザーがテキスト入力または候補の選択によって値を指定できるコンポーネントです。 検索やフィルタリングによって、効率的に目的の項目を探すことができます。 ```svelte ``` ## プロパティ | 名前 | 型 | デフォルト値 | 説明 | | --- | --- | --- | --- | | **`options`** | `ComboboxOption[]` | | 選択肢の配列です。 | | **`placeholder`** | `string` | `プレースホルダー` | 入力欄のプレースホルダーです。 | | **`disabled`** | `boolean` | `false` | コンボボックスを無効化します。無効化されたコンボボックスは選択できません。 | | **`isError`** | `boolean` | `false` | エラー状態を視覚的に示します。バリデーション用など。 | | **`multi`** | `boolean` | `false` | `true` にすると複数選択が可能になります。 | | **`isOpen`** | `boolean` | `false` | コンボボックスの候補リストの開閉状態を制御します。 | | **`showSelect`** | `boolean` | `false` | 選択した値を表示します。(multiと併用で複数選択表示可能) | ### ComboboxOptionItem | 名前 | 型 | デフォルト値 | 説明 | | --- | --- | --- | --- | | **`label`** | `string` | | 選択肢のラベルです。 | | **`value`** | `string \| number` | | 選択肢の値です。 | ## インストールの手順 以下のコンポーネントのコードを、使いたいプロジェクトにコピー＆ペーストします。 パスは実際のプロジェクトの構成にあわせて更新します。 ```svelte:atoms/Combobox.svelte {#if multi && showSelect && selectedOptions.length} {#each selectedOptions as selected} {selected.label} {/each} {/if} 0 ? selectedLabel : query} {placeholder} {disabled} bind:this={inputElement} oninput={handleInputChange} onfocus={openListbox} /> {#if !multi && showSelect && value.length > 0} {:else} {/if} {#if isOpen} {#if showScrollButtons} {#if !isScrolledToTop} startScroll('up')} onmouseleave={stopScroll}>