# Sistema de diseño Ionic Framework ## Vista previa de la interfaz del sistema de diseño Ionic Framework Cambia el tipo de letra, ajusta el tamaño del texto con el teclado, activa el papel cálido y guarda la instantánea local de preferencias. ## 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. ### Roles semánticos de color claro predeterminados | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --ion-color-primary | #0054e9 | Controles primarios nativos. | | --ion-color-primary-rgb | 0, 84, 233 | Canales RGB para cálculos basados en opacidad. | | --ion-color-primary-contrast | #fff | Contraste del texto y los iconos sobre el color primario. | | --ion-color-primary-shade | #004acd | Variante oscurecida del color primario. | | --ion-color-primary-tint | #1a65eb | Variante aclarada del color primario. | | --ion-color-secondary | #0163aa | Rol secundario. | | --ion-color-tertiary | #6030ff | Rol terciario. | | --ion-color-success | #2dd55b | Rol de éxito. | | --ion-color-warning | #ffc409 | Rol de advertencia. | | --ion-color-danger | #c5000f | Rol de peligro. | ### Geometría nativa del control deslizante por modo | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | iOS --bar-height | 4px | Valor predeterminado compilado del control deslizante en iOS. | | iOS --knob-size | 26px | Tamaño compilado del control deslizante en iOS. | | MD --bar-height | 2px | Valor predeterminado compilado del modo Material Design. | | MD --knob-size | 18px | Tamaño compilado del control deslizante en Material Design. | | Application min / max / step | 16 / 26 / 1 | Tamaño de fuente de lectura entero; propiedades reales del control deslizante. | | snaps / ticks / pin | true / true / true | Pasos visibles y respuesta formateada del tamaño. | ### Escalas originales de lectura y diseño | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Reading font | Georgia, serif OR system-ui, sans-serif | Controlado por el segmento nativo; fuentes ya instaladas en el dispositivo. | | Reading size | 16–26px; default 18px | Aplicado directamente al artículo. | | Reading line-height | 1.65 | Ancho de línea cómodo y original para el texto. | | Article heading | 1.9em / 1.15; 1.6em below 360px | Se escala según el tamaño del texto del cuerpo seleccionado por el lector. | | Control/body font | system-ui, sans-serif | Elección explícita de la fuente de la aplicación. | | Spacing | 10 / 12 / 14 / 16 / 20 / 22 / 24 / 28 / 32px | Valores concretos y originales de la hoja de estilos, no una escala atribuida a Ionic. | | Layout | 300px settings + flexible article; stack at 760px | Ambas columnas usan min-width:0. | | Paper roles | #fff9eb warm; #ffffff white; #24362e ink | Colores de contenido originales, independientes de los roles nativos de los controles. | | Card radius | 16px | Geometría original de los paneles circundantes. | ## Guía completa del sistema de diseño Ionic Framework Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. 1. Enfoca el control deslizante Tamaño del texto y pulsa la flecha derecha ocho veces para llegar a 26px. 2. Selecciona Sans y desactiva Papel cálido. 3. Guarda las preferencias y comprueba la instantánea exacta de tipografía, tamaño y papel. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. ``` ``` Referencia de código - 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. ``` 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}} ``` Referencia de código - El rango usa la propiedad personalizada documentada --bar-height. - Todas las ilustraciones de texto son originales CSS y están marcadas como decorativas. ## 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. ``` // 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 ``` ### Una instrucción para tu proyecto ``` 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. ``` ## 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. - Integración con Vue Complemento, importaciones de componentes y estructura completa de la aplicación. - Familias de colores Funciones de base, contraste, sombra, matiz y RGB. - Variables de CSS Propiedades personalizadas globales y de componentes. - Segment Modelo de selección y eventos de segmentación. - Rango Etiquetas, pasos, marcas, indicadores y formato del valor del evento. - Toggle Estado marcado y eventos de cambio. - Button Estados de expansión, relleno y desactivado. - Partes shadow Límites de estilo admitidos. ## Recursos relacionados con el sistema de diseño Ionic Framework ### Kobalte Kobalte proporciona componentes sin interfaz para Solid, incluidos campos numéricos con valores sin formato y formateados por separado, la anatomía compuesta de casillas de verificación y botones con estado de pulsación. Esta guía conecta esas primitivas con las señales de Solid mediante una herramienta para ajustar recetas, con cantidades derivadas y controles de ingredientes que se pueden restablecer. ### Mantine Una referencia de Mantine 9 basada en una tabla nativa de participantes y un panel lateral de planificación. Inspecciona las escalas reales del tema, conecta useForm con TextInput, Select, Checkbox y DatePickerInput, y prueba la validación antes de añadir un registro local. ### Melt UI Los generadores de tiendas y acciones de Melt UI añaden comportamiento accesible al marcado de Svelte que controlas. Esta guía usa @melt-ui/svelte 0.86.6 para conectar generadores de radio, controles deslizantes y conmutadores mediante sus atributos, acciones y tiendas escribibles; es una opción distinta de la API más reciente de runas API. - [Referencia de implementación](https://ionicframework.com/docs/vue/quickstart) - [Fuente](https://ionicframework.com/docs/theming/colors) - [Fuente](https://ionicframework.com/docs/api/range) - [Fuente](https://ionicframework.com/docs/theming/css-variables) - [Consulta la especificación complementaria](https://ionicframework.com/docs/vue/quickstart) - [Consulta la especificación complementaria](https://ionicframework.com/docs/theming/colors) - [Consulta la especificación complementaria](https://ionicframework.com/docs/theming/css-variables) - [Consulta la especificación complementaria](https://ionicframework.com/docs/api/segment) - [Consulta la especificación complementaria](https://ionicframework.com/docs/api/range) - [Consulta la especificación complementaria](https://ionicframework.com/docs/api/toggle) - [Consulta la especificación complementaria](https://ionicframework.com/docs/api/button) - [Consulta la especificación complementaria](https://ionicframework.com/docs/theming/css-shadow-parts) - [Referencia de código](https://ionicframework.com/docs/api/range) - [Referencia de código](https://ionicframework.com/docs/theming/css-variables) - [Integración con Vue Complemento, importaciones de componentes y estructura completa de la aplicación.](https://ionicframework.com/docs/vue/quickstart) - [Familias de colores Funciones de base, contraste, sombra, matiz y RGB.](https://ionicframework.com/docs/theming/colors) - [Variables de CSS Propiedades personalizadas globales y de componentes.](https://ionicframework.com/docs/theming/css-variables) - [Segment Modelo de selección y eventos de segmentación.](https://ionicframework.com/docs/api/segment) - [Rango Etiquetas, pasos, marcas, indicadores y formato del valor del evento.](https://ionicframework.com/docs/api/range) - [Toggle Estado marcado y eventos de cambio.](https://ionicframework.com/docs/api/toggle) - [Button Estados de expansión, relleno y desactivado.](https://ionicframework.com/docs/api/button) - [Partes shadow Límites de estilo admitidos.](https://ionicframework.com/docs/theming/css-shadow-parts)