@supersoniks/concorde 3.2.0 → 3.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build-infos.json +1 -1
- package/concorde-core.bundle.js +101 -101
- package/concorde-core.es.js +187 -182
- package/dist/concorde-core.bundle.js +101 -101
- package/dist/concorde-core.es.js +187 -182
- package/index.html +0 -0
- package/package.json +1 -1
- package/scripts/create-search.js +0 -0
- package/scripts/generate-routes.js +0 -0
- package/src/core/_types/types.ts +0 -0
- package/src/core/components/functional/date/date.ts +0 -0
- package/src/core/components/functional/functional.ts +0 -0
- package/src/core/components/functional/if/if.md +0 -0
- package/src/core/components/functional/if/if.test.ts +0 -0
- package/src/core/components/functional/list/list.spec.ts +0 -0
- package/src/core/components/functional/queue/queue.demo.ts +0 -0
- package/src/core/components/functional/router/router.demo.ts +0 -0
- package/src/core/components/functional/router/router.md +0 -0
- package/src/core/components/functional/router/router.spec.ts +0 -0
- package/src/core/components/functional/router/router.ts +0 -0
- package/src/core/components/functional/sonic-scope/sonic-scope.ts +0 -0
- package/src/core/components/functional/states/states.demo.ts +0 -0
- package/src/core/components/functional/states/states.md +0 -0
- package/src/core/components/functional/states/states.spec.ts +0 -0
- package/src/core/components/functional/states/states.ts +0 -0
- package/src/core/components/functional/submit/submit.ts +0 -0
- package/src/core/components/functional/translation/translation.ts +0 -0
- package/src/core/components/ui/_css/scroll.ts +0 -0
- package/src/core/components/ui/_css/shadow.ts +0 -0
- package/src/core/components/ui/_css/size.ts +0 -0
- package/src/core/components/ui/_css/type.ts +0 -0
- package/src/core/components/ui/alert/alert.md +0 -0
- package/src/core/components/ui/alert/alert.ts +0 -0
- package/src/core/components/ui/alert-messages/alert-messages.md +0 -0
- package/src/core/components/ui/badge/badge.md +0 -0
- package/src/core/components/ui/badge/badge.ts +0 -0
- package/src/core/components/ui/button/button.md +0 -0
- package/src/core/components/ui/button/button.ts +0 -0
- package/src/core/components/ui/captcha/captcha.md +0 -0
- package/src/core/components/ui/captcha/captcha.ts +0 -0
- package/src/core/components/ui/card/card-footer.ts +0 -0
- package/src/core/components/ui/card/card-header-descripton.ts +0 -0
- package/src/core/components/ui/card/card-header.ts +0 -0
- package/src/core/components/ui/card/card-main.ts +0 -0
- package/src/core/components/ui/card/card.md +0 -0
- package/src/core/components/ui/card/card.ts +0 -0
- package/src/core/components/ui/divider/divider.ts +0 -0
- package/src/core/components/ui/form/checkbox/checkbox.md +0 -0
- package/src/core/components/ui/form/checkbox/checkbox.ts +0 -0
- package/src/core/components/ui/form/css/form-control.ts +0 -0
- package/src/core/components/ui/form/fieldset/fieldset.ts +0 -0
- package/src/core/components/ui/form/fieldset/legend-description.ts +0 -0
- package/src/core/components/ui/form/fieldset/legend.ts +0 -0
- package/src/core/components/ui/form/form-layout/form-layout.md +0 -0
- package/src/core/components/ui/form/input/input.md +0 -0
- package/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -0
- package/src/core/components/ui/form/radio/radio.md +0 -0
- package/src/core/components/ui/form/radio/radio.ts +0 -0
- package/src/core/components/ui/form/select/select.md +0 -0
- package/src/core/components/ui/form/switch/switch.md +0 -0
- package/src/core/components/ui/form/switch/switch.ts +0 -0
- package/src/core/components/ui/form/textarea/textarea.ts +0 -0
- package/src/core/components/ui/icon/icons.ts +14 -3
- package/src/core/components/ui/image/image.md +0 -0
- package/src/core/components/ui/image/image.ts +0 -0
- package/src/core/components/ui/loader/loader.md +0 -0
- package/src/core/components/ui/loader/loader.ts +0 -0
- package/src/core/components/ui/loader/styles/fixed.ts +0 -0
- package/src/core/components/ui/loader/styles/inline.ts +0 -0
- package/src/core/components/ui/menu/menu.ts +0 -0
- package/src/core/components/ui/modal/modal-actions.ts +0 -0
- package/src/core/components/ui/modal/modal-close.ts +0 -0
- package/src/core/components/ui/modal/modal-subtitle.ts +0 -0
- package/src/core/components/ui/modal/modal-title.ts +0 -0
- package/src/core/components/ui/modal/modal.md +0 -0
- package/src/core/components/ui/pop/pop.md +0 -0
- package/src/core/components/ui/progress/progress.ts +0 -0
- package/src/core/components/ui/table/table-tbody.ts +0 -0
- package/src/core/components/ui/table/table-th.ts +0 -0
- package/src/core/components/ui/table/table.ts +0 -0
- package/src/core/components/ui/theme/theme-collection/core-variables.ts +0 -0
- package/src/core/components/ui/theme/theme-collection/dark.ts +0 -0
- package/src/core/components/ui/theme/theme-collection/light.ts +0 -0
- package/src/core/components/ui/theme/theme.ts +0 -0
- package/src/core/components/ui/toast/toast-item.ts +0 -0
- package/src/core/components/ui/tooltip/tooltip.ts +0 -0
- package/src/core/components/ui/ui.ts +0 -0
- package/src/core/directives/DataProvider.ts +0 -0
- package/src/core/directives/Wording.ts +0 -0
- package/src/core/mixins/Fetcher.ts +0 -0
- package/src/core/mixins/FormCheckable.ts +0 -0
- package/src/core/mixins/TemplatesContainer.ts +0 -0
- package/src/core/utils/HTML.ts +0 -0
- package/src/core/utils/LocationHandler.ts +0 -0
- package/src/core/utils/Objects.ts +0 -0
- package/src/core/utils/Utils.ts +0 -0
- package/src/core/utils/api.ts +0 -0
- package/src/core/utils/route.spec.ts +0 -0
- package/src/core/utils/route.ts +0 -0
- package/src/docs/code.ts +0 -0
- package/src/docs/docs.ts +0 -0
- package/src/docs/header/header.ts +0 -0
- package/src/docs/layout.ts +0 -0
- package/src/docs/navigation/navigation.ts +0 -0
- package/src/docs/search/docs-search.json +0 -0
- package/src/docs/search/markdown-renderer.ts +0 -0
- package/src/docs/search/page.ts +0 -0
- package/src/docs/search/search.ts +0 -0
- package/src/docs/tailwind/css/tailwind.css +0 -0
- package/src/docs/tailwind/css.d.ts +0 -0
- package/src/index.ts +0 -0
- package/src/test-utils/TestUtils.ts +0 -0
- package/src/tsconfig-model.json +0 -0
- package/src/tsconfig.json +294 -294
- package/tailwind.config.js +0 -0
- package/templates-test.html +0 -0
- package/vite/config.js +0 -0
- package/docs/assets/index-C0K6xugr.css +0 -1
- package/docs/assets/index-Dgl1lJQo.js +0 -4861
- package/docs/css/docs.css +0 -0
- package/docs/fonts/ClashGrotesk-Bold.eot +0 -0
- package/docs/fonts/ClashGrotesk-Bold.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Bold.woff +0 -0
- package/docs/fonts/ClashGrotesk-Bold.woff2 +0 -0
- package/docs/fonts/ClashGrotesk-Extralight.eot +0 -0
- package/docs/fonts/ClashGrotesk-Extralight.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Extralight.woff +0 -0
- package/docs/fonts/ClashGrotesk-Extralight.woff2 +0 -0
- package/docs/fonts/ClashGrotesk-Light.eot +0 -0
- package/docs/fonts/ClashGrotesk-Light.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Light.woff +0 -0
- package/docs/fonts/ClashGrotesk-Light.woff2 +0 -0
- package/docs/fonts/ClashGrotesk-Medium.eot +0 -0
- package/docs/fonts/ClashGrotesk-Medium.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Medium.woff +0 -0
- package/docs/fonts/ClashGrotesk-Medium.woff2 +0 -0
- package/docs/fonts/ClashGrotesk-Regular.eot +0 -0
- package/docs/fonts/ClashGrotesk-Regular.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Regular.woff +0 -0
- package/docs/fonts/ClashGrotesk-Regular.woff2 +0 -0
- package/docs/fonts/ClashGrotesk-Semibold.eot +0 -0
- package/docs/fonts/ClashGrotesk-Semibold.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Semibold.woff +0 -0
- package/docs/fonts/ClashGrotesk-Semibold.woff2 +0 -0
- package/docs/fonts/ClashGrotesk-Variable.eot +0 -0
- package/docs/fonts/ClashGrotesk-Variable.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Variable.woff +0 -0
- package/docs/fonts/ClashGrotesk-Variable.woff2 +0 -0
- package/docs/img/concorde-icon.svg +0 -5
- package/docs/img/concorde-logo.svg +0 -1
- package/docs/img/concorde.png +0 -0
- package/docs/img/concorde_def.png +0 -0
- package/docs/img/concorde_seuil.png.webp +0 -0
- package/docs/img/concorde_seuil_invert.png +0 -0
- package/docs/img/paul_metrand.jpg +0 -0
- package/docs/img/paul_metrand_xs.jpg +0 -0
- package/docs/index.html +0 -93
- package/docs/src/core/components/functional/date/date.md +0 -290
- package/docs/src/core/components/functional/fetch/fetch.md +0 -117
- package/docs/src/core/components/functional/if/if.md +0 -16
- package/docs/src/core/components/functional/list/list.md +0 -199
- package/docs/src/core/components/functional/mix/mix.md +0 -41
- package/docs/src/core/components/functional/queue/queue.md +0 -87
- package/docs/src/core/components/functional/router/router.md +0 -129
- package/docs/src/core/components/functional/sdui/default-library.json +0 -108
- package/docs/src/core/components/functional/sdui/example.json +0 -99
- package/docs/src/core/components/functional/sdui/sdui.md +0 -356
- package/docs/src/core/components/functional/states/states.md +0 -87
- package/docs/src/core/components/functional/submit/submit.md +0 -83
- package/docs/src/core/components/functional/subscriber/subscriber.md +0 -91
- package/docs/src/core/components/functional/value/value.md +0 -35
- package/docs/src/core/components/ui/alert/alert.md +0 -121
- package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -0
- package/docs/src/core/components/ui/badge/badge.md +0 -127
- package/docs/src/core/components/ui/button/button.md +0 -182
- package/docs/src/core/components/ui/captcha/captcha.md +0 -24
- package/docs/src/core/components/ui/card/card.md +0 -97
- package/docs/src/core/components/ui/divider/divider.md +0 -35
- package/docs/src/core/components/ui/form/checkbox/checkbox.md +0 -104
- package/docs/src/core/components/ui/form/fieldset/fieldset.md +0 -129
- package/docs/src/core/components/ui/form/form-actions/form-actions.md +0 -77
- package/docs/src/core/components/ui/form/form-layout/form-layout.md +0 -44
- package/docs/src/core/components/ui/form/input/input.md +0 -167
- package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -131
- package/docs/src/core/components/ui/form/radio/radio.md +0 -84
- package/docs/src/core/components/ui/form/select/select.md +0 -97
- package/docs/src/core/components/ui/form/switch/switch.md +0 -84
- package/docs/src/core/components/ui/form/textarea/textarea.md +0 -65
- package/docs/src/core/components/ui/group/group.md +0 -75
- package/docs/src/core/components/ui/icon/icon.md +0 -125
- package/docs/src/core/components/ui/icon/icons.json +0 -1
- package/docs/src/core/components/ui/image/image.md +0 -107
- package/docs/src/core/components/ui/link/link.md +0 -43
- package/docs/src/core/components/ui/loader/loader.md +0 -67
- package/docs/src/core/components/ui/menu/menu.md +0 -288
- package/docs/src/core/components/ui/modal/modal.md +0 -123
- package/docs/src/core/components/ui/pop/pop.md +0 -96
- package/docs/src/core/components/ui/progress/progress.md +0 -63
- package/docs/src/core/components/ui/table/table.md +0 -455
- package/docs/src/core/components/ui/tooltip/tooltip.md +0 -82
- package/docs/src/docs/_core-concept/overview.md +0 -57
- package/docs/src/docs/_core-concept/subscriber.md +0 -76
- package/docs/src/docs/_getting-started/concorde-outside.md +0 -143
- package/docs/src/docs/_getting-started/create-a-component.md +0 -137
- package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -174
- package/docs/src/docs/_getting-started/pubsub.md +0 -150
- package/docs/src/docs/_getting-started/start.md +0 -39
- package/docs/src/docs/_getting-started/theming.md +0 -91
- package/docs/src/docs/search/docs-search.json +0 -3917
- package/docs/src/tag-list.json +0 -1
- package/docs/src/tsconfig-model.json +0 -23
- package/docs/src/tsconfig.json +0 -918
- package/docs/svg/regular/plane.svg +0 -1
- package/docs/svg/solid/plane.svg +0 -1
- package/php/get-challenge.php +0 -34
- package/php/some-service.php +0 -42
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
# Link
|
|
2
|
-
|
|
3
|
-
## Href
|
|
4
|
-
<sonic-code>
|
|
5
|
-
<template>
|
|
6
|
-
<sonic-link href="/">Basic link with href attibute</sonic-link>
|
|
7
|
-
</template>
|
|
8
|
-
</sonic-code>
|
|
9
|
-
|
|
10
|
-
## Target
|
|
11
|
-
<sonic-code>
|
|
12
|
-
<template>
|
|
13
|
-
<sonic-link href="/" target="_blank">Link with target attibute</sonic-link>
|
|
14
|
-
</template>
|
|
15
|
-
</sonic-code>
|
|
16
|
-
|
|
17
|
-
## AutoActive
|
|
18
|
-
|
|
19
|
-
<sonic-code>
|
|
20
|
-
<template>
|
|
21
|
-
<sonic-link href="/#core/components" class="[&[active]]:text-success">autoActive partial (default)</sonic-link>
|
|
22
|
-
</template>
|
|
23
|
-
</sonic-code>
|
|
24
|
-
|
|
25
|
-
### AutoActive Strict vs partial
|
|
26
|
-
|
|
27
|
-
<sonic-code>
|
|
28
|
-
<template>
|
|
29
|
-
<div class="grid gap-3">
|
|
30
|
-
<sonic-link href="/#core" autoActive="strict" class="[&[active]]:text-success">autoActive strict</sonic-link>
|
|
31
|
-
<sonic-link href="/#core/components/ui/link/link.md/link" autoActive="strict" class="[&[active]]:text-success">autoActive strict</sonic-link>
|
|
32
|
-
</div>
|
|
33
|
-
</template>
|
|
34
|
-
</sonic-code>
|
|
35
|
-
|
|
36
|
-
### AutoActive disabled
|
|
37
|
-
|
|
38
|
-
<sonic-code>
|
|
39
|
-
<template>
|
|
40
|
-
<sonic-link href="/#core/components/ui/link/link.md/link" autoActive="disabled" class="[&[active]]:text-success">autoActive disabled</sonic-link>
|
|
41
|
-
</template>
|
|
42
|
-
</sonic-code>
|
|
43
|
-
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
# Loader
|
|
2
|
-
|
|
3
|
-
## Inline mode
|
|
4
|
-
|
|
5
|
-
<sonic-code>
|
|
6
|
-
<template>
|
|
7
|
-
<sonic-loader mode="inline"></sonic-loader>
|
|
8
|
-
</template>
|
|
9
|
-
</sonic-code>
|
|
10
|
-
|
|
11
|
-
## CurrentColor
|
|
12
|
-
|
|
13
|
-
<sonic-code>
|
|
14
|
-
<template>
|
|
15
|
-
<sonic-loader mode="inline" currentColor style="color:purple;"></sonic-loader>
|
|
16
|
-
</template>
|
|
17
|
-
</sonic-code>
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
## Align
|
|
21
|
-
|
|
22
|
-
<sonic-code>
|
|
23
|
-
<template>
|
|
24
|
-
<sonic-loader mode="inline" align="left"></sonic-loader>
|
|
25
|
-
<sonic-loader mode="inline" align="center"></sonic-loader>
|
|
26
|
-
<sonic-loader mode="inline" align="right"></sonic-loader>
|
|
27
|
-
</template>
|
|
28
|
-
</sonic-code>
|
|
29
|
-
|
|
30
|
-
## Fixed mode
|
|
31
|
-
|
|
32
|
-
<sonic-code >
|
|
33
|
-
<template>
|
|
34
|
-
<div dataProvider="toggleLoaderForm" formDataProvider="toggleLoaderForm">
|
|
35
|
-
<sonic-checkbox label="Show fixed loader"
|
|
36
|
-
name="toggleLoader"
|
|
37
|
-
unique value="true">
|
|
38
|
-
</sonic-checkbox>
|
|
39
|
-
<sonic-if data-bind ::condition="$toggleLoader" >
|
|
40
|
-
<sonic-loader></sonic-loader>
|
|
41
|
-
</sonic-if>
|
|
42
|
-
</div>
|
|
43
|
-
</template>
|
|
44
|
-
</sonic-code>
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
## Loading button
|
|
48
|
-
<sonic-code>
|
|
49
|
-
<template>
|
|
50
|
-
<sonic-button loading>A loading button</sonic-button>
|
|
51
|
-
</template>
|
|
52
|
-
</sonic-code>
|
|
53
|
-
|
|
54
|
-
## Hide / show programmatically
|
|
55
|
-
|
|
56
|
-
<sonic-code language="javascript">
|
|
57
|
-
<template>
|
|
58
|
-
import {Loader} from "@supersoniks/concorde/core/components/ui/loader/loader";
|
|
59
|
-
// Show
|
|
60
|
-
Loader.show({
|
|
61
|
-
mode:"fixed" // optional : fixed | inline
|
|
62
|
-
container : document.querySelector('#foo') // optional, default : parent sonic-theme || document.body
|
|
63
|
-
});
|
|
64
|
-
// Hide
|
|
65
|
-
Loader.hide();
|
|
66
|
-
</template>
|
|
67
|
-
</sonic-code>
|
|
@@ -1,288 +0,0 @@
|
|
|
1
|
-
# Menu
|
|
2
|
-
|
|
3
|
-
## Direction
|
|
4
|
-
<sonic-code>
|
|
5
|
-
<template>
|
|
6
|
-
<sonic-menu direction="row" >
|
|
7
|
-
<sonic-menu-item variant="ghost">
|
|
8
|
-
<sonic-icon library="iconoir" name="arrow-right" slot="prefix"></sonic-icon>
|
|
9
|
-
Row
|
|
10
|
-
</sonic-menu-item>
|
|
11
|
-
<sonic-menu-item>
|
|
12
|
-
<sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
|
|
13
|
-
Profile
|
|
14
|
-
</sonic-menu-item>
|
|
15
|
-
<sonic-menu-item >
|
|
16
|
-
<sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
|
|
17
|
-
History
|
|
18
|
-
</sonic-menu-item>
|
|
19
|
-
<sonic-menu-item >
|
|
20
|
-
<sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
|
|
21
|
-
Orders
|
|
22
|
-
</sonic-menu-item>
|
|
23
|
-
<sonic-menu-item type="danger">
|
|
24
|
-
<sonic-icon library="iconoir" name="log-out" slot="prefix"></sonic-icon>
|
|
25
|
-
Log out
|
|
26
|
-
</sonic-menu-item>
|
|
27
|
-
</sonic-menu>
|
|
28
|
-
<sonic-menu direction ="column" >
|
|
29
|
-
<sonic-menu-item variant="ghost">
|
|
30
|
-
<sonic-icon library="iconoir" name="arrow-down" slot="prefix"></sonic-icon>
|
|
31
|
-
Column
|
|
32
|
-
</sonic-menu-item>
|
|
33
|
-
<sonic-menu-item>
|
|
34
|
-
<sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
|
|
35
|
-
Profile
|
|
36
|
-
</sonic-menu-item>
|
|
37
|
-
<sonic-menu-item >
|
|
38
|
-
<sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
|
|
39
|
-
History
|
|
40
|
-
</sonic-menu-item>
|
|
41
|
-
<sonic-menu-item >
|
|
42
|
-
<sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
|
|
43
|
-
Orders
|
|
44
|
-
</sonic-menu-item>
|
|
45
|
-
<sonic-menu-item type="danger">
|
|
46
|
-
<sonic-icon library="iconoir" name="log-out" slot="prefix"></sonic-icon>
|
|
47
|
-
Log out
|
|
48
|
-
</sonic-menu-item>
|
|
49
|
-
</sonic-menu>
|
|
50
|
-
</template>
|
|
51
|
-
</sonic-code>
|
|
52
|
-
|
|
53
|
-
## Size
|
|
54
|
-
<sonic-code>
|
|
55
|
-
<template>
|
|
56
|
-
<div class="grid gap-3">
|
|
57
|
-
<sonic-menu size="xs" direction="row">
|
|
58
|
-
<sonic-menu-item>
|
|
59
|
-
XS
|
|
60
|
-
</sonic-menu-item>
|
|
61
|
-
<sonic-menu-item>
|
|
62
|
-
<sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
|
|
63
|
-
Profile
|
|
64
|
-
</sonic-menu-item>
|
|
65
|
-
<sonic-menu-item >
|
|
66
|
-
<sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
|
|
67
|
-
History
|
|
68
|
-
</sonic-menu-item>
|
|
69
|
-
<sonic-menu-item >
|
|
70
|
-
<sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
|
|
71
|
-
Orders
|
|
72
|
-
</sonic-menu-item>
|
|
73
|
-
</sonic-menu>
|
|
74
|
-
<sonic-menu size="sm" direction="row">
|
|
75
|
-
<sonic-menu-item>
|
|
76
|
-
Small
|
|
77
|
-
</sonic-menu-item>
|
|
78
|
-
<sonic-menu-item>
|
|
79
|
-
<sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
|
|
80
|
-
Profile
|
|
81
|
-
</sonic-menu-item>
|
|
82
|
-
<sonic-menu-item >
|
|
83
|
-
<sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
|
|
84
|
-
History
|
|
85
|
-
</sonic-menu-item>
|
|
86
|
-
<sonic-menu-item >
|
|
87
|
-
<sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
|
|
88
|
-
Orders
|
|
89
|
-
</sonic-menu-item>
|
|
90
|
-
</sonic-menu>
|
|
91
|
-
<sonic-menu direction="row">
|
|
92
|
-
<sonic-menu-item>
|
|
93
|
-
Medium
|
|
94
|
-
</sonic-menu-item>
|
|
95
|
-
<sonic-menu-item>
|
|
96
|
-
<sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
|
|
97
|
-
Profile
|
|
98
|
-
</sonic-menu-item>
|
|
99
|
-
<sonic-menu-item >
|
|
100
|
-
<sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
|
|
101
|
-
History
|
|
102
|
-
</sonic-menu-item>
|
|
103
|
-
<sonic-menu-item >
|
|
104
|
-
<sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
|
|
105
|
-
Orders
|
|
106
|
-
</sonic-menu-item>
|
|
107
|
-
</sonic-menu>
|
|
108
|
-
<sonic-menu size="lg" direction="row">
|
|
109
|
-
<sonic-menu-item>
|
|
110
|
-
Large
|
|
111
|
-
</sonic-menu-item>
|
|
112
|
-
<sonic-menu-item>
|
|
113
|
-
<sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
|
|
114
|
-
Profile
|
|
115
|
-
</sonic-menu-item>
|
|
116
|
-
<sonic-menu-item >
|
|
117
|
-
<sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
|
|
118
|
-
History
|
|
119
|
-
</sonic-menu-item>
|
|
120
|
-
<sonic-menu-item >
|
|
121
|
-
<sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
|
|
122
|
-
Orders
|
|
123
|
-
</sonic-menu-item>
|
|
124
|
-
</sonic-menu>
|
|
125
|
-
<sonic-menu size="xl" direction="row">
|
|
126
|
-
<sonic-menu-item>
|
|
127
|
-
XL
|
|
128
|
-
</sonic-menu-item>
|
|
129
|
-
<sonic-menu-item>
|
|
130
|
-
<sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
|
|
131
|
-
Profile
|
|
132
|
-
</sonic-menu-item>
|
|
133
|
-
<sonic-menu-item >
|
|
134
|
-
<sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
|
|
135
|
-
History
|
|
136
|
-
</sonic-menu-item>
|
|
137
|
-
<sonic-menu-item >
|
|
138
|
-
<sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
|
|
139
|
-
Orders
|
|
140
|
-
</sonic-menu-item>
|
|
141
|
-
</sonic-menu>
|
|
142
|
-
</div>
|
|
143
|
-
</template>
|
|
144
|
-
</sonic-code>
|
|
145
|
-
|
|
146
|
-
## Shadow
|
|
147
|
-
<sonic-code>
|
|
148
|
-
<template>
|
|
149
|
-
<div class="grid gap-3">
|
|
150
|
-
<sonic-menu direction="row">
|
|
151
|
-
<sonic-menu-item>
|
|
152
|
-
None
|
|
153
|
-
</sonic-menu-item>
|
|
154
|
-
</sonic-menu>
|
|
155
|
-
<sonic-menu shadow="sm" direction="row">
|
|
156
|
-
<sonic-menu-item>
|
|
157
|
-
Small
|
|
158
|
-
</sonic-menu-item>
|
|
159
|
-
</sonic-menu>
|
|
160
|
-
<sonic-menu shadow="md" direction="row">
|
|
161
|
-
<sonic-menu-item>
|
|
162
|
-
Medium
|
|
163
|
-
</sonic-menu-item>
|
|
164
|
-
</sonic-menu>
|
|
165
|
-
<sonic-menu shadow="lg" direction="row">
|
|
166
|
-
<sonic-menu-item>
|
|
167
|
-
Large
|
|
168
|
-
</sonic-menu-item>
|
|
169
|
-
</sonic-menu>
|
|
170
|
-
</div>
|
|
171
|
-
</template>
|
|
172
|
-
</sonic-code>
|
|
173
|
-
|
|
174
|
-
## Align
|
|
175
|
-
<sonic-code>
|
|
176
|
-
<template>
|
|
177
|
-
<sonic-menu align="center">
|
|
178
|
-
<sonic-menu-item variant="ghost">
|
|
179
|
-
<sonic-icon library="iconoir" name="home"></sonic-icon>
|
|
180
|
-
Home
|
|
181
|
-
</sonic-menu-item>
|
|
182
|
-
<sonic-menu-item>
|
|
183
|
-
<sonic-icon library="iconoir" name="user"></sonic-icon>
|
|
184
|
-
Profile
|
|
185
|
-
</sonic-menu-item>
|
|
186
|
-
</sonic-menu>
|
|
187
|
-
<sonic-menu align="left">
|
|
188
|
-
<sonic-menu-item variant="ghost">
|
|
189
|
-
<sonic-icon library="iconoir" name="home"></sonic-icon>
|
|
190
|
-
Home
|
|
191
|
-
</sonic-menu-item>
|
|
192
|
-
<sonic-menu-item>
|
|
193
|
-
<sonic-icon library="iconoir" name="user"></sonic-icon>
|
|
194
|
-
Profile
|
|
195
|
-
</sonic-menu-item>
|
|
196
|
-
</sonic-menu>
|
|
197
|
-
<sonic-menu align="right">
|
|
198
|
-
<sonic-menu-item variant="ghost">
|
|
199
|
-
<sonic-icon library="iconoir" name="home"></sonic-icon>
|
|
200
|
-
Home
|
|
201
|
-
</sonic-menu-item>
|
|
202
|
-
<sonic-menu-item>
|
|
203
|
-
<sonic-icon library="iconoir" name="user"></sonic-icon>
|
|
204
|
-
Profile
|
|
205
|
-
</sonic-menu-item>
|
|
206
|
-
</sonic-menu>
|
|
207
|
-
</template>
|
|
208
|
-
</sonic-code>
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
## More
|
|
213
|
-
<sonic-code>
|
|
214
|
-
<template>
|
|
215
|
-
<sonic-menu direction="row">
|
|
216
|
-
<sonic-menu-item variant="ghost">
|
|
217
|
-
<sonic-icon library="iconoir" name="home"></sonic-icon>
|
|
218
|
-
Home
|
|
219
|
-
</sonic-menu-item>
|
|
220
|
-
<sonic-menu-item>
|
|
221
|
-
<sonic-icon library="iconoir" name="user"></sonic-icon>
|
|
222
|
-
Profile
|
|
223
|
-
</sonic-menu-item>
|
|
224
|
-
<sonic-menu-item >
|
|
225
|
-
<sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
|
|
226
|
-
History
|
|
227
|
-
</sonic-menu-item>
|
|
228
|
-
<sonic-menu-item >
|
|
229
|
-
<sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
|
|
230
|
-
Orders
|
|
231
|
-
</sonic-menu-item>
|
|
232
|
-
<sonic-menu slot="more">
|
|
233
|
-
<sonic-menu-item >
|
|
234
|
-
<sonic-icon library="iconoir" name="settings" slot="prefix"></sonic-icon>
|
|
235
|
-
Settings
|
|
236
|
-
</sonic-menu-item>
|
|
237
|
-
<sonic-menu-item >
|
|
238
|
-
<sonic-icon library="iconoir" name="chat-bubble" slot="prefix"></sonic-icon>
|
|
239
|
-
Messages
|
|
240
|
-
</sonic-menu-item>
|
|
241
|
-
<sonic-divider></sonic-divider>
|
|
242
|
-
<sonic-menu-item type="danger">
|
|
243
|
-
<sonic-icon library="iconoir" name="log-out" slot="prefix"></sonic-icon>
|
|
244
|
-
Log out
|
|
245
|
-
</sonic-menu-item>
|
|
246
|
-
</sonic-menu>
|
|
247
|
-
</sonic-menu>
|
|
248
|
-
</template>
|
|
249
|
-
</sonic-code>
|
|
250
|
-
|
|
251
|
-
## Scrollable
|
|
252
|
-
<sonic-code>
|
|
253
|
-
<template>
|
|
254
|
-
<sonic-menu direction="row" scrollable>
|
|
255
|
-
<sonic-menu-item variant="ghost">
|
|
256
|
-
<sonic-icon library="iconoir" name="home" slot="prefix"></sonic-icon>
|
|
257
|
-
Home
|
|
258
|
-
</sonic-menu-item>
|
|
259
|
-
<sonic-menu-item>
|
|
260
|
-
<sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
|
|
261
|
-
Profile
|
|
262
|
-
</sonic-menu-item>
|
|
263
|
-
<sonic-menu-item >
|
|
264
|
-
<sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
|
|
265
|
-
History
|
|
266
|
-
</sonic-menu-item>
|
|
267
|
-
<sonic-menu-item >
|
|
268
|
-
<sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
|
|
269
|
-
Orders
|
|
270
|
-
</sonic-menu-item>
|
|
271
|
-
<sonic-menu-item >
|
|
272
|
-
<sonic-icon library="iconoir" name="settings" slot="prefix"></sonic-icon>
|
|
273
|
-
Settings
|
|
274
|
-
</sonic-menu-item>
|
|
275
|
-
<sonic-menu-item >
|
|
276
|
-
<sonic-icon library="iconoir" name="chat-bubble" slot="prefix"></sonic-icon>
|
|
277
|
-
Messages
|
|
278
|
-
</sonic-menu-item>
|
|
279
|
-
<sonic-menu-item type="danger">
|
|
280
|
-
<sonic-icon library="iconoir" name="log-out" slot="prefix"></sonic-icon>
|
|
281
|
-
Log out
|
|
282
|
-
</sonic-menu-item>
|
|
283
|
-
</sonic-menu>
|
|
284
|
-
</template>
|
|
285
|
-
</sonic-code>
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
## Modal
|
|
2
|
-
|
|
3
|
-
<sonic-code>
|
|
4
|
-
<template>
|
|
5
|
-
<sonic-button onclick="document.getElementById('modalExample').show()">
|
|
6
|
-
Simple modal
|
|
7
|
-
</sonic-button>
|
|
8
|
-
<sonic-modal id="modalExample">
|
|
9
|
-
<sonic-modal-close></sonic-modal-close>
|
|
10
|
-
<sonic-modal-title
|
|
11
|
-
>Lorem ipsum dolor sit amet <sonic-badge type="danger" size="sm">+33</sonic-badge></sonic-modal-title
|
|
12
|
-
>
|
|
13
|
-
<sonic-modal-subtitle>Donec sed vestibulum augue.</sonic-modal-subtitle>
|
|
14
|
-
<sonic-modal-content>
|
|
15
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget quam eu mi luctus faucibus.
|
|
16
|
-
</sonic-modal-content>
|
|
17
|
-
<sonic-modal-actions formDataProvider="ModalMiniForm">
|
|
18
|
-
<sonic-button FormCheckable minWidth="8rem" value="true" name="click">
|
|
19
|
-
Click don't close
|
|
20
|
-
</sonic-button>
|
|
21
|
-
<sonic-button minWidth="8rem" type="success" hideModal>Confirm</sonic-button>
|
|
22
|
-
</sonic-modal-actions>
|
|
23
|
-
</sonic-modal>
|
|
24
|
-
</template>
|
|
25
|
-
</sonic-code>
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
## Long text
|
|
29
|
-
|
|
30
|
-
<sonic-code>
|
|
31
|
-
<template>
|
|
32
|
-
<sonic-button onclick="document.getElementById('modalText').show()"> Long text </sonic-button>
|
|
33
|
-
<sonic-modal align="left" id="modalText">
|
|
34
|
-
<sonic-modal-close></sonic-modal-close>
|
|
35
|
-
<sonic-modal-title>Infos et tarifs </sonic-modal-title>
|
|
36
|
-
<sonic-modal-content>
|
|
37
|
-
<div class="prose">
|
|
38
|
-
<p>
|
|
39
|
-
<strong>Horaires d’ouverture </strong><br />
|
|
40
|
-
Du mercredi au samedi de 13h30 à 19h et le dimanche de 13h30 à 18h<br />
|
|
41
|
-
+ horaires spécifiques pour événements ou festivals
|
|
42
|
-
</p>
|
|
43
|
-
<p>
|
|
44
|
-
<strong> Billetterie <br /></strong>
|
|
45
|
-
La participation à certains événements et activités est soumise à un système de billetterie avec achats ou
|
|
46
|
-
réservations disponibles en ligne ou au guichet. <strong><br /></strong>
|
|
47
|
-
</p>
|
|
48
|
-
<p>
|
|
49
|
-
Les tarifs (Tarif plein / Tarif Réduit / Tarif Spécifique) sont indiqués pour chaque événement et peuvent
|
|
50
|
-
varier selon la nature de l’événement. Les tarifs sont identiques en ligne et au guichet. Il est néanmoins
|
|
51
|
-
conseillé de réserver les billets en avance pour s’assurer une place.
|
|
52
|
-
</p>
|
|
53
|
-
<p>
|
|
54
|
-
L’accès au Skatepark, Fablab et Halle C sont soumis à adhésions. Les adhésions sont gratuites et
|
|
55
|
-
nominatives. Elle donnent accès aux espaces dans la limite des places disponibles.
|
|
56
|
-
</p>
|
|
57
|
-
<p>
|
|
58
|
-
<strong>+ d’infos <br /></strong>billetterie@laconditionpublique.com <br />+33 (0)328334833
|
|
59
|
-
</p>
|
|
60
|
-
<br />
|
|
61
|
-
<p>
|
|
62
|
-
<strong>Accès <br /></strong>14, place Faidherbe <br />59100 Roubaix <br />Métro / Tram : Arrêt
|
|
63
|
-
Eurotéléport, Ligne 2 <br />Bus / V’Lille : Arrêt Condition Publique
|
|
64
|
-
</p>
|
|
65
|
-
<p>
|
|
66
|
-
Accès handicapés : nous contacter avant votre venue au 03 28 33 48 33 ou par mail
|
|
67
|
-
billetterie@laconditionpublique.com
|
|
68
|
-
</p>
|
|
69
|
-
</div>
|
|
70
|
-
</sonic-modal-content>
|
|
71
|
-
</sonic-modal>
|
|
72
|
-
</template>
|
|
73
|
-
</sonic-code>
|
|
74
|
-
|
|
75
|
-
## Force action
|
|
76
|
-
|
|
77
|
-
<sonic-code>
|
|
78
|
-
<template>
|
|
79
|
-
<sonic-button onclick="document.getElementById('force').show()"> Force action to close</sonic-button>
|
|
80
|
-
<sonic-modal forceAction id="force">
|
|
81
|
-
<sonic-modal-title>Do you want some cookies ? </sonic-modal-title>
|
|
82
|
-
<sonic-modal-content>
|
|
83
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget quam eu mi luctus faucibus.
|
|
84
|
-
</sonic-modal-content>
|
|
85
|
-
<sonic-modal-actions >
|
|
86
|
-
<sonic-button hideModal minWidth="8rem"> Nope </sonic-button>
|
|
87
|
-
<sonic-button hideModal minWidth="8rem" type="success">Hell yes !</sonic-button>
|
|
88
|
-
</sonic-modal-actions>
|
|
89
|
-
</sonic-modal>
|
|
90
|
-
</sonic-modal>
|
|
91
|
-
</template>
|
|
92
|
-
</sonic-code>
|
|
93
|
-
|
|
94
|
-
## Custom dimensions
|
|
95
|
-
|
|
96
|
-
<sonic-code>
|
|
97
|
-
<template>
|
|
98
|
-
<sonic-button onclick="document.getElementById('CustomWidth').show()"> Custom width </sonic-button>
|
|
99
|
-
<sonic-modal maxHeight="50vh" maxWidth="90vw" width="100%" height="100%" id="CustomWidth">
|
|
100
|
-
<sonic-modal-close></sonic-modal-close>
|
|
101
|
-
<sonic-image
|
|
102
|
-
cover
|
|
103
|
-
objectPosition="center 20%"
|
|
104
|
-
src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
|
|
105
|
-
></sonic-image>
|
|
106
|
-
</sonic-modal>
|
|
107
|
-
</template>
|
|
108
|
-
</sonic-code>
|
|
109
|
-
|
|
110
|
-
## Fullscreen
|
|
111
|
-
|
|
112
|
-
<sonic-code>
|
|
113
|
-
<template>
|
|
114
|
-
<sonic-button onclick="document.getElementById('Fullscreen').show()"> Fullscreen </sonic-button>
|
|
115
|
-
<sonic-modal fullscreen id="Fullscreen">
|
|
116
|
-
<sonic-modal-close></sonic-modal-close>
|
|
117
|
-
<sonic-image
|
|
118
|
-
cover
|
|
119
|
-
src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
|
|
120
|
-
></sonic-image>
|
|
121
|
-
</sonic-modal>
|
|
122
|
-
</template>
|
|
123
|
-
</sonic-code>
|
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
# Pop
|
|
2
|
-
|
|
3
|
-
## Placement
|
|
4
|
-
<sonic-code>
|
|
5
|
-
<template>
|
|
6
|
-
<sonic-pop class="inline-block" placement="left">
|
|
7
|
-
<sonic-button>Left</sonic-button>
|
|
8
|
-
<sonic-menu slot="content">
|
|
9
|
-
<sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
|
|
10
|
-
</sonic-menu>
|
|
11
|
-
</sonic-pop>
|
|
12
|
-
<sonic-pop class="inline-block" placement="right">
|
|
13
|
-
<sonic-button>Right</sonic-button>
|
|
14
|
-
<sonic-menu slot="content">
|
|
15
|
-
<sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
|
|
16
|
-
</sonic-menu>
|
|
17
|
-
</sonic-pop>
|
|
18
|
-
<sonic-pop class="inline-block" placement="top">
|
|
19
|
-
<sonic-button>Top</sonic-button>
|
|
20
|
-
<sonic-menu slot="content">
|
|
21
|
-
<sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
|
|
22
|
-
</sonic-menu>
|
|
23
|
-
</sonic-pop>
|
|
24
|
-
<sonic-pop class="inline-block" placement="bottom">
|
|
25
|
-
<sonic-button>Bottom</sonic-button>
|
|
26
|
-
<sonic-menu slot="content">
|
|
27
|
-
<sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
|
|
28
|
-
</sonic-menu>
|
|
29
|
-
</sonic-pop>
|
|
30
|
-
</template>
|
|
31
|
-
</sonic-code>
|
|
32
|
-
|
|
33
|
-
## Shadow
|
|
34
|
-
<sonic-code>
|
|
35
|
-
<template>
|
|
36
|
-
<sonic-pop class="inline-block" shadow="none" placement='top' >
|
|
37
|
-
<sonic-button>None</sonic-button>
|
|
38
|
-
<sonic-menu slot="content">
|
|
39
|
-
<sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
|
|
40
|
-
</sonic-menu>
|
|
41
|
-
</sonic-pop>
|
|
42
|
-
<sonic-pop class="inline-block" shadow="sm" placement='top'>
|
|
43
|
-
<sonic-button>Small</sonic-button>
|
|
44
|
-
<sonic-menu slot="content">
|
|
45
|
-
<sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
|
|
46
|
-
</sonic-menu>
|
|
47
|
-
</sonic-pop>
|
|
48
|
-
<sonic-pop class="inline-block" shadow="md" placement='top'>
|
|
49
|
-
<sonic-button>Medium</sonic-button>
|
|
50
|
-
<sonic-menu slot="content">
|
|
51
|
-
<sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
|
|
52
|
-
</sonic-menu>
|
|
53
|
-
</sonic-pop>
|
|
54
|
-
<sonic-pop class="inline-block" shadow="lg" placement='top'>
|
|
55
|
-
<sonic-button>Large</sonic-button>
|
|
56
|
-
<sonic-menu slot="content">
|
|
57
|
-
<sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
|
|
58
|
-
</sonic-menu>
|
|
59
|
-
</sonic-pop>
|
|
60
|
-
</template>
|
|
61
|
-
</sonic-code>
|
|
62
|
-
|
|
63
|
-
## noToggle
|
|
64
|
-
<sonic-code>
|
|
65
|
-
<template>
|
|
66
|
-
<sonic-pop class="inline-block" noToggle>
|
|
67
|
-
<sonic-button>No toggle on click</sonic-button>
|
|
68
|
-
<sonic-menu slot="content">
|
|
69
|
-
<sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
|
|
70
|
-
</sonic-menu>
|
|
71
|
-
</sonic-pop>
|
|
72
|
-
<sonic-pop class="inline-block" >
|
|
73
|
-
<sonic-button>Default toggle on click</sonic-button>
|
|
74
|
-
<sonic-menu slot="content">
|
|
75
|
-
<sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
|
|
76
|
-
</sonic-menu>
|
|
77
|
-
</sonic-pop>
|
|
78
|
-
</template>
|
|
79
|
-
</sonic-code>
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
## manual
|
|
83
|
-
<sonic-code>
|
|
84
|
-
<template>
|
|
85
|
-
<sonic-pop class="inline-block" manual id="manualPop">
|
|
86
|
-
<sonic-button onclick="alert('customAction without opening Pop content')">Manual doesn't open on click</sonic-button>
|
|
87
|
-
<sonic-menu slot="content">
|
|
88
|
-
<sonic-menu-item>Hourra !</sonic-menu-item>
|
|
89
|
-
</sonic-menu>
|
|
90
|
-
</sonic-pop>
|
|
91
|
-
<sonic-button onclick="document.getElementById('manualPop').show()" class="ml-5" variant="outline">
|
|
92
|
-
<sonic-icon name="sparkles" library="custom"></sonic-icon>
|
|
93
|
-
Click to open pop
|
|
94
|
-
</sonic-button>
|
|
95
|
-
</template>
|
|
96
|
-
</sonic-code>
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
# Progress bar
|
|
2
|
-
|
|
3
|
-
Displays an indicator showing the completion progress of a task.
|
|
4
|
-
|
|
5
|
-
## Indeterminate
|
|
6
|
-
|
|
7
|
-
<sonic-code>
|
|
8
|
-
<template>
|
|
9
|
-
<sonic-progress></sonic-progress>
|
|
10
|
-
</template>
|
|
11
|
-
</sonic-code>
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
## Remaining
|
|
15
|
-
|
|
16
|
-
<sonic-code>
|
|
17
|
-
<template>
|
|
18
|
-
<sonic-progress type="danger" value="80">
|
|
19
|
-
80% Used <span slot="remaining">20% left</span>
|
|
20
|
-
</sonic-progress>
|
|
21
|
-
</template>
|
|
22
|
-
</sonic-code>
|
|
23
|
-
|
|
24
|
-
## Sizes
|
|
25
|
-
|
|
26
|
-
<sonic-code>
|
|
27
|
-
<template>
|
|
28
|
-
<div class="grid gap-3">
|
|
29
|
-
<sonic-progress size="2xs" value="25">25%</sonic-progress>
|
|
30
|
-
<sonic-progress size="xs" value="25">25%</sonic-progress>
|
|
31
|
-
<sonic-progress size="sm" value="25">25%</sonic-progress>
|
|
32
|
-
<sonic-progress size="md" value="25">25%</sonic-progress>
|
|
33
|
-
<sonic-progress size="lg" value="25">25%</sonic-progress>
|
|
34
|
-
<sonic-progress size="xl" value="25">25%</sonic-progress>
|
|
35
|
-
<sonic-progress size="2xl" value="25">25%</sonic-progress>
|
|
36
|
-
</div>
|
|
37
|
-
</template>
|
|
38
|
-
</sonic-code>
|
|
39
|
-
|
|
40
|
-
## Type
|
|
41
|
-
|
|
42
|
-
<sonic-code>
|
|
43
|
-
<template>
|
|
44
|
-
<div class="grid gap-3">
|
|
45
|
-
<sonic-progress value="50">50%</sonic-progress>
|
|
46
|
-
<sonic-progress type="info" value="50">50%</sonic-progress>
|
|
47
|
-
<sonic-progress type="warning" value="50">50%</sonic-progress>
|
|
48
|
-
<sonic-progress type="success" value="50">50%</sonic-progress>
|
|
49
|
-
<sonic-progress type="danger" value="50">50%</sonic-progress>
|
|
50
|
-
</div>
|
|
51
|
-
</template>
|
|
52
|
-
</sonic-code>
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
## Invert
|
|
56
|
-
|
|
57
|
-
<sonic-code>
|
|
58
|
-
<template>
|
|
59
|
-
<div class="bg-neutral-900 p-4 rounded-md">
|
|
60
|
-
<sonic-progress type="invert" value="50">50%</sonic-progress>
|
|
61
|
-
</div>
|
|
62
|
-
</template>
|
|
63
|
-
</sonic-code>
|