Skip to content

Commit 64160df

Browse files
authored
feat: add SfLoaderLinear example (#28)
1 parent 845fb55 commit 64160df

File tree

1 file changed

+40
-0
lines changed
  • apps/website/src/routes/examples/SfLoaderLinear

1 file changed

+40
-0
lines changed
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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+
});

0 commit comments

Comments
 (0)