svelte-radio-checkbox-z
v1.0.2
Published
Svelte UI Check/Radio [RadioGroup, Checkbox(s)]. Custom (test-svelte)
Downloads
14
Maintainers
Readme
You can customize icon, theme or color for Checkbox/Radio
Vue /React/ Svelte
Usage
Install the package
npm install --save svelte-radio-checkbox-z
Import the module in the place you want to use:
import RadioCheckBox from "svelte-radio-checkbox-z";
Snippet
// js
// let selected = ['Radio', ...] // radio || checkbox
let selected = 'Radio' // radio
let options = [
'Radio',
'Radio2',
{ label: 'Radio5', value: 'object', disabled: true },
{ label: 'Radio6', value: 'object1', disabled: true, className: "abcd", labelClassName: "addd" },
// .... more
]
const setSelectedValue = ({ detail }) => {
selected = detail
}
// default => style html
<RadioCheckBox bind:value={selected} bind:options={options} on:change={setSelectedValue}/>
// theme custom
<RadioCheckBox
bind:value={selected}
bind:options={options}
on:change={setSelectedValue}
theme='tick'
selectColor='red'
tickColor='blue'
/>
<!--
// more =>
// groupName="item-group-template" // default random unique
// height="30" // min-height option
// boxSize="16" // box-size 16 x 16
// className=className
// disabled=true // disabled all
// checkBox=true // input="checkbox"
// displayBox=true // display like checkbox
// vertical=true // display vertical
// selectColor=any // color when selected
// unSelectColor=any // color when no selected
// hoverColor=any // color when hover (default like selectColor)
// tickColor=any // only theme (type `tick/x`)
// tabFocusColor // keypress tab (shawdow box: #000)
// checkedIcon // custom icon
// (boxSize is affected by: `box-sizing: border-box`)
-->
Props
The following props are accepted:
value (Array
|| String
)
Selected value.
change (Function
)
Update value
groupName (String
)
if you want to use multiple RadioCheckBox(same name), you can set the group name
<RadioCheckBox groupName="groupabc" theme="in" ... />
<RadioCheckBox groupName="groupabc" theme="fill" ... />
options (Array
)
list data like. [Object, String, ...]
[
{
label: 'Display', value: 'value', disabled: false, // disabled option
className: 'itemClass', labelClassName: 'labelClass',
htmlData, // you change display label by htmlData
checkedIcon // passing custom checked icon (special)
},
...,
'value' // => make option { label: value, value: value }
]
disabled (boolean
)
Disabled all options. Default false
checkBox (boolean
)
Type is checkbox. Default false
(radio)
displayBox (boolean
)
Show check mark icon like a checkbox. Default false
(radio)
vertical (boolean
)
Display vertical true
. Defaut false
theme (String
)
// default (nothing): html
in: [
'fill', 'in', 'out',
'tick', 'tick-fill', 'tick-fill-in',
'x', 'x-fill', 'x-fill-in'
]
selectColor (String
)
color when checked. Default #4169E1
unSelectColor (String
)
color when unchecked. Default [#cbd1d8]
hoverColor (String
)
color when hover. Default using (selectColor)
tickColor (String
)
Use when theme
type = tick..
|| x..
Color of tick when check.
tabFocusColor (String
)
box shadow color when focus by tab. (#000
)
height (number
or number_px
)
min-height of line-options. (default: 24px
)
boxSize (number
or number_px
)
size of check. (default: 16px
)
className
The className added to group.
checkedIcon
customize checked icon (see live example)
customize icon check (another solution)
You should refrain from using this method.
/* set your className(.itemClass) for selector unique */
.itemClass.ldk-sv-radio-checkbox .sv-option-checked .sv-option-icon {
background: url('./assets/images/cal.png') no-repeat center;
}
.itemClass.ldk-sv-radio-checkbox .sv-option-checked .sv-option-icon::before {
content: '' !important;
}
Example
LIVE EXAMPLE
A working example can be found in the example
directory.
npm install
npm run dev
npm run start
License
MIT