Group Static

There are no notes for this item.

<!-- 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">
        <p>Rood</p>

    </div>

</div>
<!-- Static Editbutton -->
<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">
        <p>Rood</p>

        <button type="button" class="btn btn-link"><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">
        <p>Rood</p>

    </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">
        <p>Rood</p>

    </div>

    <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" - BINNENKORT DEPRECATED</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="form-group dso-static">
  <div class="dso-label-container">
    <span class="control-label">{{ label }}</span>
    {% if infoText %}
      {% render '@info-button', {infoOpen: infoOpen, infoButtonLabel: infoButtonLabel} %}
    {% endif %}
    {% if infoOpen %}
      {% render '@info', {infoText: infoText} %}
    {% endif %}
  </div>
  <div class="dso-field-container">
    <p>{{ value }}</p>
    {% if edit %}
      {% render '@button', {type: 'button', modifier: 'link', label: 'Link button', icon: 'pencil', iconOnly: 'true'} %}
    {% endif %}
  </div>
  {% if infoOpen %}
    {% render '@info', {infoText: infoTextDeprecated} %}
  {% endif %}
</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: Rood
__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: Static infobutton uitgeklapt
label: Kleur van object
value: Rood
__explanation: false
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>
infoTextDeprecated: |
  <h4>Toelichting bij vraag: "Kleur van object" - BINNENKORT DEPRECATED</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>