You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

94 lines
2.2 KiB

uuid: 0447d3d2-1534-4c19-847e-6400353cc869
langcode: en
status: true
dependencies: { }
_core:
default_config_hash: TABA4k7qc_23n1AToUmJbQSNlXry5Me_aUE855mV2pw
id: buttons
label: Buttons
description: 'An example of custom buttons.'
help: ''
category: Buttons
type: template
template: |
<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>
url: ''
css: |
.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: ''
options: '{ }'
value_attributes: ''
text_attributes: ''
fill: false
zoom: false
tooltip: false
show_select: false
element: true
entity_reference: false