Same filename and directory in other branches
  1. 8.x-2.x templates/color-field-formatter-swatch.html.twig 1 comment

Default theme implementation of a color swatch formatter.

Available variables:

  • color: The color background.
  • width: The width of the color swatch.
  • height: The height of the color swatch.
  • shape: The shape of the color swatch.

See also

template_preprocess()

template_preprocess_color_field_formatter_swatch()

1 theme call to color-field-formatter-swatch.html.twig
ColorFieldFormatterSwatch::viewElements in src/Plugin/Field/FieldFormatter/ColorFieldFormatterSwatch.php

File

templates/color-field-formatter-swatch.html.twig

View source 
  1. {#

  2. /**

  3.  * @file

  4.  * Default theme implementation of a color swatch formatter.

  5.  *

  6.  * Available variables:

  7.  * - color: The color background.

  8.  * - width: The width of the color swatch.

  9.  * - height: The height of the color swatch.

  10.  * - shape: The shape of the color swatch.

  11.  *

  12.  * @see template_preprocess()

  13.  * @see template_preprocess_color_field_formatter_swatch()

  14.  *

  15.  * @ingroup themeable

  16.  */

  17. #}

  18. 

  19. {% if shape == 'triangle' %}

  20. <div {{ attributes }} style="border-top: {{ width }} solid {{ color }}; border-right: {{ height }} solid transparent;"></div>

  21. {% else %}

  22. <div  {{ attributes }} style="background-color: {{ color }}; width: {{ width }}; height: {{ height }};"></div>

  23. {% endif %}