Skip to content

Commit 4cea851

Browse files
glsdowntcbegley
glsdown
and
tcbegley
authored
Theme explorer components (#739)
* Bump dbc version * Added new v1 components * Improved examples for existing components * Format * Remove carousel and layout * Update docs/requirements.txt * Update package-lock.json * Update package-lock.json Co-authored-by: Tom Begley <tomcbegley@gmail.com>
1 parent 41b0474 commit 4cea851

18 files changed

+548
-120
lines changed

‎docs/demos/theme_explorer/__init__.py

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,23 @@
22
import dash_bootstrap_components as dbc
33
from dash import Input, Output, State
44

5+
from .accordion import accordion
56
from .alert import alerts
67
from .badge import badges
8+
from .breadcrumb import breadcrumb
79
from .button import buttons
810
from .card import cards
911
from .collapse import collapse
12+
from .dropdown_menu import dropdown_menu
1013
from .fade import fade
1114
from .form import form
1215
from .input import checklist_items, input_, input_group, radio_items
1316
from .list_group import list_group
1417
from .modal import modal
18+
from .nav import nav
1519
from .navbar import navbar
20+
from .offcanvas import offcanvas
21+
from .pagination import pagination
1622
from .popover import popover
1723
from .progress import progress
1824
from .spinner import spinner
@@ -27,11 +33,14 @@
2733

2834
app.layout = dbc.Container(
2935
[
36+
accordion,
3037
alerts,
3138
badges,
39+
breadcrumb,
3240
buttons,
3341
cards,
3442
collapse,
43+
dropdown_menu,
3544
fade,
3645
dbc.Row(
3746
[
@@ -47,7 +56,10 @@
4756
),
4857
list_group,
4958
modal,
59+
offcanvas,
60+
nav,
5061
navbar,
62+
pagination,
5163
popover,
5264
progress,
5365
spinner,
@@ -96,7 +108,7 @@ def toggle_popover(n, is_open):
96108

97109
@app.callback(
98110
Output("modal", "is_open"),
99-
[Input("button", "n_clicks")],
111+
[Input("modal-button", "n_clicks")],
100112
[State("modal", "is_open")],
101113
)
102114
def toggle_modal(n, is_open):
@@ -105,6 +117,17 @@ def toggle_modal(n, is_open):
105117
return is_open
106118

107119

120+
@app.callback(
121+
Output("offcanvas", "is_open"),
122+
[Input("offcanvas-button", "n_clicks")],
123+
[State("offcanvas", "is_open")],
124+
)
125+
def toggle_offcanvas(n, is_open):
126+
if n:
127+
return not is_open
128+
return is_open
129+
130+
108131
@app.callback(
109132
Output("auto-toast", "is_open"), [Input("auto-toast-toggle", "n_clicks")]
110133
)

‎docs/demos/theme_explorer/accordion.py

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import dash_bootstrap_components as dbc
2+
from dash import html
3+
4+
from .util import make_subheading
5+
6+
accordion = html.Div(
7+
[
8+
make_subheading("Accordion", "accordion"),
9+
dbc.Accordion(
10+
[
11+
dbc.AccordionItem(
12+
"This is the content of the first section",
13+
title="Item 1",
14+
),
15+
dbc.AccordionItem(
16+
"This is the content of the second section",
17+
title="Item 2",
18+
),
19+
dbc.AccordionItem(
20+
"This is the content of the third section",
21+
title="Item 3",
22+
),
23+
],
24+
),
25+
],
26+
className="mb-4",
27+
)

‎docs/demos/theme_explorer/badge.py

Lines changed: 82 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,90 @@
2828
dbc.Badge("Light", color="light", className="me-1", pill=True),
2929
dbc.Badge("Dark", color="dark", pill=True),
3030
],
31+
className="mb-2",
32+
)
33+
34+
badge_text = html.Div(
35+
[
36+
dbc.Badge(
37+
"Primary",
38+
color="white",
39+
text_color="primary",
40+
className="border me-1",
41+
),
42+
dbc.Badge(
43+
"Secondary",
44+
color="white",
45+
text_color="secondary",
46+
className="border me-1",
47+
),
48+
dbc.Badge(
49+
"Success",
50+
color="white",
51+
text_color="success",
52+
className="border me-1",
53+
),
54+
dbc.Badge(
55+
"Warning",
56+
color="white",
57+
text_color="warning",
58+
className="border me-1",
59+
),
60+
dbc.Badge(
61+
"Danger",
62+
color="white",
63+
text_color="danger",
64+
className="border me-1",
65+
),
66+
dbc.Badge(
67+
"Info", color="white", text_color="info", className="border me-1"
68+
),
69+
dbc.Badge(
70+
"Dark", color="white", text_color="dark", className="border me-1"
71+
),
72+
dbc.Badge(
73+
"Black",
74+
color="white",
75+
text_color="black",
76+
className="border me-1",
77+
),
78+
dbc.Badge(
79+
"Muted",
80+
color="white",
81+
text_color="muted",
82+
className="border me-1",
83+
),
84+
dbc.Badge(
85+
"Light",
86+
color="secondary",
87+
text_color="light",
88+
className="border me-1",
89+
),
90+
dbc.Badge(
91+
"White", color="secondary", text_color="white", className="border"
92+
),
93+
],
94+
className="mb-2",
95+
)
96+
97+
badge_sizes = html.Div(
98+
[
99+
html.H1(["Example heading", dbc.Badge("New", className="ms-1")]),
100+
html.H2(["Example heading", dbc.Badge("New", className="ms-1")]),
101+
html.H3(["Example heading", dbc.Badge("New", className="ms-1")]),
102+
html.H4(["Example heading", dbc.Badge("New", className="ms-1")]),
103+
html.H5(["Example heading", dbc.Badge("New", className="ms-1")]),
104+
html.H6(["Example heading", dbc.Badge("New", className="ms-1")]),
105+
]
31106
)
32107

33108
badges = html.Div(
34-
[make_subheading("Badge", "badge"), badge, badge_pills],
109+
[
110+
make_subheading("Badge", "badge"),
111+
badge,
112+
badge_pills,
113+
badge_text,
114+
badge_sizes,
115+
],
35116
className="mb-4",
36117
)

‎docs/demos/theme_explorer/breadcrumb.py

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import dash_bootstrap_components as dbc
2+
from dash import html
3+
4+
from .util import make_subheading
5+
6+
breadcrumb = html.Div(
7+
[
8+
make_subheading("Breadcrumb", "breadcrumb"),
9+
dbc.Breadcrumb(
10+
items=[
11+
{"label": "Docs", "href": "/docs", "external_link": True},
12+
{
13+
"label": "Components",
14+
"href": "/docs/components",
15+
"external_link": True,
16+
},
17+
{"label": "Breadcrumb", "active": True},
18+
],
19+
),
20+
],
21+
className="mb-4",
22+
)

‎docs/demos/theme_explorer/button.py

Lines changed: 61 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -104,20 +104,70 @@
104104
html.Div(
105105
dbc.ButtonGroup(
106106
[
107-
dbc.Button("First"),
108-
dbc.Button("Second"),
109-
dbc.DropdownMenu(
107+
dbc.Button("Left", outline=True, color="primary"),
108+
dbc.Button("Middle", outline=True, color="primary"),
109+
dbc.Button("Right", outline=True, color="primary"),
110+
]
111+
),
112+
className="mb-2",
113+
),
114+
dbc.Row(
115+
[
116+
dbc.Col(
117+
html.Div(
118+
dbc.ButtonGroup(
119+
[
120+
dbc.Button("First"),
121+
dbc.Button("Second"),
122+
dbc.DropdownMenu(
123+
[
124+
dbc.DropdownMenuItem("Item 1"),
125+
dbc.DropdownMenuItem("Item 2"),
126+
],
127+
label="Dropdown",
128+
group=True,
129+
),
130+
],
131+
vertical=True,
132+
),
133+
className="mb-2",
134+
),
135+
),
136+
dbc.Col(
137+
html.Div(
110138
[
111-
dbc.DropdownMenuItem("Item 1"),
112-
dbc.DropdownMenuItem("Item 2"),
139+
dbc.ButtonGroup(
140+
[
141+
dbc.Button("Left"),
142+
dbc.Button("Large"),
143+
dbc.Button("Right"),
144+
],
145+
size="lg",
146+
className="m-1",
147+
),
148+
dbc.ButtonGroup(
149+
[
150+
dbc.Button("Left"),
151+
dbc.Button("Regular"),
152+
dbc.Button("Right"),
153+
],
154+
size="md",
155+
className="m-1",
156+
),
157+
dbc.ButtonGroup(
158+
[
159+
dbc.Button("Left"),
160+
dbc.Button("Small"),
161+
dbc.Button("Right"),
162+
],
163+
size="sm",
164+
className="m-1",
165+
),
113166
],
114-
label="Dropdown",
115-
group=True,
167+
className="mb-2",
116168
),
117-
],
118-
vertical=True,
119-
),
120-
className="mb-2",
169+
),
170+
]
121171
),
122172
],
123173
lg=6,

‎docs/demos/theme_explorer/card.py

Lines changed: 9 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -6,60 +6,20 @@
66
cards = html.Div(
77
[
88
make_subheading("Card", "card"),
9-
dbc.CardGroup(
9+
dbc.Card(
1010
[
11-
dbc.Card(
11+
dbc.CardHeader("This is the header"),
12+
dbc.CardBody(
1213
[
13-
dbc.CardHeader("Header"),
14-
dbc.CardBody(
15-
[
16-
html.H5(
17-
"This card has a title",
18-
className="card-title",
19-
),
20-
html.P("And some text", className="card-text"),
21-
]
14+
html.H4("Card title", className="card-title"),
15+
html.P(
16+
"This is some card text", className="card-text"
2217
),
2318
]
2419
),
25-
dbc.Card(
26-
[
27-
dbc.CardBody(
28-
[
29-
html.H5(
30-
"This card has a title",
31-
className="card-title",
32-
),
33-
html.P(
34-
"and some text, but no header",
35-
className="card-text",
36-
),
37-
]
38-
)
39-
],
40-
outline=True,
41-
color="primary",
42-
),
43-
dbc.Card(
44-
[
45-
dbc.CardBody(
46-
[
47-
html.H5(
48-
"This card has a title",
49-
className="card-title",
50-
),
51-
html.P(
52-
"and some text, and a footer!",
53-
className="card-text",
54-
),
55-
]
56-
),
57-
dbc.CardFooter("Footer"),
58-
],
59-
outline=True,
60-
color="dark",
61-
),
62-
]
20+
dbc.CardFooter("This is the footer"),
21+
],
22+
style={"width": "18rem"},
6323
),
6424
],
6525
className="mb-4",

0 commit comments

Comments
 (0)