DIA Frontend

Select 

<div class="form-group">
    <label class="d-block">Name:</label>
    <select class="custom-select">
        <option selected>
            Open this select menu
        </option>
        <option value="1">
            Option One
        </option>
        <option value="2">
            Option Two
        </option>
    </select>
</div>
 
{% set CType = 'select' %}

{% set attributes = [] %}

{% if required %}
    {% set attributes = attributes|merge([' required']) %}
{% endif %}

{% block main %}
    <div class="form-group">
        {% if name %}
            <label class="d-block">{{ name }}</label>
        {% endif %}
        <select class="custom-select" {{ attributes }}>
            <option selected>
                Open this select menu
            </option>
            {% for value in values %}
                <option value="{{ loop.index }}">
                    {{ value }}
                </option>
            {% endfor %}
        </select>
    </div>
{% endblock %}
 
{
  "name": "Name:",
  "required": false,
  "values": [
    "Option One",
    "Option Two"
  ]
}
  • Content: 
    import $ from "jquery";
import 'select2';

// TODO: change from select2 to Choices (https://github.com/jshjohnson/Choices)

$(() => {
  $('select').select2({
    theme: 'bootstrap4',
    minimumResultsForSearch: Infinity
  });
});
  • URL: /components/raw/atom-select/script.js
  • Filesystem Path: ../template/components/01-atoms/select/script.js
  • Size: 231 Bytes

No notes defined.