UNPKG

@allakando/allakando-web-ui

Version:

Allakando's web component library

22 lines (21 loc) 2.17 kB
const s=`# Allakando Badge\r \r The Badge element is to put a highlighted text at the top right corner of any element which will be wrapped with this component\r \r The Badge compoenent has five attributes, one is "inline", "shape", "type", "offsetv" and "offseth". \r \r "shape" can either be "circle" or "square".\r "inline" attribute can either be true or false. This is toggle between display inline and flex. \r "type" is to change the background color based on the scenarios of the badge element.\r "offsetv" is to adjust the vertical height of the badge with respect to the parent element\r "offseth" is to adjust the horizontal height of the badge with respect to the parent element\r \r At last we have the slot for wrapping the component around any tab, text or web elements.`,r={title:"Atomic Components/Badge",component:"ako-badge",tags:["autodocs"],parameters:{docs:{description:{component:s}}},argTypes:{shape:{options:["circle","square"],control:{type:"select"}},type:{options:["primary","neutral","warning","error"],control:{type:"select"}},inline:{options:[!0,!1],control:{type:"boolean"}},offsetv:{control:{type:"text"}},offseth:{control:{type:"text"}}}},t=e=>`<div style="position:relative">Hello World!<ako-badge ${e.shape?`shape="${e.shape}"`:""} ${e.type?`type="${e.type}"`:""} ${e.inline?`inline="${e.inline}"`:""} ${e.offsetv?`offsetv=${e.offsetv}`:""} ${e.offseth?`offseth=${e.offseth}`:""} > 9 </ako-badge></div>`;t.args={type:"danger"};var o,n,a;t.parameters={...t.parameters,docs:{...(o=t.parameters)==null?void 0:o.docs,source:{originalSource:'args => {\n return `<div style="position:relative">Hello World!<ako-badge \n ${args.shape ? `shape="${args.shape}"` : ""}\n ${args.type ? `type="${args.type}"` : ""}\n ${args.inline ? `inline="${args.inline}"` : ""}\n ${args.offsetv ? `offsetv=${args.offsetv}` : ""}\n ${args.offseth ? `offseth=${args.offseth}` : ""}\n >\n 9\n </ako-badge></div>`;\n}',...(a=(n=t.parameters)==null?void 0:n.docs)==null?void 0:a.source}}};const i=["Template"];export{t as Template,i as __namedExportsOrder,r as default};