# Sistema de design Ionic Framework ## Prévia da interface do sistema de design Ionic Framework Troque a tipografia, altere o tamanho do texto pelo teclado, ative o papel em tom quente e salve o instantâneo das preferências locais. ## Referência de design do sistema de design Ionic Framework Ionic Vue/Core 9.0.6 verificado. As cores principais vêm do core.css instalado. A demonstração seleciona explicitamente o modo iOS. A tipografia de leitura, as cores do papel e o espaçamento ao redor são escolhas originais da aplicação, não padrões do Ionic. ### Papéis semânticos de cor padrão do tema claro | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --ion-color-primary | #0054e9 | Controles primários nativos. | | --ion-color-primary-rgb | 0, 84, 233 | Canais RGB para cálculos baseados em opacidade. | | --ion-color-primary-contrast | #fff | Contraste do texto e dos ícones sobre a cor primária. | | --ion-color-primary-shade | #004acd | Variante escurecida da cor primária. | | --ion-color-primary-tint | #1a65eb | Variante clareada da cor primária. | | --ion-color-secondary | #0163aa | Função secundária. | | --ion-color-tertiary | #6030ff | Papel terciário. | | --ion-color-success | #2dd55b | Função de sucesso. | | --ion-color-warning | #ffc409 | Função de aviso. | | --ion-color-danger | #c5000f | Função de perigo. | ### Geometria nativa do controle de intervalo por modo | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | iOS --bar-height | 4px | Padrão compilado do intervalo no iOS. | | iOS --knob-size | 26px | Tamanho compilado do controle deslizante no iOS. | | MD --bar-height | 2px | Padrão compilado do modo Material Design. | | MD --knob-size | 18px | Tamanho compilado do controle deslizante no modo Material Design. | | Application min / max / step | 16 / 26 / 1 | Tamanho inteiro da fonte de leitura; propriedades reais do intervalo. | | snaps / ticks / pin | true / true / true | Etapas visíveis e indicação formatada do tamanho. | ### Escalas originais de leitura e layout | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Reading font | Georgia, serif OR system-ui, sans-serif | Controlado pelo segmento nativo; fontes já disponíveis no dispositivo. | | Reading size | 16–26px; default 18px | Aplicado diretamente ao artigo. | | Reading line-height | 1.65 | Largura de texto confortável original. | | Article heading | 1.9em / 1.15; 1.6em below 360px | Escala conforme o tamanho do texto principal escolhido pelo leitor. | | Control/body font | system-ui, sans-serif | Escolha explícita de fonte da aplicação. | | Spacing | 10 / 12 / 14 / 16 / 20 / 22 / 24 / 28 / 32px | Valores concretos da folha de estilos original, não uma escala atribuída ao Ionic. | | Layout | 300px settings + flexible article; stack at 760px | Ambas as colunas usam min-width:0. | | Paper roles | #fff9eb warm; #ffffff white; #24362e ink | Cores originais do conteúdo, separadas dos papéis dos controles nativos. | | Card radius | 16px | Geometria original dos painéis ao redor. | ## Guia completo do sistema de design Ionic Framework Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## Sistema de design Ionic Framework: escolha o modo de renderização de forma intencional ### Escolha o modo de renderização de forma intencional > O Ionic disponibiliza componentes Web por meio de integrações com frameworks. Este exemplo usa Ionic Vue 9.0.6 e define mode como ios na configuração do IonicVue. Assim, o segmento, a chave seletora, o controle de intervalo e os botões recebem um tratamento visual de plataforma coerente, independentemente do navegador de desktop usado para inspecionar a página. O modo é uma decisão de renderização dos componentes; ele não transforma a página em um aplicativo móvel nativo. O exemplo usa intencionalmente um elemento main comum, em vez de uma estrutura em tela cheia com IonApp/IonContent. Isso permite que uma demonstração de componentes se ajuste ao conteúdo dentro de uma página de recursos incorporada. Um aplicativo Ionic real com roteamento deve seguir a estrutura de páginas e roteador do framework, incluindo IonPage quando necessário para as transições. Consulte a especificação de apoio ## Sistema de design Ionic Framework: uma cor do Ionic é uma família de variáveis relacionadas ### Uma cor do Ionic é uma família de variáveis relacionadas A folha de estilos principal instalada define primary como #0054e9, com canais RGB, contraste, tonalidades mais escuras e mais claras separados. Os componentes podem usar esses valores relacionados em diferentes estados. Substituir apenas o valor hexadecimal base pode deixar os outros estados inconsistentes; uma cor de marca personalizada deve definir toda a sua família. Este exemplo mantém a cor primary padrão nos controles nativos. O tom de papel quente é uma superfície separada da aplicação, em #fff9eb, e o texto do artigo permanece #24362e. Mudar a página para branco altera apenas a superfície de leitura. Isso não modifica silenciosamente a paleta dos controles nem afirma implementar toda a paleta escura do Ionic. Consulte a especificação de apoio ## Sistema de design Ionic Framework: torne observável a escolha de tipografia do leitor ### Torne observável a escolha de tipografia do leitor O segmento alterna a tipografia do artigo entre Georgia e system-ui. Os controles continuam usando system-ui para que a preferência afete o conteúdo de leitura pretendido, sem alterar inesperadamente os rótulos e as dimensões dos controles. Nenhuma fonte externa é solicitada; o exemplo usa as pilhas de fontes locais correspondentes. O tamanho do texto é um número inteiro entre 16 e 26 pixels. O título do artigo é proporcional a esse tamanho, e a altura da linha permanece em 1.65. Em larguras menores que 360px, a proporção do título diminui para 1.6em, mantendo legível o maior tamanho em uma coluna incorporada estreita. Esses são valores próprios da aplicação, claramente distintos dos padrões dos componentes do Ionic. Consulte a especificação de apoio ## Sistema de design Ionic Framework: um segmento tem seleção controlada e semântica nativa ### Um segmento tem seleção controlada e semântica nativa IonSegment recebe o valor atual de face e dois filhos IonSegmentButton. O evento ionChange atualiza o modelo usando event.detail.value. Cada botão tem um valor estável e distinto, serif ou sans, e o rótulo visível explica a escolha. Um parágrafo identifica o controle completo por meio de aria-labelledby. A árvore de acessibilidade real expõe uma lista de abas (tablist) com abas selecionadas, e não um grupo de botões comuns. Por isso, o teste de interação local seleciona a aba Sans nativa e verifica se a fonte de leitura muda. Apenas estilizar dois botões para que pareçam um segmento não garante o mesmo comportamento de seleção. Consulte a especificação de apoio ## Sistema de design Ionic Framework: use eventos e restrições de intervalo como um único contrato ### Use eventos e restrições de intervalo como um único contrato IonRange define min, max e step explicitamente; usar o intervalo padrão de zero a cem não permitiria representar um tamanho de texto útil. O ajuste aos incrementos e as marcações deixam visíveis os valores disponíveis, e o formatador do indicador acrescenta px ao valor exibido durante a interação. O rótulo permanente do tamanho abaixo do controle continua legível depois que o usuário solta o controle deslizante. O manipulador usa ionChange e converte o valor em número. Isso é apropriado para um único controle deslizante; um intervalo com dois controles retornaria outro formato de valor e exigiria um tratamento diferente. No modo iOS, o intervalo compilado usa um controle deslizante de 26 pixels e uma barra de 4 pixels; no modo Material, usa 18 e 2 pixels. Essas diferenças são registradas, em vez de serem achatadas em um token universal do Ionic inventado. 1. Selecione o controle deslizante Tamanho do texto e pressione a seta para a direita oito vezes para chegar a 26px. 2. Selecione Sans e desative Papel quente. 3. Salve as preferências e confira a captura exata de tipografia, tamanho e papel. Consulte a especificação de apoio ## Sistema de design Ionic Framework: uma escolha booleana de papel deve atualizar a superfície imediatamente ### Uma opção booleana de papel deve atualizar a interface imediatamente IonToggle recebe checked do modelo warm. O evento fornece detail.checked, atribuído diretamente a esse estado booleano. O rótulo visível Papel quente pertence ao controle nativo, e a explicação ao lado informa que ele altera a superfície do artigo. A classe warm altera o fundo do artigo sem remover sua borda nem modificar o texto. Assim, a comparação continua significativa. Isso também evita confundir uma preferência de tonalidade do papel com uma configuração de claro/escuro da plataforma, que exigiria coordenar muito mais variáveis de superfície e texto do Ionic. Consulte a especificação de apoio ## Sistema de design Ionic Framework: separe as preferências aplicadas de uma captura salva ### Separe as preferências aplicadas de um instantâneo salvo Cada configuração é aplicada imediatamente ao artigo. Salvar preferências registra uma captura legível no estado reativo local e é desativado enquanto essa captura estiver atualizada. Um observador dos três modelos limpa a mensagem após qualquer alteração, evitando que uma confirmação antiga descreva uma nova combinação. Restaurar padrões define serif, 18 pixels e papel quente, e depois limpa a mensagem de confirmação salva. O status informa explicitamente que as preferências se aplicam apenas a esta prévia. A ação não usa persistência em localStorage, configuração de conta nem plugin nativo de preferências; ao recarregar, os valores padrão são restaurados. Consulte a especificação de apoio ## Sistema de design Ionic Framework: preserve os controles nativos com Shadow DOM ao estilizar a composição ### Preserve os controles nativos com Shadow DOM ao estilizar a composição O controle deslizante tem o rótulo visível Tamanho do texto, o controle de alternância inclui seu próprio rótulo de texto e o segmento é identificado como Tipografia. A ilustração original tem aria-hidden. O feedback ao salvar usa role=status, enquanto o artigo permanece um elemento semântico comum HTML, para que seu título e seus parágrafos sigam a navegação habitual do documento pelo leitor. Os componentes do Ionic encapsulam a marcação interna no Shadow DOM. O exemplo usa propriedades públicas, eventos e propriedades personalizadas documentadas de CSS, em vez de consultar classes internas privadas. A página ao redor usa altura de conteúdo e larguras mínimas iguais a zero; testá-la em 280px ajuda a detectar problemas de largura incorporada que podem passar despercebidos em uma captura de tela de celular independente. - Mantenha as relações entre rótulos e os componentes nativos. - Use propriedades e eventos públicos em vez de alterar os elementos internos do Shadow DOM. - Verifique em conjunto as alterações de tamanho pelo teclado e o artigo atualizado ao vivo. Consulte a especificação de apoio ## Sistema de design Ionic Framework: instale a integração Vue e inclua CSS principal ### Instale a integração Vue e inclua o Core CSS O arquivo de entrada completo registra IonicVue e importa @ionic/vue/css/core.css antes da folha de estilos original. O pacote Vue instalado também resolve vue-router; por isso, o comando de dependências reproduzível inclui vue-router, embora este exemplo incorporado não configure navegação. A ausência dessa dependência peer fez a resolução do pacote local falhar. Os dois exemplos completos incluem App.vue e style.css. Um projeto Vue padrão do Vite compila o SFC e suas importações de componentes nativos. A prévia independente do recurso reúne localmente o JavaScript e o CSS resultantes, incluindo as implementações dos componentes, para que seja possível alterar os controles sem fazer uma solicitação a um CDN externo. Consulte a especificação de apoio ## Exemplos de componentes do sistema de design Ionic Framework ### SFC completo de preferências de leitura IonSegment, IonRange, IonToggle e IonButton nativos controlam um breve ensaio original. ``` ``` Referência de código - O intervalo é confirmado por ionChange; e.detail.value é convertido em número. - Alterar qualquer preferência limpa o registro salvo. - O salvamento é um estado reativo local, não usa o armazenamento do dispositivo nem faz uma solicitação ao servidor. ### Folha de estilos completa do layout original Composição com altura definida pelo conteúdo, layout estreito empilhado e tipografia escolhida pelo leitor, sem acessar as raízes shadow dos componentes. ``` html,body,#app{height:auto;min-height:0;margin:0}*{box-sizing:border-box}body{font-family:system-ui,sans-serif;color:#24362e;background:#f2f5f3}.reader-shell{max-width:1120px;margin:auto;padding:32px}.eyebrow{font-size:11px;letter-spacing:.14em;font-weight:700;color:#52695c}h1{font-size:34px;line-height:1.15;max-width:660px;margin:12px 0}header>p:last-child{font-size:15px;line-height:1.6;max-width:660px;color:#56675e}.reader-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;margin-top:28px}.preferences{background:white;border:1px solid #dbe3de;border-radius:16px;padding:22px;align-self:start;min-width:0}.preferences h2{font-size:19px;margin:0 0 22px}.label{font-size:14px;font-weight:600;margin-bottom:10px}ion-segment{margin-bottom:20px}ion-range{padding:12px 0 0;--bar-height:4px}.scale{display:flex;justify-content:space-between;font-size:12px;color:#52695c;margin:0 0 24px}.paper-toggle{border-top:1px solid #e4e9e6;padding-top:20px;margin-bottom:20px}.paper-toggle ion-toggle{width:100%;font-size:14px}.paper-toggle p{font-size:12px;line-height:1.6;color:#5a6b61}.save-result{font-size:12px;line-height:1.6;color:#46614f;min-height:38px}.reading-paper{background:white;border:1px solid #dce3dd;border-radius:16px;padding:28px;line-height:1.65;min-width:0;overflow-wrap:anywhere;transition:background .2s}.reading-paper.warm{background:#fff9eb}.reading-paper h2{font-size:1.9em;line-height:1.15;margin:14px 0 24px;font-weight:400}.reading-paper p{margin:0 0 1.2em}.article-kicker{font-family:system-ui,sans-serif;font-size:10px;letter-spacing:.15em}.paper-art{height:112px;background:#dce8d9;border-radius:8px;position:relative;overflow:hidden;margin-bottom:24px}.paper-art span{position:absolute;width:150px;height:150px;background:#a4baa2;border-radius:50%;right:15%;top:35px}.paper-art i{position:absolute;width:130px;height:70px;background:#f3e0a8;border-radius:50% 50% 0 0;right:25%;top:48px}.paper-art b{position:absolute;width:60px;height:130px;transform:rotate(24deg);background:#64816b;left:15%;top:38px;border-radius:50% 50% 0 0}.reading-paper footer{font:11px/1.6 system-ui,sans-serif;border-top:1px solid #deded3;padding-top:18px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}.reading-paper ion-chip{font-size:11px;margin:0}@media(max-width:760px){.reader-shell{padding:20px}.reader-layout{grid-template-columns:minmax(0,1fr)}h1{font-size:29px}}@media(max-width:360px){.reader-shell{padding:14px}.preferences,.reading-paper{padding:16px}.reader-layout{gap:18px}.reading-paper h2{font-size:1.6em}} ``` Referência de código - O intervalo usa a propriedade personalizada documentada --bar-height. - Todo o material gráfico do texto é original CSS e está marcado como decorativo. ## Configuração do agente do sistema de design Ionic Framework ### Ponto de partida para implementação Ionic Vue/Core 9.0.6 verificado. O SFC completo e a folha de estilos estão acima; vue-router está instalado como dependência de integração, embora a prévia não tenha páginas com rotas. ``` // Start with: npm create vite@latest ionic-reader -- --template vue // cd ionic-reader && npm install // npm install @ionic/vue@9.0.6 @ionic/core@9.0.6 vue-router@4 // Save the complete examples as src/App.vue and src/style.css. // src/main.js: import {createApp} from 'vue'; import {IonicVue} from '@ionic/vue'; import '@ionic/vue/css/core.css'; import './style.css'; import App from './App.vue'; createApp(App).use(IonicVue, {mode:'ios'}).mount('#app'); // The Vite index.html must contain: //
// Run: npm run dev ``` ### Um prompt para seu projeto ``` Use Ionic Vue/Core 9.0.6 no modo iOS explícito para criar o exemplo de preferências de leitura fornecido. Mantenha o Segment nativo para escolher a fonte, o Range para ajustar o tamanho do texto, o Toggle para a aparência do papel e as ações de Button conectadas aos estilos reais do artigo. Mantenha o intervalo entre 16–26px e reflita as alterações no registro local de preferências salvas. Inclua a configuração de IonicVue, a dependência CSS obrigatória e a dependência peer vue-router; mantenha a composição com altura definida pelo conteúdo, sem adicionar uma estrutura de tela cheia dentro da incorporação. Não há uploads de inspeção nem alterações remotas na conta. ``` ## Fontes e escopo do sistema de design Ionic Framework Ionic Vue/Core 9.0.6, modo iOS. Ensaio, material gráfico, escala de leitura e cores de papel em tons quentes originais. O salvamento é um estado reativo local e não persiste após recarregar. Este exemplo incorporado de componente não é um aplicativo Ionic completo com rotas ou para dispositivos nativos. - Integração com Vue Plugin, importações de componentes e estrutura completa do aplicativo. - Famílias de cores Funções de base, contraste, sombra, matiz e RGB. - Variáveis CSS Propriedades personalizadas globais e de componentes. - Segment Modelo de seleção e eventos do segmento. - Intervalo Rótulos, etapas, marcas, indicadores e formato do valor do evento. - Toggle Estado marcado e eventos de alteração. - Button Estados de expansão, preenchimento e desativação. - Partes de sombra Limites de estilização compatíveis. ## Recursos relacionados ao sistema de design Ionic Framework ### Kobalte Kobalte fornece componentes sem interface visual para Solid, incluindo campos numéricos com valores brutos e formatados separados, a anatomia composta de caixas de seleção e botões com estado pressionado. Este guia conecta esses primitivos aos sinais do Solid por meio de um ajustador de receitas com quantidades derivadas e caixas de seleção de ingredientes que podem ser redefinidas. ### Mantine Uma referência do Mantine 9, estruturada em torno de uma tabela nativa de participantes e um painel lateral de agendamento. Consulte as escalas reais do tema, conecte useForm a TextInput, Select, Checkbox e DatePickerInput e teste a validação antes de adicionar um registro local. ### Melt UI Os construtores de store/action de Melt UI associam comportamentos acessíveis à marcação Svelte que você controla. Este guia usa @melt-ui/svelte 0.86.6 para conectar os construtores de radio, slider e switch por meio de seus atributos, actions e stores graváveis; é diferente da abordagem mais recente de API, baseada em runas. - [Referência de implementação](https://ionicframework.com/docs/vue/quickstart) - [Fonte](https://ionicframework.com/docs/theming/colors) - [Fonte](https://ionicframework.com/docs/api/range) - [Fonte](https://ionicframework.com/docs/theming/css-variables) - [Consulte a especificação de apoio](https://ionicframework.com/docs/vue/quickstart) - [Consulte a especificação de apoio](https://ionicframework.com/docs/theming/colors) - [Consulte a especificação de apoio](https://ionicframework.com/docs/theming/css-variables) - [Consulte a especificação de apoio](https://ionicframework.com/docs/api/segment) - [Consulte a especificação de apoio](https://ionicframework.com/docs/api/range) - [Consulte a especificação de apoio](https://ionicframework.com/docs/api/toggle) - [Consulte a especificação de apoio](https://ionicframework.com/docs/api/button) - [Consulte a especificação de apoio](https://ionicframework.com/docs/theming/css-shadow-parts) - [Referência de código](https://ionicframework.com/docs/api/range) - [Referência de código](https://ionicframework.com/docs/theming/css-variables) - [Integração com Vue Plugin, importações de componentes e estrutura completa do aplicativo.](https://ionicframework.com/docs/vue/quickstart) - [Famílias de cores Funções de base, contraste, sombra, matiz e RGB.](https://ionicframework.com/docs/theming/colors) - [Variáveis CSS Propriedades personalizadas globais e de componentes.](https://ionicframework.com/docs/theming/css-variables) - [Segment Modelo de seleção e eventos do segmento.](https://ionicframework.com/docs/api/segment) - [Intervalo Rótulos, etapas, marcas, indicadores e formato do valor do evento.](https://ionicframework.com/docs/api/range) - [Toggle Estado marcado e eventos de alteração.](https://ionicframework.com/docs/api/toggle) - [Button Estados de expansão, preenchimento e desativação.](https://ionicframework.com/docs/api/button) - [Partes de sombra Limites de estilização compatíveis.](https://ionicframework.com/docs/theming/css-shadow-parts)