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
<!-- Direction e -->
<details-toggle>
  <details data-target="details-toggle.detailsTarget" data-view-component="true" class="dropdown details-overlay details-reset d-inline-block">
    <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-e">
        <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>
<!-- Direction ne -->
<details-toggle>
  <details data-target="details-toggle.detailsTarget" data-view-component="true" class="dropdown details-overlay details-reset d-inline-block">
    <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-ne">
        <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>
<!-- Direction s -->
<details-toggle>
  <details data-target="details-toggle.detailsTarget" data-view-component="true" class="dropdown details-overlay details-reset d-inline-block">
    <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-s">
        <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>
<!-- Direction se -->
<details-toggle>
  <details data-target="details-toggle.detailsTarget" data-view-component="true" class="dropdown details-overlay details-reset d-inline-block">
    <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>
<!-- Direction sw -->
<details-toggle>
  <details data-target="details-toggle.detailsTarget" data-view-component="true" class="dropdown details-overlay details-reset d-inline-block">
    <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-sw">
        <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>
<!-- Direction w -->
<details-toggle>
  <details data-target="details-toggle.detailsTarget" data-view-component="true" class="dropdown details-overlay details-reset d-inline-block">
    <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-w">
        <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
# Direction e
render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
  component.with_button { "Dropdown" }
  component.with_menu(direction: :e) do |menu|
    menu.with_item { "Item 1" }
    menu.with_item { "Item 2" }
    menu.with_item { "Item 3" }
  end
end
# Direction ne
render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
  component.with_button { "Dropdown" }
  component.with_menu(direction: :ne) do |menu|
    menu.with_item { "Item 1" }
    menu.with_item { "Item 2" }
    menu.with_item { "Item 3" }
  end
end
# Direction s
render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
  component.with_button { "Dropdown" }
  component.with_menu(direction: :s) do |menu|
    menu.with_item { "Item 1" }
    menu.with_item { "Item 2" }
    menu.with_item { "Item 3" }
  end
end
# Direction se
render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
  component.with_button { "Dropdown" }
  component.with_menu(direction: :se) do |menu|
    menu.with_item { "Item 1" }
    menu.with_item { "Item 2" }
    menu.with_item { "Item 3" }
  end
end
# Direction sw
render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
  component.with_button { "Dropdown" }
  component.with_menu(direction: :sw) do |menu|
    menu.with_item { "Item 1" }
    menu.with_item { "Item 2" }
    menu.with_item { "Item 3" }
  end
end
# Direction w
render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
  component.with_button { "Dropdown" }
  component.with_menu(direction: :w) do |menu|
    menu.with_item { "Item 1" }
    menu.with_item { "Item 2" }
    menu.with_item { "Item 3" }
  end
end

No params configured.