DSO Toolkit | Component Library

Group Static 

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


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


<!-- Static Infobutton -->
<div class="form-group dso-static">
    <div class="dso-label-container">
        <label class="control-label">Kleur van object</label>
        <button type="button" class="btn dso-info-button">
            <span class="sr-only">
                Toelichting
            </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">
        <label class="control-label">Kleur van object</label>
        <button type="button" class="btn dso-info-button dso-open">
            <span class="sr-only">
                Toelichting
            </span>
        </button>
    </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>Heading 4</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">
    <label class="control-label">{{ label }}</label>
    {{#if infoText }}
      {{> '@info-button' }}
    {{/if}}
  </div>
  <div class="dso-field-container">
    <p>{{ value }}</p>
  </div>
  {{#if infoOpen }}
    {{> '@info' }}
  {{/if}}
</div>
 
/* Default */
label: Kleur van object
value: Rood



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



/* Static Infobutton */
label: Kleur van object
value: Rood
__title: Static infobutton
infoOpen: null
infoText: |
  Closed



/* Static Infobutton Open */
label: Kleur van object
value: Rood
__title: Static infobutton uitgeklapt
infoOpen: true
infoText: |
  <h4>Heading 4</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>

There are no notes for this item.