Skip to content

Commit 5a651cc

Browse files
hcourdenthcourdent
authored
Stat card & dropdown components (windmill-labs#422)
1 parent de25267 commit 5a651cc

File tree

6 files changed

+99
-1
lines changed

6 files changed

+99
-1
lines changed

‎docs/apps/4_app_configuration_settings/dropdown_menu.mdx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import DocCard from '@site/src/components/DocCard';
2+
3+
# Dropdown Menu
4+
5+
The Dropdown Menu component is meant to embed one of several [Button](./button.mdx) components and display them in a dropdown menu.
6+
7+
It has the following properties:
8+
- Actions are fully customizable button components.
9+
- They can have a runnable and/or trigger a side effect (open a modal, select a tab, etc.)
10+
- The menu itself is a button that can be customized like the other buttons.
11+
12+
<video
13+
className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
14+
controls
15+
src="/videos/dropdown_menu.mp4"
16+
/>
17+
18+
<br/>
19+
20+
The following section details Dropdown Menu component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
21+
22+
<div class="grid grid-cols-2 gap-6 mb-4">
23+
<DocCard
24+
color="orange"
25+
title="App Editor Documentation"
26+
description="The app editor is a low-code builder to create custom User Interfaces with a mix of drag-and-drop and code."
27+
href="/docs/apps/app_editor"
28+
/>
29+
<DocCard
30+
color="orange"
31+
title="Apps Quickstart"
32+
description="Learn how to build your first app in a matter of minutes."
33+
href="/docs/getting_started/apps_quickstart"
34+
/>
35+
</div>
36+
37+
## Menu items
38+
39+
Each item is a [Button component](./button.mdx).
40+
41+
## Dropdown Menu configuration
42+
43+
| Name | Type | Connectable | Templatable | Default | Description |
44+
| ------------------- | :---------------------------------: | :---------: | :---------: | :-------: | ---------------------------------------------------------- |
45+
| Label | string | true | false | null | What's displayed o the menu. |
46+
| Color | blue, red, dark, light, green, gray, none | true | false | blue | The dropdown menu color. |
47+
| Size | xs, sm, md , lg, xl | false | false | sm | The dropdown menu size. |
48+
| Fill container | boolean | false | false | false | Whether the dropdown menu should fill the component container. |
49+
| Before Icon | string | false | false | Undefined | The icon to display before the label. |
50+
| After Icon | string | false | false | Undefined | The icon to display after the label. |

‎docs/apps/4_app_configuration_settings/statistic_card.mdx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import DocCard from '@site/src/components/DocCard';
2+
3+
# Statistic card
4+
5+
The statistic card component is a pannel meant to display a value and progress.
6+
7+
<video
8+
className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
9+
controls
10+
src="/videos/stat_card.mp4"
11+
/>
12+
13+
<br/>
14+
15+
The following section details Statistic card component's specific settings. For more details on the App Editor, check the [dedicated documentation](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
16+
17+
<div class="grid grid-cols-2 gap-6 mb-4">
18+
<DocCard
19+
color="orange"
20+
title="App Editor Documentation"
21+
description="The app editor is a low-code builder to create custom User Interfaces with a mix of drag-and-drop and code."
22+
href="/docs/apps/app_editor"
23+
/>
24+
<DocCard
25+
color="orange"
26+
title="Apps Quickstart"
27+
description="Learn how to build your first app in a matter of minutes."
28+
href="/docs/getting_started/apps_quickstart"
29+
/>
30+
</div>
31+
32+
## Statistic card configuration
33+
34+
| Name | Type | Connectable | Templatable | Default | Description |
35+
| ----- | :---------------------------------: | :---------: | :---------: | :-----: | ----------------- |
36+
| Title | string | true | false | Title | The title displayed within component. |
37+
| Value | string | true | false | Value | The actual value displayed by the component (in particular, can be a number, with currency etc.) |
38+
| Progress | number | true | false | 0 | The progress, in %. Green when positive, red when negative. |
39+
40+
### Media
41+
42+
| Name | Type | Connectable | Templatable | Default | Description |
43+
| ----- | :---------------------------------: | :---------: | :---------: | :-----: | ----------------- |
44+
| Media | string: Image, Icon | false | false | Image | The picture that will be displayed. |
45+
| (If Media = "Image") Source | string | true | false | /logo.svg | The source of the image: can also be a downloaded image. |
46+
| (If Media = "Image") Source Kind | string: url, png encoded as base64, jpeg encoded as base64, svg encoded as base64 | true | false | url | Kind of source that is used. |
47+
| (If Media = "Icon") Icon | string | true | false | null | The icon that will be displayed. |

‎docs/apps/4_app_configuration_settings/submit_form.mdx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
import DocCard from '@site/src/components/DocCard';
32

43
# Submit Form

‎sidebars.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,7 @@ const sidebars = {
169169
'apps/app_configuration_settings/divider_y',
170170
'apps/app_configuration_settings/download_button',
171171
'apps/app_configuration_settings/drawer',
172+
'apps/app_configuration_settings/dropdown_menu',
172173
'apps/app_configuration_settings/email_input',
173174
'apps/app_configuration_settings/file_input',
174175
'apps/app_configuration_settings/flow_status',
@@ -197,6 +198,7 @@ const sidebars = {
197198
'apps/app_configuration_settings/select',
198199
'apps/app_configuration_settings/sidebar_tabs',
199200
'apps/app_configuration_settings/slider',
201+
'apps/app_configuration_settings/statistic_card',
200202
'apps/app_configuration_settings/stepper',
201203
'apps/app_configuration_settings/submit_form',
202204
'apps/app_configuration_settings/table',

‎static/videos/dropdown_menu.mp4

3.25 MB
Binary file not shown.

‎static/videos/stat_card.mp4

4.17 MB
Binary file not shown.

0 commit comments

Comments
 (0)