Paper Components

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="">
  <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-paper-text-field-has-value-class="Polaris-TextField--hasValue" data-paper-text-field-clear-button-hidden-class="Polaris-TextField__Hidden" data-controller="paper-text-field" class="Polaris-TextField">
        <div class="Polaris-TextField__Prefix">
          https://shopify.com/
        </div>
        <input type="url" name="url" id="url" data-paper-text-field-target="input" data-action="paper-text-field#syncValue" class="Polaris-TextField__Input" />
        <div class="Polaris-TextField__Backdrop"></div>
      </div>
    </div>
  </div>
</div>
<br>
<div class="">
  <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-paper-text-field-has-value-class="Polaris-TextField--hasValue" data-paper-text-field-clear-button-hidden-class="Polaris-TextField__Hidden" data-controller="paper-text-field" class="Polaris-TextField">
        <input type="text" name="shop_domain" id="shop_domain" data-paper-text-field-target="input" data-action="paper-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="">
  <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-paper-text-field-has-value-class="Polaris-TextField--hasValue" data-paper-text-field-clear-button-hidden-class="Polaris-TextField__Hidden" data-controller="paper-text-field" class="Polaris-TextField Polaris-TextField--hasValue">
        <div class="Polaris-TextField__Prefix">
          $
        </div>
        <input type="number" name="price" id="price" value="2" data-paper-text-field-target="input" data-action="paper-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->paper-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->paper-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="">
  <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-paper-text-field-has-value-class="Polaris-TextField--hasValue" data-paper-text-field-clear-button-hidden-class="Polaris-TextField__Hidden" data-controller="paper-text-field" class="Polaris-TextField">
        <div class="Polaris-TextField__Prefix">
          <span class="Polaris-Icon">
            <svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path fill-rule="evenodd" d="M4.5 0h11a1.5 1.5 0 0 1 1.5 1.5v18.223a.2.2 0 0 1-.335.148l-1.662-1.513a.5.5 0 0 0-.673 0l-1.66 1.51a.5.5 0 0 1-.673 0l-1.66-1.51a.5.5 0 0 0-.674 0l-1.66 1.51a.5.5 0 0 1-.673 0l-1.66-1.51a.5.5 0 0 0-.673 0l-1.662 1.512a.2.2 0 0 1-.335-.147v-18.223a1.5 1.5 0 0 1 1.5-1.5zm4.207 11.293c.667.667 1.29.706 1.316.707.528 0 .977-.448.977-1 0-.646-.128-.751-1.243-1.03h-.001c-1.031-.258-2.756-.69-2.756-2.97a2.993 2.993 0 0 1 2-2.815v-.185a1 1 0 0 1 2 0v.2a4.51 4.51 0 0 1 1.707 1.093 1 1 0 0 1-1.414 1.414c-.667-.667-1.291-.706-1.317-.707-.528 0-.976.448-.976 1 0 .646.127.751 1.242 1.03h.002c1.03.258 2.756.69 2.756 2.97a2.995 2.995 0 0 1-2 2.815v.185a1 1 0 0 1-2 0v-.2a4.49 4.49 0 0 1-1.707-1.093 1 1 0 1 1 1.414-1.414z"></path></svg>
          </span>
        </div>
        <input type="text" name="field" id="field" placeholder="Text field" data-paper-text-field-target="input" data-action="paper-text-field#syncValue" class="Polaris-TextField__Input" />
        <div class="Polaris-TextField__Suffix">
          <span class="Polaris-Icon">
            <svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path d="M0 5.324v10.176a1.5 1.5 0 0 0 1.5 1.5h17a1.5 1.5 0 0 0 1.5-1.5v-10.176l-9.496 5.54a1 1 0 0 1-1.008 0l-9.496-5.54z"></path><path d="M19.443 3.334a1.494 1.494 0 0 0-.943-.334h-17a1.49 1.49 0 0 0-.943.334l9.443 5.508 9.443-5.508z"></path></svg>
          </span>
        </div>
        <div class="Polaris-TextField__Backdrop"></div>
      </div>
    </div>
  </div>
</div>
<br>
<div class="">
  <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-paper-text-field-has-value-class="Polaris-TextField--hasValue" data-paper-text-field-clear-button-hidden-class="Polaris-TextField__Hidden" data-controller="paper-text-field" class="Polaris-TextField">
        <div class="Polaris-TextField__Prefix">
          <span class="Polaris-Icon">
            <svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path fill-rule="evenodd" d="M4.5 0h11a1.5 1.5 0 0 1 1.5 1.5v18.223a.2.2 0 0 1-.335.148l-1.662-1.513a.5.5 0 0 0-.673 0l-1.66 1.51a.5.5 0 0 1-.673 0l-1.66-1.51a.5.5 0 0 0-.674 0l-1.66 1.51a.5.5 0 0 1-.673 0l-1.66-1.51a.5.5 0 0 0-.673 0l-1.662 1.512a.2.2 0 0 1-.335-.147v-18.223a1.5 1.5 0 0 1 1.5-1.5zm4.207 11.293c.667.667 1.29.706 1.316.707.528 0 .977-.448.977-1 0-.646-.128-.751-1.243-1.03h-.001c-1.031-.258-2.756-.69-2.756-2.97a2.993 2.993 0 0 1 2-2.815v-.185a1 1 0 0 1 2 0v.2a4.51 4.51 0 0 1 1.707 1.093 1 1 0 0 1-1.414 1.414c-.667-.667-1.291-.706-1.317-.707-.528 0-.976.448-.976 1 0 .646.127.751 1.242 1.03h.002c1.03.258 2.756.69 2.756 2.97a2.995 2.995 0 0 1-2 2.815v.185a1 1 0 0 1-2 0v-.2a4.49 4.49 0 0 1-1.707-1.093 1 1 0 1 1 1.414-1.414z"></path></svg>
          </span>
        </div>
        <input type="text" name="field" id="field" placeholder="Text field" data-paper-text-field-target="input" data-action="paper-text-field#syncValue" class="Polaris-TextField__Input" />
        <div class="Polaris-TextField__Suffix">
          <span class="Polaris-Icon">
            <svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path d="M0 5.324v10.176a1.5 1.5 0 0 0 1.5 1.5h17a1.5 1.5 0 0 0 1.5-1.5v-10.176l-9.496 5.54a1 1 0 0 1-1.008 0l-9.496-5.54z"></path><path d="M19.443 3.334a1.494 1.494 0 0 0-.943-.334h-17a1.49 1.49 0 0 0-.943.334l9.443 5.508 9.443-5.508z"></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
<%= paper_text_field(
  name: :url,
  type: :url,
  label: "URL",
  prefix: "https://shopify.com/",
) %>
<br>
<%= paper_text_field(
  name: :shop_domain,
  label: "Shop address",
  suffix: ".myshopify.com",
) %>
<br>
<%= paper_text_field(
  name: :price,
  value: "2",
  type: :number,
  prefix: "$",
) %>
<br>
<%= paper_text_field(name: :field, placeholder: "Text field") do |c| %>
  <% c.with_prefix(icon: "BillingStatementDollarMajor") %>
  <% c.with_suffix(icon: "EmailMajor") %>
<% end %>
<br>
<%= paper_text_field(name: :field, placeholder: "Text field") do |c| %>
  <% c.with_prefix do %>
    <%= paper_icon(name: "BillingStatementDollarMajor") %>
  <% end %>
  <% c.with_suffix do %>
    <%= paper_icon(name: "EmailMajor") %>
  <% end %>
<% end %>

No notes provided.

No params configured.