UNPKG

@allakando/allakando-web-ui

Version:

Allakando's web component library

32 lines (31 loc) 1.92 kB
const l=`# Allakando Pill Tab\r \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};