DSO Toolkit | Component Library

Dialog: Valid 

<div class="dso-modal" tabindex="-1" role="dialog" aria-labelledby="modal-dialog-valid-example">
    <div class="dso-dialog" role="document">
        <div class="dso-header">
            <h2 id="modal-dialog-valid-example">Uitloggen</h2>
            <button type="button" class="dso-close" aria-label="Sluiten"></button>
        </div>
        <div class="dso-body">
            <p>Weet u zeker dat u wilt uitloggen? Opgeslagen gegevens zijn terug te vinden in Mijn Omgevingsloket</p>

        </div>
        <div class="dso-footer">
            <button type="button" class="btn btn-primary">
                <span>Ja</span>
            </button>
            <button type="button" class="btn btn-link">
                <span>Nee</span>
            </button>

        </div>
    </div>
</div>
 
{{#dialog dialog }}
  <p>{{ body }}</p>
{{/dialog}}
 
body: >-
  Weet u zeker dat u wilt uitloggen? Opgeslagen gegevens zijn terug te vinden in
  Mijn Omgevingsloket
dialog:
  id: modal-dialog-valid-example
  heading: Uitloggen
  buttons:
    - name: confirmButton
      type: button
      modifier: primary
      label: Ja
    - name: cancelButton
      type: button
      modifier: link
      label: Nee
  • 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.