Modal de configurações

Uma janela de configuração de nível de aplicativo controlada com as vistas Geral, Perfil, Ferramentas e Armazenamento. Ele portais para o corpo do documento, possui a sua navegação de página interna, e deixa o gatilho e o estado aberto para qualquer página, barra lateral ou menu de conta que o instale.

Instalação

Configurações Modal é um bloco de aplicativos multi-file com várias dependências de componentes de base. Instale-o através do CLI para que a pasta completa de configurações, componentes compartilhados, hooks, estilos e pacotes npm sejam resolvidos juntos:

Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.

npx boardui@latest add settings-modal

Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.

Acionando o modal

O bloco deliberadamente não faz o seu próprio gatilho. Manter isOpen no host que possui a ação - como uma barra lateral, menu do usuário, ou botão de configurações - e fechá-la através onClose. Prensas de fundo, Escape, e o botão de fechar todos chamam o mesmo manipulador.

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

Página inicial

Utilização defaultPage quando uma ação contextual deve ser aberta diretamente para Geral, Perfil, Ferramentas ou Armazenamento. A página selecionada repõe para esse valor cada vez que a janela é aberta.

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

Planejar obras de arte

A visão geral inclui um tratamento abstrato nativo de componentes por padrão. Passe sua própria imagem pública através planArtSrc para alimentar a arte animada do plano atual sem ligar o bloco instalado aos ativos BoardUI.

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