OpenProject Lookbook

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!-- With caret -->
<details-toggle>
  <details data-target="details-toggle.detailsTarget" data-view-component="true" class="dropdown details-overlay details-reset">
    <summary aria_label_open="Close" aria_label_closed="Open" role="button" data-target="details-toggle.summaryTarget" data-action="click:details-toggle#toggle" data-aria-label-closed="Open" data-aria-label-open="Close" aria-label="Open" aria-expanded="false" data-view-component="true" class="btn">    Dropdown<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down ml-2 mr-n1">
        <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path>
      </svg>
    </summary>
    <div data-view-component="true">    <details-menu role="menu" data-view-component="true" class="dropdown-menu dropdown-menu-se">
        <a role="menuitem" data-view-component="true" class="dropdown-item">Item 1</a>
        <a role="menuitem" data-view-component="true" class="dropdown-item">Item 2</a>
        <a role="menuitem" data-view-component="true" class="dropdown-item">Item 3</a>
      </details-menu>
    </div>
  </details>
</details-toggle>
<!-- With header -->
<details-toggle>
  <details data-target="details-toggle.detailsTarget" data-view-component="true" class="dropdown details-overlay details-reset">
    <summary aria_label_open="Close" aria_label_closed="Open" role="button" data-target="details-toggle.summaryTarget" data-action="click:details-toggle#toggle" data-aria-label-closed="Open" data-aria-label-open="Close" aria-label="Open" aria-expanded="false" data-view-component="true" class="btn">    Dropdown
    </summary>
    <div data-view-component="true">    <details-menu role="menu" data-view-component="true" class="dropdown-menu dropdown-menu-se">
        <div class="dropdown-header">
          Header
        </div>
        <a role="menuitem" data-view-component="true" class="dropdown-item">Item 1</a>
        <a role="menuitem" data-view-component="true" class="dropdown-item">Item 2</a>
        <a role="menuitem" data-view-component="true" class="dropdown-item">Item 3</a>
      </details-menu>
    </div>
  </details>
</details-toggle>
<!-- With dividers -->
<details-toggle>
  <details data-target="details-toggle.detailsTarget" data-view-component="true" class="dropdown details-overlay details-reset">
    <summary aria_label_open="Close" aria_label_closed="Open" role="button" data-target="details-toggle.summaryTarget" data-action="click:details-toggle#toggle" data-aria-label-closed="Open" data-aria-label-open="Close" aria-label="Open" aria-expanded="false" data-view-component="true" class="btn">    Dropdown
    </summary>
    <div data-view-component="true">    <details-menu role="menu" data-view-component="true" class="dropdown-menu dropdown-menu-se">
        <a role="menuitem" data-view-component="true" class="dropdown-item">Item 1</a>
        <a role="menuitem" data-view-component="true" class="dropdown-item">Item 2</a>
        <a role="presentation" data-view-component="true" class="dropdown-divider"></a>
        <a role="menuitem" data-view-component="true" class="dropdown-item">Item 3</a>
        <a role="menuitem" data-view-component="true" class="dropdown-item">Item 4</a>
        <a role="presentation" data-view-component="true" class="dropdown-divider"></a>
        <a role="menuitem" data-view-component="true" class="dropdown-item">Item 5</a>
      </details-menu>
    </div>
  </details>
</details-toggle>
<!-- As list -->
<details-toggle>
  <details data-target="details-toggle.detailsTarget" data-view-component="true" class="dropdown details-overlay details-reset">
    <summary aria_label_open="Close" aria_label_closed="Open" role="button" data-target="details-toggle.summaryTarget" data-action="click:details-toggle#toggle" data-aria-label-closed="Open" data-aria-label-open="Close" aria-label="Open" aria-expanded="false" data-view-component="true" class="btn">    Dropdown
    </summary>
    <div data-view-component="true">    <details-menu role="menu" data-view-component="true" class="dropdown-menu dropdown-menu-se">
        <ul>
          <li>
            <a role="menuitem" data-view-component="true" class="dropdown-item">Item 1</a>
          </li>
          <li>
            <a role="menuitem" data-view-component="true" class="dropdown-item">Item 2</a>
          </li>
          <li>
            <a role="menuitem" data-view-component="true" class="dropdown-item">Item 3</a>
          </li>
        </ul>
      </details-menu>
    </div>
  </details>
</details-toggle>
<!-- Overlay none -->
<details-toggle>
  <details data-target="details-toggle.detailsTarget" data-view-component="true" class="dropdown details-reset">
    <summary aria_label_open="Close" aria_label_closed="Open" role="button" data-target="details-toggle.summaryTarget" data-action="click:details-toggle#toggle" data-aria-label-closed="Open" data-aria-label-open="Close" aria-label="Open" aria-expanded="false" data-view-component="true" class="btn">    Dropdown
    </summary>
    <div data-view-component="true">    <details-menu role="menu" data-view-component="true" class="dropdown-menu dropdown-menu-se">
        <a role="menuitem" data-view-component="true" class="dropdown-item">Item 1</a>
        <a role="menuitem" data-view-component="true" class="dropdown-item">Item 2</a>
        <a role="menuitem" data-view-component="true" class="dropdown-item">Item 3</a>
      </details-menu>
    </div>
  </details>
</details-toggle>
<!-- Overlay dark -->
<details-toggle>
  <details data-target="details-toggle.detailsTarget" data-view-component="true" class="dropdown details-overlay details-overlay-dark details-reset">
    <summary aria_label_open="Close" aria_label_closed="Open" role="button" data-target="details-toggle.summaryTarget" data-action="click:details-toggle#toggle" data-aria-label-closed="Open" data-aria-label-open="Close" aria-label="Open" aria-expanded="false" data-view-component="true" class="btn">    Dropdown
    </summary>
    <div data-view-component="true">    <details-menu role="menu" data-view-component="true" class="dropdown-menu dropdown-menu-se">
        <a role="menuitem" data-view-component="true" class="dropdown-item">Item 1</a>
        <a role="menuitem" data-view-component="true" class="dropdown-item">Item 2</a>
        <a role="menuitem" data-view-component="true" class="dropdown-item">Item 3</a>
      </details-menu>
    </div>
  </details>
</details-toggle>

No notes provided.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
# With caret
render(Primer::Alpha::Dropdown.new(with_caret: true)) do |component|
  component.with_button { "Dropdown" }
  component.with_menu do |menu|
    menu.with_item { "Item 1" }
    menu.with_item { "Item 2" }
    menu.with_item { "Item 3" }
  end
end
# With header
render(Primer::Alpha::Dropdown.new) do |component|
  component.with_button { "Dropdown" }
  component.with_menu(header: "Header") do |menu|
    menu.with_item { "Item 1" }
    menu.with_item { "Item 2" }
    menu.with_item { "Item 3" }
  end
end
# With dividers
render(Primer::Alpha::Dropdown.new) do |component|
  component.with_button { "Dropdown" }
  component.with_menu do |menu|
    menu.with_item { "Item 1" }
    menu.with_item { "Item 2" }
    menu.with_item(divider: true)
    menu.with_item { "Item 3" }
    menu.with_item { "Item 4" }
    menu.with_item(divider: true)
    menu.with_item { "Item 5" }
  end
end
# As list
render(Primer::Alpha::Dropdown.new) do |component|
  component.with_button { "Dropdown" }
  component.with_menu(as: :list) do |menu|
    menu.with_item { "Item 1" }
    menu.with_item { "Item 2" }
    menu.with_item { "Item 3" }
  end
end
# Overlay none
render(Primer::Alpha::Dropdown.new(overlay: :none)) do |component|
  component.with_button { "Dropdown" }
  component.with_menu do |menu|
    menu.with_item { "Item 1" }
    menu.with_item { "Item 2" }
    menu.with_item { "Item 3" }
  end
end
# Overlay dark
render(Primer::Alpha::Dropdown.new(overlay: :dark)) do |component|
  component.with_button { "Dropdown" }
  component.with_menu do |menu|
    menu.with_item { "Item 1" }
    menu.with_item { "Item 2" }
    menu.with_item { "Item 3" }
  end
end

No params configured.