Nattily Primped Monster

    @uxland/uxl-switch
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    <uxl-switch>

    What is?

    It is a web component that allows you to create a toggle switch input.

    How Install
    npm i --save @uxland/uxl-switch
    
    How to use?

    import the component and use it in the html with the uxl-switch tag

    import "@uxland/uxl-switch";
    
    <body>
        <uxl-switch></uxl-switch>
    </body>
    

    Attributes availables

    Attribute Description Default
    active Status of the switch false (boolean)
    activeName Value of active text label "Active" (string)
    inactiveName Value of inactive text label "Inactive" (string)
    enabled If true, the uxl-switch is enable to change, otherwhise the uxl-switch is disabled true (boolean)

    Styling

    The following custom properties and mixins are available for styling:

    Custom property Description Default
    --uxl-switch-width Width of the uxl-switch 200px
    --uxl-switch-border-color Border color of component wrapper #e0e0e0
    --uxl-switch-option-background-color Background color of the options #ffffff
    --uxl-switch-option-padding Padding of the options 8px
    --uxl-switch-text-color Default text color when option is not selected #616161
    --uxl-switch-font-size Font size of text options 16px
    --uxl-switch-active-selected-background-color Background color of active option when is selected #81c784
    --uxl-switch-inactive-selected-background-color Background color of inactive option when is selected #ef5350
    --uxl-switch-selected-text-color Text when any option is selected #ffffff
    --uxl-switch-active-border Border of active option 0
    --uxl-switch-active-border-selected Border of active option when is selected 0
    --uxl-switch-inactive-border Border of inactive option 0
    --uxl-switch-inactive-border-selected Border of active option when is selected 0

    Events

    Events Description
    uxl-switch-changed Value changed

    Install

    npm i @uxland/uxl-switch

    DownloadsWeekly Downloads

    31

    Version

    2.0.0

    License

    none

    Unpacked Size

    24.3 kB

    Total Files

    22

    Last publish

    Collaborators

    • avizcaino
    • uxland-admin