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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<div class="polaris-text-field-wrapper">
  <div class="Polaris-Labelled__LabelWrapper">
    <div class="Polaris-Label">
      <label class="Polaris-Label__Text" for="url">URL</label>
    </div>
  </div>
  <div class="Polaris-Connected">
    <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
      <div data-polaris-text-field-has-value-class="Polaris-TextField--hasValue" data-polaris-text-field-clear-button-hidden-class="Polaris-TextField__Hidden" data-controller="polaris-text-field" class="Polaris-TextField">
        <div class="Polaris-TextField__Prefix">
          https://shopify.com/
        </div>
        <input type="url" name="url" id="url" data-polaris-text-field-target="input" data-action="polaris-text-field#syncValue" class="Polaris-TextField__Input" />
        <div class="Polaris-TextField__Backdrop"></div>
      </div>
    </div>
  </div>
</div>
<br>
<div class="polaris-text-field-wrapper">
  <div class="Polaris-Labelled__LabelWrapper">
    <div class="Polaris-Label">
      <label class="Polaris-Label__Text" for="shop_domain">Shop address</label>
    </div>
  </div>
  <div class="Polaris-Connected">
    <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
      <div data-polaris-text-field-has-value-class="Polaris-TextField--hasValue" data-polaris-text-field-clear-button-hidden-class="Polaris-TextField__Hidden" data-controller="polaris-text-field" class="Polaris-TextField">
        <input type="text" name="shop_domain" id="shop_domain" data-polaris-text-field-target="input" data-action="polaris-text-field#syncValue" class="Polaris-TextField__Input Polaris-TextField__Input--suffixed" />
        <div class="Polaris-TextField__Suffix">
          .myshopify.com
        </div>
        <div class="Polaris-TextField__Backdrop"></div>
      </div>
    </div>
  </div>
</div>
<br>
<div class="polaris-text-field-wrapper">
  <div class="Polaris-Labelled__LabelWrapper">
    <div class="Polaris-Label">
      <label class="Polaris-Label__Text" for="price">Price</label>
    </div>
  </div>
  <div class="Polaris-Connected">
    <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
      <div data-polaris-text-field-has-value-class="Polaris-TextField--hasValue" data-polaris-text-field-clear-button-hidden-class="Polaris-TextField__Hidden" data-controller="polaris-text-field" class="Polaris-TextField Polaris-TextField--hasValue">
        <div class="Polaris-TextField__Prefix">
          $
        </div>
        <input type="number" name="price" id="price" value="2" data-polaris-text-field-target="input" data-action="polaris-text-field#syncValue" step="1" min="0" max="1000000" class="Polaris-TextField__Input" />
        <div class="Polaris-TextField__Spinner" aria-hidden="true">
          <div
              role="button"
              class="Polaris-TextField__Segment"
              tabindex="-1"
              data-action="click->polaris-text-field#increase"
            >
            <div class="Polaris-TextField__SpinnerIcon">
              <span class="Polaris-Icon">
                <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                  <path d="M15 12l-5-5-5 5h10z"></path>
                </svg>
              </span>              </div>
          </div>
          <div
              role="button"
              class="Polaris-TextField__Segment"
              tabindex="-1"
              data-action="click->polaris-text-field#decrease"
            >
            <div class="Polaris-TextField__SpinnerIcon">
              <span class="Polaris-Icon">
                <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                  <path d="M5 8l5 5 5-5H5z"></path>
                </svg>
              </span>              </div>
          </div>
        </div>
        <div class="Polaris-TextField__Backdrop"></div>
      </div>
    </div>
  </div>
</div>
<br>
<div class="polaris-text-field-wrapper">
  <div class="Polaris-Labelled__LabelWrapper">
    <div class="Polaris-Label">
      <label class="Polaris-Label__Text" for="field">Field</label>
    </div>
  </div>
  <div class="Polaris-Connected">
    <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
      <div data-polaris-text-field-has-value-class="Polaris-TextField--hasValue" data-polaris-text-field-clear-button-hidden-class="Polaris-TextField__Hidden" data-controller="polaris-text-field" class="Polaris-TextField">
        <div class="Polaris-TextField__Prefix">
          <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>
        <input type="text" name="field" id="field" placeholder="Text field" data-polaris-text-field-target="input" data-action="polaris-text-field#syncValue" class="Polaris-TextField__Input" />
        <div class="Polaris-TextField__Suffix">
          <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.75 4.5c-1.519 0-2.75 1.231-2.75 2.75v5.5c0 1.519 1.231 2.75 2.75 2.75h8.5c1.519 0 2.75-1.231 2.75-2.75v-5.5c0-1.519-1.231-2.75-2.75-2.75h-8.5Zm-1.25 2.75c0-.69.56-1.25 1.25-1.25h8.5c.69 0 1.25.56 1.25 1.25v5.5c0 .69-.56 1.25-1.25 1.25h-8.5c-.69 0-1.25-.56-1.25-1.25v-5.5Zm2.067.32c-.375-.175-.821-.013-.997.363-.175.375-.013.821.363.997l3.538 1.651c.335.156.723.156 1.058 0l3.538-1.651c.376-.176.538-.622.363-.997-.175-.376-.622-.538-.997-.363l-3.433 1.602-3.433-1.602Z"></path></svg>
          </span>
        </div>
        <div class="Polaris-TextField__Backdrop"></div>
      </div>
    </div>
  </div>
</div>
<br>
<div class="polaris-text-field-wrapper">
  <div class="Polaris-Labelled__LabelWrapper">
    <div class="Polaris-Label">
      <label class="Polaris-Label__Text" for="field">Field</label>
    </div>
  </div>
  <div class="Polaris-Connected">
    <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
      <div data-polaris-text-field-has-value-class="Polaris-TextField--hasValue" data-polaris-text-field-clear-button-hidden-class="Polaris-TextField__Hidden" data-controller="polaris-text-field" class="Polaris-TextField">
        <div class="Polaris-TextField__Prefix">
          <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>
        <input type="text" name="field" id="field" placeholder="Text field" data-polaris-text-field-target="input" data-action="polaris-text-field#syncValue" class="Polaris-TextField__Input" />
        <div class="Polaris-TextField__Suffix">
          <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.75 4.5c-1.519 0-2.75 1.231-2.75 2.75v5.5c0 1.519 1.231 2.75 2.75 2.75h8.5c1.519 0 2.75-1.231 2.75-2.75v-5.5c0-1.519-1.231-2.75-2.75-2.75h-8.5Zm-1.25 2.75c0-.69.56-1.25 1.25-1.25h8.5c.69 0 1.25.56 1.25 1.25v5.5c0 .69-.56 1.25-1.25 1.25h-8.5c-.69 0-1.25-.56-1.25-1.25v-5.5Zm2.067.32c-.375-.175-.821-.013-.997.363-.175.375-.013.821.363.997l3.538 1.651c.335.156.723.156 1.058 0l3.538-1.651c.376-.176.538-.622.363-.997-.175-.376-.622-.538-.997-.363l-3.433 1.602-3.433-1.602Z"></path></svg>
          </span>
        </div>
        <div class="Polaris-TextField__Backdrop"></div>
      </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
30
31
32
33
34
35
36
37
38
39
40
41
<%= polaris_text_field(
  name: :url,
  type: :url,
  label: "URL",
  prefix: "https://shopify.com/",
) %>
<br>
<%= polaris_text_field(
  name: :shop_domain,
  label: "Shop address",
  suffix: ".myshopify.com",
) %>
<br>
<%= polaris_text_field(
  name: :price,
  value: "2",
  type: :number,
  prefix: "$",
) %>
<br>
<%= polaris_text_field(name: :field, placeholder: "Text field") do |c| %>
  <% c.with_prefix(icon: "ReceiptDollarFilledIcon") %>
  <% c.with_suffix(icon: "EmailIcon") %>
<% end %>
<br>
<%= polaris_text_field(name: :field, placeholder: "Text field") do |c| %>
  <% c.with_prefix do %>
    <%= polaris_icon(name: "ReceiptDollarFilledIcon") %>
  <% end %>
  <% c.with_suffix do %>
    <%= polaris_icon(name: "EmailIcon") %>
  <% end %>
<% end %>

No notes provided.

No params configured.