Web Toolkit

image/svg+xml GitHub

Dialog 

<button class="Button Button--default js-fr-dialogmodal-open" aria-controls="modal">
  Apri
</button>

<div class="Dialog js-fr-dialogmodal" id="modal">
    <div class="
      Dialog-content
      Dialog-content--centered
      u-background-white
      u-layout-prose
      u-margin-all-xl
      u-padding-all-xl
      js-fr-dialogmodal-modal
    " aria-labelledby="modal-title">
        <div role="document" class="Prose">
            <h2 class="u-cf u-text-h2 u-borderHideFocus" id="modal-title" tabindex="0">A architecto qui et veritatis.</h2>
            <p>
                Illo voluptates debitis omnis necessitatibus quaerat. Pariatur architecto cumque. Delectus eius fuga. Sequi voluptatibus voluptatum nisi rem aut. Amet perferendis est vitae est facere consequatur officiis praesentium. Id quas ut reprehenderit provident
                porro qui odio delectus. Et odit atque doloribus alias aut facere pariatur. In corporis aspernatur aliquam et quibusdam id natus. Voluptatem eius aut vel vel aliquam sit. Voluptatem autem labore aut debitis rem quae delectus maxime consequuntur.
                Voluptate et labore ratione.
            </p>
            <button class="Button Button--danger js-fr-dialogmodal-close u-floatRight">Chiudi</button>
        </div>
    </div>
</div>
  • Content: 
    @import "fr-dialogmodal/dialogmodal.css";

/** @define Dialog; */

/* postcss-bem-linter: ignore */

.Dialog.fr-dialogmodal--is-ready[aria-hidden=false] {
  background-color: rgba(34, 34, 34, 0.8);
  box-shadow: 0 3.75em 0 0 rgba(34, 34, 34, 0.8);
  transition: background-color 0.15s ease-out;
}

.Dialog-content {
  max-height: 90%;
  overflow: auto;
}

.Dialog-content--centered {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-60%);
}
  • URL: /components/raw/dialog/index.css
  • Filesystem Path: src/components/dialog/index.css
  • Size: 481 Bytes
  • Content: 
    import Frdialogmodal from 'fr-dialogmodal/dialogmodal.js'

var dialog = Frdialogmodal({
  // String - Outer container selector, hook for JS init() method
  selector: '.js-fr-dialogmodal',

  // String - Modal selector, the element that represents the modal
  modalSelector: '.js-fr-dialogmodal-modal',

  // String - Selector for the open button
  openSelector: '.js-fr-dialogmodal-open',

  // String - Selector for the close button
  closeSelector: '.js-fr-dialogmodal-close',

  // Boolean - Switches the dialog role to alertdialog, only use this when representing an alert, error or warning
  isAlert: false,

  // String - Class name that will be added to the selector when the component has been initialised
  readyClass: 'fr-dialogmodal--is-ready',

  // String - Class name that will be added to the selector when the component is active
  activeClass: 'fr-dialogmodal--is-active'
})

export default { dialog, Frdialogmodal }
  • URL: /components/raw/dialog/index.js
  • Filesystem Path: src/components/dialog/index.js
  • Size: 934 Bytes

There are no notes for this item.