Polaris ViewComponents

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
<div class="Polaris-Layout">
  <div class="Polaris-Layout__Section Polaris-Layout__Section--secondary">    
    <div class="NavigationList Polaris-LegacyCard Polaris-LegacyCard--withoutTitle">
      <ul style="--pc-vertical-stack-align: ;--pc-vertical-stack-order: column;--pc-vertical-stack-gap-xs: var(--p-space-1)" class="Polaris-VerticalStack Polaris-VerticalStack--listReset">
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <div class="Polaris-Navigation__ItemInnerWrapper">
              <a class="Polaris-Navigation__Item" tabindex="0" href="#">
                <div class="Polaris-Navigation__Icon">
                  <span class="Polaris-Icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path fill-rule="evenodd" d="M12.5 10a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Zm-1.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path><path fill-rule="evenodd" d="M9.377 2.5c-.926 0-1.676.75-1.676 1.676v.688c0 .056-.043.17-.198.251-.153.08-.303.168-.448.262-.147.097-.268.076-.318.048l-.6-.346a1.676 1.676 0 0 0-2.29.613l-.622 1.08a1.676 1.676 0 0 0 .613 2.289l.648.374c.048.028.124.12.119.29a5.484 5.484 0 0 0 .005.465c.009.175-.07.27-.119.299l-.653.377a1.676 1.676 0 0 0-.613 2.29l.623 1.08a1.676 1.676 0 0 0 2.29.613l.7-.405c.048-.028.166-.048.312.043.115.071.233.139.353.202.155.08.198.195.198.251v.811c0 .926.75 1.676 1.676 1.676h1.246c.926 0 1.676-.75 1.676-1.676v-.81c0-.057.042-.171.197-.252.121-.063.239-.13.354-.202.146-.091.264-.07.312-.043l.7.405a1.676 1.676 0 0 0 2.29-.614l.623-1.08a1.676 1.676 0 0 0-.613-2.289l-.653-.377c-.05-.029-.128-.123-.119-.3a5.494 5.494 0 0 0 .005-.463c-.005-.171.07-.263.12-.291l.647-.374a1.676 1.676 0 0 0 .613-2.29l-.623-1.079a1.676 1.676 0 0 0-2.29-.613l-.6.346c-.049.028-.17.048-.318-.048a5.4 5.4 0 0 0-.448-.262c-.155-.081-.197-.195-.197-.251v-.688c0-.926-.75-1.676-1.676-1.676h-1.246Zm-.176 1.676c0-.097.078-.176.176-.176h1.246c.097 0 .176.079.176.176v.688c0 .728.462 1.298 1.003 1.58.11.058.219.122.323.19.517.337 1.25.458 1.888.09l.6-.346a.176.176 0 0 1 .24.064l.623 1.08a.176.176 0 0 1-.064.24l-.648.374c-.623.36-.888 1.034-.868 1.638a4.184 4.184 0 0 1-.004.337c-.032.615.23 1.31.867 1.677l.653.377a.176.176 0 0 1 .064.24l-.623 1.08a.176.176 0 0 1-.24.065l-.701-.405c-.624-.36-1.341-.251-1.855.069a3.91 3.91 0 0 1-.255.145c-.54.283-1.003.853-1.003 1.581v.811a.176.176 0 0 1-.176.176h-1.246a.176.176 0 0 1-.176-.176v-.81c0-.73-.462-1.3-1.003-1.582a3.873 3.873 0 0 1-.255-.146c-.514-.32-1.23-.428-1.855-.068l-.7.405a.176.176 0 0 1-.241-.065l-.623-1.08a.176.176 0 0 1 .064-.24l.653-.377c.637-.368.899-1.062.867-1.677a3.97 3.97 0 0 1-.004-.337c.02-.604-.245-1.278-.868-1.638l-.648-.374a.176.176 0 0 1-.064-.24l.623-1.08a.176.176 0 0 1 .24-.064l.6.346c.638.368 1.37.247 1.888-.09a3.85 3.85 0 0 1 .323-.19c.54-.282 1.003-.852 1.003-1.58v-.688Z"></path></svg>
                  </span>
                </div>
                <span class="Polaris-Navigation__Text">
                  Settings
                </span>
              </a>    </div>
          </div>
        </li>
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <div class="Polaris-Navigation__ItemInnerWrapper">
              <a class="Polaris-Navigation__Item" tabindex="0" href="#">
                <div class="Polaris-Navigation__Icon">
                  <span class="Polaris-Icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path fill-rule="evenodd" d="M6.955 3.994a.75.75 0 0 0-1.41 0l-2 5.5a.75.75 0 1 0 1.41.512l.187-.514a.756.756 0 0 0 .108.008h2.111l.184.506a.75.75 0 1 0 1.41-.512l-2-5.5Zm-.705 2.45.566 1.556h-1.132l.566-1.555Z"></path><path d="M14.55 7.75v-1a.25.25 0 0 0-.25-.25h-1.49l.22.22a.75.75 0 1 1-1.06 1.06l-1.5-1.5a.75.75 0 0 1 0-1.06l1.5-1.5a.75.75 0 0 1 1.06 1.06l-.22.22h1.49c.966 0 1.75.783 1.75 1.75v1a.75.75 0 1 1-1.5 0Z"></path><path d="M5.5 12.25v1c0 .138.112.25.25.25h1.49l-.22-.22a.75.75 0 1 1 1.06-1.06l1.5 1.5a.75.75 0 0 1 0 1.06l-1.5 1.5a.75.75 0 0 1-1.06-1.06l.22-.22h-1.49a1.75 1.75 0 0 1-1.75-1.75v-1a.75.75 0 1 1 1.5 0Z"></path><path fill-rule="evenodd" d="M11.002 11.5h-.252a.75.75 0 0 1 0-1.5h1.75v-.25a.75.75 0 0 1 1.5 0v.25h1.75a.75.75 0 0 1 0 1.5h-.312a5.877 5.877 0 0 1-.4 1.945 5.13 5.13 0 0 1-.69 1.227c.293.161.634.3 1.03.402a.75.75 0 0 1-.376 1.452 5.676 5.676 0 0 1-1.782-.788 5.677 5.677 0 0 1-1.782.788.75.75 0 1 1-.376-1.452c.396-.103.737-.24 1.03-.402a5.115 5.115 0 0 1-.69-1.227 5.88 5.88 0 0 1-.4-1.945Zm2.935 0h-1.434a4.381 4.381 0 0 0 .295 1.394c.101.257.237.524.422.782.185-.258.32-.525.422-.782a4.386 4.386 0 0 0 .295-1.394Z"></path></svg>
                  </span>
                </div>
                <span class="Polaris-Navigation__Text">
                  Language
                </span>
                <div class="Polaris-Navigation__Badge">
                  <span class="Polaris-Badge">
                    <span class="Polaris-Text--root Polaris-Text--bodySm Polaris-Text--regular">
                      15
                    </span></span>
                </div>
              </a>    </div>
          </div>
        </li>
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <div class="Polaris-Navigation__ItemInnerWrapper Polaris-Navigation__ItemInnerWrapper--selected">
              <a class="Polaris-Navigation__Item Polaris-Navigation__Item--selected Polaris-Navigation--subNavigationActive" tabindex="0" href="#">
                <div class="Polaris-Navigation__Icon">
                  <span class="Polaris-Icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path fill-rule="evenodd" d="M5.142 16.934a1 1 0 0 1-.642-.934v-11a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v11a1 1 0 0 1-1.743.669l-1.502-1.669h-.01l-1.502 1.669a1 1 0 0 1-1.486 0l-1.502-1.669h-.01l-1.502 1.669a1 1 0 0 1-1.101.265Zm4.358-11.684a.75.75 0 0 1 1.5 0v.5h.75a.75.75 0 0 1 0 1.5h-2.375a.625.625 0 1 0 0 1.25h1.25a2.125 2.125 0 0 1 0 4.25h-.125v.5a.75.75 0 0 1-1.5 0v-.5h-.75a.75.75 0 0 1 0-1.5h2.375a.625.625 0 1 0 0-1.25h-1.25a2.125 2.125 0 0 1 0-4.25h.125v-.5Z"></path></svg>
                  </span>
                </div>
                <span class="Polaris-Navigation__Text">
                  Account
                </span>
              </a>    </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="Polaris-Layout__Section">    
    <div class="Polaris-LegacyCard">
      <div class="Polaris-LegacyCard__Header">
        <h2 class="Polaris-Text--root Polaris-Text--headingMd Polaris-Text--semibold">
          Account
        </h2>
      </div>
      <div class="Polaris-LegacyCard__Section">
        <p>NavigationList is useful for organizing into sub-pages, such as Settings or Account pages.</p>
      </div>
    </div>
  </div>
</div>
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
<%= polaris_layout do |layout| %>
  <% layout.with_section(secondary: true) do %>
    <%= polaris_navigation_list do |navigation| %>
      <% navigation.with_item(
        url: "#",
        label: "Settings",
        icon: "SettingsIcon"
      ) %>
      <% navigation.with_item(
        url: "#",
        label: "Language",
        icon: "LanguageTranslateIcon",
        badge: "15"
      ) %>
      <% navigation.with_item(
        url: "#",
        label: "Account",
        icon: "ReceiptDollarFilledIcon",
        selected: true
      ) %>
    <% end %>
  <% end %>
  <% layout.with_section do %>
    <%= polaris_card(title: "Account", sectioned: true) do %>
      <p>NavigationList is useful for organizing into sub-pages, such as Settings or Account pages.</p>
    <% end %>
  <% end %>
<% end %>

No notes provided.

No params configured.