Buttons | CMA ACADÉMIE

General

Label

Nom système

Description

Help text

Category

Gabarit

Type

URL

Gabarit

HTML/SVG file URL or path

HTML/SVG markup template (Twig)

<div class="webform-custom-options-buttons">
{% for value, text in options %}
  <div class="webform-custom-options-button" data-option-value="{{ value }}" style="text-align:center">
  {{ text }}
  {% if descriptions[value] %}<div class="description">{{ descriptions[value] }}</div>{% endif %}
  </div>
{% endfor %}
</div>

Aide à l'utilisation de Twig

En savoir plus sur Twig et comment il est utilisé dans Drupal.

Les variables suivantes sont disponibles :

{{ type }}
{{ title }}
{{ description }}
{{ help }}
{{ options }}
{{ options_custom }}
{{ descriptions }}
{{ default_value }}
{{ multiple }}
{{ attributes }}
{{ empty_option }}
{{ empty_value }}

You can debug data using the webform_debug() function.

{{ webform_debug(data) }}

Option value attribute names

Option text attribute names

Allow SVG option elements to be filled using CSS

Enable SVG panning and zooming

CSS/JS

CSS personnalisée

.webform-custom-options-buttons {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px;
}

.webform-custom-options-button {
  flex: 1;
  display: table-cell;
  margin: 0 5px 10px 5px;
  border: 3px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
  padding: 10px;
  vertical-align: middle;
  text-align: center;
  color: #666;
}

.webform-custom-options-button .description {
  font-size: .8em;
}

.webform-custom-options-button[data-option-value]:hover {
  border-color: #999;
  color: #333;
}

.webform-custom-options-button[data-option-value]:focus {
  border-color: #999;
  color: #333;
}

.webform-custom-options-button[data-option-value][aria-checked=true] {
  border-color: #0074bd;
  color: #000;
}

.webform-custom-options-button[data-option-value][aria-checked=true]:focus {
  box-shadow: 0 0 5px #0074bd;
}

.webform-custom-options-button[data-option-value][aria-disabled=true],
.webform-custom-options-button[data-option-value][aria-disabled=true]:hover,
.webform-custom-options-button[data-option-value][aria-disabled=true]:focus {
  cursor: not-allowed;
  border-color: #ccc;
  color: #999;
}

@media (max-width: 600px) {
  .webform-custom-options-buttons {
    display: block;
    margin: 0;
  }

  .webform-custom-options-button {
    display: block;
    margin: 5px 0;
  }
}

JavaScript personnalisé

Articles