komponentit.dropdown — metosin/komponentit 0.3.11

->menu-item cljs

(->menu-item open?
             {:keys [on-change close-on-click? disabled active-item-class
                     separator-class menu-item-class menu-item-a-class]
              :or {active-item-class "dropdown-menu__item--active"
                   separator-class "divider"}
              :as dropdown-opts}
             {:keys [el link-el props link-props separator key text value href
                     on-click]
              :or {el :li link-el :a}
              :as item-opts})

• :key React key
• :value (Optional) Current value
• :href (Optional) A href
• :on-click (Optional) callback
• :el (Default: :li)
• :link-el (Default: :a)
• :props (Optional) React props to dropdown list item element
• :link-props (Optional) React props to dropdown item element
• :text Text

caret' cljs

(caret' open?
        {:keys [caret? caret-class caret-up-class]
         :or {caret-class "caret" caret-up-class "caret"}})

dropdown cljs

(dropdown _)

• :text Text for dropdown toggle element.
• :content Used to pass in dropdown elements as collection of item-maps.
• :children (replaces :content) Used to pass in dropdown elements as Reagent hiccup form. Most of other options do not work with this option.
• :on-change (Optional, supported by content) Called with item-map when dropdown item is selected.
• :value (Optional, supported by content) Current value, marks list item with equivalent value as active.
• :close-on-click? (Default true) Close dropdown when any item is selected.
• :caret? (Default true) Whether to automatically append caret to text.

HTML elements:

• :container-el (Default :div) The element used to contain toggle element and dropdown list.
• :el (Default :a) The toggle element type.

CSS classes:

• :container-class (Default "dropdown-container")
• :open-class (Default "open")
• :dropdown-class (Default "dropdown-menu")
• :caret-class (Default "caret")
• :caret-up-class (Default "caret")
• :separator-class (Default "divider")
• :menu-item-class (Default "dropdown-menu__item")
• :menu-item-a-class (Default `"dropdown-menu__link")
• :active-item-class (Default "dropdown-menu__item--active")

Props:

Any other React props can be passed to the created elements:

• :toggle-props
• :container-props
• (Item option) :props
• (Item option) :link-props

dropdown' cljs

(dropdown' open?
           ref
           dropdown
           {:keys [el container-el text open-class toggle-class class
                   toggle-props container-class button-class li-class a-class]
            :or {el :a
                 container-el :div
                 toggle-class "dropdown-toggle"
                 open-class "open"
                 container-class "dropdown-container"}
            :as props})

dropdown-a cljs

(dropdown-a opts)

dropdown-button cljs

(dropdown-button opts)

dropdown-li cljs

(dropdown-li opts)

toggle cljs

(toggle open? e)