DSO Toolkit | Component Library

Dialog: Invalid 

<!-- DO NOT USE MARKUP BELOW IN PRODUCTION -->
<div class="dso-modal" tabindex="-1" role="dialog" aria-labelledby="modal-dialog-invalid-example">
    <div class="dso-dialog" role="document">
        <div class="dso-header">
            <h2 id="modal-dialog-invalid-example">Activiteit toevoegen</h2>
            <button type="button" class="dso-close" aria-label="Sluiten"></button>
        </div>
        <div class="dso-body">
            <fieldset class="form-group dso-checkboxes">
                <legend class="dso-label-container">
                    <label class="control-label">
                        Alle activiteiten
                    </label>
                </legend>
                <div class="dso-field-container">
                    <div class="dso-selectable">
                        <input type="checkbox" id="alle-activiteiten-0" name="alle-activiteiten" value="bouwactiviteit-vergunning" />
                        <label for="alle-activiteiten-0">
                            Bouwactiviteit - Vergunning
                        </label>
                    </div>
                    <div class="dso-selectable">
                        <input type="checkbox" id="alle-activiteiten-1" name="alle-activiteiten" value="brug-aanleggen-delfland-vergunning" />
                        <label for="alle-activiteiten-1">
                            Brug aanleggen Delfland - Vergunning
                        </label>
                    </div>
                    <div class="dso-selectable">
                        <input type="checkbox" id="alle-activiteiten-2" name="alle-activiteiten" value="sloopactiviteiten-informatie-overig" />
                        <label for="alle-activiteiten-2">
                            Sloopactiviteiten - Informatie overig
                        </label>
                    </div>
                    <div class="dso-selectable">
                        <input type="checkbox" id="alle-activiteiten-3" name="alle-activiteiten" value="sloopactiviteiten-melding" />
                        <label for="alle-activiteiten-3">
                            Sloopactiviteiten - Melding
                        </label>
                    </div>
                </div>
            </fieldset>

        </div>
        <div class="dso-footer">
            <button type="button" class="btn btn-primary">
                <span>Toevoegen</span>
            </button>
            <button type="button" class="btn btn-link">
                <svg class="di di-times">
                    <use href="/dso-icons.svg#times" />
                </svg><span>Annuleren</span>
            </button>

        </div>
    </div>
</div>
 
<!-- DO NOT USE MARKUP BELOW IN PRODUCTION -->
{{#dialog dialog }}
  {{render '@group-checkboxes' form }}
{{/dialog}}
 
body: Inhoud
dialog:
  id: modal-dialog-invalid-example
  heading: Activiteit toevoegen
  buttons:
    - name: confirmButton
      type: button
      modifier: primary
      label: Toevoegen
    - name: cancelButton
      type: button
      modifier: link
      icon: times
      label: Annuleren
form:
  id: alle-activiteiten
  inputType: checkboxes
  label: Alle activiteiten
  options:
    - value: bouwactiviteit-vergunning
      label: Bouwactiviteit - Vergunning
    - value: brug-aanleggen-delfland-vergunning
      label: Brug aanleggen Delfland - Vergunning
    - value: sloopactiviteiten-informatie-overig
      label: Sloopactiviteiten - Informatie overig
    - value: sloopactiviteiten-melding
      label: Sloopactiviteiten - Melding
  • Content: 
    // Notes:
// ------
// * Each change to this file needs a restart of the fractal instance
// * Exported methods are merged as helpers in fractal.js

module.exports = function (fractal) {
  return {
    dialog(context, options) {
      const { handlebars } = fractal.components.engine();

      var self = this;

      const html = (
`<div class="${['dso-modal', context.confirm && 'dso-confirm'].filter(c => c).join(' ')}" tabindex="-1" role="dialog" aria-labelledby="${context.id}">
  <div class="dso-dialog" role="document">
    <div class="dso-header">
      <h2 id="${context.id}">${context.heading}</h2>
      <button type="button" class="dso-close" aria-label="Sluiten"></button>
    </div>
    <div class="dso-body">
      ${options.fn(self)}
    </div>
    <div class="dso-footer">
      ${(context.buttons || []).map(b => handlebars.compile(`{{> '@button' }}`)(b)).join('')}
    </div>
  </div>
</div>
`);

      return html.trim();
    }
  };
};
  • URL: /components/raw/dialog/dialog.js
  • Filesystem Path: components\02-content\_dialog\dialog.js
  • Size: 989 Bytes

There are no notes for this item.