You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: README.md
+43-43
Original file line number
Diff line number
Diff line change
@@ -47,87 +47,87 @@ Users can turn on/off the switch by clicking it, and submitting the form will ha
47
47
## Proposed API
48
48
49
49
The element is provided as a [built-in module](https://github.com/tc39/proposal-javascript-standard-library/).
50
-
```import 'std:elements/switch'``` defines ```<std-switch>``` element and ```StdSwitchElement``` interface.
50
+
`import 'std:elements/switch'` defines `<std-switch>` element and `StdSwitchElement` interface.
51
51
52
-
```<std-switch>``` is similar to ```<input type=checkbox>``` in terms of API. A ```<std-switch>``` instance has two states; "off" and "on". It doesn't support indeterminate state like the checkbox.
52
+
`<std-switch>` is similar to `<input type=checkbox>` in terms of API. A `<std-switch>` instance has two states; "off" and "on". It doesn't support indeterminate state like the checkbox.
TODO: Supports ```autofocus```, which should be a global attribute. ([whatwg/html#4563](https://github.com/whatwg/html/issues/4563))
63
+
TODO: Supports `autofocus`, which should be a global attribute. ([whatwg/html#4563](https://github.com/whatwg/html/issues/4563))
64
64
65
65
These attributes should work same as existing form controls.
66
66
67
-
```<std-switch>``` should support ```checked``` and ```defaultchecked``` attributes ([Issue #2](https://github.com/tkent-google/std-switch/issues/2)). There are some approaches for them. We have not decided yet. ([Issue #4](https://github.com/tkent-google/std-switch/issues/4))
67
+
`<std-switch>` should support `checked` and `defaultchecked` attributes ([Issue #2](https://github.com/tkent-google/std-switch/issues/2)). There are some approaches for them. We have not decided yet. ([Issue #4](https://github.com/tkent-google/std-switch/issues/4))
68
68
69
-
* A) Compatible with ```<input type=checkbox>```<br>
70
-
```checked``` attribute represents the default state, and ```defaultChecked``` property reflects on ```checked``` attribute. No attribute mapped to ```checked``` property.
69
+
* A) Compatible with `<input type=checkbox>`<br>
70
+
`checked` attribute represents the default state, and `defaultChecked` property reflects on `checked` attribute. No attribute mapped to `checked` property.
71
71
* B) Simple mappings<br>
72
-
```defaultChecked``` property reflects on ```defaultchecked``` attribute value, and ```checked``` property reflects on ```checked``` attribute. Code like ```switch.checked = true``` adds ```checked``` attribute. We need to specify ```defaultchecked``` attribute if we want to reset the element to on state, like ```<std-switch defaultchecked checked>```
72
+
`defaultChecked` property reflects on `defaultchecked` attribute value, and `checked` property reflects on `checked` attribute. Code like `switch.checked = true` adds `checked` attribute. We need to specify `defaultchecked` attribute if we want to reset the element to on state, like `<std-switch defaultchecked checked>`
73
73
74
74
### Properties and functions
75
75
76
-
*```checked``` - Represents the element's state. See the previous section
77
-
*```defaultChecked``` - Represents the default state. See the previous section
78
-
*```disabled``` - Same as existing form controls
79
-
*```form``` - Same as existing form controls
80
-
*```labels``` - Same as existing form controls
81
-
*```name``` - Same as existing form controls
82
-
*```type``` - returns ```'std-switch'```
83
-
*```willValidate``` - Same as existing form controls
84
-
*```validationMessage``` - Same as existing form controls
76
+
*`checked` - Represents the element's state. See the previous section
77
+
*`defaultChecked` - Represents the default state. See the previous section
78
+
*`disabled` - Same as existing form controls
79
+
*`form` - Same as existing form controls
80
+
*`labels` - Same as existing form controls
81
+
*`name` - Same as existing form controls
82
+
*`type` - returns `'std-switch'`
83
+
*`willValidate` - Same as existing form controls
84
+
*`validationMessage` - Same as existing form controls
85
85
86
-
*```checkValidity()``` - Same as existing form controls
87
-
*```reportValidity()``` - Same as existing form controls
88
-
*```setCustomValidity(errorMessage)``` - Same as existing form controls
86
+
*`checkValidity()` - Same as existing form controls
87
+
*`reportValidity()` - Same as existing form controls
88
+
*`setCustomValidity(errorMessage)` - Same as existing form controls
89
89
90
90
91
91
### Pseudo classes
92
92
93
-
* Global ones such as ```:focus``````:hover``````:target```
94
-
*```:valid``` - match if the element has no ```required``` attribute, of if the element has ```required``` attribute and the state is on.
95
-
*```:invalid``` - match if the element doesn't match to ```:valid```.
96
-
*```:disabled``` - match if the element has ```disabled``` attribute, or an ancestor ```<fieldset>``` has ```disabled``` attribute.
97
-
*```:enabled``` - match if the element doesn't match to ```:disabled```.
93
+
* Global ones such as `:focus``:hover``:target`
94
+
*`:valid` - match if the element has no `required` attribute, of if the element has `required` attribute and the state is on.
95
+
*`:invalid` - match if the element doesn't match to `:valid`.
96
+
*`:disabled` - match if the element has `disabled` attribute, or an ancestor `<fieldset>` has `disabled` attribute.
97
+
*`:enabled` - match if the element doesn't match to `:disabled`.
98
98
99
-
TODO: Supports ```:checked``` ([Issue #3](https://github.com/tkent-google/std-switch/issues/3)), ```:required```, and ```:optional``` ([w3c/webcomponents#813](https://github.com/w3c/webcomponents/issues/813))
99
+
TODO: Supports `:checked` ([Issue #3](https://github.com/tkent-google/std-switch/issues/3)), `:required`, and `:optional` ([w3c/webcomponents#813](https://github.com/w3c/webcomponents/issues/813))
100
100
101
101
102
102
### Events
103
103
104
-
```<std-switch>``` dispatches ```input``` and ```change``` events when a user changes the element's state.
104
+
`<std-switch>` dispatches `input` and `change` events when a user changes the element's state.
105
105
106
106
107
107
### Relationship with other elements
108
108
109
-
*```form```<br>
110
-
Markup like ```<form>...<std-switch></std-switch>...</form>``` associates the ```<std-switch>``` element to the ```<form>```. ```<form>```'s ```elements``` property lists the ```<std-switch>```, and submitting the ```<form>``` adds an entry for the ```<std-switch>```.
111
-
*```fieldset```<br>
112
-
Markup like ```<fieldset>...<std-switch></std-switch>...</fieldset>``` associates the ```<std-switch>``` element to the ```<fieldset>```. ```<fieldset>```'s ```elements``` property lists the ```<std-switch>```, and disabling the ```<fieldset>``` also disables the ```<std-switch>``` implicitly.
113
-
*```label```<br>
114
-
Markup like ```<label>...<std-switch></std-switch></label>``` associates the ```<std-switch>``` element to the ```<label>```. Clicking anywhere in the ```<label>``` changes the state of the ```<std-switch>```.
109
+
*`form`<br>
110
+
Markup like `<form>...<std-switch></std-switch>...</form>` associates the `<std-switch>` element to the `<form>`. `<form>`'s `elements` property lists the `<std-switch>`, and submitting the `<form>` adds an entry for the `<std-switch>`.
111
+
*`fieldset`<br>
112
+
Markup like `<fieldset>...<std-switch></std-switch>...</fieldset>` associates the `<std-switch>` element to the `<fieldset>`. `<fieldset>`'s `elements` property lists the `<std-switch>`, and disabling the `<fieldset>` also disables the `<std-switch>` implicitly.
113
+
*`label`<br>
114
+
Markup like `<label>...<std-switch></std-switch></label>` associates the `<std-switch>` element to the `<label>`. Clicking anywhere in the `<label>` changes the state of the `<std-switch>`.
115
115
116
116
117
117
### Form submission
118
118
119
119
There are two approaches. We have not decided yet. ([Issue #5](https://github.com/tkent-google/std-switch/issues/5))
120
120
121
-
* A) Compatible with ```<input type=checkbox>```<br>
122
-
```<std-swtich name=something>``` with "off" state will send no entry. One with "on" state will send ```value``` attribute value if it exists, or ```something=on```.
121
+
* A) Compatible with `<input type=checkbox>`<br>
122
+
`<std-swtich name=something>` with "off" state will send no entry. One with "on" state will send `value` attribute value if it exists, or `something=on`.
123
123
* B) Send state simply<br>
124
-
```<std-swtich name=something>``` with "off" state will send ```something=off```, one with "on" state will send ```something=on```.
124
+
`<std-swtich name=something>` with "off" state will send `something=off`, one with "on" state will send `something=on`.
125
125
126
126
127
127
### Appearance customization
128
128
129
129
TODO: an easy flag to enable platform-dependent appearance ([Issue #6](https://github.com/tkent-google/std-switch/issues/6))
130
-
When the flag is enabled, ```std-switch``` element is styled as UISwitch on iOS, [Material Design switch](https://material.io/design/components/selection-controls.html#switches) on Android, [Fluent design toggle switch](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/toggles) on Windows.
130
+
When the flag is enabled, `std-switch` element is styled as UISwitch on iOS, [Material Design switch](https://material.io/design/components/selection-controls.html#switches) on Android, [Fluent design toggle switch](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/toggles) on Windows.
131
131
132
132
TODO: Full customization. Shadow parts? CSS custom properties? ([Issue #7](https://github.com/tkent-google/std-switch/issues/7))
0 commit comments