<!-- 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: 956 Bytes

There are no notes for this item.