Skip to content

Commit 1c430ae

Browse files
glsdowntcbegley
glsdown
and
tcbegley
authored
Add new Placeholder component (#899)
* Add Placeholder component and js tests * Add Placeholder docs * Fix issue with animation not showing * Add placeholder to theme explorer Co-authored-by: Tom Begley <[email protected]>
1 parent 645cd2b commit 1c430ae

File tree

14 files changed

+682
-0
lines changed

14 files changed

+682
-0
lines changed

‎docs/components_page/__init__.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ def register_apps():
8989
"markdown_path": COMPONENTS / "offcanvas.md",
9090
},
9191
"pagination": {"markdown_path": COMPONENTS / "pagination.md"},
92+
"placeholder": {"markdown_path": COMPONENTS / "placeholder.md"},
9293
"popover": {"markdown_path": COMPONENTS / "popover.md"},
9394
"progress": {"markdown_path": COMPONENTS / "progress.md"},
9495
"spinner": {"markdown_path": COMPONENTS / "spinner.md"},

‎docs/components_page/components/placeholder.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
title: Placeholder
3+
lead: Use the Placeholde component to indicate when something is loading on your page.
4+
---
5+
6+
## Basic Usage
7+
8+
`Placeholder` is a coloured rectangle which can be used to indicate text or other content should be there. You can make use of `button=True` to make the object look more like a button.
9+
10+
{{example:components/placeholder/simple.py:placeholder}}
11+
12+
## Width
13+
14+
You can change the width through grid column classes, width utilities, or inline styles.
15+
16+
{{example:components/placeholder/width.py:placeholder}}
17+
18+
## Color
19+
20+
Make use of the `color` property with the Bootstrap color names to change the color of the placeholder.
21+
22+
{{example:components/placeholder/color.py:placeholder}}
23+
24+
## Sizing
25+
26+
The size of Placeholders are based on the typographic style of the parent element. Customize them with sizing props: `lg`, `sm`, or `xs`.
27+
28+
{{example:components/placeholder/size.py:placeholder}}
29+
30+
## Animation
31+
32+
Animate placeholders by setting the prop `animation` to `glow` or `wave` to better convey the perception of something being actively loaded.
33+
34+
{{example:components/placeholder/animation.py:placeholder}}
35+
36+
## Loading component
37+
38+
As with the Spinner component, you can also use the Placeholder as a loading component.
39+
40+
{{example:components/placeholder/loading.py:placeholder}}
41+
42+
43+
{{apidoc:src/components/popover/Popover.js}}

‎docs/components_page/components/placeholder/animation.py‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import dash_bootstrap_components as dbc
2+
from dash import html
3+
4+
placeholder = html.Div(
5+
[
6+
dbc.Placeholder(animation="glow", className="w-100"),
7+
dbc.Placeholder(animation="wave", className="w-100"),
8+
]
9+
)

‎docs/components_page/components/placeholder/color.py‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import dash_bootstrap_components as dbc
2+
from dash import html
3+
4+
placeholder = html.Div(
5+
[
6+
dbc.Placeholder(color="primary", className="me-1 mt-1 w-100"),
7+
dbc.Placeholder(color="secondary", className="me-1 mt-1 w-100"),
8+
dbc.Placeholder(color="success", className="me-1 mt-1 w-100"),
9+
dbc.Placeholder(color="warning", className="me-1 mt-1 w-100"),
10+
dbc.Placeholder(color="danger", className="me-1 mt-1 w-100"),
11+
dbc.Placeholder(color="info", className="me-1 mt-1 w-100"),
12+
dbc.Placeholder(color="light", className="me-1 mt-1 w-100"),
13+
dbc.Placeholder(color="dark", className="me-1 mt-1 w-100"),
14+
]
15+
)

‎docs/components_page/components/placeholder/loading.py‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import time
2+
3+
import dash_bootstrap_components as dbc
4+
from dash import Input, Output, html
5+
6+
placeholder = html.Div(
7+
[
8+
dbc.Button("Load", id="loading-placeholder-button", n_clicks=0),
9+
dbc.Placeholder(
10+
html.Div(id="loading-placeholder-output"),
11+
className="w-100",
12+
animation="wave",
13+
),
14+
],
15+
)
16+
17+
18+
@app.callback(
19+
Output("loading-placeholder-output", "children"),
20+
[Input("loading-placeholder-button", "n_clicks")],
21+
)
22+
def load_output(n):
23+
if n:
24+
time.sleep(2)
25+
return f"Output loaded {n} times"
26+
return "Output not reloaded yet"

‎docs/components_page/components/placeholder/simple.py‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import dash_bootstrap_components as dbc
2+
from dash import html
3+
4+
placeholder = html.Div(
5+
[
6+
dbc.Placeholder(xs=6),
7+
html.Br(),
8+
dbc.Placeholder(xs=4, button=True),
9+
]
10+
)

‎docs/components_page/components/placeholder/size.py‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import dash_bootstrap_components as dbc
2+
from dash import html
3+
4+
placeholder = html.Div(
5+
[
6+
dbc.Placeholder(size="xs", className="me-1 mt-1 w-100"),
7+
dbc.Placeholder(size="sm", className="me-1 mt-1 w-100"),
8+
dbc.Placeholder(className="me-1 mt-1 w-100"),
9+
dbc.Placeholder(size="lg", className="me-1 mt-1 w-100"),
10+
]
11+
)

‎docs/components_page/components/placeholder/width.py‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import dash_bootstrap_components as dbc
2+
from dash import html
3+
4+
placeholder = html.Div(
5+
[
6+
dbc.Placeholder(xs=6),
7+
html.Br(),
8+
dbc.Placeholder(className="w-75"),
9+
html.Br(),
10+
dbc.Placeholder(style={"width": "25%"}),
11+
]
12+
)

‎docs/demos/theme_explorer/__init__.py‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
from .navbar import navbar
2020
from .offcanvas import offcanvas
2121
from .pagination import pagination
22+
from .placeholder import placeholder
2223
from .popover import popover
2324
from .progress import progress
2425
from .spinner import spinner
@@ -60,6 +61,7 @@
6061
nav,
6162
navbar,
6263
pagination,
64+
placeholder,
6365
popover,
6466
progress,
6567
spinner,

‎docs/demos/theme_explorer/placeholder.py‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import dash_bootstrap_components as dbc
2+
from dash import html
3+
4+
from .util import make_subheading
5+
6+
placeholders1 = dbc.Col(
7+
[
8+
make_subheading("Placeholder", "placeholder"),
9+
dbc.Placeholder(className="me-1 mt-1 w-100 mb-2"),
10+
html.Div(
11+
[
12+
dbc.Placeholder(animation="wave", className="me-1 mt-1 w-100"),
13+
dbc.Placeholder(animation="glow", className="me-1 mt-1 w-100"),
14+
],
15+
className="mb-2",
16+
),
17+
html.Div(
18+
[
19+
dbc.Placeholder(color="primary", className="me-1 mt-1 w-100"),
20+
dbc.Placeholder(
21+
color="secondary", className="me-1 mt-1 w-100"
22+
),
23+
dbc.Placeholder(color="success", className="me-1 mt-1 w-100"),
24+
dbc.Placeholder(color="warning", className="me-1 mt-1 w-100"),
25+
dbc.Placeholder(color="danger", className="me-1 mt-1 w-100"),
26+
dbc.Placeholder(color="info", className="me-1 mt-1 w-100"),
27+
dbc.Placeholder(color="light", className="me-1 mt-1 w-100"),
28+
dbc.Placeholder(color="dark", className="me-1 mt-1 w-100"),
29+
],
30+
className="mb-2",
31+
),
32+
html.Div(
33+
[
34+
dbc.Placeholder(size="xs", className="me-1 mt-1 w-100"),
35+
dbc.Placeholder(size="sm", className="me-1 mt-1 w-100"),
36+
dbc.Placeholder(className="me-1 mt-1 w-100"),
37+
dbc.Placeholder(size="lg", className="me-1 mt-1 w-100"),
38+
],
39+
className="mb-2",
40+
),
41+
],
42+
lg=6,
43+
xs=12,
44+
)
45+
46+
placeholders2 = dbc.Col(
47+
[
48+
dbc.Placeholder(button=True, className="me-1 mt-1 w-100 mb-2"),
49+
html.Div(
50+
[
51+
dbc.Placeholder(
52+
animation="wave", button=True, className="me-1 mt-1 w-100"
53+
),
54+
dbc.Placeholder(
55+
animation="glow", button=True, className="me-1 mt-1 w-100"
56+
),
57+
],
58+
className="mb-2",
59+
),
60+
html.Div(
61+
[
62+
dbc.Placeholder(
63+
color="primary", button=True, className="me-1 mt-1 w-100"
64+
),
65+
dbc.Placeholder(
66+
color="secondary", button=True, className="me-1 mt-1 w-100"
67+
),
68+
dbc.Placeholder(
69+
color="success", button=True, className="me-1 mt-1 w-100"
70+
),
71+
dbc.Placeholder(
72+
color="warning", button=True, className="me-1 mt-1 w-100"
73+
),
74+
dbc.Placeholder(
75+
color="danger", button=True, className="me-1 mt-1 w-100"
76+
),
77+
dbc.Placeholder(
78+
color="info", button=True, className="me-1 mt-1 w-100"
79+
),
80+
dbc.Placeholder(
81+
color="light", button=True, className="me-1 mt-1 w-100"
82+
),
83+
dbc.Placeholder(
84+
color="dark", button=True, className="me-1 mt-1 w-100"
85+
),
86+
],
87+
className="mb-2",
88+
),
89+
],
90+
lg=6,
91+
xs=12,
92+
)
93+
94+
placeholder = dbc.Row([placeholders1, placeholders2], className="mb-4")

0 commit comments

Comments
 (0)