From ac6d7769198fe2724a349d22dc40b8045b512dd6 Mon Sep 17 00:00:00 2001 From: glsdown Date: Wed, 1 Sep 2021 23:34:45 +0100 Subject: [PATCH 1/3] Added jumbotron example --- docs/components_page/__init__.py | 1 + docs/components_page/components/jumbotron.md | 16 +++++++ .../components/jumbotron/custom.R | 43 +++++++++++++++++++ .../components/jumbotron/custom.jl | 38 ++++++++++++++++ .../components/jumbotron/custom.py | 39 +++++++++++++++++ .../components/jumbotron/simple.R | 30 +++++++++++++ .../components/jumbotron/simple.jl | 25 +++++++++++ .../components/jumbotron/simple.py | 26 +++++++++++ 8 files changed, 218 insertions(+) create mode 100644 docs/components_page/components/jumbotron.md create mode 100644 docs/components_page/components/jumbotron/custom.R create mode 100644 docs/components_page/components/jumbotron/custom.jl create mode 100644 docs/components_page/components/jumbotron/custom.py create mode 100644 docs/components_page/components/jumbotron/simple.R create mode 100644 docs/components_page/components/jumbotron/simple.jl create mode 100644 docs/components_page/components/jumbotron/simple.py 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..f8d973970 --- /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 was retired from Bootstrap use in Bootstrap 5, but as it's a useful layout, here are examples of how to combine the Bootstrap styling with Dash components to create a Jumbotron-like experience. + +{{example:components/jumbotron/simple.py:jumbotron}} + +### Styling the Jumbotron + +There are lots of styles and spacing options available in Bootstrap. Creating the perfect component is just about combining the ones you want in the right way. + +{{example:components/jumbotron/custom.py:jumbotron}} \ No newline at end of file diff --git a/docs/components_page/components/jumbotron/custom.R b/docs/components_page/components/jumbotron/custom.R new file mode 100644 index 000000000..b62f44ff9 --- /dev/null +++ b/docs/components_page/components/jumbotron/custom.R @@ -0,0 +1,43 @@ +library(dashBootstrapComponents) +library(dashHtmlComponents) + +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..d7c4a9316 --- /dev/null +++ b/docs/components_page/components/jumbotron/custom.jl @@ -0,0 +1,38 @@ +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..53370f15d --- /dev/null +++ b/docs/components_page/components/jumbotron/simple.R @@ -0,0 +1,30 @@ +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( + 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.jl b/docs/components_page/components/jumbotron/simple.jl new file mode 100644 index 000000000..a5385d84b --- /dev/null +++ b/docs/components_page/components/jumbotron/simple.jl @@ -0,0 +1,25 @@ +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", +) From e39b24239bc75fe40a700245ae8b93b56758394e Mon Sep 17 00:00:00 2001 From: Gemma Down Date: Thu, 2 Sep 2021 19:35:13 +0100 Subject: [PATCH 2/3] Format --- .../components/jumbotron/custom.R | 24 +++++++-------- .../components/jumbotron/custom.jl | 30 +++++++++---------- .../components/jumbotron/simple.R | 15 +++++----- .../components/jumbotron/simple.jl | 18 +++++------ 4 files changed, 42 insertions(+), 45 deletions(-) diff --git a/docs/components_page/components/jumbotron/custom.R b/docs/components_page/components/jumbotron/custom.R index b62f44ff9..17a333f43 100644 --- a/docs/components_page/components/jumbotron/custom.R +++ b/docs/components_page/components/jumbotron/custom.R @@ -1,43 +1,43 @@ library(dashBootstrapComponents) library(dashHtmlComponents) -jumbotron <- dbcCol( +left_jumbotron <- dbcCol( htmlDiv( list( - htmlH2("Change the background", class_name="display-3"), - htmlHr(class_name="my-2"), + 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) + dbcButton("Example Button", color = "light", outline = TRUE) ), - class_name="h-100 p-5 text-white bg-dark rounded-3" + class_name = "h-100 p-5 text-white bg-dark rounded-3" ), - md=6 + md = 6 ) right_jumbotron <- dbcCol( htmlDiv( list( - htmlH2("Add borders", class_name="display-3"), - htmlHr(class_name="my-2"), + 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) + dbcButton("Example Button", color = "secondary", outline = TRUE) ), - class_name="h-100 p-5 bg-light border rounded-3" + class_name = "h-100 p-5 bg-light border rounded-3" ), - md=6 + md = 6 ) jumbotron <- dbcRow( list(left_jumbotron, right_jumbotron), - class_name="align-items-md-stretch" + class_name = "align-items-md-stretch" ) diff --git a/docs/components_page/components/jumbotron/custom.jl b/docs/components_page/components/jumbotron/custom.jl index d7c4a9316..26a88a541 100644 --- a/docs/components_page/components/jumbotron/custom.jl +++ b/docs/components_page/components/jumbotron/custom.jl @@ -3,36 +3,34 @@ 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_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." + "utility to mix up the look.", ), - dbc_button("Example Button", color="light", outline=true), + dbc_button("Example Button", color = "light", outline = true), ], - class_name="h-100 p-5 text-white bg-dark rounded-3", + class_name = "h-100 p-5 text-white bg-dark rounded-3", ), - md=6, + md = 6, ) right_jumbotron = dbc_col( html_div( [ - html_h2("Add borders", class_name="display-3"), - html_hr(class_name="my-2"), + 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." + "to the boundaries of your content.", ), - dbc_button("Example Button", color="secondary", outline=true), + dbc_button("Example Button", color = "secondary", outline = true), ], - class_name="h-100 p-5 bg-light border rounded-3", + class_name = "h-100 p-5 bg-light border rounded-3", ), - md=6, + md = 6, ) -jumbotron = dbc_row( - [left_jumbotron, right_jumbotron], - class_name="align-items-md-stretch", -) +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 index 53370f15d..abc612211 100644 --- a/docs/components_page/components/jumbotron/simple.R +++ b/docs/components_page/components/jumbotron/simple.R @@ -4,15 +4,15 @@ library(dashHtmlComponents) jumbotron <- htmlDiv( dbcContainer( list( - htmlH1("Jumbotron", class_name="display-3"), + 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" + class_name = "lead" ), - htmlHr(class_name="my-2"), + htmlHr(class_name = "my-2"), htmlP( paste( "Use utility classes for typography and spacing to suit the", @@ -20,11 +20,12 @@ jumbotron <- htmlDiv( ) ), htmlP( - dbc.Button("Learn more", color="primary"), class_name="lead" + dbcButton("Learn more", color = "primary"), + class_name = "lead" ) ), - fluid=TRUE, - class_name="py-3" + fluid = TRUE, + class_name = "py-3" ), - class_name="p-3 bg-light rounded-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 index a5385d84b..a07f69904 100644 --- a/docs/components_page/components/jumbotron/simple.jl +++ b/docs/components_page/components/jumbotron/simple.jl @@ -3,23 +3,21 @@ using DashBootstrapComponents, DashHtmlComponents jumbotron = html_div( dbc_container( [ - html_h1("Jumbotron", class_name="display-3"), + 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", + class_name = "lead", ), - html_hr(class_name="my-2"), + 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" + "larger container.", ), + html_p(dbc_button("Learn more", color = "primary"), class_name = "lead"), ], - fluid=true, - class_name="py-3", + fluid = true, + class_name = "py-3", ), - class_name="p-3 bg-light rounded-3", + class_name = "p-3 bg-light rounded-3", ) From 6d577912a0cf1500a26efd450c1d005723c4eaf7 Mon Sep 17 00:00:00 2001 From: tcbegley Date: Fri, 3 Sep 2021 21:33:37 +0100 Subject: [PATCH 3/3] Update Jumbotron language --- docs/components_page/components/jumbotron.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/components_page/components/jumbotron.md b/docs/components_page/components/jumbotron.md index f8d973970..035fc0fa4 100644 --- a/docs/components_page/components/jumbotron.md +++ b/docs/components_page/components/jumbotron.md @@ -5,12 +5,12 @@ lead: Lightweight styling for showcasing key content and messages. ## Examples -The Jumbotron was retired from Bootstrap use in Bootstrap 5, but as it's a useful layout, here are examples of how to combine the Bootstrap styling with Dash components to create a Jumbotron-like experience. +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 +### Styling the "Jumbotron" -There are lots of styles and spacing options available in Bootstrap. Creating the perfect component is just about combining the ones you want in the right way. +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}} \ No newline at end of file +{{example:components/jumbotron/custom.py:jumbotron}}