@allakando/allakando-web-ui
Version:
Allakando's web component library
25 lines (24 loc) • 2.02 kB
JavaScript
const s=`
\r
The toggle component is an allakando component to display a toggle button having text options. The toggle buttons can be flipped by passing the value in "selected" attribute which starts from 0. The labels for the toggle buttons comes from the labels attribute which will contain a string seperated by a seperator. The labels are splitted by "seperator" which is also an attribute. The component will dynamically create buttons with labels based on the content of the "lables" attribute seperated by a seperator. By defult the seperator is ";".\r
\r
The component also has a getter function by the name toggleState which will return toggle state object having property index and the active label.\r
\r
The component has three attributes,\r
\r
\r
Contains the label list sperated by seperator\r
\r
\r
Identifier for the labels string to split into\r
\r
\r
Numerical value identifies which label is selected. It starts from 0.`,l={title:"Atomic Components/Toggle",component:"ako-toggle",tags:["autodocs"],parameters:{docs:{description:{component:s}}},argTypes:{labels:{control:{type:"text"}},seperator:{control:{type:"text"}},selected:{control:{type:"number"}}}},t=e=>`<ako-toggle
${e.labels?`labels="${e.labels}"`:""}
${e.seperator?`seperator="${e.seperator}"`:""}
${e.selected?`selected="${e.selected}"`:""}
>
</ako-toggle>`;t.args={labels:"Inbokade-Rapporterade-Inställt",selected:1,seperator:"-"};var a,r,o;t.parameters={...t.parameters,docs:{...(a=t.parameters)==null?void 0:a.docs,source:{originalSource:'args => {\n return `<ako-toggle \n ${args.labels ? `labels="${args.labels}"` : ""}\n ${args.seperator ? `seperator="${args.seperator}"` : ""}\n ${args.selected ? `selected="${args.selected}"` : ""}\n >\n </ako-toggle>`;\n}',...(o=(r=t.parameters)==null?void 0:r.docs)==null?void 0:o.source}}};const n=["Template"];export{t as Template,n as __namedExportsOrder,l as default};