denisdani/kwc-picker

kwc-picker

Basic:

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",
    },
];

Properties:

• HTML attributes:
  • items
    • required
    • default is []

Name:

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",
    },
];

Properties:

• HTML attributes:
  • items
    • required
    • default is []
  • name
    • optional
    • default is Assets

Icon:

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",
    },
];

Properties:

• HTML attributes:
  • items
    • required
    • default is []
  • icon
    • optional
    • default is the plus icon

Selected Index:

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",
    },
];

Properties:

• HTML attributes:
  • items
    • required
    • default is []
  • selected-index
    • optional
    • default is null

Filter:

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",
    },
];

Properties:

• HTML attributes:
  • items
    • required
    • default is []
  • filter
    • optional
    • default is false

Filter On:

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",
    },
];

Properties:

• HTML attributes:
  • items
    • required
    • default is []
  • filter
    • optional
    • default is false
  • filter-on
    • optional
    • default is label