Iónico - Colores

Antes de comenzar con los elementos reales disponibles en el marco de Ionic, comprendamos un poco cómo Ionic hace uso de los colores para diferentes elementos.

Clases de colores iónicos

El marco iónico nos da un conjunto de nine predefined color classes. Puede usar estos colores o puede anularlos con su propio estilo.

La siguiente tabla muestra el conjunto predeterminado de nueve colores proporcionado por Ionic. Usaremos estos colores para diseñar diferentes elementos iónicos en este tutorial. Por ahora, puede verificar todos los colores como se muestra a continuación:

Clase	Descripción	Resultado
ligero	Se utiliza para el color blanco.
estable	Se utiliza para el color gris claro.
positivo	Para usar en color azul
calma	Se utiliza para el color azul claro.
equilibrado	Se utiliza para el color verde.
energizado	Se utiliza para el color amarillo.
positivo	Para ser utilizado para color rojo.
real	Se utiliza para el color violeta.
oscuro	Se utiliza para el color negro.

Uso de color iónico

Ionic hace uso de diferentes clases para cada elemento. Por ejemplo, un elemento de encabezado tendrábar clase y un botón tendrá un buttonclase. Para simplificar el uso, usamos diferentes colores prefijando la clase de elemento en un nombre de color.

Por ejemplo, para crear un encabezado de color azul, usaremos un bar-calm como sigue -

<div class = "bar bar-header bar-calm">
   ...
</div>

Del mismo modo, para crear un botón de color gris, usaremos button-stable clase de la siguiente manera.

<div class = "button button-stable">
   ...
</div>

También puede usar la clase de color Ionic como cualquier otra clase de CSS. Ahora diseñaremos dos párrafos con un color equilibrado (verde) y uno energizado (amarillo).

<p class = "balanced">Paragraph 1...</p>
<p class = "energized">Paragraph 2...</p>

El código anterior producirá la siguiente pantalla:

Discutiremos en detalle en los capítulos siguientes, cuando creamos diferentes elementos usando diferentes clases.

Personalizar colores con CSS

Cuando desee cambiar algunos de los colores predeterminados de Ionic usando CSS, puede hacerlo editando el lib/css/ionic.cssarchivo. En algunos casos, este enfoque no es muy productivo porque cada elemento (encabezado, botón, pie de página ...) usa sus propias clases para diseñar.

Por lo tanto, si desea cambiar el color de la clase "light" a naranja, deberá buscar en todos los elementos que usan esta clase y cambiarla. Esto es útil cuando desea cambiar el color de un solo elemento, pero no es muy práctico para cambiar el color de todos los elementos porque consumiría demasiado tiempo.

Personalización de colores con SASS

SASS (que es la forma corta de - Syntactically Awesome Style Sheet) proporciona una forma más sencilla de cambiar el color de todos los elementos a la vez. Si desea utilizar SASS, abra su proyecto en la ventana de comandos y escriba -

C:\Users\Username\Desktop\tutorialApp> ionic setup sass

Esto configurará SASS para su proyecto. Ahora puede cambiar los colores predeterminados abriendo elscss/ionic.app.scss file y luego escribiendo el siguiente código antes de esta línea: @import "www/lib/ionic/scss/ionic";

Cambiaremos el color equilibrado a azul oscuro y el color energizado a naranja. Los dos párrafos que usamos anteriormente son ahora azul oscuro y naranja.

$balanced: #000066 !default;
$energized: #FFA500 !default;

Ahora, si usa el siguiente ejemplo:

<p class = "balanced">Paragraph 1...</p>
<p class = "energized">Paragraph 2...</p>

El código anterior producirá la siguiente pantalla:

Todos los elementos iónicos que utilizan estas clases cambiarán a azul oscuro y naranja. Tenga en cuenta que no es necesario utilizar las clases de color predeterminadas de Ionic. Siempre puede diseñar los elementos de la manera que desee.

Nota IMPORTANTE

los www/css/style.cssEl archivo se eliminará del encabezado del index.html después de instalar SASS. Deberá vincularlo manualmente si aún desea usarlo. Abra index.html y luego agregue el siguiente código dentro del encabezado.

<link href = "css/style.css" rel = "stylesheet">