SurfaceBootstrap.DropDown (surface_bootstrap v0.2.5)

The dropdown component.

The @wrapper property changes the container wrapper for this component and is meant to be used to change which context the dropdown is used in.

The values for @wrapper are:

default -- Gives a <div class="dropdown">
btn_group -- Gives a <div class="btn-group"> (defaults to this automatically if split == true)
nav_item -- Gives a <li class="nav-item dropdown"> (to be used when rendering a dropdown in a NavBar)
raw -- Special case that gives a <div class="dropdown"> with inner container <div class="dropdown-menu"> to be used to create forms or text dropdowns that emits the content of the default slot.

To create forms or text dropdowns read more here:

Take special note on padding x and padding y to make form look good inside dropdown.

Properties

id :string, required: true - ID of dropdown, required to work.
label :string, required: true - Label of dropdown link/button.
wrapper :string, values: ~w(default btn_group nav_item raw), default: "default" - If prop split is set to true, wrapper type is automatically set to btn_group. .
direction :string, values: ~w(left right up) - Direction of dropper, will override dynamic positioning (as in if you dont define a dropdown will drop up if it would render outside page. Nil or not set equals dropping down as default behaviour. .
button :boolean, default: true - Show as button? Defaults true (is still anchor element) and is forced to true if @split = true.
color :string, values: @button_colors - The color of the button (ignored if button=false).
button_size :string, values: ~w(small normal large), default: "normal"
split :boolean - Show dropdown with a separate arrow to click on (split view)? Defaults false. If set to true will automatically set @wrapper = "btn_group" and @button = true. .
dark :boolean - Display a dark dropdown.
active :boolean - Show dropdown as active.