@allakando/allakando-web-ui
Version:
Allakando's web component library
32 lines (31 loc) • 1.92 kB
JavaScript
const l=`
\r
The pill tab component takes in a list of texts and form an array of string(s) using it's attributes. After the array is form based on each text item a pill shaped tabs will be formed, which are clickable and the styles updates based on that.\r
\r
The component has five attributes to determine it's behaviour\r
\r
## labels\r
\r
This attributes will pass the list of items to form an array using the separator attribute\r
\r
## seperator\r
\r
This attribute will separate the input string to form an array\r
\r
## selected\r
\r
This attribute is to alter the selected item programmatically\r
\r
## disabled\r
\r
This attribute is to disabled the component from the click(s)\r
\r
## akostyle\r
\r
This attribute will add additional style to the pill tab container\r
`,o={title:"Atomic Components/Pill-Tab",component:"ako-pill-tab",tags:["autodocs"],parameters:{docs:{description:{component:l}}},argTypes:{labels:{control:"text"},separator:{control:"text"},selected:{control:"number"},disabled:{control:"boolean"}}},t=e=>`<ako-pill-tab
${e.selected?`selected="${e.selected}"`:""}
${e.labels?`labels="${e.labels}"`:""}
${e.separator?`separator="${e.separator}"`:""}
${e.disabled?`disabled="${e.disabled}"`:""}
></ako-pill-tab>`;t.args={labels:"Tab 1,Tab 2,Tab 3",separator:","};var a,r,s;t.parameters={...t.parameters,docs:{...(a=t.parameters)==null?void 0:a.docs,source:{originalSource:'args => {\n return `<ako-pill-tab \n ${args.selected ? `selected="${args.selected}"` : ""}\n ${args.labels ? `labels="${args.labels}"` : ""}\n ${args.separator ? `separator="${args.separator}"` : ""}\n ${args.disabled ? `disabled="${args.disabled}"` : ""}\n ></ako-pill-tab>`;\n}',...(s=(r=t.parameters)==null?void 0:r.docs)==null?void 0:s.source}}};const n=["Template"];export{t as Template,n as __namedExportsOrder,o as default};