Estilos

El panel Estilo te permite personalizar el aspecto de tu app. Puedes establecer temas, elegir entre variantes de widgets y hasta crear tus propios estilos.

Estilo global: define el estilo de varios widgets a la vez

Establece el estilo de toda la app con temas

El selector de temas en la parte superior de la pestaña Estilos controla el aspecto predeterminado de los widgets en tu app. Por el momento, App Maker tiene los siguientes temas:

  • Material: un tema que implementa Material Design, el estilo visual estándar de Google. Usa este tema para compilar apps que se parezcan a los favoritos de Google, como Inbox o Keep.

  • Simple: un tema más simple que proporciona un aspecto genérico. Usa el tema sencillo para desarrollar tu estilo visual único.

Personaliza los widgets con CSS

Si deseas retocar los widgets de Material o mejorar el tema Sencillo, puedes personalizar los widgets. Para ello, escribe tus propias Hojas de estilo en cascada o CSS.

Los widgets de App Maker y sus subcomponentes tienen clases de CSS incorporadas con el prefijo app-, seguidas de sus nombres. Para cambiar la apariencia de los widgets, agrega tus propias CSS a estas clases mediante el área de texto debajo del selector de tema. Ejemplo:

/* Adds rounded corners to button widgets */
.app-Button {
  border-radius: 10px;
}

/* Sets font size for rows in list panels */
.app-ListPanelRow {
  font-size: 1.2em;
}

También puedes usar la gama completa de selectores de CSS para diseñar tu app:

/* Turns off link underlines. */
.app-Link:link {
  text-decoration: none;
}

/* Changes color of disabled buttons. */
.app-Button[disabled] {
  background-image: none;
  background-color: white;
}

Estilo para diferentes tamaños de pantalla

Los usuarios pueden acceder a tu app desde dispositivos con pantallas grandes o pequeñas. Puedes mejorar su experiencia en tu app si usas un diseño responsivo que cambie según el tamaño de la pantalla (también llamado resolución de pantalla).

Para adaptar el diseño a diferentes tamaños de pantalla de forma automática, usa consultas de medios en tus CSS globales. Si quieres obtener una introducción al diseño responsivo, consulta Conceptos básicos del diseño web responsivo. Para ver un ejemplo, consulta Cuadrícula de diseño responsivo.

Prueba tus estilos para tamaños específicos en el editor de páginas

Para probar tu estilo, puedes cambiar el tamaño del lienzo de forma manual o aplicar una resolución de pantalla específica. Cambiar la resolución en el editor de páginas no afecta a tus aplicaciones publicadas. Además, otros desarrolladores no verán los cambios. Puedes actualizar la página para que el lienzo vuelva al tamaño personalizado original.

Para seleccionar una resolución de pantalla específica, en la parte superior del editor de páginas, haz clic en Resoluciones de dispositivos devices.

Puedes ver el tamaño de la pantalla del lienzo en la esquina superior derecha, a menos que selecciones resolución Personalizada, en cuyo caso, el tamaño personalizado se encuentra en el editor de propiedades en los valores de dimensión.

Administra resoluciones de pantalla

Para agregar una resolución de pantalla, haz clic en Resoluciones de dispositivos devices y haz clic en Agregar resolución. También puedes hacer clic en Configuración settings chevron_rightConfiguración de App chevron_right Agregar resolución.

Para editar y borrar resoluciones de pantalla, dirígete a Configuración settings chevron_right Configuración de App y localiza la sección Resoluciones de Viewport. Apunta a la resolución que quieres editar o borrar y haz clic en Editar mode_edit o Borrar delete.

Estilo del widget: define el estilo de un solo widget

Temas de widgets

Usa el selector de temas para aplicar estilos a los widgets con facilidad. Selecciona un widget y elige de una lista de temas en el menú desplegable de la barra de acción.

Selector de tema

El tema Material viene con múltiples variantes para la mayoría de los widgets. Por ejemplo, los widgets del panel tienen una variante Paper que parece un trozo de papel blanco, una variante Transparent que muestra los widgets debajo del panel y muchos más.

CSS específicas del widget

La pestaña Estilo tiene un área de texto para ingresar CSS personalizadas, por lo que puedes ajustar el estilo de un widget seleccionado según tus especificaciones exactas. Los estilos de widgets también tienen el prefijo .app- seguido del nombre de la página en la que se encuentra el widget y luego el nombre del propio widget. Cuando se selecciona el widget, aparece en la parte superior de la ventana emergente de autocompletar.

Ejemplos:

/* Changes color of SampleButton1 to yellow */
.app-NewPage-SampleButton1 {
  background-image: none;
  background-color: yellow;
}

/* Sets font in SampleListPanel1's rows to bold */
.app-NewPage-SampleListPanel1Row {
  font-weight: bold;
}

Variantes personalizadas

App Maker también te permite crear tus propias variantes. Para hacer una variante, usa la sección CSS de la pestaña Estilos y crea una clase con un nombre que posea el formato app-[WidgetType]--[VariantName]. Ejemplo:

.app-Button--RedButton {
  background-image: none;
  background-color: red;
}

Luego de crear una clase con un nombre adecuado, tu variante aparecerá en el menú desplegable Variante en la barra de acción cuando se seleccione ese widget.

Estilos adicionales con la propiedad de estilos

Puedes agregar estilos a los widgets fuera del panel Estilo mediante la propiedad de styles en Display en el Editor de propiedades. Define una clase en Estilo y agrégala a la propiedad. Los estilos que se asignan de esta manera no necesitan el prefijo habitual app-. Ejemplo:

.specialSubmitButton {
  background-image: none;
  background-color: red;
}