This is the basic one, with only the content to display the items.
<kwc-picker items="[[items]]"></kwc-picker>
const items = [
{
img: "https://kano.me/img1.png",
label: "label 1",
},
{
img: "https://kano.me/img2.png",
label: "label 2",
},
];
- HTML attributes:
items
- required
- default is
[]
This is the basic one, with the content and a custom string on top.
<kwc-picker items="[[items]]" name="My picker name"></kwc-picker>
const items = [
{
img: "https://kano.me/img1.png",
label: "label 1",
},
{
img: "https://kano.me/img2.png",
label: "label 2",
},
];
- HTML attributes:
items
- required
- default is
[]
name
- optional
- default is
Assets
This is the basic one, with the content and a custom icon on top.
<kwc-picker items="[[items]]" icon="https://goo.gl/1bdvq5"></kwc-picker>
const items = [
{
img: "https://kano.me/img1.png",
label: "label 1",
},
{
img: "https://kano.me/img2.png",
label: "label 2",
},
];
- HTML attributes:
items
- required
- default is
[]
icon
- optional
- default is the
plus
icon
This is the basic one, with the content and the value is already been setted by the selected-index
property.
<kwc-picker items="[[items]]" selected-index="1"></kwc-picker>
const items = [
{
img: "https://kano.me/img1.png",
label: "label 1",
},
{
img: "https://kano.me/img2.png",
label: "label 2",
},
];
- HTML attributes:
items
- required
- default is
[]
selected-index
- optional
- default is
null
With this one, you have a search input on the top to filter on label
.
<kwc-picker items="[[items]]" filter></kwc-picker>
const items = [
{
img: "https://kano.me/img1.png",
label: "label 1",
},
{
img: "https://kano.me/img2.png",
label: "label 2",
},
];
- HTML attributes:
items
- required
- default is
[]
filter
- optional
- default is
false
With this one, you have a search input on the top to filter on the filter-on
value you give it.
<kwc-picker items="[[items]]" filter filter-on="text"></kwc-picker>
const items = [
{
img: "https://kano.me/img1.png",
text: "text 1",
},
{
img: "https://kano.me/img2.png",
text: "text 2",
},
];
- HTML attributes:
items
- required
- default is
[]
filter
- optional
- default is
false
filter-on
- optional
- default is
label