paletas

El motor de temas de Ignite UI for Angular proporciona varias funciones y mezclas potentes para generar y recuperar colores.

Descripción general

Las paletas en el contexto de Ignite UI for Angular se declaran como mapas Sass y las claves de esos mapas son los colores de la paleta (primary, secondary, surface, etc.). Cada color es a su vez un mapa en sí mismo y tiene todas las variantes de color enumeradas como claves. Los valores asignados a esas variantes de color son los colores reales utilizados en todos los temas de componentes. Todos los mapas de paleta son generados mediante programación por la función de paleta. La función acepta argumentos para primary,,, surface​ ​gray, info, success,, warn, y error​ ​secondary colores. El primary color suele ser el color de tu marca. Se utiliza principalmente para diseñar elementos estáticos, como el igx-navbar componente. El secondary color es el que se utiliza en los elementos que se pueden accionar, como botones, interruptores, controles deslizantes, etc. El surface color es el que se utiliza para el color de fondo de algunos componentes, como tarjetas, menús, selectores de fecha / hora, hojas de banners, etc. Los únicos argumentos necesarios son los unos para,y primary​ ​secondary​ ​surface colores. De forma predeterminada, los colores para surface, gray, info, success, warn, y error a un conjunto predefinido de nuestra elección.

Para empezar con tu primera paleta de colores, crea un archivo scss que sería el archivo base de tu tema global. Yo llamaré a la mía_variables.scss.

// _variables.scss

$melon-palette: palette(
    $primary: #2ab759,
    $secondary: #f96a88,
    $surface: #e5e5e5
);
scss

El valor que pase a $primary y surface / $secondary o cualquier otro color debe ser de tipo color. No puede pasar variables CSS como argumentos, ya que no se pueden resolver en tiempo de compilación de Sass.

Creamos una paleta que contiene variantes para todos los colores, incluidos los colores de contraste de texto creados automáticamente para cada variante. Si no ha consultado la documentación sobre paletas con variables CSS, consúltela ahora. Contiene información sobre todas las variantes de color de una paleta.

La función palette hace mucho internamente para ayudarlo a crear colores en el momento de la compilación que puede reutilizar en sus documentos.scss. La función es buena porque creará un enorme mapa de colores para usted, pero el algoritmo para generar las variantes de color es muy obstinado y puede no satisfacer sus necesidades exactas. A nuestros temas componentes no les importa cómo se genera la paleta, solo les importa la forma del mapa.

En caso de que desee crear su paleta manualmente o crear la función de generación de paleta usted mismo, esto es lo que esperamos obtener como mapa de paleta.

$handmade-palette: (
    'primary': (
        '50': #e6eff8,
        '50-contrast': black,
        '100': #bfd7f2,
        '100-contrast': black,
        '200': #98bfec,
        '200-contrast': black,
        '300': #85b5e9,
        '300-contrast': white,
        '400': #73a6e4,
        '400-contrast': white,
        '500': #6797de,
        '500-contrast': white,
        '600': #3681dd,
        '600-contrast': white,
        '700': #357fda,
        '700-contrast': white,
        '800': #306dc8,
        '800-contrast': white,
        '900': #284ea8,
        '900-contrast': white,
        'A100': #98bfec,
        'A100-contrast': white,
        'A200': #73a6e4,
        'A200-contrast': white,
        'A400': #3681dd,
        'A400-contrast': white,
        'A700': #284ea8,
        'A700-contrast': white
    ),
    'secondary': (
        '50': #fef7e2,
        '50-contrast': black,
        '100': #fdeab7,
        '100-contrast': black,
        '200': #fbdd89,
        '200-contrast': black,
        '300': #fad15c,
        '300-contrast': black,
        '400': #f9c63f,
        '400-contrast': black,
        '500': #f7bd32,
        '500-contrast': white,
        '600': #f6b02d,
        '600-contrast': white,
        '700': #f49e2a,
        '700-contrast': white,
        '800': #f38e28,
        '800-contrast': white,
        '900': #f38e28,
        '900-contrast': white,
        'A100': #fbdd89,
        'A100-contrast': black,
        'A200': #f9c63f,
        'A200-contrast': black,
        'A400': #f6b02d,
        'A400-contrast': white,
        'A700': #f38e28,
        'A700-contrast': white
    ),
    'gray': (
        '50': #fff,
        '50-contrast': black,
        '100': #fafafa,
        '100-contrast': black,
        '200': #f5f5f5,
        '200-contrast': black,
        '300': #f0f0f0,
        '300-contrast': black,
        '400': #dedede,
        '400-contrast': black,
        '500': #b3b2b2,
        '500-contrast': black,
        '600': #979696,
        '600-contrast': white,
        '700': #7b7a7a,
        '700-contrast': white,
        '800': #404040,
        '800-contrast': white,
        '900': #1a1a1a,
        '900-contrast': white
    ),
    'info': (
        '500': rgb(18, 118, 211),
        '500-contrast': black
    ),
    'success': (
        '500': rgb(76, 184, 96),
        '500-contrast': black
    ),
    'warn': (
        '500': rgb(251, 178, 60),
        '500-contrast': black
    ),
    'error': (
        '500': rgb(255, 20, 75),
        '500-contrast': black
    ),
    'surface': (
        '500': rgb(255, 255, 255),
        '500-contrast': black
    )
);

scss

Es importante establecer las claves de mapa como cadenas, explícitamente entre comillas - 'primary', 'secondary', 'gray', etc. Lo mismo se aplica a todas las variantes de color -500, 500-contrast, etc.

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Predefined Palettes

Proporcionamos paletas claras y oscuras predefinidas, que puede usar junto con nuestros esquemas para crear temas para sus componentes:

• Paletas de luz
  • $light-material-palette
  • $light-fluent-excel-palette
  • $light-fluent-word-palette
  • $light-fluent-palette
  • $light-bootstrap-palette
  • $light-indigo-palette
• Paletas oscuras
  • $dark-material-palette
  • $dark-fluent-excel-palette
  • $dark-fluent-word-palette
  • $dark-fluent-palette
  • $dark-bootstrap-palette
  • $dark-indigo-palette

Puede mezclar y combinar todas las paletas claras con un esquema claro de su elección y viceversa: todas las paletas oscuras con un esquema oscuro que crea que se adaptará mejor a sus necesidades y visión.

Grayscale Colors

De manera similar a los primary colores, secondary​ ​surface puede proporcionar otro color a la palette función que se utilizará para generar tonos de gris. El color por defecto que se utiliza para generar la gray paleta en todos los temas de luz es #000, o mejor conocido como black. Las gray variantes de color se utilizan principalmente para establecer los colores del texto en los componentes. Modificar el valor es útil cuando se cambian los colores de fondo o de superficie de la aplicación. Por ejemplo, si la aplicación usa un fondo de superficie más oscuro, establecer el gray color en white es sensato y obligará a que todos los colores del texto se basen en tonos de white.

Para generar una paleta que utilice white para sus tonos grises:

// Import the Ignite UI themes library first
$company-color: #2ab759; /* Some green shade I like */
$secondary-color: #f96a88; /* Watermelon pink */
$surface-color: #e5e5e5 /* Light gray for backgrounds/ */
$grayscale-base: #fff; /* Used to generate shades of gray */

$my-color-palette: palette(
    $primary: $company-color,
    $secondary: $secondary-color,
    $surface: $surface-color,
    $gray: $grayscale-base
);
scss

Colors Variants

Proporcionamos una función que es fácil de recordar y usar. color Puede tomar hasta cuatro argumentos -palette, color,y variant​ ​opacity;

// Get the primary color as CSS variable reference to the 500 color variant
$my-primary-500: color();

// Get the primary color as CSS variable reference to the 600 color variant
$my-primary-600: color($variant: 600);

// Get the primary color as CSS variable reference to the 600 color variant with .5 opacity
$my-primary-600-opacity: color($variant: 600, $opacity: .5);

// Get the secondary A700 color variant as a HEX value from $my-palette
$my-primary-A700: color($my-palette, 'secondary', 'A700');

// Get the warn 500 color variant as HEX value from $my-palette
$my-warning-color: color($my-palette, 'warn');



.my-awesome-class {
    background: $my-primary-600;
    border-color: $my-primary-A700;
}

.warning-bg {
    background: $my-warning-color;
}
scss

Si omite el argumento $palette, obtendrá una cadena que hace referencia a la variante de variable CSS correspondiente. Si no proporciona $color y/o $variant, se asignarán a primary y 500 respectivamente.

Contrast Text Colors

De manera similar a cómo recuperamos variantes de color, hay una manera de obtener el color de texto de contraste para cada una de las variantes de color en la paleta con la función contrast-color, acepta el mismo tipo y número de argumentos que la color función.

$my-primary-800: color($my-palette, 'primary', 600);
$my-primary-800-text: contrast-color($my-palette, 'primary', 600);

// sample usage
.my-awesome-article {
    color: $my-primary-800-text;
    background: $my-primary-800;
}
scss

Color Classes

Entendemos que algunas personas prefieren usar clases CSS para aplicar colores a elementos web, ya sea texto o fondo. Tenemos un mixin que te permite generar clases CSS para cada color de la paleta.

El mixin toma algunos argumentos que le permiten controlar el nombre de la clase CSS así como la propiedad CSS a la que pasarle el color de la paleta;

• $prop: la propiedad CSS a la que asignar el color.
• $prefix: una cadena de prefijo que se adjuntará al nombre de la clase generada. El valor predeterminado es 'igx'.
• $suffix: una cadena de sufijo que se adjuntará al nombre de la clase generada.
• $palette: la paleta a utilizar.

Por ejemplo, si desea generar clases CSS que apliquen color de fondo a los elementos, puede hacer lo siguiente:

@include color-classes(
    $prop: 'background-color',
    $prefix: 'bg'
);
scss

El código anterior generará clases CSS para cada variante de color en la paleta. Por ejemplo, a la variante de 500 colores de la paleta primary se le asignará la siguiente clase.bg-primary-500;

<div class="bg-primary-500">...</div>
html

CSS Variables

Al leer sobre la paleta de colores en la sección Variables CSS de la documentación, habrás notado que todos los colores de la paleta se incluyen como variables CSS. Hacemos esto internamente cada vez que generamos un tema usando el mixin theme. El theme llama a otro mixin en su palette corporal. Toma una paleta y convierte los colores que contiene en variables CSS.

Utilice este mixin cuando desee que los colores de su paleta personalizada se incluyan como variables CSS.

He aquí un ejemplo:

$my-palette: palette(
  $primary: #2ab759,
  $secondary: #f96a88,
  $surface: #e5e5e5
);

@include palette($my-palette);
scss

API Reference

• paletas
• Obtener colores de paleta
• Obtener colores de contraste
• Generando clases de color
• esquemas

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub