300px
x
150px
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
<page-header data-view-component="true" class="PageHeader"> <div class="PageHeader-contextBar"> <a icon="arrow-left" target="_top" href="/bar" data-view-component="true" class="PageHeader-parentLink Link--primary Link Link--muted d-block d-sm-none"><svg aria-label="Back" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-arrow-left mr-2"> <path d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"></path> </svg><span>Bar</span></a> <nav aria-label="Breadcrumb" data-view-component="true" class="PageHeader-breadcrumbs d-none d-sm-flex"> <ol> <li data-view-component="true" class="breadcrumb-item "><a target="_top" href="/foo" data-view-component="true" class="Link">Foo</a></li> <li data-view-component="true" class="breadcrumb-item "><a target="_top" href="/bar" data-view-component="true" class="Link">Bar</a></li> <li data-view-component="true" class="breadcrumb-item breadcrumb-item-selected text-bold"><a target="_self" aria-current="page" href="#" data-view-component="true" class="Link">Baz</a></li> </ol> </nav> <action-menu data-select-variant="none" data-view-component="true" class="d-flex d-sm-none"> <focus-group direction="vertical" mnemonics retain> <button id="action-menu-13e4377d-d8ee-43cd-bedb-73256ac7b691-button" popovertarget="action-menu-13e4377d-d8ee-43cd-bedb-73256ac7b691-overlay" aria-controls="action-menu-13e4377d-d8ee-43cd-bedb-73256ac7b691-list" aria-haspopup="true" aria-labelledby="tooltip-9e153c2e-cd62-4f12-bf4b-51d4a325fede" type="button" data-view-component="true" class="Button Button--iconOnly Button--secondary Button--small"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal Button-visual"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg> </button><tool-tip id="tooltip-9e153c2e-cd62-4f12-bf4b-51d4a325fede" for="action-menu-13e4377d-d8ee-43cd-bedb-73256ac7b691-button" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">More</tool-tip> <anchored-position data-target="action-menu.overlay" id="action-menu-13e4377d-d8ee-43cd-bedb-73256ac7b691-overlay" anchor="action-menu-13e4377d-d8ee-43cd-bedb-73256ac7b691-button" align="end" 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="action-menu-13e4377d-d8ee-43cd-bedb-73256ac7b691-button" id="action-menu-13e4377d-d8ee-43cd-bedb-73256ac7b691-list" role="menu" data-view-component="true" class="ActionListWrap--inset ActionListWrap"> <li value="" data-for="page-header-c98b2db2-5041-4234-aa77-c241b45bae84" data-action="click:page-header#menuItemClick" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <button tabindex="-1" id="item-96e2f991-a6ed-437f-a42a-e2d9a2e64f67" type="button" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-pencil"> <path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Edit </span> </button> </li> <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <button tabindex="-1" id="item-9c3ab32c-4aa4-4169-aec9-59c93ff4940e" type="button" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-unlock"> <path d="M5.5 4v2h7A1.5 1.5 0 0 1 14 7.5v6a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5v-6A1.5 1.5 0 0 1 3.499 6H4V4a4 4 0 0 1 7.371-2.154.75.75 0 0 1-1.264.808A2.5 2.5 0 0 0 5.5 4Zm-2 3.5v6h9v-6h-9Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Subitem 1 </span> </button> </li> <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem--danger ActionListItem"> <button tabindex="-1" id="item-6a31e11e-3ffa-4b97-81e3-7687fa0efd5a" type="button" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-trash"> <path d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.149l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Subitem 2 </span> </button> </li> </ul> </div> </action-list> </div> </div> </anchored-position> </focus-group> </action-menu> </div> <div class="PageHeader-titleBar"> <h1 data-view-component="true" class="PageHeader-title PageHeader-title--medium"> Hello </h1> <div class="PageHeader-actions"> <button id="page-header-c98b2db2-5041-4234-aa77-c241b45bae84" aria-labelledby="tooltip-cba162d5-81a5-4cd9-bf05-f610733ad105" type="button" data-view-component="true" class="Button Button--iconOnly Button--secondary Button--medium PageHeader-action ml-2 d-none d-sm-flex"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-pencil Button-visual"> <path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"></path> </svg> </button><tool-tip id="tooltip-cba162d5-81a5-4cd9-bf05-f610733ad105" for="page-header-c98b2db2-5041-4234-aa77-c241b45bae84" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Edit</tool-tip> <action-menu data-select-variant="none" data-view-component="true"> <focus-group direction="vertical" mnemonics retain> <button id="action-menu-128631b6-5b89-4b37-acc3-7589306d2ed7-button" popovertarget="action-menu-128631b6-5b89-4b37-acc3-7589306d2ed7-overlay" aria-controls="action-menu-128631b6-5b89-4b37-acc3-7589306d2ed7-list" aria-haspopup="true" aria-labelledby="tooltip-a20910fa-a4fa-4000-897a-5be6c802ff6a" type="button" data-view-component="true" class="Button Button--iconOnly Button--secondary Button--medium PageHeader-action ml-2 d-none d-sm-flex"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-op-kebab-vertical Button-visual"> <path d="M9.5 14.5a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 9.5 14.5Zm0-6.5a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 9.5 8ZM8 0a1.5 1.5 0 1 1-.001 3.001A1.5 1.5 0 0 1 8 0Z"></path> </svg> </button><tool-tip id="tooltip-a20910fa-a4fa-4000-897a-5be6c802ff6a" for="action-menu-128631b6-5b89-4b37-acc3-7589306d2ed7-button" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Menu</tool-tip> <anchored-position data-target="action-menu.overlay" id="action-menu-128631b6-5b89-4b37-acc3-7589306d2ed7-overlay" anchor="action-menu-128631b6-5b89-4b37-acc3-7589306d2ed7-button" align="end" 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="action-menu-128631b6-5b89-4b37-acc3-7589306d2ed7-button" id="action-menu-128631b6-5b89-4b37-acc3-7589306d2ed7-list" role="menu" data-view-component="true" class="ActionListWrap--inset ActionListWrap"> <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <button tabindex="-1" id="item-d8cf174b-bbb7-4b05-8742-8c28787a7571" type="button" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-unlock"> <path d="M5.5 4v2h7A1.5 1.5 0 0 1 14 7.5v6a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5v-6A1.5 1.5 0 0 1 3.499 6H4V4a4 4 0 0 1 7.371-2.154.75.75 0 0 1-1.264.808A2.5 2.5 0 0 0 5.5 4Zm-2 3.5v6h9v-6h-9Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Subitem 1 </span> </button> </li> <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem--danger ActionListItem"> <button tabindex="-1" id="item-ad063e65-44c2-4396-a5b5-0e90c971ecd0" type="button" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-trash"> <path d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.149l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Subitem 2 </span> </button> </li> </ul> </div> </action-list> </div> </div> </anchored-position> </focus-group> </action-menu> </div> </div> <div data-view-component="true" class="PageHeader-description">Last updated 5 minutes ago by XYZ.</div></page-header>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
<%= render Primer::OpenProject::PageHeader.new(state: in_edit_state ? :edit : :show) do |header| %> <%= header.with_title(variant: variant) do |t| %> <% if in_edit_state %> <%= t.with_editable_form(model: nil, update_path: "/foo", cancel_path: "/bar") %> <% end %> <%= title %> <% end %> <%= header.with_description { description } %> <%= header.with_leading_action(icon: with_leading_action, href: '#', 'aria-label': "A leading action") if with_leading_action && with_leading_action != :none %> <%= header.with_breadcrumbs(breadcrumb_items) %> <% if with_actions %> <% header.with_action_icon_button(icon: 'pencil', mobile_icon: 'pencil', label: 'Edit') %> <% header.with_action_menu(menu_arguments: { anchor_align: :end }, button_arguments: { icon: "op-kebab-vertical", "aria-label": "Menu" }) do |menu, button| %> <% menu.with_item(label: "Subitem 1") do |item| %> <% item.with_leading_visual_icon(icon: :unlock) %> <% end %> <% menu.with_item(label: "Subitem 2", scheme: :danger) do |item| %> <% item.with_leading_visual_icon(icon: :trash) %> <% end %> <% end %> <% end %> <% if with_tab_nav %> <% header.with_tab_nav(label: "label") do |nav| %> <% nav.with_tab(selected: true, href: "#") { "Tab 1" } %> <% nav.with_tab(href: "#") { "Tab 2" } %> <% nav.with_tab(href: "#") { "Tab 3" } %> <% end %> <% end %><% end %>| Param | Description | Input |
|---|---|---|
|
— |
|
|
|
— |
|
|
|
— |
|
|
|
— |
|
|
|
— |
|
|
|
— |
|
|
|
— |
|