From 67dbbd9a7062044a0e7554291f4df122fdd00f6a Mon Sep 17 00:00:00 2001 From: glsdown Date: Mon, 30 Aug 2021 09:32:49 +0100 Subject: [PATCH 1/9] Added outline and mixed style example --- docs/components_page/components/button_group.md | 12 ++++++++++++ docs/components_page/components/button_group/mixed.R | 9 +++++++++ .../components_page/components/button_group/mixed.jl | 9 +++++++++ .../components_page/components/button_group/mixed.py | 9 +++++++++ .../components/button_group/outline.R | 9 +++++++++ .../components/button_group/outline.jl | 9 +++++++++ .../components/button_group/outline.py | 9 +++++++++ 7 files changed, 66 insertions(+) create mode 100644 docs/components_page/components/button_group/mixed.R create mode 100644 docs/components_page/components/button_group/mixed.jl create mode 100644 docs/components_page/components/button_group/mixed.py create mode 100644 docs/components_page/components/button_group/outline.R create mode 100644 docs/components_page/components/button_group/outline.jl create mode 100644 docs/components_page/components/button_group/outline.py diff --git a/docs/components_page/components/button_group.md b/docs/components_page/components/button_group.md index 27c1f1998..fc7d01e9b 100644 --- a/docs/components_page/components/button_group.md +++ b/docs/components_page/components/button_group.md @@ -15,6 +15,18 @@ Instead of setting the `size` prop of each button in the group, you can set the {{example:components/button_group/size.py:button_groups}} +## Mixed styles + +You can apply styles to individual buttons within the group. + +{{example:components/button_group/mixed.py:button_group}} + +## Outline style + +Create a group of outline buttons using `outline=True` and setting the `color` as required. + +{{example:components/button_group/outline.py:button_group}} + ## Dropdown As well as `Button` you can include `DropdownMenu` in your button groups by setting `group=True`. diff --git a/docs/components_page/components/button_group/mixed.R b/docs/components_page/components/button_group/mixed.R new file mode 100644 index 000000000..f71099579 --- /dev/null +++ b/docs/components_page/components/button_group/mixed.R @@ -0,0 +1,9 @@ +library(dashBootstrapComponents) + +button_group <- dbcButtonGroup( + list( + dbcButton("Left", color="danger"), + dbcButton("Middle", color="warning"), + dbcButton("Right", color="success"), + ) +) diff --git a/docs/components_page/components/button_group/mixed.jl b/docs/components_page/components/button_group/mixed.jl new file mode 100644 index 000000000..8dc7cd093 --- /dev/null +++ b/docs/components_page/components/button_group/mixed.jl @@ -0,0 +1,9 @@ +using DashBootstrapComponents + +button_group = dbc_buttongroup( + [ + dbc_button("Left", color="danger"), + dbc_button("Middle", color="warning"), + dbc_button("Right", color="success"), + ] +) diff --git a/docs/components_page/components/button_group/mixed.py b/docs/components_page/components/button_group/mixed.py new file mode 100644 index 000000000..fffd097d0 --- /dev/null +++ b/docs/components_page/components/button_group/mixed.py @@ -0,0 +1,9 @@ +import dash_bootstrap_components as dbc + +button_group = dbc.ButtonGroup( + [ + dbc.Button("Left", color="danger"), + dbc.Button("Middle", color="warning"), + dbc.Button("Right", color="success"), + ] +) diff --git a/docs/components_page/components/button_group/outline.R b/docs/components_page/components/button_group/outline.R new file mode 100644 index 000000000..956ea44fa --- /dev/null +++ b/docs/components_page/components/button_group/outline.R @@ -0,0 +1,9 @@ +library(dashBootstrapComponents) + +button_group <- dbcButtonGroup( + list( + dbcButton("Left", outline=TRUE, color="primary"), + dbcButton("Middle", outline=TRUE, color="primary"), + dbcButton("Right", outline=TRUE, color="primary") + ) +) diff --git a/docs/components_page/components/button_group/outline.jl b/docs/components_page/components/button_group/outline.jl new file mode 100644 index 000000000..f3833962a --- /dev/null +++ b/docs/components_page/components/button_group/outline.jl @@ -0,0 +1,9 @@ +using DashBootstrapComponents + +button_group = dbc_buttongroup( + [ + dbc_button("Left", outline=true, color="primary"), + dbc_button("Middle", outline=true, color="primary"), + dbc_button("Right", outline=true, color="primary"), + ] +) diff --git a/docs/components_page/components/button_group/outline.py b/docs/components_page/components/button_group/outline.py new file mode 100644 index 000000000..695c2dbe4 --- /dev/null +++ b/docs/components_page/components/button_group/outline.py @@ -0,0 +1,9 @@ +import dash_bootstrap_components as dbc + +button_group = dbc.ButtonGroup( + [ + dbc.Button("Left", outline=True, color="primary"), + dbc.Button("Middle", outline=True, color="primary"), + dbc.Button("Right", outline=True, color="primary"), + ] +) From 1a24cc8255564db4a02d863a1ec34b92c1aa5e03 Mon Sep 17 00:00:00 2001 From: glsdown Date: Mon, 30 Aug 2021 09:51:56 +0100 Subject: [PATCH 2/9] Added half block button example --- docs/components_page/components/button/half_block.R | 10 ++++++++++ docs/components_page/components/button/half_block.jl | 10 ++++++++++ docs/components_page/components/button/half_block.py | 10 ++++++++++ 3 files changed, 30 insertions(+) create mode 100644 docs/components_page/components/button/half_block.R create mode 100644 docs/components_page/components/button/half_block.jl create mode 100644 docs/components_page/components/button/half_block.py diff --git a/docs/components_page/components/button/half_block.R b/docs/components_page/components/button/half_block.R new file mode 100644 index 000000000..3a02e66f6 --- /dev/null +++ b/docs/components_page/components/button/half_block.R @@ -0,0 +1,10 @@ +library(dashBootstrapComponents) +library(dashHtmlComponents) + +button <- htmlDiv( + list( + dbcButton("Block button", color = "primary"), + dbcButton("Block button", color = "secondary") + ), + class_name = "d-grid gap-2 col-6 mx-auto" +) diff --git a/docs/components_page/components/button/half_block.jl b/docs/components_page/components/button/half_block.jl new file mode 100644 index 000000000..acc0f7ad3 --- /dev/null +++ b/docs/components_page/components/button/half_block.jl @@ -0,0 +1,10 @@ +using DashBootstrapComponents +using DashHtmlComponents + +button = html_div( + [ + dbc_button("Block button", color = "primary"), + dbc_button("Block button", color = "secondary"), + ], + class_name = "d-grid gap-2 col-6 mx-auto", +); diff --git a/docs/components_page/components/button/half_block.py b/docs/components_page/components/button/half_block.py new file mode 100644 index 000000000..2f2fae2e0 --- /dev/null +++ b/docs/components_page/components/button/half_block.py @@ -0,0 +1,10 @@ +import dash_bootstrap_components as dbc +import dash_html_components as html + +button = html.Div( + [ + dbc.Button("Block button", color="primary"), + dbc.Button("Block button", color="secondary"), + ], + class_name="d-grid gap-2 col-6 mx-auto", +) From acf39b66b8a00e21c94ed765fa3071e4b3c43ea2 Mon Sep 17 00:00:00 2001 From: glsdown Date: Mon, 30 Aug 2021 09:52:08 +0100 Subject: [PATCH 3/9] Added responsive block example --- .../components/button/responsive_block.R | 10 ++++++++++ .../components/button/responsive_block.jl | 10 ++++++++++ .../components/button/responsive_block.py | 10 ++++++++++ 3 files changed, 30 insertions(+) create mode 100644 docs/components_page/components/button/responsive_block.R create mode 100644 docs/components_page/components/button/responsive_block.jl create mode 100644 docs/components_page/components/button/responsive_block.py diff --git a/docs/components_page/components/button/responsive_block.R b/docs/components_page/components/button/responsive_block.R new file mode 100644 index 000000000..98c484c53 --- /dev/null +++ b/docs/components_page/components/button/responsive_block.R @@ -0,0 +1,10 @@ +library(dashBootstrapComponents) +library(dashHtmlComponents) + +button <- htmlDiv( + list( + dbcButton("Block button", color = "primary"), + dbcButton("Block button", color = "secondary") + ), + class_name = "d-grid gap-2 d-md-block" +) diff --git a/docs/components_page/components/button/responsive_block.jl b/docs/components_page/components/button/responsive_block.jl new file mode 100644 index 000000000..56c3d2387 --- /dev/null +++ b/docs/components_page/components/button/responsive_block.jl @@ -0,0 +1,10 @@ +using DashBootstrapComponents +using DashHtmlComponents + +button = html_div( + [ + dbc_button("Block button", color = "primary"), + dbc_button("Block button", color = "secondary"), + ], + class_name = "d-grid gap-2 d-md-block", +); diff --git a/docs/components_page/components/button/responsive_block.py b/docs/components_page/components/button/responsive_block.py new file mode 100644 index 000000000..2fd7ba438 --- /dev/null +++ b/docs/components_page/components/button/responsive_block.py @@ -0,0 +1,10 @@ +import dash_bootstrap_components as dbc +import dash_html_components as html + +button = html.Div( + [ + dbc.Button("Block button", color="primary"), + dbc.Button("Block button", color="secondary"), + ], + class_name="d-grid gap-2 d-md-block", +) From ae7e934079d0d376a6f3da6e8a45096829235a2b Mon Sep 17 00:00:00 2001 From: glsdown Date: Mon, 30 Aug 2021 09:52:31 +0100 Subject: [PATCH 4/9] Added example demonstrating styling of horizontal buttons --- docs/components_page/components/button/flex_block.R | 11 +++++++++++ docs/components_page/components/button/flex_block.jl | 11 +++++++++++ docs/components_page/components/button/flex_block.py | 11 +++++++++++ 3 files changed, 33 insertions(+) create mode 100644 docs/components_page/components/button/flex_block.R create mode 100644 docs/components_page/components/button/flex_block.jl create mode 100644 docs/components_page/components/button/flex_block.py diff --git a/docs/components_page/components/button/flex_block.R b/docs/components_page/components/button/flex_block.R new file mode 100644 index 000000000..c916df0b3 --- /dev/null +++ b/docs/components_page/components/button/flex_block.R @@ -0,0 +1,11 @@ +library(dashBootstrapComponents) +library(dashHtmlComponents) + +button <- htmlDiv( + list( + dbcButton("Button 1", class_name = "me-md-2"), + dbcButton("Button 2", class_name = "me-md-2"), + dbcButton("Button 3") + ), + class_name = "d-grid gap-2 d-md-flex justify-content-md-end" +) diff --git a/docs/components_page/components/button/flex_block.jl b/docs/components_page/components/button/flex_block.jl new file mode 100644 index 000000000..0ba7697f2 --- /dev/null +++ b/docs/components_page/components/button/flex_block.jl @@ -0,0 +1,11 @@ +using DashBootstrapComponents +using DashHtmlComponents + +button = html_div( + [ + dbc_button("Button 1", class_name="me-md-2"), + dbc_button("Button 2", class_name="me-md-2"), + dbc_button("Button 3"), + ], + class_name="d-grid gap-2 d-md-flex justify-content-md-end", +); diff --git a/docs/components_page/components/button/flex_block.py b/docs/components_page/components/button/flex_block.py new file mode 100644 index 000000000..395461b56 --- /dev/null +++ b/docs/components_page/components/button/flex_block.py @@ -0,0 +1,11 @@ +import dash_bootstrap_components as dbc +import dash_html_components as html + +button = html.Div( + [ + dbc.Button("Button 1", class_name="me-md-2"), + dbc.Button("Button 2", class_name="me-md-2"), + dbc.Button("Button 3"), + ], + class_name="d-grid gap-2 d-md-flex justify-content-md-end", +) From b33fdcb8831b4f94b027e31710dc07a677458f6b Mon Sep 17 00:00:00 2001 From: glsdown Date: Mon, 30 Aug 2021 09:52:44 +0100 Subject: [PATCH 5/9] Added new block button examples --- docs/components_page/components/button.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/docs/components_page/components/button.md b/docs/components_page/components/button.md index ea39efcfe..4dbcc8648 100644 --- a/docs/components_page/components/button.md +++ b/docs/components_page/components/button.md @@ -34,6 +34,24 @@ of the parent) by using Bootstrap's grid spacing utilities. {{example:components/button/block.py:button}} +## Smaller block buttons + +Adjusting the width of the block button can be achieved using the grid column width classes. This button is made half-size using `.col-6` and centered with `.mx-auto`. + +{{example:components/button/half_block.py:button}} + +## Responsive block buttons + +A responsive variation on the block button can be created by making using of breakpoints to specify behaviour. Resize your screen to see how adding the `.d-md-block` class changes the button behaviour on smaller screens. + +{{example:components/button/responsive_block.py:button}} + +## Flex layout + +Flex and margin utilities can be used to adjust the alignment of the buttons in their horizontal state too. Here we use them in conjuction with the responsive block button above to control the layout on larger and smaller screens. + +{{example:components/button/flex_block.py:button}} + ## Active and disabled states When a user hovers the cursor over a button the background and border will darken in response. You can enforce this active state if needed by setting `active=True`. From f89e551c864a1a68427e79dad38298c93d44ef76 Mon Sep 17 00:00:00 2001 From: glsdown Date: Mon, 30 Aug 2021 14:28:30 +0100 Subject: [PATCH 6/9] Added button download example --- docs/components_page/components/button.md | 6 ++++++ docs/components_page/components/button/download.R | 15 +++++++++++++++ .../components_page/components/button/download.jl | 13 +++++++++++++ .../components_page/components/button/download.py | 14 ++++++++++++++ docs/static/data_file.txt | 1 + 5 files changed, 49 insertions(+) create mode 100644 docs/components_page/components/button/download.R create mode 100644 docs/components_page/components/button/download.jl create mode 100644 docs/components_page/components/button/download.py create mode 100644 docs/static/data_file.txt diff --git a/docs/components_page/components/button.md b/docs/components_page/components/button.md index 4dbcc8648..5ad46420a 100644 --- a/docs/components_page/components/button.md +++ b/docs/components_page/components/button.md @@ -58,4 +58,10 @@ When a user hovers the cursor over a button the background and border will darke {{example:components/button/active_disabled.py:buttons}} +## Download option + +The `download` prop for the Button allows a button to function basically like `html.A`, but with the styling of a Bootstrap Button. It allows you to specify a different file name on download than the filename specified in the href. + +{{example:components/button/download.py:button}} + {{apidoc:src/components/Button.js}} diff --git a/docs/components_page/components/button/download.R b/docs/components_page/components/button/download.R new file mode 100644 index 000000000..da1f811c6 --- /dev/null +++ b/docs/components_page/components/button/download.R @@ -0,0 +1,15 @@ +library(dashBootstrapComponents) +library(dashHtmlComponents) + + +button <- htmlDiv( + list( + dbcButton( + "Download", + href="/static/data_file.txt", + download="my_data.txt", + external_link=TRUE, + color="primary" + ) + ) +) diff --git a/docs/components_page/components/button/download.jl b/docs/components_page/components/button/download.jl new file mode 100644 index 000000000..3ec58084b --- /dev/null +++ b/docs/components_page/components/button/download.jl @@ -0,0 +1,13 @@ +using DashBootstrapComponents, DashHtmlComponents + +button = html_div( + [ + dbc_button( + "Download", + href="/static/data_file.txt", + download="my_data.txt", + external_link=true, + color="primary", + ), + ] +) diff --git a/docs/components_page/components/button/download.py b/docs/components_page/components/button/download.py new file mode 100644 index 000000000..95b2be777 --- /dev/null +++ b/docs/components_page/components/button/download.py @@ -0,0 +1,14 @@ +import dash_bootstrap_components as dbc +import dash_html_components as html + +button = html.Div( + [ + dbc.Button( + "Download", + href="/static/data_file.txt", + download="my_data.txt", + external_link=True, + color="primary", + ), + ] +) diff --git a/docs/static/data_file.txt b/docs/static/data_file.txt new file mode 100644 index 000000000..ea54e7a64 --- /dev/null +++ b/docs/static/data_file.txt @@ -0,0 +1 @@ +This is an example data file used to demonstrate the download option in Buttons. \ No newline at end of file From bf507a625f5803f6b4ef35ff9d4edd7256e3798e Mon Sep 17 00:00:00 2001 From: Tom Begley Date: Mon, 30 Aug 2021 17:45:04 +0100 Subject: [PATCH 7/9] Removed trailing , --- docs/components_page/components/button_group/mixed.R | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components_page/components/button_group/mixed.R b/docs/components_page/components/button_group/mixed.R index f71099579..ffd3978a1 100644 --- a/docs/components_page/components/button_group/mixed.R +++ b/docs/components_page/components/button_group/mixed.R @@ -4,6 +4,6 @@ button_group <- dbcButtonGroup( list( dbcButton("Left", color="danger"), dbcButton("Middle", color="warning"), - dbcButton("Right", color="success"), + dbcButton("Right", color="success") ) ) From 92e490703813d342e6f18263953c4cfc244fc822 Mon Sep 17 00:00:00 2001 From: tcbegley Date: Mon, 30 Aug 2021 17:48:01 +0100 Subject: [PATCH 8/9] Format --- .../components/button/download.R | 16 +++++++-------- .../components/button/download.jl | 20 +++++++++---------- .../components/button/flex_block.jl | 6 +++--- .../components/button_group/mixed.R | 10 +++++----- .../components/button_group/mixed.jl | 12 +++++------ .../components/button_group/outline.R | 10 +++++----- .../components/button_group/outline.jl | 12 +++++------ 7 files changed, 40 insertions(+), 46 deletions(-) diff --git a/docs/components_page/components/button/download.R b/docs/components_page/components/button/download.R index da1f811c6..a130266c6 100644 --- a/docs/components_page/components/button/download.R +++ b/docs/components_page/components/button/download.R @@ -3,13 +3,13 @@ library(dashHtmlComponents) button <- htmlDiv( - list( - dbcButton( - "Download", - href="/static/data_file.txt", - download="my_data.txt", - external_link=TRUE, - color="primary" - ) + list( + dbcButton( + "Download", + href = "/static/data_file.txt", + download = "my_data.txt", + external_link = TRUE, + color = "primary" ) + ) ) diff --git a/docs/components_page/components/button/download.jl b/docs/components_page/components/button/download.jl index 3ec58084b..748355eed 100644 --- a/docs/components_page/components/button/download.jl +++ b/docs/components_page/components/button/download.jl @@ -1,13 +1,11 @@ using DashBootstrapComponents, DashHtmlComponents -button = html_div( - [ - dbc_button( - "Download", - href="/static/data_file.txt", - download="my_data.txt", - external_link=true, - color="primary", - ), - ] -) +button = html_div([ + dbc_button( + "Download", + href = "/static/data_file.txt", + download = "my_data.txt", + external_link = true, + color = "primary", + ), +]) diff --git a/docs/components_page/components/button/flex_block.jl b/docs/components_page/components/button/flex_block.jl index 0ba7697f2..7ec298596 100644 --- a/docs/components_page/components/button/flex_block.jl +++ b/docs/components_page/components/button/flex_block.jl @@ -3,9 +3,9 @@ using DashHtmlComponents button = html_div( [ - dbc_button("Button 1", class_name="me-md-2"), - dbc_button("Button 2", class_name="me-md-2"), + dbc_button("Button 1", class_name = "me-md-2"), + dbc_button("Button 2", class_name = "me-md-2"), dbc_button("Button 3"), ], - class_name="d-grid gap-2 d-md-flex justify-content-md-end", + class_name = "d-grid gap-2 d-md-flex justify-content-md-end", ); diff --git a/docs/components_page/components/button_group/mixed.R b/docs/components_page/components/button_group/mixed.R index ffd3978a1..cdf495682 100644 --- a/docs/components_page/components/button_group/mixed.R +++ b/docs/components_page/components/button_group/mixed.R @@ -1,9 +1,9 @@ library(dashBootstrapComponents) button_group <- dbcButtonGroup( - list( - dbcButton("Left", color="danger"), - dbcButton("Middle", color="warning"), - dbcButton("Right", color="success") - ) + list( + dbcButton("Left", color = "danger"), + dbcButton("Middle", color = "warning"), + dbcButton("Right", color = "success") + ) ) diff --git a/docs/components_page/components/button_group/mixed.jl b/docs/components_page/components/button_group/mixed.jl index 8dc7cd093..803bf8dfe 100644 --- a/docs/components_page/components/button_group/mixed.jl +++ b/docs/components_page/components/button_group/mixed.jl @@ -1,9 +1,7 @@ using DashBootstrapComponents -button_group = dbc_buttongroup( - [ - dbc_button("Left", color="danger"), - dbc_button("Middle", color="warning"), - dbc_button("Right", color="success"), - ] -) +button_group = dbc_buttongroup([ + dbc_button("Left", color = "danger"), + dbc_button("Middle", color = "warning"), + dbc_button("Right", color = "success"), +]) diff --git a/docs/components_page/components/button_group/outline.R b/docs/components_page/components/button_group/outline.R index 956ea44fa..4c422c3b5 100644 --- a/docs/components_page/components/button_group/outline.R +++ b/docs/components_page/components/button_group/outline.R @@ -1,9 +1,9 @@ library(dashBootstrapComponents) button_group <- dbcButtonGroup( - list( - dbcButton("Left", outline=TRUE, color="primary"), - dbcButton("Middle", outline=TRUE, color="primary"), - dbcButton("Right", outline=TRUE, color="primary") - ) + list( + dbcButton("Left", outline = TRUE, color = "primary"), + dbcButton("Middle", outline = TRUE, color = "primary"), + dbcButton("Right", outline = TRUE, color = "primary") + ) ) diff --git a/docs/components_page/components/button_group/outline.jl b/docs/components_page/components/button_group/outline.jl index f3833962a..b06d37fd6 100644 --- a/docs/components_page/components/button_group/outline.jl +++ b/docs/components_page/components/button_group/outline.jl @@ -1,9 +1,7 @@ using DashBootstrapComponents -button_group = dbc_buttongroup( - [ - dbc_button("Left", outline=true, color="primary"), - dbc_button("Middle", outline=true, color="primary"), - dbc_button("Right", outline=true, color="primary"), - ] -) +button_group = dbc_buttongroup([ + dbc_button("Left", outline = true, color = "primary"), + dbc_button("Middle", outline = true, color = "primary"), + dbc_button("Right", outline = true, color = "primary"), +]) From 0312e9cdffa99d7c488dc24a50e32b41eeb4b672 Mon Sep 17 00:00:00 2001 From: tcbegley Date: Tue, 31 Aug 2021 21:38:45 +0100 Subject: [PATCH 9/9] Tweak language in Button examples --- docs/components_page/components/button.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/components_page/components/button.md b/docs/components_page/components/button.md index 5ad46420a..a0bc73205 100644 --- a/docs/components_page/components/button.md +++ b/docs/components_page/components/button.md @@ -30,19 +30,19 @@ Modify the size of the button by setting `size` to either `"sm"` or `"lg"` for a ## Block button Create a Bootstrap 4 style block level button (one which spans the full width -of the parent) by using Bootstrap's grid spacing utilities. +of the parent) by using Bootstrap's [spacing utility classes](https://getbootstrap.com/docs/5.0/utilities/spacing/). {{example:components/button/block.py:button}} ## Smaller block buttons -Adjusting the width of the block button can be achieved using the grid column width classes. This button is made half-size using `.col-6` and centered with `.mx-auto`. +You can adjust the width of the block button can be achieved using grid column width classes. This button is made half-size using `.col-6` and centered with `.mx-auto`. {{example:components/button/half_block.py:button}} ## Responsive block buttons -A responsive variation on the block button can be created by making using of breakpoints to specify behaviour. Resize your screen to see how adding the `.d-md-block` class changes the button behaviour on smaller screens. +A responsive variation on the block button can be created by making using of breakpoints to specify behaviour. Resize your screen to see how adding the `d-md-block` class changes the button behaviour on smaller screens. {{example:components/button/responsive_block.py:button}} @@ -60,7 +60,7 @@ When a user hovers the cursor over a button the background and border will darke ## Download option -The `download` prop for the Button allows a button to function basically like `html.A`, but with the styling of a Bootstrap Button. It allows you to specify a different file name on download than the filename specified in the href. +The `download` prop allows you to specify the filename for a downloaded file that can differ from the filename on the server. {{example:components/button/download.py:button}}