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
<page-header data-view-component="true" class="PageHeader">
  <div class="PageHeader-contextBar">
    <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  breadcrumb-item-selected text-bold"><a target="_self" aria-current="page" href="#" data-view-component="true" class="Link">Baz</a></li>
      </ol>
    </nav>
    <segmented-control>
      <ul aria-label="Segmented control" scheme="default" id="page-header-f81c136f-92ec-40fa-b200-60d3540ef6d9" role="list" data-view-component="true" class="PageHeader-action SegmentedControl--medium SegmentedControl SegmentedControl--iconOnly ml-2 d-flex d-sm-none mr-2">
        <li class="SegmentedControl-item SegmentedControl-item--selected" role="listitem" data-targets="segmented-control.items">
          <button data-action="click:segmented-control#select" id="icon-button-6dfd581d-ad45-47a6-90d3-02a0a6509556" aria-current="true" aria-labelledby="tooltip-2366bdd2-5891-43c6-94d3-594ab04d48b2" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-eye Button-visual">
              <path d="M8 2c1.981 0 3.671.992 4.933 2.078 1.27 1.091 2.187 2.345 2.637 3.023a1.62 1.62 0 0 1 0 1.798c-.45.678-1.367 1.932-2.637 3.023C11.67 13.008 9.981 14 8 14c-1.981 0-3.671-.992-4.933-2.078C1.797 10.83.88 9.576.43 8.898a1.62 1.62 0 0 1 0-1.798c.45-.677 1.367-1.931 2.637-3.022C4.33 2.992 6.019 2 8 2ZM1.679 7.932a.12.12 0 0 0 0 .136c.411.622 1.241 1.75 2.366 2.717C5.176 11.758 6.527 12.5 8 12.5c1.473 0 2.825-.742 3.955-1.715 1.124-.967 1.954-2.096 2.366-2.717a.12.12 0 0 0 0-.136c-.412-.621-1.242-1.75-2.366-2.717C10.824 4.242 9.473 3.5 8 3.5c-1.473 0-2.825.742-3.955 1.715-1.124.967-1.954 2.096-2.366 2.717ZM8 10a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 10Z"></path>
            </svg>
          </button><tool-tip id="tooltip-2366bdd2-5891-43c6-94d3-594ab04d48b2" for="icon-button-6dfd581d-ad45-47a6-90d3-02a0a6509556" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Preview</tool-tip>
        </li>
        <li class="SegmentedControl-item" role="listitem" data-targets="segmented-control.items">
          <button data-action="click:segmented-control#select" id="icon-button-fd250be0-ff75-4a8b-afb4-986c341f36e3" aria-current="false" aria-labelledby="tooltip-95e7f1f2-5b0a-4a5f-b482-d12467575123" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file-code Button-visual">
              <path d="M4 1.75C4 .784 4.784 0 5.75 0h5.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v8.586A1.75 1.75 0 0 1 14.25 15h-9a.75.75 0 0 1 0-1.5h9a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 10 4.25V1.5H5.75a.25.25 0 0 0-.25.25v2.5a.75.75 0 0 1-1.5 0Zm1.72 4.97a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l1.47-1.47-1.47-1.47a.75.75 0 0 1 0-1.06ZM3.28 7.78 1.81 9.25l1.47 1.47a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-2-2a.75.75 0 0 1 0-1.06l2-2a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Zm8.22-6.218V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path>
            </svg>
          </button><tool-tip id="tooltip-95e7f1f2-5b0a-4a5f-b482-d12467575123" for="icon-button-fd250be0-ff75-4a8b-afb4-986c341f36e3" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Raw</tool-tip>
        </li>
      </ul>
    </segmented-control>
  </div>
  <div class="PageHeader-titleBar">
    <h1 data-view-component="true" class="PageHeader-title PageHeader-title--medium">
      Here's a segmented control
    </h1>
    <div class="PageHeader-actions">
      <segmented-control>
        <ul aria-label="Segmented control" scheme="default" id="page-header-f81c136f-92ec-40fa-b200-60d3540ef6d9" role="list" data-view-component="true" class="PageHeader-action SegmentedControl--medium SegmentedControl ml-2 d-none d-sm-flex">
          <li class="SegmentedControl-item SegmentedControl-item--selected" role="listitem" data-targets="segmented-control.items">
            <button data-action="click:segmented-control#select" aria-current="true" type="button" data-view-component="true" class="Button--invisible Button--medium Button">  <span class="Button-content">
                <span class="Button-visual Button-leadingVisual">
                  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-eye">
                    <path d="M8 2c1.981 0 3.671.992 4.933 2.078 1.27 1.091 2.187 2.345 2.637 3.023a1.62 1.62 0 0 1 0 1.798c-.45.678-1.367 1.932-2.637 3.023C11.67 13.008 9.981 14 8 14c-1.981 0-3.671-.992-4.933-2.078C1.797 10.83.88 9.576.43 8.898a1.62 1.62 0 0 1 0-1.798c.45-.677 1.367-1.931 2.637-3.022C4.33 2.992 6.019 2 8 2ZM1.679 7.932a.12.12 0 0 0 0 .136c.411.622 1.241 1.75 2.366 2.717C5.176 11.758 6.527 12.5 8 12.5c1.473 0 2.825-.742 3.955-1.715 1.124-.967 1.954-2.096 2.366-2.717a.12.12 0 0 0 0-.136c-.412-.621-1.242-1.75-2.366-2.717C10.824 4.242 9.473 3.5 8 3.5c-1.473 0-2.825.742-3.955 1.715-1.124.967-1.954 2.096-2.366 2.717ZM8 10a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 10Z"></path>
                  </svg>
                </span>
                <span class="Button-label">Preview</span>
              </span>
            </button>
          </li>
          <li class="SegmentedControl-item" role="listitem" data-targets="segmented-control.items">
            <button data-action="click:segmented-control#select" aria-current="false" type="button" data-view-component="true" class="Button--invisible Button--medium Button">  <span class="Button-content">
                <span class="Button-visual Button-leadingVisual">
                  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file-code">
                    <path d="M4 1.75C4 .784 4.784 0 5.75 0h5.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v8.586A1.75 1.75 0 0 1 14.25 15h-9a.75.75 0 0 1 0-1.5h9a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 10 4.25V1.5H5.75a.25.25 0 0 0-.25.25v2.5a.75.75 0 0 1-1.5 0Zm1.72 4.97a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l1.47-1.47-1.47-1.47a.75.75 0 0 1 0-1.06ZM3.28 7.78 1.81 9.25l1.47 1.47a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-2-2a.75.75 0 0 1 0-1.06l2-2a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Zm8.22-6.218V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path>
                  </svg>
                </span>
                <span class="Button-label">Raw</span>
              </span>
            </button>
          </li>
        </ul>
      </segmented-control>
    </div>
  </div>
</page-header>

No notes provided.

1
2
3
4
5
6
7
8
9
10
11
12
render(Primer::OpenProject::PageHeader.new) do |component|
  component.with_title { "Here's a segmented control" }
  component.with_breadcrumbs(["Baz"])
  component.with_action_segmented_control(
    "aria-label": "Segmented control",
    mobile_system_arguments: { hide_labels: true }
  ) do |control|
    control.with_item(label: "Preview", icon: :eye, selected: true)
    control.with_item(label: "Raw", icon: :"file-code")
  end
end

No params configured.