設定モーダル

一般、プロファイル、ツール、およびストレージビューを備えた管理されたアプリケーションレベルの設定ダイアログ。ドキュメントボディにポータルし、内部ページナビゲーションを所有し、トリガーと開いている状態をどのページ、サイドバー、またはアカウントメニューにインストールするかを離れます。

インストール

設定 Modal は、複数のベースコンポーネントの依存関係を持つマルチファイルアプリケーションブロックです。CLI を通じてインストールすると、完全な設定フォルダ、共有コンポーネント、ホック、スタイル、npm パッケージが一緒に解決されます。

ダークモード対応：このコンポーネントはBoardUIのセマンティックトークンに合わせて自動で切り替わります。テーマスイッチの設定.

npx boardui@latest add settings-modal

共有UIパッケージや独自のインポートエイリアスを使う場合は、インストールパスの設定をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。

モーダルをトリガーする

ブロックは意図的に独自のトリガーをレンダーしません。 isOpen サイドバー、ユーザーメニュー、設定ボタンなど、アクションを所有しているホストで、それを閉じます。 onClose. バックドロッププレス、エスケープ、クローズボタンはすべて同じハンドラを呼び出します。

const [settingsOpen, setSettingsOpen] = useState(false);
<SidebarItem onPress={() => setSettingsOpen(true)}>  Settings</SidebarItem>
<SettingsModal  isOpen={settingsOpen}  onClose={() => setSettingsOpen(false)}  defaultPage="profile"/>

初期ページ

利用条件 defaultPage コンテキストアクションは、全般、プロファイル、ツール、ストレージに直接開く必要があります。選択したページは、ダイアログが開いているたびにその値にリセットされます。

<SettingsModal isOpen={isOpen} onClose={close} defaultPage="storage"/>

計画のアートワーク

一般ビューには、デフォルトでコンポーネントネイティブ抽象的な治療が含まれています。独自のパブリックイメージをパスします。 planArtSrc インストールされたブロックをBoardUIアセットに結合することなく、アニメーション化された現在の計画アートワークをフィードします。

<SettingsModal  isOpen={isOpen}  onClose={close}  planArtSrc="/brand/your-plan-art.png"/>;
// Omit planArtSrc to use the built-in token-based abstract artwork.