diff --git a/docs/components_page/__init__.py b/docs/components_page/__init__.py index bc79a66d0..2435dd632 100644 --- a/docs/components_page/__init__.py +++ b/docs/components_page/__init__.py @@ -107,6 +107,7 @@ def register_apps(): "form": {"markdown_path": COMPONENTS / "form.md"}, "input": {"markdown_path": COMPONENTS / "input.md"}, "input_group": {"markdown_path": COMPONENTS / "input_group.md"}, + "jumbotron": {"markdown_path": COMPONENTS / "jumbotron.md"}, "layout": {"markdown_path": COMPONENTS / "layout.md"}, "list_group": {"markdown_path": COMPONENTS / "list_group.md"}, "main": {"markdown_path": COMPONENTS / "main.md"}, diff --git a/docs/components_page/components/jumbotron.md b/docs/components_page/components/jumbotron.md new file mode 100644 index 000000000..035fc0fa4 --- /dev/null +++ b/docs/components_page/components/jumbotron.md @@ -0,0 +1,16 @@ +--- +title: Jumbotron +lead: Lightweight styling for showcasing key content and messages. +--- + +## Examples + +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 + +{{example:components/jumbotron/simple.py:jumbotron}} + +### Styling the "Jumbotron" + +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. + +{{example:components/jumbotron/custom.py:jumbotron}} diff --git a/docs/components_page/components/jumbotron/custom.R b/docs/components_page/components/jumbotron/custom.R new file mode 100644 index 000000000..17a333f43 --- /dev/null +++ b/docs/components_page/components/jumbotron/custom.R @@ -0,0 +1,43 @@ +library(dashBootstrapComponents) +library(dashHtmlComponents) + +left_jumbotron <- dbcCol( + htmlDiv( + list( + htmlH2("Change the background", class_name = "display-3"), + htmlHr(class_name = "my-2"), + htmlP( + paste( + "Swap the background-color utility and add a `.text-*` color", + "utility to mix up the look." + ) + ), + dbcButton("Example Button", color = "light", outline = TRUE) + ), + class_name = "h-100 p-5 text-white bg-dark rounded-3" + ), + md = 6 +) + +right_jumbotron <- dbcCol( + htmlDiv( + list( + htmlH2("Add borders", class_name = "display-3"), + htmlHr(class_name = "my-2"), + htmlP( + paste( + "Or, keep it light and add a border for some added definition", + "to the boundaries of your content." + ) + ), + dbcButton("Example Button", color = "secondary", outline = TRUE) + ), + class_name = "h-100 p-5 bg-light border rounded-3" + ), + md = 6 +) + +jumbotron <- dbcRow( + list(left_jumbotron, right_jumbotron), + class_name = "align-items-md-stretch" +) diff --git a/docs/components_page/components/jumbotron/custom.jl b/docs/components_page/components/jumbotron/custom.jl new file mode 100644 index 000000000..26a88a541 --- /dev/null +++ b/docs/components_page/components/jumbotron/custom.jl @@ -0,0 +1,36 @@ +using DashBootstrapComponents, DashHtmlComponents + +left_jumbotron = dbc_col( + html_div( + [ + html_h2("Change the background", class_name = "display-3"), + html_hr(class_name = "my-2"), + html_p( + "Swap the background-color utility and add a `.text-*` color " * + "utility to mix up the look.", + ), + dbc_button("Example Button", color = "light", outline = true), + ], + class_name = "h-100 p-5 text-white bg-dark rounded-3", + ), + md = 6, +) + +right_jumbotron = dbc_col( + html_div( + [ + html_h2("Add borders", class_name = "display-3"), + html_hr(class_name = "my-2"), + html_p( + "Or, keep it light and add a border for some added definition " * + "to the boundaries of your content.", + ), + dbc_button("Example Button", color = "secondary", outline = true), + ], + class_name = "h-100 p-5 bg-light border rounded-3", + ), + md = 6, +) + +jumbotron = + dbc_row([left_jumbotron, right_jumbotron], class_name = "align-items-md-stretch") diff --git a/docs/components_page/components/jumbotron/custom.py b/docs/components_page/components/jumbotron/custom.py new file mode 100644 index 000000000..0b715d6be --- /dev/null +++ b/docs/components_page/components/jumbotron/custom.py @@ -0,0 +1,39 @@ +import dash_bootstrap_components as dbc +import dash_html_components as html + +left_jumbotron = dbc.Col( + html.Div( + [ + html.H2("Change the background", class_name="display-3"), + html.Hr(class_name="my-2"), + html.P( + "Swap the background-color utility and add a `.text-*` color " + "utility to mix up the look." + ), + dbc.Button("Example Button", color="light", outline=True), + ], + class_name="h-100 p-5 text-white bg-dark rounded-3", + ), + md=6, +) + +right_jumbotron = dbc.Col( + html.Div( + [ + html.H2("Add borders", class_name="display-3"), + html.Hr(class_name="my-2"), + html.P( + "Or, keep it light and add a border for some added definition " + "to the boundaries of your content." + ), + dbc.Button("Example Button", color="secondary", outline=True), + ], + class_name="h-100 p-5 bg-light border rounded-3", + ), + md=6, +) + +jumbotron = dbc.Row( + [left_jumbotron, right_jumbotron], + class_name="align-items-md-stretch", +) diff --git a/docs/components_page/components/jumbotron/simple.R b/docs/components_page/components/jumbotron/simple.R new file mode 100644 index 000000000..abc612211 --- /dev/null +++ b/docs/components_page/components/jumbotron/simple.R @@ -0,0 +1,31 @@ +library(dashBootstrapComponents) +library(dashHtmlComponents) + +jumbotron <- htmlDiv( + dbcContainer( + list( + htmlH1("Jumbotron", class_name = "display-3"), + htmlP( + paste( + "Use Containers to create a jumbotron to call attention to", + "featured content or information." + ), + class_name = "lead" + ), + htmlHr(class_name = "my-2"), + htmlP( + paste( + "Use utility classes for typography and spacing to suit the", + "larger container." + ) + ), + htmlP( + dbcButton("Learn more", color = "primary"), + class_name = "lead" + ) + ), + fluid = TRUE, + class_name = "py-3" + ), + class_name = "p-3 bg-light rounded-3" +) diff --git a/docs/components_page/components/jumbotron/simple.jl b/docs/components_page/components/jumbotron/simple.jl new file mode 100644 index 000000000..a07f69904 --- /dev/null +++ b/docs/components_page/components/jumbotron/simple.jl @@ -0,0 +1,23 @@ +using DashBootstrapComponents, DashHtmlComponents + +jumbotron = html_div( + dbc_container( + [ + html_h1("Jumbotron", class_name = "display-3"), + html_p( + "Use Containers to create a jumbotron to call attention to " * + "featured content or information.", + class_name = "lead", + ), + html_hr(class_name = "my-2"), + html_p( + "Use utility classes for typography and spacing to suit the " * + "larger container.", + ), + html_p(dbc_button("Learn more", color = "primary"), class_name = "lead"), + ], + fluid = true, + class_name = "py-3", + ), + class_name = "p-3 bg-light rounded-3", +) diff --git a/docs/components_page/components/jumbotron/simple.py b/docs/components_page/components/jumbotron/simple.py new file mode 100644 index 000000000..a641dff7f --- /dev/null +++ b/docs/components_page/components/jumbotron/simple.py @@ -0,0 +1,26 @@ +import dash_bootstrap_components as dbc +import dash_html_components as html + +jumbotron = html.Div( + dbc.Container( + [ + html.H1("Jumbotron", class_name="display-3"), + html.P( + "Use Containers to create a jumbotron to call attention to " + "featured content or information.", + class_name="lead", + ), + html.Hr(class_name="my-2"), + html.P( + "Use utility classes for typography and spacing to suit the " + "larger container." + ), + html.P( + dbc.Button("Learn more", color="primary"), class_name="lead" + ), + ], + fluid=True, + class_name="py-3", + ), + class_name="p-3 bg-light rounded-3", +)