File tree Expand file tree Collapse file tree 1 file changed +40
-0
lines changed
apps/website/src/routes/examples/SfLoaderLinear Expand file tree Collapse file tree 1 file changed +40
-0
lines changed Original file line number Diff line number Diff line change 1+ import { component$ , useContext , useTask$ } from '@builder.io/qwik' ;
2+ import { SfLoaderLinear , SfLoaderSize } from 'qwik-storefront-ui' ;
3+ import { ComponentExample } from '../../../components/utils/ComponentExample' ;
4+ import { ControlsType } from '../../../components/utils/types' ;
5+ import { EXAMPLES_STATE } from '../layout' ;
6+
7+ export default component$ ( ( ) => {
8+ const examplesState = useContext ( EXAMPLES_STATE ) ;
9+
10+ useTask$ ( ( ) => {
11+ examplesState . data = {
12+ controls : [
13+ {
14+ type : 'select' ,
15+ modelName : 'size' ,
16+ propType : 'SfLoaderSize' ,
17+ options : [ ...Object . keys ( SfLoaderSize ) ] ,
18+ description : 'sets sizes of components' ,
19+ } ,
20+ {
21+ type : 'text' ,
22+ modelName : 'ariaLabel' ,
23+ propType : 'string' ,
24+ propDefaultValue : 'loading' ,
25+ description : 'sets text available for screen readers' ,
26+ } ,
27+ ] satisfies ControlsType ,
28+ state : {
29+ size : SfLoaderSize . lg ,
30+ ariaLabel : 'loading' ,
31+ } ,
32+ } ;
33+ } ) ;
34+
35+ return (
36+ < ComponentExample >
37+ < SfLoaderLinear class = "w-12" { ...examplesState . data . state } />
38+ </ ComponentExample >
39+ ) ;
40+ } ) ;
You can’t perform that action at this time.
0 commit comments