Dropdown
Dropdown is used to create blocks of content in which there may be, for example, links, menu, or information.
DropdownBosons
Id
Id reference.
type:
stringdefault:
dropdownPlacement
The position of the dropdown.
type:
stringdefault:
bottomOffset
Offset size.
type:
stringdefault:
10Examples
Basic example
Some content
Reference id
The dropdown activation button should always contain the 'data-x-ref' attribute. The default dropdown ID value is 'dropdown'.
1// Basic example
2
3@protons.Floating(&protons.FloatingBosons{Type: "dropdown"}) {
4 @atoms.Button(
5 &atoms.ButtonBosons{
6 Size: "md",
7 Title: "Button",
8 Attrs: hanariu.Attrs{
9 "data-x-bind": "{ 'data-x-on:click'() { open = ! open } }",
10 "data-x-ref": "dropdown",
11 },
12 },
13 )
14 @atoms.Dropdown(
15 &atoms.DropdownBosons{}) {
16 <div class="p-1 mt-1 w-56 h-56 flex justify-center items-center dark:text-primary-100">
17 Some content
18 </div>
19 }
20}Example with options
Some content
1// Example with id reference, placement and custom offset
2
3@protons.Floating(&protons.FloatingBosons{Type: "dropdown"}) {
4 @atoms.Button(
5 &atoms.ButtonBosons{
6 Size: "md",
7 Title: "Button",
8 Attrs: hanariu.Attrs{
9 "data-x-bind": "{ 'data-x-on:click'() { open = ! open } }",
10 "data-x-ref": "someitem",
11 },
12 },
13 )
14 @atoms.Dropdown(&atoms.DropdownBosons{
15 Id: "someitem",
16 Placement: "right",
17 Offset: "20",
18 }) {
19 <div class="p-1 mt-1 w-56 h-56 flex justify-center items-center dark:text-primary-100">
20 Some content
21 </div>
22 }
23}