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
<page-header data-view-component="true" class="PageHeader">
  <div class="PageHeader-contextBar">
    <a icon="arrow-left" target="_top" href="/foo/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="/foo/bar" data-view-component="true" class="Link">Bar</a></li>
        <li data-view-component="true" class="breadcrumb-item  breadcrumb-item-selected text-normal"><a target="_self" aria-current="page" href="#" data-view-component="true" class="Link">Test: <b>Baz</b></a></li>
      </ol>
    </nav>
  </div>
  <div class="PageHeader-titleBar">
    <h1 data-view-component="true" class="PageHeader-title PageHeader-title--medium">
      A title
    </h1>
  </div>
</page-header>

Breadcrumbs are only shown on wider than narrow screens by default. A parent link is shown instead in narrow screens Per default, the last element is shown in bold, but that can be disabled, e.g if only parts of the string should be bold.

1
2
3
4
5
6
7
8
9
breadcrumb_items = [
  { href: "/foo", text: "Foo" },
  { href: "/foo/bar", text: "Bar" },
  "Test: <b>Baz</b>".html_safe
]
render(Primer::OpenProject::PageHeader.new) do |header|
  header.with_title { "A title" }
  header.with_breadcrumbs(breadcrumb_items, selected_item_font_weight: :normal)
end

No params configured.