¿Qué son los temas de aplicación – Descripción general
Un tema de aplicación es una colección de paletas de colores y atributos que crean una sensación de persistencia visual en toda la aplicación, vista o actividad. Con los temas de aplicación, puede definir la apariencia y la experiencia de usuario de su aplicación seleccionando y configurando diferentes paneles, estilos, diseños, tipografía, widgets de tema predefinidos. O también puede crear un archivo de tema personalizado.
Temas de App Builder
La plataforma App Builder adopta un enfoque de sistemas de diseño para la creación de UI y puede descargar temas de aplicación y aplicarlos a nivel de aplicación. Con una única selección de un tema, el tema se aplica globalmente a toda la aplicación inmediatamente. Tener un tema global evita la necesidad de crear estilos locales que son difíciles de mantener.
Cambio de temas de App Builder
Hay seis temas de aplicación integrados basados en Material, Fluent o Bootstrap. Cada uno tiene una versión oscura y una versión clara. Puede probarlo seleccionando la tarjeta de tema en la caja de herramientas.
Cambio entre temas
Material frente a Fluent frente a Bootstrap
Cuando cambia de Material a Fluent, verá que los componentes tienen un aspecto diferente. Por ejemplo, el estilo de etiqueta flotante para el campo de entrada en Material cambia a una etiqueta fija. Y el interruptor también es visualmente diferente. Algunos de los otros cambios son más sutiles, pero están ahí.
Cómo personalizar y aplicar temas de aplicación
Puede crear un tema de aplicación personalizado para que coincida con su marca. Para ello, crea un tema nuevo y elige uno de los temas base como punto de partida. Las paletas de colores se generan automáticamente en función del color primario y secundario que elija. En cuanto a la tipografía, por ahora tenemos un conjunto de fuentes integradas, pero planeamos añadir más control creativo en futuras versiones. Una vez que termine de editar, guarde el tema de aplicación para aplicar los cambios.
Crear un nuevo tema
Cambio entre temas
Después de seleccionar un tema de aplicación, cuando aplique un color de relleno para un contenedor, el selector de color ahora refleja la paleta del tema seleccionado. Esto nos ayuda a mantenernos fieles al enfoque de sistemas de diseño donde los atributos de marca se deciden y se mantienen a nivel de aplicación, y no se deciden de forma ad hoc dependiendo de quién está creando la UI.
Cambiar la apariencia de un diseño
En el futuro, incluiremos una forma de añadir colores personalizados también, pero como un escenario de uso secundario. Por ahora, si aún desea personalizar aún más la apariencia de un diseño y restablecer el estilo de la aplicación con un color personalizado, siempre puede escribir el código de color en el campo de entrada del lado. Los temas a nivel de aplicación que creó en el editor se persisten de una manera compatible con la plataforma cuando se genera la aplicación. También hace que sea muy simple cambiar el tema en el futuro.
Tenga en cuenta que con App Builder puede aprovechar los diseños Flex, que proporcionan un conjunto de capacidades de posicionamiento avanzadas para una creación más fácil y rápida de diseños personalizados. De esta manera, la aplicación que cree se adaptará a cualquier tamaño de pantalla. Mientras que en comparación con un diseño absoluto, obtiene un diseño particular para un solo tamaño de pantalla.
Recursos adicionales
GitHub
