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
<div class="Polaris-Labelled--hidden">
  <div class="Polaris-Labelled__LabelWrapper">
    <div class="Polaris-Label">
      <label class="Polaris-Label__Text" for="sort">Sort by</label>
    </div>
  </div>
  <div data-controller="polaris-select" data-selected-value="" class="Polaris-Select">
    <select name="sort" id="sort" class="Polaris-Select__Input" data-polaris-select-target="select" data-action="polaris-select#update"><option value="newestUpdate">Newest update</option>
      <option value="oldestUpdate">Oldest update</option>
      <option value="mostSpent">Most spent</option>
      <option value="mostOrders">Most orders</option>
      <option value="lastNameAlpha">Last name A–Z</option>
      <option value="lastNameReverseAlpha">Last name Z–A</option></select>
    <div
      class="Polaris-Select__Content"
      aria-hidden="true"
      
    >
      <div style="--pc-box-border-color: transparent;--pc-box-border-style: solid;--pc-box-padding-inline-end-xs: var(--p-space-1)" class="Polaris-Box">
        <span class="Polaris-Text--root Polaris-Text--bodyMd Polaris-Text--subdued Polaris-Text--regular Polaris-Text--block Polaris-Text--truncate">
          Sort by
        </span></div>
      <span
        class="Polaris-Select__SelectedOption"
        data-polaris-select-target="selectedOption"
      >
      </span>
      <span class="Polaris-Select__Icon">
        <span class="Polaris-Icon">
          <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
            <path d="M10 16l-4-4h8l-4 4zm0-12l4 4H6l4-4z"></path>
          </svg>
        </span>      </span>
    </div>
    <div class="Polaris-Select__Backdrop"></div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
<%= polaris_select(
  name: :sort,
  label: "Sort by",
  label_inline: true,
  options: {
    "Newest update" => "newestUpdate",
    "Oldest update" => "oldestUpdate",
    "Most spent" => "mostSpent",
    "Most orders" => "mostOrders",
    "Last name A–Z" => "lastNameAlpha",
    "Last name Z–A" => "lastNameReverseAlpha",
  },
) %>

No notes provided.

No params configured.