DSO Toolkit | Component Library

Dialog: Default 

<div class="dso-modal" tabindex="-1" role="dialog" aria-labelledby="modal-dialog">
    <div class="dso-dialog" role="document">
        <div class="dso-header">
            <h2 id="modal-dialog">Modal dialoog</h2>
            <button type="button" class="dso-close" aria-label="Sluiten"></button>
        </div>
        <div class="dso-body">
            <p>Inhoud</p>

        </div>
        <div class="dso-footer">
            <button type="button" class="btn btn-primary">
                <span>OK</span>
            </button>

        </div>
    </div>
</div>
 
{{#dialog dialog }}
  <p>{{ body }}</p>
{{/dialog}}
 
body: Inhoud
dialog:
  id: modal-dialog
  heading: Modal dialoog
  buttons:
    - name: confirmButton
      type: button
      modifier: primary
      label: OK
  • 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.