Interfaz de usuario multiplataforma y móvil · Nuevo recurso
Sistema de diseño Ionic Framework.
Una interfaz nativa de Ionic para las preferencias de lectura, con roles de color verificados, geometría de controles deslizantes para iOS y Material, comportamiento real de segmentos y conmutadores, y un artículo que responde a las preferencias de fuente, tamaño y papel.
Ionic Vue/Core 9.0.6, Vue 3, modo iOS explícito. Componentes web nativos incluidos localmente. · Referencia de implementación
02
Referencia de diseño del sistema de diseño Ionic Framework
Ionic Vue/Core 9.0.6 verificado. Los colores core se toman del core.css instalado. La demostración selecciona explícitamente el modo iOS. La tipografía de lectura, los colores del papel y el espaciado circundante son decisiones originales de la aplicación, no valores predeterminados de Ionic.
Sistema de diseño Ionic Framework: elige deliberadamente el modo de representación
Elige deliberadamente el modo de representación
Ionic expone componentes web mediante integraciones con frameworks. Este ejemplo usa Ionic Vue 9.0.6 y establece mode en ios en la configuración de IonicVue. Así, el segmento, el interruptor, el control deslizante y los botones tienen un tratamiento de plataforma coherente, independientemente del navegador de escritorio usado para inspeccionar la página. El modo es una decisión de representación de los componentes; no convierte la página en una aplicación móvil nativa.
El ejemplo usa deliberadamente un elemento main normal en lugar de una estructura de pantalla completa con IonApp/IonContent. De este modo, una muestra de componentes puede ajustar su contenido dentro de una página de recursos integrada. Una aplicación Ionic real con enrutamiento debería seguir la estructura de páginas y del enrutador del framework, incluido IonPage cuando sea necesario para las transiciones.
Sistema de diseño Ionic Framework: un color de Ionic es una familia de variables relacionadas
Un color de Ionic es una familia de variables relacionadas
La hoja de estilos principal instalada define el color primary como #0054e9, con canales RGB, valores de contraste, sombra y tinte independientes. Los componentes pueden usar esos valores relacionados en distintos estados. Reemplazar solo el valor hexadecimal base puede dejar otros estados incoherentes; un color de marca personalizado debe definir toda la familia de valores.
Este ejemplo conserva el color primary predeterminado para los controles nativos. El tono cálido del papel es una superficie independiente de la aplicación, con el valor #fff9eb, y el texto del artículo mantiene el color #24362e. Cambiar la página a blanco solo modifica la superficie de lectura. No altera de forma implícita la paleta de controles ni pretende implementar toda la paleta oscura de Ionic.
Sistema de diseño Ionic Framework: haz que la elección tipográfica del lector sea observable
Haz observable la elección tipográfica del lector
El segmento cambia el artículo entre Georgia y system-ui. Los controles mantienen system-ui, de modo que la preferencia afecta al contenido de lectura deseado sin modificar inesperadamente las etiquetas ni las dimensiones de los controles. No se solicita ninguna fuente externa; el ejemplo usa las pilas de fuentes locales correspondientes.
El tamaño del texto es un número entero entre dieciséis y veintiséis píxeles. El encabezado del artículo es proporcional a ese tamaño y la altura de línea se mantiene en 1.65. Por debajo de 360px de ancho, la proporción del encabezado disminuye a 1.6em para que el tamaño máximo siga siendo legible en una columna integrada estrecha. Estos son valores propios de la aplicación y están claramente separados de los valores predeterminados de los componentes de Ionic.
Sistema de diseño Ionic Framework: un segmento ofrece una selección controlada y semántica nativa
Un segmento tiene una selección controlada y semántica nativa
IonSegment recibe el valor actual de face y dos elementos IonSegmentButton. Su evento ionChange actualiza el modelo a partir de event.detail.value. Cada botón tiene un valor estable y distinto, serif o sans, y su etiqueta visible explica la opción. Un párrafo etiqueta el control completo mediante aria-labelledby.
El árbol de accesibilidad real expone una tablist con pestañas seleccionadas, no un grupo de botones comunes. Por eso, la prueba de interacción local selecciona la pestaña nativa Sans y comprueba que cambia la fuente de lectura. Limitarse a dar estilo de segmento a dos botones no proporcionaría el mismo comportamiento de selección.
Sistema de diseño Ionic Framework: trata los eventos y las restricciones del rango como un único contrato
Usa los eventos y las restricciones del control deslizante como un único contrato
IonRange establece explícitamente min, max y step; usar su rango predeterminado de cero a cien no representaría un tamaño de lectura útil. El ajuste por incrementos y las marcas muestran los valores disponibles, y el formateador de pin añade px al valor que se muestra durante la interacción. La etiqueta de tamaño persistente debajo del control sigue siendo legible después de soltar el control deslizante.
El controlador usa ionChange y convierte su valor en un número. Esto es adecuado para un único control; un rango con dos controles devolvería un valor de otra forma y necesitaría un tratamiento distinto. El rango de iOS compilado usa un control de veintiséis píxeles y una barra de cuatro píxeles, mientras que el modo Material usa dieciocho y dos. Esas diferencias se documentan, en lugar de reducirlas a un supuesto token universal de Ionic.
Enfoca el control deslizante Tamaño del texto y pulsa la flecha derecha ocho veces para llegar a 26px.
Selecciona Sans y desactiva Papel cálido.
Guarda las preferencias y comprueba la instantánea exacta de tipografía, tamaño y papel.
Sistema de diseño Ionic Framework: una opción booleana de papel debe actualizar la superficie de inmediato
Una opción de papel binaria debería actualizar la superficie de inmediato
IonToggle recibe el valor de checked del modelo warm. Su evento proporciona detail.checked, que se asigna directamente a ese estado booleano. La etiqueta visible Papel cálido pertenece al conmutador nativo, y la explicación cercana indica que modifica la superficie del artículo.
La clase warm cambia el fondo del artículo sin eliminar su borde ni modificar el ensayo. Así, la comparación sigue siendo significativa. También evita confundir la preferencia por un tono de papel con un ajuste de luz u oscuridad de la plataforma, que exigiría coordinar muchas más variables de superficie y texto de Ionic.
Sistema de diseño Ionic Framework: separa las preferencias aplicadas de una instantánea guardada
Separa las preferencias aplicadas de una instantánea guardada
Cada ajuste se aplica de inmediato al artículo. Guardar preferencias registra una instantánea legible en el estado reactivo local y se desactiva mientras esa instantánea siga vigente. Un observador de los tres modelos borra el mensaje cuando cambia cualquiera de ellos, para evitar que una confirmación obsoleta describa una combinación nueva.
Restaurar los valores predeterminados establece serif, dieciocho píxeles y papel cálido; luego borra el mensaje de guardado. El estado indica explícitamente que las preferencias solo se aplican a esta vista previa. La acción no utiliza persistencia en localStorage, ajustes de cuenta ni un complemento de preferencias nativo; al recargar, se vuelven a usar los valores predeterminados.
Sistema de diseño Ionic Framework: conserva los controles nativos del Shadow DOM mientras das estilo a la composición
Conserva los controles nativos del Shadow DOM mientras das estilo a la composición
El control de rango tiene una etiqueta visible Tamaño del texto, el conmutador incluye su propia etiqueta de texto y el segmento está etiquetado como Tipografía. La ilustración original tiene aria-hidden. La confirmación de guardado usa role=status, mientras que el artículo sigue siendo un HTML semántico normal, de modo que el encabezado y los párrafos siguen el orden de navegación habitual del lector.
Los componentes de Ionic encapsulan el marcado interno en el Shadow DOM. El ejemplo usa propiedades públicas, eventos y propiedades personalizadas CSS documentadas, en lugar de consultar clases internas privadas. La página contenedora usa altura de contenido y anchos mínimos iguales a cero; probarla a 280px permite detectar fallos en contenedores integrados estrechos que podrían pasar inadvertidos en una captura de pantalla independiente de un teléfono.
Mantén las relaciones entre etiquetas en los componentes nativos.
Usa propiedades y eventos públicos en lugar de modificar el contenido interno del shadow DOM.
Comprueba a la vez los cambios de tamaño con el teclado y el artículo en vivo.
Sistema de diseño Ionic Framework: instala la integración de Vue e incluye el archivo principal CSS
Instala la integración con Vue e incluye el core de CSS
El punto de entrada completo registra IonicVue e importa @ionic/vue/css/core.css antes de la hoja de estilos original. El paquete de Vue instalado también resuelve vue-router, así que el comando reproducible de dependencias incluye vue-router aunque este ejemplo integrado no configure la navegación. Al omitir esa dependencia par, el paquete local no pudo resolverse.
Los dos ejemplos completos incluyen App.vue y style.css. Un proyecto estándar de Vite con Vue compila el SFC y sus importaciones de componentes nativos. La vista previa independiente del recurso agrupa localmente el JavaScript y el CSS resultantes, incluidas las implementaciones de los componentes, por lo que cambiar los controles no requiere ninguna solicitud a una CDN externa.
Ejemplos de componentes del sistema de diseño Ionic Framework
SFC completo de preferencias de lectura
IonSegment, IonRange, IonToggle y IonButton nativos controlan un breve ensayo 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>
El rango se aplica mediante ionChange; e.detail.value se convierte en un número.
Al cambiar cualquier preferencia, se borra la instantánea guardada.
El guardado es estado reactivo local; no usa el almacenamiento del dispositivo ni realiza solicitudes al servidor.
Hoja de estilos original completa de la composición
Inserción ajustada a la altura del contenido, diseño estrecho apilado y tipografía elegida por el lector, sin acceder a las raíces shadow de los componentes.
El rango usa la propiedad personalizada documentada --bar-height.
Todas las ilustraciones de texto son originales CSS y están marcadas como decorativas.
04
Configuración del agente del sistema de diseño Ionic Framework
Punto de partida para la implementación
Verificado con Ionic Vue/Core 9.0.6. El SFC completo y la hoja de estilos aparecen arriba; vue-router está instalado como dependencia de integración, aunque la vista previa no tiene páginas con rutas.
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
Una instrucción para tu proyecto
Instrucción para el agente
Usa Ionic Vue/Core 9.0.6 en modo iOS explícito para crear el ejemplo de preferencias de lectura proporcionado. Mantén conectados al estilo real del artículo el Segment nativo para elegir la fuente, Range para el tamaño del texto, Toggle para la apariencia del papel y las acciones de Button. Mantén el rango de 16–26px y refleja los cambios en la instantánea local de preferencias guardadas. Incluye la configuración de IonicVue, la dependencia requerida CSS y la dependencia peer vue-router; conserva la composición ajustada a la altura del contenido en lugar de añadir una estructura de pantalla completa dentro del elemento insertado. No se carga ninguna inspección ni se realizan cambios remotos en cuentas.
05
Fuentes y alcance del sistema de diseño Ionic Framework
Ionic Vue/Core 9.0.6, modo iOS. Ensayo, ilustraciones, escala de lectura y colores de papel cálido originales. El guardado es estado reactivo local y no persiste al recargar la página. Este ejemplo insertado de componentes no es una aplicación Ionic completa con rutas ni para un dispositivo nativo.
