@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

    Keywords

    none

    Install

    npm i @kano/kwc-picker

    DownloadsWeekly Downloads

    97

    Version

    3.3.14

    License

    none

    Unpacked Size

    15.3 kB

    Total Files

    4

    Last publish

    Collaborators

    • jacobmorgan99
    • alexfiennes
    • kanocomputing
    • rpazdera
    • natseg
    • davidweatherall
    • hicksatkano
    • holographicleah
    • tomkano
    • onishiweb
    • alexb-kano
    • charlie-kano
    • jamie_old_plantain