AppMachine Centro de Ayuda

¿Cómo podemos ayudarle?

Seguir

Cómo incluir los estilos de tu app

Para poder desarrollar funcionalidades que se integren a la perfección con tu app, es imprescindible adoptar los estilos de la misma. Para ello, te ofrecemos una hoja de estilos en la que se incluyen los estilos de tu app.

¿Cómo incluyo los estilos de mi app?

Para incluir la hoja de estilos en tu HTML, añade la siguiente línea de código en tu archivo HTML (en la sección head). Adjunto a este artículo incluimos una hoja de estilos de ejemplo: styles.css.

<link rel="stylesheet" type="text/css" href="/bridge/styles.css">

¿Qué hay dentro de la hoja de estilos?

La hoja de estilos contiene una serie de clases CSS, así como algunos elementos de estilo global.

body
El estilo del cuerpo (body) se ajusta automáticamente al tipo de letra y el color del texto de tu app.

a
El estilo de los hiperenlaces se ajusta al estilo de texto, color y borde de tu app. 

h1, h2, h3, h4, h5, h6
El estilo de todas las cabeceras se ajusta al color de texto y familia de fuentes especificadas en la app.

p
El estilo de párrafo se ajusta al color de texto de la app.

Clases adicionales

También ofrecemos un conjunto de clases CSS que puedes utilizar para aplicar estilos en tu bloque JavaScript.

.background-color
Con esta clase, el color de fondo del elemento HTML se ajustará al color de fondo especificado en la app (o bloque, si se han aplicado estilos personalizados)

.appButton
Esta clase está concebida para aplicar a un botón y definirá la altura, color de fondo y color de texto del botón, ajustándose a los estilos de la aplicación.

.appTextfield
Esta clase está concebida para aplicar a un campo de texto y definirá la altura, color de fondo y color de texto del campo, ajustándose a los estilos de la aplicación.

.appTextarea
Esta clase está concebida para aplicar a un área de texto y definirá la altura, color de fondo y color de texto del área, ajustándose a los estilos de la aplicación.

Clases de color

Además de las clases adicionales, hay una serie de clases de color que también puedes aplicar. Todas las clases de color tienen tres implementaciones, de modo que, por ejemplo, la clase TitleColor tendrá las siguientes tres versiones:

.titlecolor: Afecta solo al color
.titlecolor-background: Afecta solo al color de fondo
.titlecolor-border: Afecta solo al color del borde

Las siguientes clases de color están disponibles:

  • TitleColor (color título)
  • BodyColor (color cuerpo)
  • SupportColor (color asistencia)
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 2 de 2
¿Tiene más preguntas? Enviar una solicitud

Comentarios