Skip to content

Commit 2cc53d9

Browse files
glsdowntcbegley
glsdown
and
tcbegley
committed
Added jumbotron example (#671)
* Added jumbotron example * Format * Update Jumbotron language Co-authored-by: tcbegley <[email protected]>
1 parent 1b87258 commit 2cc53d9

File tree

8 files changed

+215
-0
lines changed

8 files changed

+215
-0
lines changed

‎docs/components_page/__init__.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ def register_apps():
107107
"form": {"markdown_path": COMPONENTS / "form.md"},
108108
"input": {"markdown_path": COMPONENTS / "input.md"},
109109
"input_group": {"markdown_path": COMPONENTS / "input_group.md"},
110+
"jumbotron": {"markdown_path": COMPONENTS / "jumbotron.md"},
110111
"layout": {"markdown_path": COMPONENTS / "layout.md"},
111112
"list_group": {"markdown_path": COMPONENTS / "list_group.md"},
112113
"main": {"markdown_path": COMPONENTS / "main.md"},

‎docs/components_page/components/jumbotron.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
title: Jumbotron
3+
lead: Lightweight styling for showcasing key content and messages.
4+
---
5+
6+
## Examples
7+
8+
The Jumbotron component was removed in Bootstrap 5, so there is no longer a dedicated `Jumbotron` component in _dash-bootstrap-components_ either. However, thanks to Bootstrap's flexible utility classes, it is easy to recreate a jumbotron-like layout yourself. Here's a simple example
9+
10+
{{example:components/jumbotron/simple.py:jumbotron}}
11+
12+
### Styling the "Jumbotron"
13+
14+
There are [many utility classes](https://getbootstrap.com/docs/5.0/utilities/spacing/) available in Bootstrap. By combining them you can easily customise the look and feel of your app.
15+
16+
{{example:components/jumbotron/custom.py:jumbotron}}

‎docs/components_page/components/jumbotron/custom.R‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
library(dashBootstrapComponents)
2+
library(dashHtmlComponents)
3+
4+
left_jumbotron <- dbcCol(
5+
htmlDiv(
6+
list(
7+
htmlH2("Change the background", class_name = "display-3"),
8+
htmlHr(class_name = "my-2"),
9+
htmlP(
10+
paste(
11+
"Swap the background-color utility and add a `.text-*` color",
12+
"utility to mix up the look."
13+
)
14+
),
15+
dbcButton("Example Button", color = "light", outline = TRUE)
16+
),
17+
class_name = "h-100 p-5 text-white bg-dark rounded-3"
18+
),
19+
md = 6
20+
)
21+
22+
right_jumbotron <- dbcCol(
23+
htmlDiv(
24+
list(
25+
htmlH2("Add borders", class_name = "display-3"),
26+
htmlHr(class_name = "my-2"),
27+
htmlP(
28+
paste(
29+
"Or, keep it light and add a border for some added definition",
30+
"to the boundaries of your content."
31+
)
32+
),
33+
dbcButton("Example Button", color = "secondary", outline = TRUE)
34+
),
35+
class_name = "h-100 p-5 bg-light border rounded-3"
36+
),
37+
md = 6
38+
)
39+
40+
jumbotron <- dbcRow(
41+
list(left_jumbotron, right_jumbotron),
42+
class_name = "align-items-md-stretch"
43+
)

‎docs/components_page/components/jumbotron/custom.jl‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
using DashBootstrapComponents, DashHtmlComponents
2+
3+
left_jumbotron = dbc_col(
4+
html_div(
5+
[
6+
html_h2("Change the background", class_name = "display-3"),
7+
html_hr(class_name = "my-2"),
8+
html_p(
9+
"Swap the background-color utility and add a `.text-*` color " *
10+
"utility to mix up the look.",
11+
),
12+
dbc_button("Example Button", color = "light", outline = true),
13+
],
14+
class_name = "h-100 p-5 text-white bg-dark rounded-3",
15+
),
16+
md = 6,
17+
)
18+
19+
right_jumbotron = dbc_col(
20+
html_div(
21+
[
22+
html_h2("Add borders", class_name = "display-3"),
23+
html_hr(class_name = "my-2"),
24+
html_p(
25+
"Or, keep it light and add a border for some added definition " *
26+
"to the boundaries of your content.",
27+
),
28+
dbc_button("Example Button", color = "secondary", outline = true),
29+
],
30+
class_name = "h-100 p-5 bg-light border rounded-3",
31+
),
32+
md = 6,
33+
)
34+
35+
jumbotron =
36+
dbc_row([left_jumbotron, right_jumbotron], class_name = "align-items-md-stretch")

‎docs/components_page/components/jumbotron/custom.py‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import dash_bootstrap_components as dbc
2+
import dash_html_components as html
3+
4+
left_jumbotron = dbc.Col(
5+
html.Div(
6+
[
7+
html.H2("Change the background", class_name="display-3"),
8+
html.Hr(class_name="my-2"),
9+
html.P(
10+
"Swap the background-color utility and add a `.text-*` color "
11+
"utility to mix up the look."
12+
),
13+
dbc.Button("Example Button", color="light", outline=True),
14+
],
15+
class_name="h-100 p-5 text-white bg-dark rounded-3",
16+
),
17+
md=6,
18+
)
19+
20+
right_jumbotron = dbc.Col(
21+
html.Div(
22+
[
23+
html.H2("Add borders", class_name="display-3"),
24+
html.Hr(class_name="my-2"),
25+
html.P(
26+
"Or, keep it light and add a border for some added definition "
27+
"to the boundaries of your content."
28+
),
29+
dbc.Button("Example Button", color="secondary", outline=True),
30+
],
31+
class_name="h-100 p-5 bg-light border rounded-3",
32+
),
33+
md=6,
34+
)
35+
36+
jumbotron = dbc.Row(
37+
[left_jumbotron, right_jumbotron],
38+
class_name="align-items-md-stretch",
39+
)

‎docs/components_page/components/jumbotron/simple.R‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
library(dashBootstrapComponents)
2+
library(dashHtmlComponents)
3+
4+
jumbotron <- htmlDiv(
5+
dbcContainer(
6+
list(
7+
htmlH1("Jumbotron", class_name = "display-3"),
8+
htmlP(
9+
paste(
10+
"Use Containers to create a jumbotron to call attention to",
11+
"featured content or information."
12+
),
13+
class_name = "lead"
14+
),
15+
htmlHr(class_name = "my-2"),
16+
htmlP(
17+
paste(
18+
"Use utility classes for typography and spacing to suit the",
19+
"larger container."
20+
)
21+
),
22+
htmlP(
23+
dbcButton("Learn more", color = "primary"),
24+
class_name = "lead"
25+
)
26+
),
27+
fluid = TRUE,
28+
class_name = "py-3"
29+
),
30+
class_name = "p-3 bg-light rounded-3"
31+
)

‎docs/components_page/components/jumbotron/simple.jl‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
using DashBootstrapComponents, DashHtmlComponents
2+
3+
jumbotron = html_div(
4+
dbc_container(
5+
[
6+
html_h1("Jumbotron", class_name = "display-3"),
7+
html_p(
8+
"Use Containers to create a jumbotron to call attention to " *
9+
"featured content or information.",
10+
class_name = "lead",
11+
),
12+
html_hr(class_name = "my-2"),
13+
html_p(
14+
"Use utility classes for typography and spacing to suit the " *
15+
"larger container.",
16+
),
17+
html_p(dbc_button("Learn more", color = "primary"), class_name = "lead"),
18+
],
19+
fluid = true,
20+
class_name = "py-3",
21+
),
22+
class_name = "p-3 bg-light rounded-3",
23+
)

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import dash_bootstrap_components as dbc
2+
import dash_html_components as html
3+
4+
jumbotron = html.Div(
5+
dbc.Container(
6+
[
7+
html.H1("Jumbotron", class_name="display-3"),
8+
html.P(
9+
"Use Containers to create a jumbotron to call attention to "
10+
"featured content or information.",
11+
class_name="lead",
12+
),
13+
html.Hr(class_name="my-2"),
14+
html.P(
15+
"Use utility classes for typography and spacing to suit the "
16+
"larger container."
17+
),
18+
html.P(
19+
dbc.Button("Learn more", color="primary"), class_name="lead"
20+
),
21+
],
22+
fluid=True,
23+
class_name="py-3",
24+
),
25+
class_name="p-3 bg-light rounded-3",
26+
)

0 commit comments

Comments
 (0)