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

Une image vaut quelques mots

Coucou ?

Coucou gris

Le Coucou gris (Cuculus canorus) est une espèce d'oiseaux de la famille des cuculidés. Il doit son nom vernaculaire à son chant. Son comportement est caractérisé par la pratique du parasitisme de couvée1. Insectivore, il est de la taille d'un Faucon crécerelle ou d'un Épervier d'Europe.

Grand géocoucou

Le Grand Géocoucou, parfois aussi appelé Géocoucou de Californie (Geococcyx californianus), est une espèce d'oiseaux coureurs nord-américains de la famille des cuculidés qui compte, entre autres, les coucous.

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

= render Modals::ModalComponent.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 Modals::RowWithChevronComponent.new(title: "Afficher plus de coucou", trigger: "modal2") do |component|
      = component.with_icon
        = vite_image_tag("images/ecppp/societaire/societaire.svg")
    = render Modals::RowWithChevronComponent.new(title: "Afficher directement encore plus de coucou", trigger: "modal3")

= render Modals::ModalComponent.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 Modals::ModalComponent.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 Modals::ModalComponent.new(modal_title: "Une image vaut quelques mots", trigger_name: "modal_illustree") do
  p
    ' Coucou ?
  = render IllustratedBlockComponent.new do |component|
    = component.with_illustration do
      = vite_image_tag("images/story_book/image-150.png")
    = component.with_block do
      strong = link_to("Coucou gris", "https://fr.wikipedia.org/wiki/Coucou_gris")
      p
        ' Le Coucou gris (Cuculus canorus) est une espèce d'oiseaux de la famille des cuculidés. Il doit son nom
        ' vernaculaire à son chant. Son comportement est caractérisé par la pratique du parasitisme de couvée1.
        ' Insectivore, il est de la taille d'un Faucon crécerelle ou d'un Épervier d'Europe.

  = render IllustratedBlockComponent.new do |component|
    = component.with_illustration do
      = vite_image_tag("images/story_book/image-150.png")
    = component.with_block do
      strong = link_to("Grand géocoucou", "https://fr.wikipedia.org/wiki/Grand_G%C3%A9ocoucou")
      p
        ' Le Grand Géocoucou, parfois aussi appelé Géocoucou de Californie (Geococcyx californianus), est une espèce
        ' d'oiseaux coureurs nord-américains de la famille des cuculidés qui compte, entre autres, les coucous.