Skip to content

Commit

Permalink
Merge pull request #44 from SaekiTominaga/input-switch/part
Browse files Browse the repository at this point in the history 
[input-switch] Changed to use`::part()` for style customization
  • Loading branch information
@SaekiTominaga
SaekiTominaga committed Feb 2, 2024
2 parents d2da777 + 2145278 commit 52f7ba7
Show file tree
Hide file tree
Showing 4 changed files with 212 additions and 228 deletions.
58 changes: 45 additions & 13 deletions packages/input-switch/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,26 +38,58 @@
<dt><code>name</code> [optional]</dt>
<dd>Name of the element to use for form submission. (Same as <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-name"><code>name</code> attribute of <code>&lt;input&gt;</code> Element</a>)</dd>
<dt><code>value</code> [optional]</dt>
<dd>Value of the form control. If omitted, the value is "<code>on</code>". (Same as <a href="https://html.spec.whatwg.org/multipage/input.html#attr-input-value"><code>value</code> attribute of <code>&lt;input&gt;</code> Element</a>)</dd>
<dd>Value of the form control. If omitted, the value is <code>on</code>. (Same as <a href="https://html.spec.whatwg.org/multipage/input.html#attr-input-value"><code>value</code> attribute of <code>&lt;input&gt;</code> Element</a>)</dd>
<dt><code>checked</code> [optional]</dt>
<dd>Whether the control is checked. (Same as <a href="https://html.spec.whatwg.org/multipage/input.html#attr-input-checked"><code>checked</code> attribute of <code>&lt;input&gt;</code> Element</a>)</dd>
<dt><code>disabled</code> [optional]</dt>
<dd>Whether the form control is disabled. (Same as <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-disabled"><code>disabled</code> attribute of <code>&lt;input&gt;</code> Element</a>)</dd>
<dt><code>storage-key</code> [optional]</dt>
<dd>Save this value as localStorage key when switching controls. (value is `true` or `false` depending on the check state)</dd>
<dd>Save this value as <code>localStorage</code> key when switching controls. (value is <code>true</code> or <code>false</code> depending on the check state)</dd>
</dl>

## Style customization (CSS custom properties)
## Style customization

The following CSS custom properties can be used to customize the style.

| name | deault | Description |
|-|-|-|
| `--switch-width` | 3.6em | Outer frame width |
| `--switch-height` | 1.8em | Outer frame height |
| `--switch-padding` | 0.2em | Spacing between the outer frame and the sphere (Negative value can be specified) |
| `--switch-bgcolor-on` | #2299ff | Background color when \`on\` |
| `--switch-bgcolor-off` | #cccccc | Background color when \`off\` |
| `--switch-bgcolor-disabled-on` | #666666 | [disabled] Background color when \`on\` |
| `--switch-bgcolor-disabled-off` | #666666 | [disabled] Background color when \`off\` |
| `--switch-ball-color` | #ffffff | Slider sphere color (background property) |
| `--switch-animation-duration` | 0.5s | Time a transition animation (transition-duration property) |
| `--switch-outline-mouse-focus` | none | Focus indicator on mouse-focus (outline property) |
| `--outline-offset` | `1px` | [`outline-offset`](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset) property value of switch control |
| `--inline-size` | `2em` | Inline size of switch control |
| `--block-size` | `1em` | Block size of switch control |
| `--animation-duration` | `0.5s` | Time a transition animation ([`transition-duration`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration) property) |
| `--track-color-on` | `#2299ff` | Track color when switch is on |
| `--track-color-off` | `#cccccc` | Track color when switch is off |
| `--track-color-disabled-on` | `#666666` | Track color when switch is on `disabled` |
| `--track-color-disabled-off` | `#666666` | Track color when switch is off and `disabled` |
| `--thumb-radius` | `calc(0.5em - 1px)` | Radius of slider ball |
| `--thumb-color` | `#ffffff` | Color of slider ball |

The shadow DOM of the switch looks like this.

```html
<x-input-switch class="my-switch">
#shadow-root (open)
<div part="track"></div>
<div part="thumb"></div>
</x-input-switch>
```

Therefore, the [`::part`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) CSS pseudo-element may be used to customize the style as desired.

```css
.my-switch {
--outline-offset: ...;
--inline-size: ...;
...

&::part(track) {
...
}

&::part(thumb) {
...
}
}
```

However, customizations other than CSS custom properties may be broken in future version updates.
80 changes: 35 additions & 45 deletions packages/input-switch/demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,32 @@
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>`InputSwitch.js` Demo</title>
<style>
.switch {
.switch-wrap {
display: inline-flex;
align-items: center;
gap: 10px;
}

p.switch {
p.switch-wrap {
display: flex;
}

.switch.-custom {
--outline-offset: 0px;
--inline-size: 10em;
--block-size: 3em;
--animation-duration: 1s;
--track-color-on: lightgreen;
--track-color-off: gray;
--thumb-radius: 2em;
--thumb-color: purple;

&::part(track) {
}

&::part(thumb) {
}
}
</style>
<script type="importmap">
{
Expand All @@ -35,15 +52,7 @@ <h2>Explicit label</h2>

<pre><code>&lt;x-input-switch id="input-switch-1"&gt;&lt;/x-input-switch&gt; &lt;label for="input-switch-1"&gt;switch&lt;/label&gt;</code></pre>

<p class="switch"><x-input-switch id="input-switch-1"></x-input-switch> <label for="input-switch-1">switch</label></p>

<p>
<small
>* Association is not performed in browsers that do not support
<a href="https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example"><code>formAssociated</code> property</a>. As of
March 2022, Firefox 98 and Chrome 99 is supported.</small
>
</p>
<p class="switch-wrap"><x-input-switch id="input-switch-1"></x-input-switch> <label for="input-switch-1">switch</label></p>
</section>

<section>
Expand All @@ -52,15 +61,7 @@ <h2>Implicit label</h2>
<pre><code>&lt;label&gt;&lt;x-input-switch&gt;&lt;/x-input-switch&gt; switch&lt;/label&gt;</code></pre>

<p>
<label class="switch"><x-input-switch></x-input-switch> switch</label>
</p>

<p>
<small
>* Association is not performed in browsers that do not support
<a href="https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example"><code>formAssociated</code> property</a>. As of
March 2022, Firefox 98 and Chrome 99 is supported.</small
>
<label class="switch-wrap"><x-input-switch></x-input-switch> switch</label>
</p>
</section>

Expand All @@ -70,7 +71,7 @@ <h2><code>checked</code> attribute</h2>
<pre><code>&lt;label&gt;&lt;x-input-switch checked=""&gt;&lt;/x-input-switch&gt; switch&lt;/label&gt;</code></pre>

<p>
<label class="switch"><x-input-switch checked=""></x-input-switch> switch</label>
<label class="switch-wrap"><x-input-switch checked=""></x-input-switch> switch</label>
</p>
</section>

Expand All @@ -80,7 +81,7 @@ <h2><code>disabled</code> attribute</h2>
<pre><code>&lt;label&gt;&lt;x-input-switch disabled=""&gt;&lt;/x-input-switch&gt; switch&lt;/label&gt;</code></pre>

<p>
<label class="switch"><x-input-switch disabled=""></x-input-switch> switch</label>
<label class="switch-wrap"><x-input-switch disabled=""></x-input-switch> switch</label>
</p>
</section>

Expand All @@ -90,22 +91,27 @@ <h2><code>storage-key</code> attribute</h2>
<pre><code>&lt;label&gt;&lt;x-input-switch storage-key="foo"&gt;&lt;/x-input-switch&gt; switch&lt;/label&gt;</code></pre>

<p>
<label class="switch"><x-input-switch storage-key="foo"></x-input-switch> switch</label>
<label class="switch-wrap"><x-input-switch storage-key="foo"></x-input-switch> switch</label>
</p>
</section>

<section>
<h2>Form submission</h2>

<pre><code>&lt;label&gt;&lt;x-input-switch name="switch1" value="1"&gt;&lt;/x-input-switch&gt; switch&lt;/label&gt;
&lt;label&gt;&lt;x-input-switch name="switch2" value="1" checked=""&gt;&lt;/x-input-switch&gt; switch&lt;/label&gt;</code></pre>
<pre><code>&lt;form&gt;
&lt;p&gt;&lt;label&gt;&lt;x-input-switch name="switch1" value="1"&gt;&lt;/x-input-switch&gt; switch&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;&lt;x-input-switch name="switch2" value="1" checked=""&gt;&lt;/x-input-switch&gt; switch&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;button&gt;Submit&lt;/button&gt; &lt;button type="reset"&gt;Reset&lt;/button&gt;&lt;/p&gt;
&lt;/form&gt;

</code></pre>

<form>
<p>
<label class="switch"><x-input-switch name="switch1" value="1"></x-input-switch> switch</label>
<label class="switch-wrap"><x-input-switch name="switch1" value="1"></x-input-switch> switch</label>
</p>
<p>
<label class="switch"><x-input-switch name="switch2" value="1" checked=""></x-input-switch> switch</label>
<label class="switch-wrap"><x-input-switch name="switch2" value="1" checked=""></x-input-switch> switch</label>
</p>
<p><button>Submit</button> <button type="reset">Reset</button></p>
</form>
Expand All @@ -114,7 +120,7 @@ <h2>Form submission</h2>
<small
>* Values are not sent in browsers that do not support
<a href="https://html.spec.whatwg.org/multipage/custom-elements.html#element-internals"><code>ElementInternals</code></a
>. As of March 2023, Firefox 93+ and Chrome 77+ is supported.</small
>. As of February 2024, Firefox 93+, Safari 16.4+ and Chrome 77+ is supported.</small
>
</p>
</section>
Expand All @@ -123,24 +129,8 @@ <h2>Form submission</h2>
<h2>Style customization</h2>

<p>
<label class="switch"
><x-input-switch
style="
--switch-width: 10em;
--switch-height: 3em;
--switch-padding: -0.5em;
--switch-bgcolor-on: lightgreen;
--switch-bgcolor-off: gray;
--switch-ball-color: purple;
--switch-animation-duration: 1s;
--switch-outline-mouse-focus: 4px dotted orange;
"
></x-input-switch>
switch</label
>
<label class="switch-wrap"><x-input-switch class="switch -custom"></x-input-switch> switch</label>
</p>

<p>* CSS custom properties names have changed in the version 2.0.0 update. <strong>(Not compatible with version 1 series)</strong></p>
</section>
</body>
</html>

0 comments on commit 52f7ba7

Please sign in to comment.