@kano/kwc-picker

3.3.14 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i @kano/kwc-picker

Weekly Downloads

19

Version

3.3.14

License

none

Unpacked Size

15.3 kB

Total Files

4

Last publish

Collaborators

  • dianlin61
  • jacobmorgan99
  • alexnklein
  • ellenw3lsh
  • camuskano
  • alexfiennes
  • kanocomputing
  • jamie_old_plantain