Primer ViewComponents v0.34.0

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
<div class="FormControl-spacingWrapper">
  <toggle-switch-input class="FormControl-toggleSwitchInput">
    <span style="flex-grow: 1">
      <span for="success-toggle" id="label-f8c94634-aae7-4185-ac41-702327b9e316" data-view-component="true" class="FormControl-label">
        Good example
      </span>
      <div data-target="toggle-switch-input.validationElement" class="FormControl-inlineValidation" id="validation-f8c94634-aae7-4185-ac41-702327b9e316" hidden="hidden" role="alert">
        <span data-target="toggle-switch-input.validationMessageElement"></span>
      </div>
  </span>
    <toggle-switch id="success-toggle" src="/view-components/rails-app/toggle_switch" data-csrf="Lt0_RzDgOxsE0eD7MWeXHusCohF740N7KIPAVICsscMoerYopdKT1ECLC3RmoKQk7rpNeQzYOKhkMEsfhGlZRQ" data-view-component="true" class="ToggleSwitch">
      <span class="ToggleSwitch-statusIcon">
        <svg hidden="hidden" data-target="toggle-switch.errorIcon" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert-fill color-fg-danger">
          <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575ZM8 5a.75.75 0 0 0-.75.75v2.5a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8 5Zm1 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z"></path>
        </svg>
        <span hidden="hidden" data-target="toggle-switch.loadingSpinner" data-view-component="true">
          <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="anim-rotate">
            <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" />
            <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" />
          </svg>    <span class="sr-only">Loading</span>
        </span>
      </span>
      <span aria-hidden="true" data-view-component="true" class="ToggleSwitch-status">
        <div data-view-component="true" class="ToggleSwitch-statusOn">On</div>
        <div data-view-component="true" class="ToggleSwitch-statusOff">Off</div>
      </span>
      <button data-target="toggle-switch.switch" data-action="click:toggle-switch#toggle" aria-describedby="validation-f8c94634-aae7-4185-ac41-702327b9e316 caption-f8c94634-aae7-4185-ac41-702327b9e316" aria-labelledby="label-f8c94634-aae7-4185-ac41-702327b9e316" aria-pressed="false" data-view-component="true" class="ToggleSwitch-track">
        <div aria-hidden="true" data-view-component="true" class="ToggleSwitch-icons">
          <div data-view-component="true" class="ToggleSwitch-lineIcon">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-view-component="true">
              <path fill-rule="evenodd" d="M8 2a.75.75 0 0 1 .75.75v11.5a.75.75 0 0 1-1.5 0V2.75A.75.75 0 0 1 8 2Z" />
            </svg></div>
          <div data-view-component="true" class="ToggleSwitch-circleIcon">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-view-component="true">
              <path fill-rule="evenodd" d="M8 12.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Z" />
            </svg></div>
        </div>
        <div data-view-component="true" class="ToggleSwitch-knob"></div>
      </button></toggle-switch>
  </toggle-switch-input>
  <div>    <span class="FormControl-caption" id="caption-f8c94634-aae7-4185-ac41-702327b9e316">
      My <em>favorite</em> caption lorem ipsum dolor sit amet.
    </span>
  </div>
</div>
<hr>
<div class="FormControl-spacingWrapper">
  <toggle-switch-input class="FormControl-toggleSwitchInput">
    <span style="flex-grow: 1">
      <span for="error-toggle" id="label-f4a1dd9d-7289-49f3-889f-aa3398969ae4" data-view-component="true" class="FormControl-label">
        Bad example
      </span>
      <div data-target="toggle-switch-input.validationElement" class="FormControl-inlineValidation" id="validation-f4a1dd9d-7289-49f3-889f-aa3398969ae4" hidden="hidden" role="alert">
        <span data-target="toggle-switch-input.validationMessageElement"></span>
      </div>
  </span>
    <toggle-switch id="error-toggle" src="/view-components/rails-app/toggle_switch?fail=true" data-csrf="DTEo22PJ8-x8VSq9z_WPoEYhEzR6Uh3rVdNITJ5yqYMLlqG09vtbIzgPwTKYMryaQ5n8XA1pZjgZYMMHmrdBBQ" data-view-component="true" class="ToggleSwitch">
      <span class="ToggleSwitch-statusIcon">
        <svg hidden="hidden" data-target="toggle-switch.errorIcon" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert-fill color-fg-danger">
          <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575ZM8 5a.75.75 0 0 0-.75.75v2.5a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8 5Zm1 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z"></path>
        </svg>
        <span hidden="hidden" data-target="toggle-switch.loadingSpinner" data-view-component="true">
          <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="anim-rotate">
            <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" />
            <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" />
          </svg>    <span class="sr-only">Loading</span>
        </span>
      </span>
      <span aria-hidden="true" data-view-component="true" class="ToggleSwitch-status">
        <div data-view-component="true" class="ToggleSwitch-statusOn">On</div>
        <div data-view-component="true" class="ToggleSwitch-statusOff">Off</div>
      </span>
      <button data-target="toggle-switch.switch" data-action="click:toggle-switch#toggle" aria-describedby="validation-f4a1dd9d-7289-49f3-889f-aa3398969ae4 caption-f4a1dd9d-7289-49f3-889f-aa3398969ae4" aria-labelledby="label-f4a1dd9d-7289-49f3-889f-aa3398969ae4" aria-pressed="false" data-view-component="true" class="ToggleSwitch-track">
        <div aria-hidden="true" data-view-component="true" class="ToggleSwitch-icons">
          <div data-view-component="true" class="ToggleSwitch-lineIcon">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-view-component="true">
              <path fill-rule="evenodd" d="M8 2a.75.75 0 0 1 .75.75v11.5a.75.75 0 0 1-1.5 0V2.75A.75.75 0 0 1 8 2Z" />
            </svg></div>
          <div data-view-component="true" class="ToggleSwitch-circleIcon">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-view-component="true">
              <path fill-rule="evenodd" d="M8 12.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Z" />
            </svg></div>
        </div>
        <div data-view-component="true" class="ToggleSwitch-knob"></div>
      </button></toggle-switch>
  </toggle-switch-input>
  <div>    <span class="FormControl-caption" id="caption-f4a1dd9d-7289-49f3-889f-aa3398969ae4">
      My <em>favorite</em> caption lorem ipsum dolor sit amet.
    </span>
  </div>
</div>
1
2
3
<%= render(ExampleToggleSwitchForm.new(label: "Good example", src: toggle_switch_index_path, id: "success-toggle")) %>
<hr>
<%= render(ExampleToggleSwitchForm.new(label: "Bad example", src: toggle_switch_index_path(fail: true), id: "error-toggle")) %>

No notes provided.

No params configured.

app/forms/example_toggle_switch_form.rb

1
2
3
4
5
6
7
8
# frozen_string_literal: true
# :nodoc:
class ExampleToggleSwitchForm < Primer::Forms::ToggleSwitchForm
  def initialize(**system_arguments)
    super(name: :example_field, label: "Example", **system_arguments)
  end
end

app/forms/example_toggle_switch_form/example_field_caption.html.erb

1
My <em>favorite</em> caption lorem ipsum dolor sit amet.