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
84
85
86
87
88
89
90
91
92
93
94
95
<!-- Size small -->
<segmented-control>
  <ul aria-label="File view" role="list" data-view-component="true" class="SegmentedControl--small SegmentedControl SegmentedControl--iconOnly">
    <li class="SegmentedControl-item SegmentedControl-item--selected" role="listitem" data-targets="segmented-control.items">
      <button data-action="click:segmented-control#select" id="icon-button-60ba42aa-5caf-4e53-88cf-770502f42473" aria-current="true" aria-labelledby="tooltip-1ec2c102-b530-48e0-a8cf-4d447d60afa9" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible 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-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-1ec2c102-b530-48e0-a8cf-4d447d60afa9" for="icon-button-60ba42aa-5caf-4e53-88cf-770502f42473" 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-c4422d1e-27b3-4000-9cd2-77485f5797b5" aria-current="false" aria-labelledby="tooltip-b0b328c7-8073-480f-90fc-a665983f74d8" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible 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-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-b0b328c7-8073-480f-90fc-a665983f74d8" for="icon-button-c4422d1e-27b3-4000-9cd2-77485f5797b5" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Raw</tool-tip>
    </li>
    <li class="SegmentedControl-item" role="listitem" data-targets="segmented-control.items">
      <button data-action="click:segmented-control#select" id="icon-button-29ad1321-94c2-4a56-9068-bb8001100c9f" aria-current="false" aria-labelledby="tooltip-90aa2c48-68a5-4388-9fc2-8810a2b7227f" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible 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-people Button-visual">
          <path d="M2 5.5a3.5 3.5 0 1 1 5.898 2.549 5.508 5.508 0 0 1 3.034 4.084.75.75 0 1 1-1.482.235 4 4 0 0 0-7.9 0 .75.75 0 0 1-1.482-.236A5.507 5.507 0 0 1 3.102 8.05 3.493 3.493 0 0 1 2 5.5ZM11 4a3.001 3.001 0 0 1 2.22 5.018 5.01 5.01 0 0 1 2.56 3.012.749.749 0 0 1-.885.954.752.752 0 0 1-.549-.514 3.507 3.507 0 0 0-2.522-2.372.75.75 0 0 1-.574-.73v-.352a.75.75 0 0 1 .416-.672A1.5 1.5 0 0 0 11 5.5.75.75 0 0 1 11 4Zm-5.5-.5a2 2 0 1 0-.001 3.999A2 2 0 0 0 5.5 3.5Z"></path>
        </svg>
      </button><tool-tip id="tooltip-90aa2c48-68a5-4388-9fc2-8810a2b7227f" for="icon-button-29ad1321-94c2-4a56-9068-bb8001100c9f" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Blame</tool-tip>
    </li>
  </ul>
</segmented-control>
<!-- Size medium -->
<segmented-control>
  <ul aria-label="File view" role="list" data-view-component="true" class="SegmentedControl--medium SegmentedControl SegmentedControl--iconOnly">
    <li class="SegmentedControl-item SegmentedControl-item--selected" role="listitem" data-targets="segmented-control.items">
      <button data-action="click:segmented-control#select" id="icon-button-35881ab5-31f1-4ff4-bbfa-35ccbd2cfe72" aria-current="true" aria-labelledby="tooltip-9cca0703-5b7b-4fe7-9977-61ca210d9690" 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-9cca0703-5b7b-4fe7-9977-61ca210d9690" for="icon-button-35881ab5-31f1-4ff4-bbfa-35ccbd2cfe72" 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-a9341ac3-a5b9-490b-8004-83ca5f22a473" aria-current="false" aria-labelledby="tooltip-c19b29ce-ca1a-4bb9-ba99-29222e0c9b73" 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-c19b29ce-ca1a-4bb9-ba99-29222e0c9b73" for="icon-button-a9341ac3-a5b9-490b-8004-83ca5f22a473" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Raw</tool-tip>
    </li>
    <li class="SegmentedControl-item" role="listitem" data-targets="segmented-control.items">
      <button data-action="click:segmented-control#select" id="icon-button-878d5e44-c119-4f8f-9381-723114a2ef61" aria-current="false" aria-labelledby="tooltip-c5aa656f-61a2-481b-848a-86f328ee572c" 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-people Button-visual">
          <path d="M2 5.5a3.5 3.5 0 1 1 5.898 2.549 5.508 5.508 0 0 1 3.034 4.084.75.75 0 1 1-1.482.235 4 4 0 0 0-7.9 0 .75.75 0 0 1-1.482-.236A5.507 5.507 0 0 1 3.102 8.05 3.493 3.493 0 0 1 2 5.5ZM11 4a3.001 3.001 0 0 1 2.22 5.018 5.01 5.01 0 0 1 2.56 3.012.749.749 0 0 1-.885.954.752.752 0 0 1-.549-.514 3.507 3.507 0 0 0-2.522-2.372.75.75 0 0 1-.574-.73v-.352a.75.75 0 0 1 .416-.672A1.5 1.5 0 0 0 11 5.5.75.75 0 0 1 11 4Zm-5.5-.5a2 2 0 1 0-.001 3.999A2 2 0 0 0 5.5 3.5Z"></path>
        </svg>
      </button><tool-tip id="tooltip-c5aa656f-61a2-481b-848a-86f328ee572c" for="icon-button-878d5e44-c119-4f8f-9381-723114a2ef61" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Blame</tool-tip>
    </li>
  </ul>
</segmented-control>
<!-- Full width, size small -->
<segmented-control>
  <ul aria-label="File view" role="list" data-view-component="true" class="SegmentedControl--small SegmentedControl SegmentedControl--iconOnly SegmentedControl--fullWidth">
    <li class="SegmentedControl-item SegmentedControl-item--selected" role="listitem" data-targets="segmented-control.items">
      <button data-action="click:segmented-control#select" id="icon-button-b69ce9aa-fba2-4d4c-b481-514ee4973b70" aria-current="true" aria-labelledby="tooltip-f02bb461-61db-4091-8294-b3ca8efc63fd" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--small btn-block">  <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-f02bb461-61db-4091-8294-b3ca8efc63fd" for="icon-button-b69ce9aa-fba2-4d4c-b481-514ee4973b70" 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-da2394d2-a688-434a-b777-06b4de128d11" aria-current="false" aria-labelledby="tooltip-bdaa6a7d-f6ec-46f3-9f43-5e26906877da" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--small btn-block">  <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-bdaa6a7d-f6ec-46f3-9f43-5e26906877da" for="icon-button-da2394d2-a688-434a-b777-06b4de128d11" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Raw</tool-tip>
    </li>
    <li class="SegmentedControl-item" role="listitem" data-targets="segmented-control.items">
      <button data-action="click:segmented-control#select" id="icon-button-ed4765e9-a175-4eaa-a06d-8f020213f00e" aria-current="false" aria-labelledby="tooltip-02973f23-1d89-43e2-b3c1-2ac6d3678202" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--small btn-block">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-people Button-visual">
          <path d="M2 5.5a3.5 3.5 0 1 1 5.898 2.549 5.508 5.508 0 0 1 3.034 4.084.75.75 0 1 1-1.482.235 4 4 0 0 0-7.9 0 .75.75 0 0 1-1.482-.236A5.507 5.507 0 0 1 3.102 8.05 3.493 3.493 0 0 1 2 5.5ZM11 4a3.001 3.001 0 0 1 2.22 5.018 5.01 5.01 0 0 1 2.56 3.012.749.749 0 0 1-.885.954.752.752 0 0 1-.549-.514 3.507 3.507 0 0 0-2.522-2.372.75.75 0 0 1-.574-.73v-.352a.75.75 0 0 1 .416-.672A1.5 1.5 0 0 0 11 5.5.75.75 0 0 1 11 4Zm-5.5-.5a2 2 0 1 0-.001 3.999A2 2 0 0 0 5.5 3.5Z"></path>
        </svg>
      </button><tool-tip id="tooltip-02973f23-1d89-43e2-b3c1-2ac6d3678202" for="icon-button-ed4765e9-a175-4eaa-a06d-8f020213f00e" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Blame</tool-tip>
    </li>
  </ul>
</segmented-control>
<!-- Full width, size medium -->
<segmented-control>
  <ul aria-label="File view" role="list" data-view-component="true" class="SegmentedControl--medium SegmentedControl SegmentedControl--iconOnly SegmentedControl--fullWidth">
    <li class="SegmentedControl-item SegmentedControl-item--selected" role="listitem" data-targets="segmented-control.items">
      <button data-action="click:segmented-control#select" id="icon-button-cb762069-754d-46be-8974-cfb49c9b0b10" aria-current="true" aria-labelledby="tooltip-6f501854-a88c-45b4-bb6d-b619c953c1ac" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium btn-block">  <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-6f501854-a88c-45b4-bb6d-b619c953c1ac" for="icon-button-cb762069-754d-46be-8974-cfb49c9b0b10" 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-5a293ba7-df34-4078-9a97-0ea78e1f793d" aria-current="false" aria-labelledby="tooltip-f067c015-d07d-4783-9e0c-8596fb33b3b1" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium btn-block">  <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-f067c015-d07d-4783-9e0c-8596fb33b3b1" for="icon-button-5a293ba7-df34-4078-9a97-0ea78e1f793d" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Raw</tool-tip>
    </li>
    <li class="SegmentedControl-item" role="listitem" data-targets="segmented-control.items">
      <button data-action="click:segmented-control#select" id="icon-button-acae8780-ba38-476e-be65-8a76b03bb6f5" aria-current="false" aria-labelledby="tooltip-4abc232b-1e88-489e-b08a-ee9de1360336" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium btn-block">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-people Button-visual">
          <path d="M2 5.5a3.5 3.5 0 1 1 5.898 2.549 5.508 5.508 0 0 1 3.034 4.084.75.75 0 1 1-1.482.235 4 4 0 0 0-7.9 0 .75.75 0 0 1-1.482-.236A5.507 5.507 0 0 1 3.102 8.05 3.493 3.493 0 0 1 2 5.5ZM11 4a3.001 3.001 0 0 1 2.22 5.018 5.01 5.01 0 0 1 2.56 3.012.749.749 0 0 1-.885.954.752.752 0 0 1-.549-.514 3.507 3.507 0 0 0-2.522-2.372.75.75 0 0 1-.574-.73v-.352a.75.75 0 0 1 .416-.672A1.5 1.5 0 0 0 11 5.5.75.75 0 0 1 11 4Zm-5.5-.5a2 2 0 1 0-.001 3.999A2 2 0 0 0 5.5 3.5Z"></path>
        </svg>
      </button><tool-tip id="tooltip-4abc232b-1e88-489e-b08a-ee9de1360336" for="icon-button-acae8780-ba38-476e-be65-8a76b03bb6f5" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Blame</tool-tip>
    </li>
  </ul>
</segmented-control>

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
# Size small
render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :small)) do |component|
  component.with_item(label: "Preview", icon: :eye, selected: true)
  component.with_item(label: "Raw", icon: :"file-code")
  component.with_item(label: "Blame", icon: :people)
end
# Size medium
render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :medium)) do |component|
  component.with_item(label: "Preview", icon: :eye, selected: true)
  component.with_item(label: "Raw", icon: :"file-code")
  component.with_item(label: "Blame", icon: :people)
end
# Full width, size small
render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :small)) do |component|
  component.with_item(label: "Preview", icon: :eye, selected: true)
  component.with_item(label: "Raw", icon: :"file-code")
  component.with_item(label: "Blame", icon: :people)
end
# Full width, size medium
render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :medium)) do |component|
  component.with_item(label: "Preview", icon: :eye, selected: true)
  component.with_item(label: "Raw", icon: :"file-code")
  component.with_item(label: "Blame", icon: :people)
end

No params configured.