@cas-smartdesign/radio-button-group 4.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +8 -0
- package/dist/docs/4_validation.js +1 -0
- package/dist/docs/5_segmented_button.js +1 -0
- package/dist/docs/doc.css +1 -0
- package/dist/docs/doc.mjs +522 -0
- package/dist/docs/index.html +23 -0
- package/dist/radio-button-group-with-externals.js +102 -0
- package/dist/radio-button-group-with-externals.js.map +7 -0
- package/dist/radio-button-group.d.ts +61 -0
- package/dist/radio-button-group.mjs +276 -0
- package/dist/radio-button-group.mjs.map +1 -0
- package/dist/radio-button.d.ts +19 -0
- package/dist/types.d.ts +5 -0
- package/npm-third-party-licenses.json +192 -0
- package/package.json +38 -0
- package/readme.md +66 -0
package/readme.md
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
# @cas-smartdesign/radio-button-group
|
|
2
|
+
|
|
3
|
+
A radio-button-group and a radio-button element based on [lit-element](https://github.com/Polymer/lit-element) with SmartDesign look & feel.
|
|
4
|
+
|
|
5
|
+
## radio-button-group
|
|
6
|
+
|
|
7
|
+
### Attributes
|
|
8
|
+
|
|
9
|
+
- `layout`
|
|
10
|
+
- Defines the layout in which the buttons are placed
|
|
11
|
+
- Possible values: `"horizontal"`, `"vertical"`
|
|
12
|
+
- `uncheck-allowed`
|
|
13
|
+
- Defines whether if buttons can be deselected explicitly
|
|
14
|
+
- `disabled`
|
|
15
|
+
- Defines whether if the group is disabled
|
|
16
|
+
|
|
17
|
+
### Properties
|
|
18
|
+
|
|
19
|
+
- `layout`, `uncheckAllowed`, `disabled`
|
|
20
|
+
- Reflects the corresponding attribute
|
|
21
|
+
- `value`
|
|
22
|
+
- Reflects the value of the checked button in the group
|
|
23
|
+
|
|
24
|
+
### Custom events
|
|
25
|
+
|
|
26
|
+
- `value-change`: **_CustomEvent\<IValueChangeEvent\>_**
|
|
27
|
+
- This event is dispatched when the value is changed because of a user interaction
|
|
28
|
+
|
|
29
|
+
### Validation
|
|
30
|
+
|
|
31
|
+
The element could show validation messages via an `sd-field-validation-message` element which can be configured with the following attributes & properties which are all delegated to that:
|
|
32
|
+
|
|
33
|
+
- `validationMessage`
|
|
34
|
+
- `validationIconSrc`
|
|
35
|
+
- `validationLevel`
|
|
36
|
+
|
|
37
|
+
## radio-button
|
|
38
|
+
|
|
39
|
+
### Attributes
|
|
40
|
+
|
|
41
|
+
- `checked`
|
|
42
|
+
- Defines whether if the button is checked
|
|
43
|
+
- `value`
|
|
44
|
+
- Defines the value of the button
|
|
45
|
+
- `focused`
|
|
46
|
+
- Defines whether if the button has focus
|
|
47
|
+
- `disabled`
|
|
48
|
+
- Defines whether if the interaction with the button is disabled
|
|
49
|
+
- `label`
|
|
50
|
+
- Defines the text of the label
|
|
51
|
+
|
|
52
|
+
### Properties
|
|
53
|
+
|
|
54
|
+
- `checked`, `value`, `focused`, `disabled`, `label`
|
|
55
|
+
- Reflects the corresponding attribute
|
|
56
|
+
|
|
57
|
+
### CSS Custom Properties
|
|
58
|
+
|
|
59
|
+
- `--sd-radio-button-checked-color`
|
|
60
|
+
- Defines the color of the inner & outer circle when the button is checked
|
|
61
|
+
- `--sd-radio-button-highlight-color`
|
|
62
|
+
- Defines the color of the circle which is only visible when the button is focused
|
|
63
|
+
- `--sd-radio-button-unchecked-color`
|
|
64
|
+
- Defines the color of the outer circle and the inner circle when the button is unchecked
|
|
65
|
+
|
|
66
|
+
## Examples
|