Modal

Old modals

a.btn-primary href="#" data-micromodal-trigger="modal-modale_form"
  | Afficher la modale avec formulaire

= modal( \
  name: "modale_form",
        title: "Titre de la modale",
        form_url: "example",
        form_method: :get,
        open_at_page_load: false) do |form|
  p Contenu de la modale
  = form.button "Valider", class: "btn-primary btn-small"

a.btn-primary.ml-3 href="#" data-micromodal-trigger="modal-nom_modale"
  | Afficher la modale

= modal( \
  name: "nom_modale",
  title: "Titre de la modale",
  form_url: "#",
  form_method: :get,
  open_at_page_load: false)
  p Contenu de la modale sans formulaire

New modals

Première modale

Coucou 1 Un peu de lorem pour tester le scroll intra modale

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet rutrum sapien. Nam vitae convallis arcu. Cras id dui semper, malesuada lacus nec, eleifend orci. Aenean eu ligula et nunc pretium aliquam eu euismod ex. Curabitur felis lacus, auctor vitae tincidunt vitae, tincidunt vel justo. Integer vitae nibh blandit, faucibus dui a, fringilla massa. Suspendisse faucibus turpis quis diam gravida ultricies. Nulla placerat, mauris vel feugiat vestibulum, velit enim efficitur felis, at gravida lacus orci ac lorem. Donec eget feugiat odio. Sed at leo felis. In sapien felis, auctor quis ex nec, pellentesque luctus lectus. Phasellus ultricies fringilla dui, non sollicitudin odio faucibus eget. Pellentesque vestibulum dictum mauris sodales molestie. Nulla hendrerit mauris non scelerisque aliquam. Aenean id erat orci.

Afficher plus de coucou

Afficher directement encore plus de coucou

.alert-info.flex.no-margin-top data-trigger-modal="modal1"
  ' Afficher les modales imbriquées

= render UI::Modals::Component.new(modal_title: "Première modale", trigger_name: "modal1", modifier: "with-links") do
  .hello
    ' Coucou 1
    strong
      ' Un peu de lorem pour tester le scroll intra modale
    p
      ' Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet rutrum sapien. Nam vitae convallis arcu.
      ' Cras id dui semper, malesuada lacus nec, eleifend orci. Aenean eu ligula et nunc pretium aliquam eu euismod ex.
      ' Curabitur felis lacus, auctor vitae tincidunt vitae, tincidunt vel justo. Integer vitae nibh blandit, faucibus
      ' dui a, fringilla massa. Suspendisse faucibus turpis quis diam gravida ultricies. Nulla placerat, mauris vel
      ' feugiat vestibulum, velit enim efficitur felis, at gravida lacus orci ac lorem. Donec eget feugiat odio.
      ' Sed at leo felis. In sapien felis, auctor quis ex nec, pellentesque luctus lectus. Phasellus ultricies fringilla
      ' dui, non sollicitudin odio faucibus eget. Pellentesque vestibulum dictum mauris sodales molestie.
      ' Nulla hendrerit mauris non scelerisque aliquam. Aenean id erat orci.

    = render UI::Modals::RowWithChevron::Component.new(title: "Afficher plus de coucou", trigger: "modal2") do |component|
      = component.with_icon
        = vite_image_tag("images/ecppp/societaire/societaire.svg")
    = render UI::Modals::RowWithChevron::Component.new(title: "Afficher directement encore plus de coucou", trigger: "modal3")

= render UI::Modals::Component.new(modal_title: "un autre titre", trigger_name: "modal2") do
  .hello
    ' Coucou 2
    .alert-info.flex.no-margin-top data-trigger-modal="modal3"
      ' Afficher encore plus de coucou

= render UI::Modals::Component.new(modal_title: "Et un 3e titre", trigger_name: "modal3") do
  .hello
    ' Coucou 3
  a.btn-secondary href="#" data-action="click->modal-component#closeAll"
    ' ça suffit les coucous

.alert-info.flex.no-margin-top data-trigger-modal="modal_illustree"
  ' Afficher une modale à blocks illustrés

= render UI::Modals::Component.new(modal_title: "Une image vaut quelques mots", trigger_name: "modal_illustree") do
  p
    ' Coucou ?