fluxui-docs-pro

fluxui-docs (Pro)

Flux は、Tailwind CSS で構築された公式の Livewire コンポーネントライブラリです。Livewire アプリケーション向けに、柔軟で機能的、かつアクセシブルな UI コンポーネントを提供します。このスキルには、すべてのコンポーネント（無料版と Pro 版）が含まれています。

このスキルの使い方

1. 以下のリストから、該当するコンポーネントまたはドキュメントを探します
2. リファレンスファイルを読み、ドキュメント、props、コード例を確認します
3. コード例を参考にして、ユーザーによるコンポーネントの実装を支援します

コンポーネントのリファレンスのフロントマター

各コンポーネントのリファレンスファイルには、次の内容を含む YAML フロントマターが記載されている場合があります。

• components_used：例で使用されている他の Flux コンポーネントのリスト

components_used を使って、関連するコンポーネントや実際の使用パターンを見つけてください。

コンポーネント

• ボタン: アプリケーションで使える、強力で組み合わせ可能なボタンコンポーネントです。
• アコーディオン: コンテンツのセクションを折りたたんだり展開したりできます。FAQ やコンテンツ量の多い領域に最適です。
• オートコンプリート: 入力フィールドにオートコンプリート候補を追加できます。
• アバター: 画像またはイニシャルをアバターとして表示します。
• バッジ: ステータス、カテゴリ、件数などの情報を強調表示します。
• ブランド: 会社やアプリケーションのロゴと名前を、インターフェース全体で統一感のあるすっきりとした方法で表示します...
• パンくずリスト: ユーザーがアプリケーション内を移動し、現在の位置を把握できるようにします。
• カレンダー: 日付選択に使える柔軟なカレンダーコンポーネントです。単一の日付、複数の日付、日付...
• コールアウト: 重要な情報を強調したり、重要な操作へユーザーを誘導したりします。
• カード: フォーム、アラート、データリストなど、関連するコンテンツをまとめるコンテナーです。
• カルーセル: スナップ機能と端を考慮したコントロールを備えた、横スクロール式のスライド列です。
• チャート: Flux のチャートコンポーネントは、Livewir...
• チェックボックス: 選択肢の中から1つまたは複数を選択できます。
• カラーピッカー: スウォッチパレットから色を選択したり、彩度／明度キャンバスをドラッグしたり、16進数値を貼り付けたりできます...
• コマンドパレット: 検索可能なコマンド一覧です。
• コンテキストメニュー: 指定した領域を右クリックすると開くドロップダウンメニューです。
• メッセージ入力: アクションボタンとリッチテキストに対応した、設定可能なメッセージ入力欄です。チャットインターフェースに最適...
• 日付ピッカー: カレンダーオーバーレイから日付や日付範囲を選択できます。データの絞り込みや...
• ドロップダウン: シンプルなナビゲーションメニューから複雑なメニューまで対応できる、組み合わせ可能なドロップダウンコンポーネントです...
• リッチテキストエディター: アプリケーション向けの基本的なリッチテキストエディターです。ProseMirror...
• フィールド: 入力要素をラベル、説明、バリデーションとともにまとめます。
• ファイルアップロード: ドラッグ＆ドロップ、ファイルプレビュー、Livewire...
• 旗: 2文字の Unicode 地域コードを使って旗を表示します。
• 見出し: アプリケーションで一貫性のある見出しコンポーネントです。
• アイコン: Flux はアイコンコレクションに優れた Heroicons プロジェクトを採用しています。Heroicons は美しい...
• 入力: さまざまな形式のテキスト入力でユーザーデータを取得します。
• カンバン: ワークフローの各段階を表すカードを列に並べたコレクションです。
• モーダル: メインページの上に重ねたレイヤーにコンテンツを表示します。確認、アラート、フォームに最適です。
• ナビゲーションバー: ナビゲーションリンクを縦または横に配置します。
• OTP 入力: 個別の入力フィールドを並べてワンタイムパスワードを取得します。
• ページネーション: 項目のリスト内を移動するためのボタン列を表示します。
• 電話番号: 国の選択、地域ごとの書式設定、E.164 正規化に対応し、国際電話番号を取得します...
• ピルボックス: 選択した項目を削除可能な「ピル」として表示する複数選択コンポーネントです。入力欄を...
• ポップオーバー: クリックまたはホバー時にポップアップで追加コンテンツを表示します。
• プロフィール: アバターと任意の名前をコンパクトでインタラクティブなコンポーネントに表示して、ユーザーのプロフィールを表示します。
• プログレス: 完了状況や読み込み状況を示すシンプルなプログレスバーです。
• ラジオボタン: 相互排他的な選択肢の中から1つを選択します。単一選択式の質問に最適...
• セレクト: ドロップダウンリストから1つの選択肢を選びます。
• 区切り線: コンテンツのセクションや項目のグループを視覚的に区切ります。
• スケルトン: データの読み込み中にプレースホルダーコンテンツを表示します。
• スライダー: 横方向のスライダーコントロールを使って値を選択します。
• スイッチ: 設定のオン／オフを切り替えます。機能の有効化や無効化など、二択のオプションに適しています。
• テーブル: 構造化データを、検索可能なコンパクトな形式で表示します。
• タブ: 1つのコンテナー内でコンテンツを複数のパネルに整理します。セクション間を簡単に切り替えられ...
• テキスト: テキストやリンクなど、統一感のあるタイポグラフィコンポーネントです。
• テキストエリア: ユーザーから複数行のテキスト入力を取得します。コメント、説明、フィードバックに最適です。
• 時刻ピッカー: イベントのスケジュール設定や予約に使う特定の時刻を選択できます。時...
• タイムライン: 一連のイベントや手順を、縦または横のタイムラインに表示します。
• トースト: 操作やイベントについてユーザーにフィードバックを伝える、一時的で閉じることのできるメッセージです。
• トグル: コンパクトなボタン型のコントロールを使って設定のオン／オフを切り替えます。
• ツールチップ: ユーザーが要素にホバーするかフォーカスしたときに、追加情報を表示します。

Docs

• Installation
• Upgrade guide
• Principles
• Patterns
• Theming
• Dark mode
• Customization
• Help

Layouts

• Header
• Sidebar