Static

Component preview

<!-- Default -->
<div class="form-group dso-static">
    <div class="dso-label-container">
        <span class="control-label">Kleur van object</span>

    </div>
    <div class="dso-field-container">
        Rood

    </div>
</div>

<!-- Static Editbutton -->
<div class="form-group dso-static dso-edit">
    <div class="dso-label-container">
        <span class="control-label">Kleur van object</span>

    </div>
    <div class="dso-field-container">
        <p>Het zichtbare spectrum is het gedeelte van het elektromagnetisch spectrum dat gezien kan worden door het menselijk oog.</p>
        <p>Elektromagnetische straling binnen dit spectrum wordt ook wel zichtbaar licht genoemd.</p>

        <button type="button" class="dso-tertiary"><span class="sr-only">Link button</span>
            <dso-icon icon="pencil"></dso-icon>
        </button>

    </div>
</div>

<!-- Static Infobutton -->
<div class="form-group dso-static">
    <div class="dso-label-container">
        <span class="control-label">Kleur van object</span>

        <button type="button" class="btn dso-info-button" aria-expanded="false">
            <span class="sr-only">Toelichting bij vraag</span>
        </button>

    </div>
    <div class="dso-field-container">
        Rood

    </div>
</div>

<!-- Static Infobutton Open -->
<div class="form-group dso-static">
    <div class="dso-label-container">
        <span class="control-label">Kleur van object</span>

        <button type="button" class="btn dso-info-button dso-open" aria-expanded="true">
            <span class="sr-only">Toelichting bij vraag</span>
        </button>

        <div class="dso-info">

            <button type="button">
                <span class="sr-only">Sluiten</span>
            </button>

            <div class="dso-rich-content">
                <h4>Toelichting bij vraag: "Kleur van object"</h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
                    Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
                    Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
                </p>

            </div>
        </div>

    </div>
    <div class="dso-field-container">
        Rood

    </div>
</div>

<!-- Static Static Info -->
<div class="form-group dso-static">
    <div class="dso-label-container">
        <span class="control-label">Kleur van object</span>

        <div class="dso-info" id="infoTextId_static-static-info">

            <div class="dso-rich-content">
                <h4>Toelichting bij vraag: "Kleur van object"</h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
                    Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
                    Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
                </p>

            </div>
        </div>

    </div>
    <div class="dso-field-container" aria-describedby="infoTextId_static-static-info">
        Rood

    </div>
</div>

{% set infoTextId = 'infoTextId_' + id %}

{% if infoText and static %}
  {% set ariaDescribedBy = ((ariaDescribedBy + ' ') if ariaDescribedBy) + infoTextId %}
{% endif %}

<div {{ className('form-group dso-static', [edit, 'dso-edit']) }}>
  <div class="dso-label-container">
    <span class="control-label">{{ label }}</span>
    {% if infoText and not static %}
      {% render '@info-button', {infoOpen: infoOpen, infoButtonLabel: infoButtonLabel} %}
    {% endif %}
    {% if infoOpen %}
      {% render '@info', {infoText: infoText, static: static, id: infoTextId} %}
    {% endif %}
  </div>
  <div class="dso-field-container"
    {{ attributes([ariaDescribedBy, 'aria-describedby', ariaDescribedBy]) }}
  >
    {{ value | safe }}
    {% if edit %}
      {% render '@button', {type: 'button', modifier: 'dso-tertiary', label: 'Link button', icon: 'pencil', iconOnly: 'true'} %}
    {% endif %}
  </div>
</div>

/* Default */
__title: static
label: Kleur van object
value: Rood
__explanation:
  - >-
    Een static input kan informatie tonen die van belang is in een formulier
    zonder dat er een keuze gemaakt dient te worden.

/* Static Editbutton */
__title: Static edit button
label: Kleur van object
value: >
  <p>Het zichtbare spectrum is het gedeelte van het elektromagnetisch spectrum
  dat gezien kan worden door het menselijk oog.</p><p>Elektromagnetische
  straling binnen dit spectrum wordt ook wel zichtbaar licht genoemd.</p>
__explanation: false
infoOpen: false
infoButtonLabel: Toelichting bij vraag
edit: true

/* Static Infobutton */
__title: Static infobutton
label: Kleur van object
value: Rood
__explanation: false
infoOpen: false
infoButtonLabel: Toelichting bij vraag
infoText: |
  Closed

/* Static Infobutton Open */
__title: Toelichting uitgeklapt
label: Kleur van object
value: Rood
__explanation:
  - Toelichting uitgeklapt door infobutton
infoOpen: true
infoButtonLabel: Toelichting bij vraag
infoText: |
  <h4>Toelichting bij vraag: "Kleur van object"</h4>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
    Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
    Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
  </p>

/* Static Static Info */
__title: Vaste toelichting
label: Kleur van object
value: Rood
__explanation:
  - >-
    Een static input kan informatie tonen die van belang is in een formulier
    zonder dat er een keuze gemaakt dient te worden.
id: static-static-info
infoOpen: true
infoText: |
  <h4>Toelichting bij vraag: "Kleur van object"</h4>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
    Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
    Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
  </p>
static: true