Uma interface nativa do Ionic para preferências de leitura, com funções de cor verificadas, geometria de controles deslizantes para iOS e Material, comportamento real de segmentos e interruptores e um artigo que se adapta às escolhas de fonte, tamanho e papel.
Ionic Vue/Core 9.0.6, Vue 3, modo iOS explícito. Componentes Web nativos incluídos localmente. · Referência de implementação
02
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.
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.
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.
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.
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.
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.
Selecione o controle deslizante Tamanho do texto e pressione a seta para a direita oito vezes para chegar a 26px.
Selecione Sans e desative Papel quente.
Salve as preferências e confira a captura exata de tipografia, tamanho e papel.
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.
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.
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.
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.
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.
vue
<script setup>
import {ref,computed,watch} from 'vue';
import {IonSegment,IonSegmentButton,IonLabel,IonRange,IonToggle,IonButton,IonChip} from '@ionic/vue';
const face=ref('serif'),size=ref(18),warm=ref(true),saved=ref('');
const family=computed(()=>face.value==='serif'?'Georgia, serif':'system-ui, sans-serif');
watch([face,size,warm],()=>saved.value='');
function save(){saved.value=`Saved locally: ${face.value}, ${size.value}px, ${warm.value?'warm':'white'} paper.`}
function reset(){face.value='serif';size.value=18;warm.value=true;saved.value=''}
</script>
<template>
<main class="reader-shell">
<header><p class="eyebrow">A QUIETER READING SPACE</p><h1>Make room for the words.</h1><p>Adjust this short essay to your reading preferences. The sample changes as you move the controls.</p></header>
<div class="reader-layout"><section class="preferences" aria-labelledby="preferences-title"><h2 id="preferences-title">Reading settings</h2><p class="label" id="face-label">Typeface</p>
<IonSegment :value="face" @ionChange="face=$event.detail.value" aria-labelledby="face-label"><IonSegmentButton value="serif"><IonLabel>Serif</IonLabel></IonSegmentButton><IonSegmentButton value="sans"><IonLabel>Sans</IonLabel></IonSegmentButton></IonSegment>
<IonRange :value="size" @ionChange="size=Number($event.detail.value)" :min="16" :max="26" :step="1" :snaps="true" :ticks="true" :pin="true" label="Text size" label-placement="stacked" :pin-formatter="v=>`${v}px`"/><p class="scale"><span>16px</span><strong>{{size}}px</strong><span>26px</span></p>
<div class="paper-toggle"><IonToggle :checked="warm" @ionChange="warm=$event.detail.checked" justify="space-between">Warm paper</IonToggle><p>Soft ivory or a white page. The controls keep their own contrast.</p></div>
<IonButton expand="block" @click="save" :disabled="!!saved">Save preferences</IonButton><IonButton expand="block" fill="clear" @click="reset">Restore defaults</IonButton><p class="save-result" role="status">{{saved||'Preferences apply to this preview only.'}}</p></section>
<article class="reading-paper" :class="{warm}" :style="{fontFamily:family,fontSize:size+'px'}"><div class="paper-art" aria-hidden="true"><span></span><i></i><b></b></div><p class="article-kicker">FIELD NOTES · 03</p><h2>The useful pause</h2><p>There is a small garden between the library and the river. Its benches face away from the busiest path, toward a row of young trees.</p><p>On an ordinary afternoon, the place asks very little. You can read a paragraph twice, let a conversation settle, or watch the shadow of a leaf move across the page.</p><p>Good reading spaces leave that choice with the reader. A comfortable line, a familiar letterform, and a little breathing room can make a page easier to return to.</p><footer><IonChip outline>Original sample essay</IonChip><span>{{size}}px · {{face==='serif'?'Georgia':'System sans'}} · 1.65 line height</span></footer></article></div>
</main>
</template>
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.
O intervalo usa a propriedade personalizada documentada --bar-height.
Todo o material gráfico do texto é original CSS e está marcado como decorativo.
04
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.
javascript
// Start with: npm create vite@latest ionic-reader -- --template vue
// cd ionic-reader && npm install
// npm install @ionic/[email protected] @ionic/[email protected] 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:
// <div id="app"></div><script type="module" src="/src/main.js"></script>
// Run: npm run dev
Um prompt para seu projeto
Prompt para agente de IA
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.
05
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.
