Dropdown

Dropdown single

Ce dropdown s'applique sur un lien (qui peut être stylé comme un select avec la classe .select). Il fonctionne en utilisant les classes .dropdown-trigger et .dropdown. Il dépend de 2 fichiers dropdown.sass et dropdown.js.

2018
201820192020
2018
201820192020
.row
  .col-xs-6
    label Dropdown
    .dropdown-trigger
      a.select.input-small[href="#"]
        | 2018
      .dropdown
        a href="#" class= 'active' 2018
        a href="#" 2019
        a href="#" 2020

  .col-xs-6
    label Dropdown "top"
    .dropdown-trigger
      a.select.input-small[href="#"]
        | 2018
      .dropdown.dropdown-top
        a href="#" class= 'active' 2018
        a href="#" 2019
        a href="#" 2020
John Doe
CompteFAQ
.row
  .col-xs-2
    .dropdown-trigger
      = link_to "#", class: "flex-align-center" do
        i.ph-user-circle-bold.account-icon
        .ml-1.mr-1 John Doe
        i.ph-caret-down-bold
      .dropdown.mt-1
        = link_to "Compte", "#"
        = link_to "FAQ", "#"

Dropdown avancé (Vanilla select box)

Pour les besoins plus complexes, comme les filtres de l'ECGCC, on utilise une librairie qui transforme les selects en une liste dans un dropdown avec plusieurs fonctionnalités : recherche, sélection multiple… Ces dropdowns dépendent des fichiers dropdown_advanced.js et dropdown_advanced.sass 

= form_with(method: :get) do |form|
  .row
    .col-xs-6
      = form.label "Dropdown non multiple "
      = form.collection_select :contact_id, StoryBookController::COMPONENTS, :first, :last,
              { selected: StoryBookController::COMPONENTS.first, include_blank: "Tous les contacts" },
              { multiple: false, "data-placeholder": "Tous les contacts", class: "js-select-box" }
    .col-xs-6
      = form.label "Dropdown avec fonctionnalité de recherche"
      = form.collection_select :contact_id, StoryBookController::COMPONENTS, :first, :last,
              { selected: StoryBookController::COMPONENTS.first, include_blank: "Tous les contacts" },
              { multiple: false, "data-search": "true", "data-placeholder": "Tous les contacts", class: "js-select-box" }
  .row
    .col-xs-6
      = form.label "Dropdown multiple avec un affichage max de 2 éléments"
      = form.collection_select :contact_id, StoryBookController::COMPONENTS, :first, :last,
              {},
              { multiple: true, size: 2, class: "js-select-box" }

    .col-xs-6
      = form.label "Dropdown mulitple sans select_all"
      = form.collection_select :contact_id, StoryBookController::COMPONENTS, :first, :last,
              {},
              { multiple: true, class: "js-select-box", "data-disable-select-all": true }

On a essayé de mettre en commun le css de la dropdown single avec celui de la librairie mais ce n'est pas évident car le html n'est pas construit pareil (il est plus complexe afin de gérer les différents cas de figure).

Pour utiliser ce type de dropdown, il faut ajouter la class js-select-box au select et ajouter les fonctionnalités souhaitées :

  • data-search: true pour activer la recherche
  • multiple: true / false pour activer / désactiver le choix multiple

si le choix multiple est activé

  • size: 2 pour transformer l'affichage en "n éléments" au lieu de la liste des éléments sélectionnés. (Pour tester sélectionner plusieurs éléments dans un select multiple avec une size définie)
  • data-disable-select-all": true pour supprimer la possibilité de tout sélectionner
Retour à l'index