Primer ViewComponents v0.35.1

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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<action-menu data-select-variant="none" data-view-component="true">
  <focus-group direction="vertical" mnemonics retain>
    <button id="menu-1-button" popovertarget="menu-1-overlay" aria-controls="menu-1-list" aria-haspopup="true" type="button" data-view-component="true" class="Button--secondary Button--medium Button">  <span class="Button-content">
        <span class="Button-label">Favorite character</span>
      </span>
      <span class="Button-visual Button-trailingAction">
        <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">
          <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>
      </span>
    </button>
    <anchored-position id="menu-1-overlay" anchor="menu-1-button" align="start" side="outside-bottom" anchor-offset="normal" popover="auto" data-view-component="true">
      <div data-view-component="true" class="Overlay Overlay--size-auto">
        <div data-view-component="true" class="Overlay-body Overlay-body--paddingNone">          <action-list>
            <div data-view-component="true">
              <ul aria-labelledby="menu-1-button" id="menu-1-list" role="menu" data-view-component="true" class="ActionListWrap--inset ActionListWrap">
                <action-list>
                  <div data-view-component="true">
                    <div data-view-component="true" class="ActionList-sectionDivider">
                      <div id="heading-title-2b636cb7-8daf-4d24-b5bf-8aa637434014" data-view-component="true" class="ActionList-sectionDivider-title">
                        Battlestar Galactica
                      </div>
                    </div>
                    <ul id="group-a7a26847-a3cd-4a18-9c58-4c63db992da9" role="group" aria-labelledby="heading-title-2b636cb7-8daf-4d24-b5bf-8aa637434014" data-view-component="true" class="ActionListWrap">
                      <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem">
                        <button id="item-aebeabb3-53b3-4e33-af66-e44626d128dd" type="button" role="menuitem" data-view-component="true" class="ActionListContent">
                          <span data-view-component="true" class="ActionListItem-label">
                            William Adama
                          </span>
                        </button>
                      </li>
                      <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem">
                        <button id="item-18ae53da-1d0f-43b0-b282-b283d5999986" type="button" role="menuitem" data-view-component="true" class="ActionListContent">
                          <span data-view-component="true" class="ActionListItem-label">
                            Kara "Starbuck" Thrace
                          </span>
                        </button>
                      </li>
                      <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem">
                        <button id="item-13e04ddb-09fa-451a-87a3-70791535354e" type="button" role="menuitem" data-view-component="true" class="ActionListContent">
                          <span data-view-component="true" class="ActionListItem-label">
                            Sharon "Boomer" Valerii
                          </span>
                        </button>
                      </li>
                      <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem">
                        <button id="item-7f847d6c-9cca-4120-8f09-e9a96525b8fb" type="button" role="menuitem" data-view-component="true" class="ActionListContent">
                          <span data-view-component="true" class="ActionListItem-label">
                            Gaius Baltar
                          </span>
                        </button>
                      </li>
                    </ul>
                  </div>
                </action-list>
                <action-list>
                  <div data-view-component="true">
                    <div data-view-component="true" class="ActionList-sectionDivider">
                      <div id="heading-title-77fb804c-e48f-4d6f-82c7-8da0da6c6fb2" data-view-component="true" class="ActionList-sectionDivider-title">
                        Star Trek
                      </div>
                    </div>
                    <ul id="group-5162a96f-19dc-4b06-ba4b-e7c7278e77f8" role="group" aria-labelledby="heading-title-77fb804c-e48f-4d6f-82c7-8da0da6c6fb2" data-view-component="true" class="ActionListWrap">
                      <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem">
                        <button id="item-d7b706c4-8bcc-4834-9e52-d17a5ceffb15" type="button" role="menuitem" data-view-component="true" class="ActionListContent">
                          <span data-view-component="true" class="ActionListItem-label">
                            Capt. Jean-luc Picard
                          </span>
                        </button>
                      </li>
                      <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem">
                        <button id="item-80f7e747-753f-43c1-9f31-076f7d7be72e" type="button" role="menuitem" data-view-component="true" class="ActionListContent">
                          <span data-view-component="true" class="ActionListItem-label">
                            Capt. Kathryn M. Janeway
                          </span>
                        </button>
                      </li>
                      <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem">
                        <button id="item-25158a0f-27c7-4894-8740-1e54f1f00d85" type="button" role="menuitem" data-view-component="true" class="ActionListContent">
                          <span data-view-component="true" class="ActionListItem-label">
                            Capt. Benjamin L. Sisko
                          </span>
                        </button>
                      </li>
                      <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem">
                        <button id="item-07058d26-2724-4142-aa10-57d2370d7955" type="button" role="menuitem" data-view-component="true" class="ActionListContent">
                          <span data-view-component="true" class="ActionListItem-label">
                            Capt. James T. Kirk
                          </span>
                        </button>
                      </li>
                    </ul>
                  </div>
                </action-list>
                <action-list>
                  <div data-view-component="true">
                    <div data-view-component="true" class="ActionList-sectionDivider">
                      <div id="heading-title-ada26ee4-1cbd-4634-b368-ebcbeafc566c" data-view-component="true" class="ActionList-sectionDivider-title">
                        Star Wars
                      </div>
                    </div>
                    <ul id="group-cc08c6d3-ad34-40e9-b272-7df699f7dd28" role="group" aria-labelledby="heading-title-ada26ee4-1cbd-4634-b368-ebcbeafc566c" data-view-component="true" class="ActionListWrap">
                      <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem">
                        <button id="item-d1f44358-5191-4024-907e-f3bf8dc07d93" type="button" role="menuitem" data-view-component="true" class="ActionListContent">
                          <span data-view-component="true" class="ActionListItem-label">
                            Leia Organa
                          </span>
                        </button>
                      </li>
                      <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem">
                        <button id="item-23035836-6ab7-43f4-824a-721d5c7eab0a" type="button" role="menuitem" data-view-component="true" class="ActionListContent">
                          <span data-view-component="true" class="ActionListItem-label">
                            Luke Skywalker
                          </span>
                        </button>
                      </li>
                      <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem">
                        <button id="item-863c5355-f8cf-45ea-b268-2f31d42b778e" type="button" role="menuitem" data-view-component="true" class="ActionListContent">
                          <span data-view-component="true" class="ActionListItem-label">
                            Han Solo
                          </span>
                        </button>
                      </li>
                      <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem">
                        <button id="item-39fd644a-9517-45e2-9e97-79cb75f12caf" type="button" role="menuitem" data-view-component="true" class="ActionListContent">
                          <span data-view-component="true" class="ActionListItem-label">
                            Chewbacca
                          </span>
                        </button>
                      </li>
                    </ul>
                  </div>
                </action-list>
              </ul>
            </div>
          </action-list>
        </div>
      </div>
    </anchored-position>  </focus-group>
</action-menu>
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
render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
  menu.with_show_button do |button|
    button.with_trailing_action_icon(icon: :"triangle-down")
    "Favorite character"
  end
  menu.with_group do |group|
    group.with_heading(title: "Battlestar Galactica")
    group.with_item(label: "William Adama")
    group.with_item(label: 'Kara "Starbuck" Thrace')
    group.with_item(label: 'Sharon "Boomer" Valerii')
    group.with_item(label: "Gaius Baltar")
  end
  menu.with_group do |group|
    group.with_heading(title: "Star Trek")
    group.with_item(label: "Capt. Jean-luc Picard")
    group.with_item(label: "Capt. Kathryn M. Janeway")
    group.with_item(label: "Capt. Benjamin L. Sisko")
    group.with_item(label: "Capt. James T. Kirk")
  end
  menu.with_group do |group|
    group.with_heading(title: "Star Wars")
    group.with_item(label: "Leia Organa")
    group.with_item(label: "Luke Skywalker")
    group.with_item(label: "Han Solo")
    group.with_item(label: "Chewbacca")
  end
end

No notes provided.

No params configured.

No assets to display.