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-d9559df4-4fac-4ac8-9e4a-1d66c6cfe41a" data-view-component="true" class="FormControl-label">
        Good example
      </span>
      <div data-target="toggle-switch-input.validationElement" class="FormControl-inlineValidation" id="validation-d9559df4-4fac-4ac8-9e4a-1d66c6cfe41a" 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="WUPAwIX0RRHj-iHaz3bS7KiW4nPRcKXK-hLx3VUOHsG0COWceyUovJLVmBr4LbeA1_2ZlScFVCPhbxAVSoRtyA" 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-d9559df4-4fac-4ac8-9e4a-1d66c6cfe41a caption-d9559df4-4fac-4ac8-9e4a-1d66c6cfe41a" aria-labelledby="label-d9559df4-4fac-4ac8-9e4a-1d66c6cfe41a" 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-d9559df4-4fac-4ac8-9e4a-1d66c6cfe41a">
      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-ad3b18d4-95a9-43f4-be58-44dc0c32232d" data-view-component="true" class="FormControl-label">
        Bad example
      </span>
      <div data-target="toggle-switch-input.validationElement" class="FormControl-inlineValidation" id="validation-ad3b18d4-95a9-43f4-be58-44dc0c32232d" 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="k9e1sWq_MRMAG3mPWV9P3Yb13RDzXZFHq92mu06u6i9-nJDtlG5cvnE0wE9uBCqx-Z6m9gUoYK6woEdzUSSZJg" 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-ad3b18d4-95a9-43f4-be58-44dc0c32232d caption-ad3b18d4-95a9-43f4-be58-44dc0c32232d" aria-labelledby="label-ad3b18d4-95a9-43f4-be58-44dc0c32232d" 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-ad3b18d4-95a9-43f4-be58-44dc0c32232d">
      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.