Primer ViewComponents v0.36.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
92
93
94
95
<div class="FormControl-spacingWrapper">
  <div data-view-component="true">
    <toggle-switch-input class="FormControl-toggleSwitchInput">
      <span style="flex-grow: 1">
        <span for="success-toggle" id="label-5bbe20de-1aae-4549-84f2-a128c9b36205" data-view-component="true" class="FormControl-label">
          Good example
        </span>
        <div data-target="toggle-switch-input.validationElement" class="FormControl-inlineValidation" id="validation-5bbe20de-1aae-4549-84f2-a128c9b36205" 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="SnTJ8k1rAaRejGE9fSJqi9wYar9jlGH-igevxTn3NfIJ6dd0ob3RTeqF45L-8tIF_SNXY0Uiio7SQfkDaKq6zg" 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-5bbe20de-1aae-4549-84f2-a128c9b36205 caption-5bbe20de-1aae-4549-84f2-a128c9b36205" aria-labelledby="label-5bbe20de-1aae-4549-84f2-a128c9b36205" 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-5bbe20de-1aae-4549-84f2-a128c9b36205">
        My <em>favorite</em> caption lorem ipsum dolor sit amet.
      </span>
    </div>
  </div>
</div>
<hr>
<div class="FormControl-spacingWrapper">
  <div data-view-component="true">
    <toggle-switch-input class="FormControl-toggleSwitchInput">
      <span style="flex-grow: 1">
        <span for="error-toggle" id="label-90778292-1cdd-4f99-933d-55fefbde99ee" data-view-component="true" class="FormControl-label">
          Bad example
        </span>
        <div data-target="toggle-switch-input.validationElement" class="FormControl-inlineValidation" id="validation-90778292-1cdd-4f99-933d-55fefbde99ee" 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="MXBm-BA3fUlrPUpiYO9XMJPWUyL-9DiJRF6mUuETsQpy7Xh-_OGtoN80yM3jP---su1u_thC0_kcGPCUsE4-Ng" 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-90778292-1cdd-4f99-933d-55fefbde99ee caption-90778292-1cdd-4f99-933d-55fefbde99ee" aria-labelledby="label-90778292-1cdd-4f99-933d-55fefbde99ee" 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-90778292-1cdd-4f99-933d-55fefbde99ee">
        My <em>favorite</em> caption lorem ipsum dolor sit amet.
      </span>
    </div>
  </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.