@allakando/allakando-web-ui
Version:
Allakando's web component library
28 lines (20 loc) • 2.47 kB
JavaScript
const o=`
The spinner component is a go to component when communicating to the user that something is loading.
The spinner component will take 100% of the container it will be put into, so the container size will determine the spinner size.
It has four attributes, type, percent, usebackground and size.
type attribute is to select the type of spinner, currently there are two types of options wheel and circle to select from the list.
size attribute is specifically for the circle type spinner which ranges from 10 to 100, the value determines the circumference of the circle.
usebackground attribute is to toggle between whether there will be background to the circle type spinner or not. It has only two options as true or false.
percent attributes determines the rate at which the wheel will spin.
uselight atrributes has a boolean value which changes the spinner color for light and dark backgrounds`,i={title:"Atomic Components/Spinner",component:"ako-spinner",tags:["autodocs"],parameters:{docs:{description:{component:o}}},argTypes:{type:{options:["circle","wheel"],control:{type:"select"}},size:{control:{type:"range",min:10,max:500,step:1}},percent:{control:{type:"range",min:0,max:100,step:1}},usebackground:{options:[!0,!1],control:{type:"select"}},uselight:{options:[!0,!1],control:{type:"select"}}}},t=e=>`<div style="width:200px;height:200px"><ako-spinner
${e.type?`type="${e.type}"`:""}
${e.size?`size="${e.size}px"`:""}
${e.percent?`percent="${e.percent}"`:""}
${e.uselight?`uselight="${e.uselight}"`:""}
${e.usebackground?`usebackground=${e.usebackground}`:""}
></ako-spinner></div>`;t.args={type:"circle",size:100,uselight:!1,usebackground:!0};var n,s,r;t.parameters={...t.parameters,docs:{...(n=t.parameters)==null?void 0:n.docs,source:{originalSource:'args => {\n return `<div style="width:200px;height:200px"><ako-spinner \n ${args.type ? `type="${args.type}"` : ""}\n ${args.size ? `size="${args.size}px"` : ""}\n ${args.percent ? `percent="${args.percent}"` : ""}\n ${args.uselight ? `uselight="${args.uselight}"` : ""}\n ${args.usebackground ? `usebackground=${args.usebackground}` : ""}\n ></ako-spinner></div>`;\n}',...(r=(s=t.parameters)==null?void 0:s.docs)==null?void 0:r.source}}};const a=["Template"];export{t as Template,a as __namedExportsOrder,i as default};