@kano/kwc-picker

## Basic:

Stats

StarsIssuesVersionUpdatedCreatedSize
@kano/kwc-picker
3.3.14a year ago3 years agoMinified + gzip package size for @kano/kwc-picker in KB

Readme

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.