object inside pagination with number = 5
+ # has active as a class
+ active_page = runner.find_element("#pagination .active")
+ wait.until(
+ lambda: active_page.text.split("\n") == ["5", "(current)"],
+ timeout=4,
+ )
diff --git a/docs/components_page/components/__tests__/test_snippets.py b/docs/components_page/components/__tests__/test_snippets.py
index 63ec18633..fdc979d4b 100644
--- a/docs/components_page/components/__tests__/test_snippets.py
+++ b/docs/components_page/components/__tests__/test_snippets.py
@@ -23,11 +23,15 @@
for path in HERE.parent.glob("*.md")
]
-SKIP = ["components/table/kwargs.py", "components/tabs/active_tab.py"]
+SKIP = [
+ "components/table/kwargs.py",
+ "components/table/color.py",
+ "components/tabs/active_tab.py",
+]
ENVS = {
"modal.md": {
"LOREM": (HERE.parent / "modal" / "lorem.txt").read_text().strip()
- }
+ },
}
R_PORT = 8051
@@ -69,7 +73,7 @@ def test_r_snippets(dash_thread_server, dashr_server, config):
r_snippet = rename_variable(
r_snippet_path, i, name, assign_op="<-"
)
- python_r_compare.append((py_snippet, r_snippet, f"{name}_{i}"))
+ python_r_compare.append((py_snippet, r_snippet, f"{name}__{i}"))
if python_r_compare:
assert_layouts_equal(
@@ -102,7 +106,7 @@ def test_jl_snippets(dash_thread_server, dashjl_server, config):
if jl_snippet_path.exists():
jl_snippet = rename_variable(jl_snippet_path, i, name)
- python_jl_compare.append((py_snippet, jl_snippet, f"{name}_{i}"))
+ python_jl_compare.append((py_snippet, jl_snippet, f"{name}__{i}"))
if python_jl_compare:
assert_layouts_equal(
@@ -116,6 +120,35 @@ def test_jl_snippets(dash_thread_server, dashjl_server, config):
)
+def test_landing_page_example(dash_thread_server, dashr_server, dashjl_server):
+ index_dir = HERE.parent / "index"
+ py_source = (index_dir / "simple.py").read_text()
+ r_source = (
+ (index_dir / "simple.R").read_text().replace("8050", str(R_PORT))
+ )
+ jl_source = (
+ (index_dir / "simple.jl").read_text().replace("8050", str(JL_PORT))
+ )
+
+ app = py_source_to_app(py_source, {})
+ dash_thread_server.start(app, port=8050)
+ py_layout = requests.get(f"{dash_thread_server.url}/_dash-layout").json()
+
+ dashr_server.start(r_source)
+ r_layout = requests.get(f"{dashr_server.url}/_dash-layout").json()
+
+ dashjl_server.start(jl_source)
+ jl_layout = requests.get(f"{dashjl_server.url}/_dash-layout").json()
+
+ # Test layouts match
+ unittest.TestCase().assertDictEqual(
+ drop_keys(py_layout), drop_keys(r_layout)
+ )
+ unittest.TestCase().assertDictEqual(
+ drop_keys(py_layout), drop_keys(jl_layout)
+ )
+
+
def assert_layouts_equal(
compare, runner, wrapper, port, py_runner, py_env, py_port
):
@@ -130,7 +163,6 @@ def assert_layouts_equal(
py_runner.start(app, port=py_port)
py_layout = requests.get(f"{py_runner.url}/_dash-layout").json()
- # Get other language snippet layout
runner.start(
wrapper.format(
snippet="\n".join(x[1] for x in compare),
diff --git a/docs/components_page/components/__tests__/test_tabs.py b/docs/components_page/components/__tests__/test_tabs.py
index c036a91d7..ff786cf70 100644
--- a/docs/components_page/components/__tests__/test_tabs.py
+++ b/docs/components_page/components/__tests__/test_tabs.py
@@ -23,13 +23,108 @@ def test_jl_tabs_card(dashjl):
def check_tabs_card_callbacks(runner):
+ tab_links = runner.find_elements("#card-tabs > div.nav-item > a.nav-link")
+ wait.until(lambda: tab_links[1].text == "Tab 2", timeout=4)
- runner.driver.find_element_by_xpath(
- "//ul[@id='card-tabs']/li/a[.='Tab 2']"
- ).click()
+ tab_links[1].click()
wait.until(
lambda: runner.find_element("#card-content").text
== "This is tab tab-2",
timeout=4,
)
+
+
+# ------------------------------
+
+
+active_tab_content_r = """
+tab1_content <- dbcCard(
+ dbcCardBody(
+ list(
+ htmlP("This is tab 1!", className = "card-text"),
+ dbcButton("Click here", color = "success")
+ )
+ ),
+ className = "mt-3"
+)
+
+tab2_content <- dbcCard(
+ dbcCardBody(
+ list(
+ htmlP("This is tab 2!", className = "card-text"),
+ dbcButton("Don't click here", color = "danger")
+ )
+ ),
+ className = "mt-3",
+)
+"""
+
+active_tab_content_jl = """
+tab1_content = dbc_card(
+ dbc_cardbody([
+ html_p("This is tab 1!", className="card-text"),
+ dbc_button("Click here", color="success"),
+ ]),
+ className="mt-3",
+);
+
+tab2_content = dbc_card(
+ dbc_cardbody([
+ html_p("This is tab 2!", className="card-text"),
+ dbc_button("Don't click here", color="danger"),
+ ]),
+ className="mt-3",
+);
+"""
+
+
+def test_r_tabs_active_tab(dashr):
+ r_app = load_r_app(
+ (HERE.parent / "tabs" / "active_tab.R"),
+ "tabs",
+ extra_args=active_tab_content_r,
+ )
+ dashr.start_server(r_app)
+ check_tabs_active_tab_callbacks(dashr)
+
+
+def test_jl_tabs_active_tab(dashjl):
+ jl_app = load_jl_app(
+ (HERE.parent / "tabs" / "active_tab.jl"),
+ "tabs",
+ extra_args=active_tab_content_jl,
+ )
+ dashjl.start_server(jl_app)
+ check_tabs_active_tab_callbacks(dashjl)
+
+
+def check_tabs_active_tab_callbacks(runner):
+ # Get julia to wait until it's loaded
+ wait.until(lambda: len(runner.find_elements(".card")) > 0, timeout=4)
+
+ # Default view on landing
+ wait.until(
+ lambda: runner.find_element("div.card-body > p.card-text").text
+ == "This is tab 1!",
+ timeout=4,
+ )
+ wait.until(
+ lambda: runner.find_element("div.card-body > button.btn-success").text
+ == "Click here",
+ timeout=4,
+ )
+
+ # Activate the second tab
+ runner.find_elements("a.nav-link")[1].click()
+
+ wait.until(
+ lambda: runner.find_element("div.card-body > p.card-text").text
+ == "This is tab 2!",
+ timeout=4,
+ )
+ wait.until(
+ lambda: runner.find_element("div.card-body > button.btn-danger").text
+ == "Don't click here",
+ timeout=4,
+ )
diff --git a/docs/components_page/components/__tests__/test_toast.py b/docs/components_page/components/__tests__/test_toast.py
index ce25fc79b..6d3401579 100644
--- a/docs/components_page/components/__tests__/test_toast.py
+++ b/docs/components_page/components/__tests__/test_toast.py
@@ -53,14 +53,28 @@ def test_jl_toast_icon(dashjl):
def check_toast_icon_callbacks(runner):
wait.until(
- lambda: runner.find_element("#simple-toast").get_attribute("class")
- == "toast fade show",
+ lambda: len(
+ {"toast", "fade", "show"}
+ - set(
+ runner.find_element("#simple-toast")
+ .get_attribute("class")
+ .split()
+ )
+ )
+ == 0,
timeout=4,
)
- runner.find_element(".close").click()
+ runner.find_element("button.btn-close").click()
wait.until(
lambda: len(runner.find_elements("#simple-toast")) == 0,
timeout=4,
)
+
+ runner.find_element("#simple-toast-toggle").click()
+
+ wait.until(
+ lambda: len(runner.find_elements("#simple-toast")) > 0,
+ timeout=4,
+ )
diff --git a/docs/components_page/components/__tests__/wrappers.py b/docs/components_page/components/__tests__/wrappers.py
index 1def1a34b..fa86f4b2a 100644
--- a/docs/components_page/components/__tests__/wrappers.py
+++ b/docs/components_page/components/__tests__/wrappers.py
@@ -1,6 +1,7 @@
PY_WRAPPER = """
import dash
import dash_bootstrap_components as dbc
+from dash import html
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
diff --git a/docs/components_page/components/accordion.md b/docs/components_page/components/accordion.md
new file mode 100644
index 000000000..53fede7e9
--- /dev/null
+++ b/docs/components_page/components/accordion.md
@@ -0,0 +1,31 @@
+---
+title: Accordion
+lead: Use the Accordion component to create collapsible lists.
+---
+
+## Examples
+
+You can create an accordion using the `Accordion` and `AccordionItem` components. Each section header is determined by the `title` prop of the `AccordionItem`.
+
+{{example:components/accordion/simple.py:accordion}}
+
+## Start Collapsed
+
+You can set which item is opened when it is first started using the `active_item` property. If this is not defined, the first item will be open by default. If you want no items to be open on start up, you can specify `start_collapsed=True`.
+
+{{example:components/accordion/collapsed.py:accordion}}
+
+## Flush
+
+Add flush to change some of the styling, including removing borders, and rounding some of the edges to fit in line with the parent container.
+
+{{example:components/accordion/flush.py:accordion}}
+
+## Callbacks
+
+Each item in the accordion can be assiged a specific `item_id` which is used in the `active_item` property to determine which section is open. If no `item_id` is specified, the sections are labelled as `item-0`, `item-1`, ... consecutively. This can be used within callbacks to determine which sections have been opened.
+
+{{example:components/accordion/callback.py:accordion}}
+
+{{apidoc:src/components/accordion/Accordion.js}}
+{{apidoc:src/components/accordion/AccordionItem.js}}
diff --git a/docs/components_page/components/accordion/callback.R b/docs/components_page/components/accordion/callback.R
new file mode 100644
index 000000000..f14be924c
--- /dev/null
+++ b/docs/components_page/components/accordion/callback.R
@@ -0,0 +1,38 @@
+library(dashBootstrapComponents)
+library(dashCoreComponents)
+library(dashHtmlComponents)
+
+accordion <- htmlDiv(
+ list(
+ dbcAccordion(
+ list(
+ dbcAccordionItem(
+ "This is the content of the first section",
+ title = "Item 1",
+ item_id = "item-1"
+ ),
+ dbcAccordionItem(
+ "This is the content of the second section",
+ title = "Item 2",
+ item_id = "item-2"
+ ),
+ dbcAccordionItem(
+ "This is the content of the third section",
+ title = "Item 3",
+ item_id = "item-3"
+ )
+ ),
+ id = "accordion",
+ active_item = "item-1"
+ ),
+ htmlDiv(id = "accordion-contents", className = "mt-3")
+ )
+)
+
+app$callback(
+ output("accordion-contents", "children"),
+ list(input("accordion", "active_item")),
+ function(item) {
+ return(sprintf("Item selected: %s", item))
+ }
+)
diff --git a/docs/components_page/components/accordion/callback.jl b/docs/components_page/components/accordion/callback.jl
new file mode 100644
index 000000000..9925c472a
--- /dev/null
+++ b/docs/components_page/components/accordion/callback.jl
@@ -0,0 +1,35 @@
+using DashBootstrapComponents, DashCoreComponents, DashHtmlComponents
+
+accordion = html_div([
+ dbc_accordion(
+ [
+ dbc_accordionitem(
+ "This is the content of the first section",
+ title = "Item 1",
+ item_id = "item-1",
+ ),
+ dbc_accordionitem(
+ "This is the content of the second section",
+ title = "Item 2",
+ item_id = "item-2",
+ ),
+ dbc_accordionitem(
+ "This is the content of the third section",
+ title = "Item 3",
+ item_id = "item-3",
+ ),
+ ],
+ id = "accordion",
+ active_item = "item-1",
+ ),
+ html_div(id = "accordion-contents", className = "mt-3"),
+])
+
+
+callback!(
+ app,
+ Output("accordion-contents", "children"),
+ Input("accordion", "active_item"),
+) do item
+ return "Item selected: $item"
+end;
diff --git a/docs/components_page/components/accordion/callback.py b/docs/components_page/components/accordion/callback.py
new file mode 100644
index 000000000..d5c8bf749
--- /dev/null
+++ b/docs/components_page/components/accordion/callback.py
@@ -0,0 +1,37 @@
+import dash_bootstrap_components as dbc
+from dash import Input, Output, State, dcc, html
+
+accordion = html.Div(
+ [
+ dbc.Accordion(
+ [
+ dbc.AccordionItem(
+ "This is the content of the first section",
+ title="Item 1",
+ item_id="item-1",
+ ),
+ dbc.AccordionItem(
+ "This is the content of the second section",
+ title="Item 2",
+ item_id="item-2",
+ ),
+ dbc.AccordionItem(
+ "This is the content of the third section",
+ title="Item 3",
+ item_id="item-3",
+ ),
+ ],
+ id="accordion",
+ active_item="item-1",
+ ),
+ html.Div(id="accordion-contents", className="mt-3"),
+ ]
+)
+
+
+@app.callback(
+ Output("accordion-contents", "children"),
+ [Input("accordion", "active_item")],
+)
+def change_item(item):
+ return f"Item selected: {item}"
diff --git a/docs/components_page/components/accordion/collapsed.R b/docs/components_page/components/accordion/collapsed.R
new file mode 100644
index 000000000..f8043b39b
--- /dev/null
+++ b/docs/components_page/components/accordion/collapsed.R
@@ -0,0 +1,22 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+accordion <- htmlDiv(
+ dbcAccordion(
+ list(
+ dbcAccordionItem(
+ "This is the content of the first section",
+ title = "Item 1"
+ ),
+ dbcAccordionItem(
+ "This is the content of the second section",
+ title = "Item 2"
+ ),
+ dbcAccordionItem(
+ "This is the content of the third section",
+ title = "Item 3"
+ )
+ ),
+ start_collapsed = TRUE
+ )
+)
diff --git a/docs/components_page/components/accordion/collapsed.jl b/docs/components_page/components/accordion/collapsed.jl
new file mode 100644
index 000000000..62a4b9413
--- /dev/null
+++ b/docs/components_page/components/accordion/collapsed.jl
@@ -0,0 +1,15 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+accordion = html_div(
+ dbc_accordion(
+ [
+ dbc_accordionitem("This is the content of the first section", title = "Item 1"),
+ dbc_accordionitem(
+ "This is the content of the second section",
+ title = "Item 2",
+ ),
+ dbc_accordionitem("This is the content of the third section", title = "Item 3"),
+ ],
+ start_collapsed = true,
+ ),
+)
diff --git a/docs/components_page/components/accordion/collapsed.py b/docs/components_page/components/accordion/collapsed.py
new file mode 100644
index 000000000..1fc778d71
--- /dev/null
+++ b/docs/components_page/components/accordion/collapsed.py
@@ -0,0 +1,19 @@
+import dash_bootstrap_components as dbc
+from dash import html
+
+accordion = html.Div(
+ dbc.Accordion(
+ [
+ dbc.AccordionItem(
+ "This is the content of the first section", title="Item 1"
+ ),
+ dbc.AccordionItem(
+ "This is the content of the second section", title="Item 2"
+ ),
+ dbc.AccordionItem(
+ "This is the content of the third section", title="Item 3"
+ ),
+ ],
+ start_collapsed=True,
+ ),
+)
diff --git a/docs/components_page/components/accordion/flush.R b/docs/components_page/components/accordion/flush.R
new file mode 100644
index 000000000..7e44f4031
--- /dev/null
+++ b/docs/components_page/components/accordion/flush.R
@@ -0,0 +1,22 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+accordion <- htmlDiv(
+ dbcAccordion(
+ list(
+ dbcAccordionItem(
+ "This is the content of the first section",
+ title = "Item 1"
+ ),
+ dbcAccordionItem(
+ "This is the content of the second section",
+ title = "Item 2"
+ ),
+ dbcAccordionItem(
+ "This is the content of the third section",
+ title = "Item 3"
+ )
+ ),
+ flush = TRUE
+ )
+)
diff --git a/docs/components_page/components/accordion/flush.jl b/docs/components_page/components/accordion/flush.jl
new file mode 100644
index 000000000..959754e6b
--- /dev/null
+++ b/docs/components_page/components/accordion/flush.jl
@@ -0,0 +1,15 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+accordion = html_div(
+ dbc_accordion(
+ [
+ dbc_accordionitem("This is the content of the first section", title = "Item 1"),
+ dbc_accordionitem(
+ "This is the content of the second section",
+ title = "Item 2",
+ ),
+ dbc_accordionitem("This is the content of the third section", title = "Item 3"),
+ ],
+ flush = true,
+ ),
+)
diff --git a/docs/components_page/components/accordion/flush.py b/docs/components_page/components/accordion/flush.py
new file mode 100644
index 000000000..979ba8db1
--- /dev/null
+++ b/docs/components_page/components/accordion/flush.py
@@ -0,0 +1,19 @@
+import dash_bootstrap_components as dbc
+from dash import html
+
+accordion = html.Div(
+ dbc.Accordion(
+ [
+ dbc.AccordionItem(
+ "This is the content of the first section", title="Item 1"
+ ),
+ dbc.AccordionItem(
+ "This is the content of the second section", title="Item 2"
+ ),
+ dbc.AccordionItem(
+ "This is the content of the third section", title="Item 3"
+ ),
+ ],
+ flush=True,
+ ),
+)
diff --git a/docs/components_page/components/accordion/simple.R b/docs/components_page/components/accordion/simple.R
new file mode 100644
index 000000000..02a5a6377
--- /dev/null
+++ b/docs/components_page/components/accordion/simple.R
@@ -0,0 +1,22 @@
+library(dashBootstrapComponents)
+library(dashCoreComponents)
+library(dashHtmlComponents)
+
+accordion <- htmlDiv(
+ dbcAccordion(
+ list(
+ dbcAccordionItem(
+ "This is the content of the first section",
+ title = "Item 1"
+ ),
+ dbcAccordionItem(
+ "This is the content of the second section",
+ title = "Item 2"
+ ),
+ dbcAccordionItem(
+ "This is the content of the third section",
+ title = "Item 3"
+ )
+ )
+ )
+)
diff --git a/docs/components_page/components/accordion/simple.jl b/docs/components_page/components/accordion/simple.jl
new file mode 100644
index 000000000..af2258019
--- /dev/null
+++ b/docs/components_page/components/accordion/simple.jl
@@ -0,0 +1,9 @@
+using DashBootstrapComponents, DashCoreComponents, DashHtmlComponents
+
+accordion = html_div(
+ dbc_accordion([
+ dbc_accordionitem("This is the content of the first section", title = "Item 1"),
+ dbc_accordionitem("This is the content of the second section", title = "Item 2"),
+ dbc_accordionitem("This is the content of the third section", title = "Item 3"),
+ ],),
+)
diff --git a/docs/components_page/components/accordion/simple.py b/docs/components_page/components/accordion/simple.py
new file mode 100644
index 000000000..22eea8271
--- /dev/null
+++ b/docs/components_page/components/accordion/simple.py
@@ -0,0 +1,21 @@
+import dash_bootstrap_components as dbc
+from dash import html
+
+accordion = html.Div(
+ dbc.Accordion(
+ [
+ dbc.AccordionItem(
+ "This is the content of the first section",
+ title="Item 1",
+ ),
+ dbc.AccordionItem(
+ "This is the content of the second section",
+ title="Item 2",
+ ),
+ dbc.AccordionItem(
+ "This is the content of the third section",
+ title="Item 3",
+ ),
+ ],
+ )
+)
diff --git a/docs/components_page/components/alert.md b/docs/components_page/components/alert.md
index 0fa8203f1..62d0afb43 100644
--- a/docs/components_page/components/alert.md
+++ b/docs/components_page/components/alert.md
@@ -3,7 +3,7 @@ title: Alerts
lead: Provide contextual feedback messages for user actions with the `Alert` component.
---
-## Basic usage
+## Examples
Set the color of `Alert` using the `color` argument and one of the eight supported contextual color names.
diff --git a/docs/components_page/components/alert/auto_dismiss.R b/docs/components_page/components/alert/auto_dismiss.R
index 6e40d3aa9..7fa5ac00f 100644
--- a/docs/components_page/components/alert/auto_dismiss.R
+++ b/docs/components_page/components/alert/auto_dismiss.R
@@ -2,13 +2,15 @@ library(dashBootstrapComponents)
library(dashHtmlComponents)
alert <- htmlDiv(
- list(
- dbcButton("Toggle", id = "alert-toggle-auto", className = "mr-1",
- n_clicks = 0),
+ list(
+ dbcButton("Toggle",
+ id = "alert-toggle-auto", className = "me-1",
+ n_clicks = 0
+ ),
htmlHr(),
dbcAlert(
"Hello! I am an auto-dismissing alert!",
- id= "alert-auto",
+ id = "alert-auto",
is_open = TRUE,
duration = 4000
)
@@ -17,7 +19,7 @@ alert <- htmlDiv(
app$callback(
- output("alert-auto", "is_open"),
+ output("alert-auto", "is_open"),
list(
input("alert-toggle-auto", "n_clicks"),
state("alert-auto", "is_open")
diff --git a/docs/components_page/components/alert/auto_dismiss.jl b/docs/components_page/components/alert/auto_dismiss.jl
index 916bd1729..38f0fd74c 100644
--- a/docs/components_page/components/alert/auto_dismiss.jl
+++ b/docs/components_page/components/alert/auto_dismiss.jl
@@ -1,13 +1,13 @@
using DashBootstrapComponents, DashHtmlComponents
alert = html_div([
- dbc_button("Toggle", id="alert-toggle-auto", className="mr-1", n_clicks=0),
+ dbc_button("Toggle", id = "alert-toggle-auto", className = "me-1", n_clicks = 0),
html_hr(),
dbc_alert(
"Hello! I am an auto-dismissing alert!",
- id="alert-auto",
- is_open=true,
- duration=4000,
+ id = "alert-auto",
+ is_open = true,
+ duration = 4000,
),
]);
diff --git a/docs/components_page/components/alert/auto_dismiss.py b/docs/components_page/components/alert/auto_dismiss.py
index 8f36c4295..a70566f54 100644
--- a/docs/components_page/components/alert/auto_dismiss.py
+++ b/docs/components_page/components/alert/auto_dismiss.py
@@ -1,11 +1,10 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output, State
+from dash import Input, Output, State, html
alert = html.Div(
[
dbc.Button(
- "Toggle", id="alert-toggle-auto", className="mr-1", n_clicks=0
+ "Toggle", id="alert-toggle-auto", className="me-1", n_clicks=0
),
html.Hr(),
dbc.Alert(
diff --git a/docs/components_page/components/alert/content.jl b/docs/components_page/components/alert/content.jl
index 24cd795cd..d4e5a3176 100644
--- a/docs/components_page/components/alert/content.jl
+++ b/docs/components_page/components/alert/content.jl
@@ -1,7 +1,7 @@
using DashBootstrapComponents, DashHtmlComponents
alert = dbc_alert([
- html_h4("Well done!", className="alert-heading"),
+ html_h4("Well done!", className = "alert-heading"),
html_p(
"This is a success alert with loads of extra text in it. So much " *
"that you can see how spacing within an alert works with this " *
@@ -10,6 +10,6 @@ alert = dbc_alert([
html_hr(),
html_p(
"Let's put some more text down here, but remove the bottom margin",
- className="mb-0",
+ className = "mb-0",
),
]);
diff --git a/docs/components_page/components/alert/content.py b/docs/components_page/components/alert/content.py
index a75e9f32d..3f1043df1 100644
--- a/docs/components_page/components/alert/content.py
+++ b/docs/components_page/components/alert/content.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
alert = dbc.Alert(
[
diff --git a/docs/components_page/components/alert/dismiss.R b/docs/components_page/components/alert/dismiss.R
index 23830851f..5583c9411 100644
--- a/docs/components_page/components/alert/dismiss.R
+++ b/docs/components_page/components/alert/dismiss.R
@@ -4,11 +4,14 @@ library(dashHtmlComponents)
alert <- htmlDiv(
list(
dbcButton(
- "Toggle alert with fade", id = "alert-toggle-fade", n_clicks = 0,
- className = "mr-1"
+ "Toggle alert with fade",
+ id = "alert-toggle-fade", n_clicks = 0,
+ className = "me-1"
+ ),
+ dbcButton("Toggle alert without fade",
+ id = "alert-toggle-no-fade",
+ n_clicks = 0
),
- dbcButton("Toggle alert without fade", id = "alert-toggle-no-fade",
- n_clicks = 0),
htmlHr(),
dbcAlert(
"Hello! I am an alert",
diff --git a/docs/components_page/components/alert/dismiss.jl b/docs/components_page/components/alert/dismiss.jl
index 54209f08c..9e96da075 100644
--- a/docs/components_page/components/alert/dismiss.jl
+++ b/docs/components_page/components/alert/dismiss.jl
@@ -3,24 +3,24 @@ using DashBootstrapComponents, DashHtmlComponents
alert = html_div([
dbc_button(
"Toggle alert with fade",
- id="alert-toggle-fade",
- className="mr-1",
- n_clicks=0,
+ id = "alert-toggle-fade",
+ className = "me-1",
+ n_clicks = 0,
),
- dbc_button("Toggle alert without fade", id="alert-toggle-no-fade", n_clicks=0),
+ dbc_button("Toggle alert without fade", id = "alert-toggle-no-fade", n_clicks = 0),
html_hr(),
dbc_alert(
"Hello! I am an alert",
- id="alert-fade",
- dismissable=true,
- is_open=true,
+ id = "alert-fade",
+ dismissable = true,
+ is_open = true,
),
dbc_alert(
"Hello! I am an alert that doesn't fade in or out",
- id="alert-no-fade",
- dismissable=true,
- fade=false,
- is_open=true,
+ id = "alert-no-fade",
+ dismissable = true,
+ fade = false,
+ is_open = true,
),
]);
diff --git a/docs/components_page/components/alert/dismiss.py b/docs/components_page/components/alert/dismiss.py
index 2edfc30f5..5dd75f26c 100644
--- a/docs/components_page/components/alert/dismiss.py
+++ b/docs/components_page/components/alert/dismiss.py
@@ -1,13 +1,12 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output, State
+from dash import Input, Output, State, html
alert = html.Div(
[
dbc.Button(
"Toggle alert with fade",
id="alert-toggle-fade",
- className="mr-1",
+ className="me-1",
n_clicks=0,
),
dbc.Button(
diff --git a/docs/components_page/components/alert/icon.R b/docs/components_page/components/alert/icon.R
new file mode 100644
index 000000000..359461940
--- /dev/null
+++ b/docs/components_page/components/alert/icon.R
@@ -0,0 +1,39 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+alerts <- htmlDiv(
+ list(
+ dbcAlert(
+ list(
+ htmlI(className = "bi bi-info-circle-fill me-2"),
+ "An example info alert with an icon"
+ ),
+ color = "info",
+ className = "d-flex align-items-center"
+ ),
+ dbcAlert(
+ list(
+ htmlI(className = "bi bi-check-circle-fill me-2"),
+ "An example success alert with an icon"
+ ),
+ color = "success",
+ className = "d-flex align-items-center"
+ ),
+ dbcAlert(
+ list(
+ htmlI(className = "bi bi-exclamation-triangle-fill me-2"),
+ "An example warning alert with an icon"
+ ),
+ color = "warning",
+ className = "d-flex align-items-center"
+ ),
+ dbcAlert(
+ list(
+ htmlI(className = "bi bi-x-octagon-fill me-2"),
+ "An example danger alert with an icon"
+ ),
+ color = "danger",
+ className = "d-flex align-items-center"
+ )
+ )
+)
diff --git a/docs/components_page/components/alert/icon.jl b/docs/components_page/components/alert/icon.jl
new file mode 100644
index 000000000..54f98ce45
--- /dev/null
+++ b/docs/components_page/components/alert/icon.jl
@@ -0,0 +1,36 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+alerts = html_div([
+ dbc_alert(
+ [
+ html_i(className = "bi bi-info-circle-fill me-2"),
+ "An example info alert with an icon",
+ ],
+ color = "info",
+ className = "d-flex align-items-center",
+ ),
+ dbc_alert(
+ [
+ html_i(className = "bi bi-check-circle-fill me-2"),
+ "An example success alert with an icon",
+ ],
+ color = "success",
+ className = "d-flex align-items-center",
+ ),
+ dbc_alert(
+ [
+ html_i(className = "bi bi-exclamation-triangle-fill me-2"),
+ "An example warning alert with an icon",
+ ],
+ color = "warning",
+ className = "d-flex align-items-center",
+ ),
+ dbc_alert(
+ [
+ html_i(className = "bi bi-x-octagon-fill me-2"),
+ "An example danger alert with an icon",
+ ],
+ color = "danger",
+ className = "d-flex align-items-center",
+ ),
+])
diff --git a/docs/components_page/components/alert/icon.py b/docs/components_page/components/alert/icon.py
new file mode 100644
index 000000000..b9431096a
--- /dev/null
+++ b/docs/components_page/components/alert/icon.py
@@ -0,0 +1,39 @@
+import dash_bootstrap_components as dbc
+from dash import html
+
+alerts = html.Div(
+ [
+ dbc.Alert(
+ [
+ html.I(className="bi bi-info-circle-fill me-2"),
+ "An example info alert with an icon",
+ ],
+ color="info",
+ className="d-flex align-items-center",
+ ),
+ dbc.Alert(
+ [
+ html.I(className="bi bi-check-circle-fill me-2"),
+ "An example success alert with an icon",
+ ],
+ color="success",
+ className="d-flex align-items-center",
+ ),
+ dbc.Alert(
+ [
+ html.I(className="bi bi-exclamation-triangle-fill me-2"),
+ "An example warning alert with an icon",
+ ],
+ color="warning",
+ className="d-flex align-items-center",
+ ),
+ dbc.Alert(
+ [
+ html.I(className="bi bi-x-octagon-fill me-2"),
+ "An example danger alert with an icon",
+ ],
+ color="danger",
+ className="d-flex align-items-center",
+ ),
+ ]
+)
diff --git a/docs/components_page/components/alert/link.jl b/docs/components_page/components/alert/link.jl
index 287de83cb..143860ae7 100644
--- a/docs/components_page/components/alert/link.jl
+++ b/docs/components_page/components/alert/link.jl
@@ -4,15 +4,15 @@ alerts = html_div([
dbc_alert(
[
"This is a primary alert with an ",
- html_a("example link", href="#", className="alert-link"),
+ html_a("example link", href = "#", className = "alert-link"),
],
- color="primary",
+ color = "primary",
),
dbc_alert(
[
"This is a danger alert with an ",
- html_a("example link", href="#", className="alert-link"),
+ html_a("example link", href = "#", className = "alert-link"),
],
- color="danger",
+ color = "danger",
),
]);
diff --git a/docs/components_page/components/alert/link.py b/docs/components_page/components/alert/link.py
index 908d6888c..e87cbdca3 100644
--- a/docs/components_page/components/alert/link.py
+++ b/docs/components_page/components/alert/link.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
alerts = html.Div(
[
diff --git a/docs/components_page/components/alert/simple.jl b/docs/components_page/components/alert/simple.jl
index 5e3adb1de..4b1bc3943 100644
--- a/docs/components_page/components/alert/simple.jl
+++ b/docs/components_page/components/alert/simple.jl
@@ -1,12 +1,12 @@
using DashBootstrapComponents, DashHtmlComponents
alerts = html_div([
- dbc_alert("This is a primary alert", color="primary"),
- dbc_alert("This is a secondary alert", color="secondary"),
- dbc_alert("This is a success alert! Well done!", color="success"),
- dbc_alert("This is a warning alert... be careful...", color="warning"),
- dbc_alert("This is a danger alert. Scary!", color="danger"),
- dbc_alert("This is an info alert. Good to know!", color="info"),
- dbc_alert("This is a light alert", color="light"),
- dbc_alert("This is a dark alert", color="dark"),
+ dbc_alert("This is a primary alert", color = "primary"),
+ dbc_alert("This is a secondary alert", color = "secondary"),
+ dbc_alert("This is a success alert! Well done!", color = "success"),
+ dbc_alert("This is a warning alert... be careful...", color = "warning"),
+ dbc_alert("This is a danger alert. Scary!", color = "danger"),
+ dbc_alert("This is an info alert. Good to know!", color = "info"),
+ dbc_alert("This is a light alert", color = "light"),
+ dbc_alert("This is a dark alert", color = "dark"),
]);
diff --git a/docs/components_page/components/alert/simple.py b/docs/components_page/components/alert/simple.py
index 8e05b6332..f6b7d07f0 100644
--- a/docs/components_page/components/alert/simple.py
+++ b/docs/components_page/components/alert/simple.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
alerts = html.Div(
[
diff --git a/docs/components_page/components/badge.md b/docs/components_page/components/badge.md
index 01d80dc11..b85e5ecd1 100644
--- a/docs/components_page/components/badge.md
+++ b/docs/components_page/components/badge.md
@@ -3,7 +3,7 @@ title: Badges
lead: Documentation and examples for how to use Bootstrap badges with _dash-bootstrap-components_.
---
-## Simple example
+## Examples
Badges can be used as part of buttons or links to provide a counter.
@@ -15,21 +15,33 @@ Badges scale to match the size of their parent by using relative font sizing.
{{example:components/badge/size.py:badges}}
-## Conteztual variations
+## Background colors
Use the `color` argument to apply one of Bootstrap's contextual color classes.
{{example:components/badge/color.py:badges}}
+## Text colors
+
+Use the `text_color` argument to apply one of Bootstrap's contextual color classes to the font.
+
+{{example:components/badge/text_color.py:badges}}
+
## Pill badges
Set `pill=True` to make the badges more rounded (with a larger `border-radius` and additional horizontal padding).
{{example:components/badge/pills.py:badges}}
+## Positioning
+
+Use the Bootstrap's [position utility classes](https://getbootstrap.com/docs/5.0/utilities/position/) to modify a badge and position it in the corner of a link or button.
+
+{{example:components/badge/positioned.py:badge}}
+
## Links
-Add a link with the `href` argument to create actionable badges with hover and focus states.
+Add a link with the `href` argument to create actionable badges with hover and focus states. In Bootstrap 5 links are underlined by default. You can use the `text-decoration-none` class to override this if you wish.
{{example:components/badge/links.py:badges}}
diff --git a/docs/components_page/components/badge/color.R b/docs/components_page/components/badge/color.R
index a25a8bd09..8b79a8b04 100644
--- a/docs/components_page/components/badge/color.R
+++ b/docs/components_page/components/badge/color.R
@@ -3,13 +3,13 @@ library(dashHtmlComponents)
badges <- htmlSpan(
list(
- dbcBadge("Primary", color = "primary", className = "mr-1"),
- dbcBadge("Secondary", color = "secondary", className = "mr-1"),
- dbcBadge("Success", color = "success", className = "mr-1"),
- dbcBadge("Warning", color = "warning", className = "mr-1"),
- dbcBadge("Danger", color = "danger", className = "mr-1"),
- dbcBadge("Info", color = "info", className = "mr-1"),
- dbcBadge("Light", color = "light", className = "mr-1"),
+ dbcBadge("Primary", color = "primary", className = "me-1"),
+ dbcBadge("Secondary", color = "secondary", className = "me-1"),
+ dbcBadge("Success", color = "success", className = "me-1"),
+ dbcBadge("Warning", color = "warning", className = "me-1"),
+ dbcBadge("Danger", color = "danger", className = "me-1"),
+ dbcBadge("Info", color = "info", className = "me-1"),
+ dbcBadge("Light", text_color = "dark", color = "light", className = "me-1"),
dbcBadge("Dark", color = "dark")
)
)
diff --git a/docs/components_page/components/badge/color.jl b/docs/components_page/components/badge/color.jl
index b1c3feaf6..dce1edcee 100644
--- a/docs/components_page/components/badge/color.jl
+++ b/docs/components_page/components/badge/color.jl
@@ -1,12 +1,12 @@
using DashBootstrapComponents, DashHtmlComponents
badges = html_span([
- dbc_badge("Primary", color="primary", className="mr-1"),
- dbc_badge("Secondary", color="secondary", className="mr-1"),
- dbc_badge("Success", color="success", className="mr-1"),
- dbc_badge("Warning", color="warning", className="mr-1"),
- dbc_badge("Danger", color="danger", className="mr-1"),
- dbc_badge("Info", color="info", className="mr-1"),
- dbc_badge("Light", color="light", className="mr-1"),
- dbc_badge("Dark", color="dark"),
+ dbc_badge("Primary", color = "primary", className = "me-1"),
+ dbc_badge("Secondary", color = "secondary", className = "me-1"),
+ dbc_badge("Success", color = "success", className = "me-1"),
+ dbc_badge("Warning", color = "warning", className = "me-1"),
+ dbc_badge("Danger", color = "danger", className = "me-1"),
+ dbc_badge("Info", color = "info", className = "me-1"),
+ dbc_badge("Light", color = "light", text_color = "dark", className = "me-1"),
+ dbc_badge("Dark", color = "dark"),
]);
diff --git a/docs/components_page/components/badge/color.py b/docs/components_page/components/badge/color.py
index 506405229..53cbb2988 100644
--- a/docs/components_page/components/badge/color.py
+++ b/docs/components_page/components/badge/color.py
@@ -1,15 +1,15 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
badges = html.Span(
[
- dbc.Badge("Primary", color="primary", className="mr-1"),
- dbc.Badge("Secondary", color="secondary", className="mr-1"),
- dbc.Badge("Success", color="success", className="mr-1"),
- dbc.Badge("Warning", color="warning", className="mr-1"),
- dbc.Badge("Danger", color="danger", className="mr-1"),
- dbc.Badge("Info", color="info", className="mr-1"),
- dbc.Badge("Light", color="light", className="mr-1"),
+ dbc.Badge("Primary", color="primary", className="me-1"),
+ dbc.Badge("Secondary", color="secondary", className="me-1"),
+ dbc.Badge("Success", color="success", className="me-1"),
+ dbc.Badge("Warning", color="warning", className="me-1"),
+ dbc.Badge("Danger", color="danger", className="me-1"),
+ dbc.Badge("Info", color="info", className="me-1"),
+ dbc.Badge("Light", text_color="dark", color="light", className="me-1"),
dbc.Badge("Dark", color="dark"),
]
)
diff --git a/docs/components_page/components/badge/links.R b/docs/components_page/components/badge/links.R
index f24f9c227..0b7aee432 100644
--- a/docs/components_page/components/badge/links.R
+++ b/docs/components_page/components/badge/links.R
@@ -3,13 +3,13 @@ library(dashHtmlComponents)
badges <- htmlSpan(
list(
- dbcBadge("Primary", href = "#", color = "primary", className = "mr-1"),
- dbcBadge("Secondary", href = "#", color = "secondary", className = "mr-1"),
- dbcBadge("Success", href = "#", color = "success", className = "mr-1"),
- dbcBadge("Warning", href = "#", color = "warning", className = "mr-1"),
- dbcBadge("Danger", href = "#", color = "danger", className = "mr-1"),
- dbcBadge("Info", href = "#", color = "info", className = "mr-1"),
- dbcBadge("Light", href = "#", color = "light", className = "mr-1"),
- dbcBadge("Dark", href = "#", color = "dark")
+ dbcBadge("Primary", href = "#", color = "primary", className = "me-1 text-decoration-none"),
+ dbcBadge("Secondary", href = "#", color = "secondary", className = "me-1 text-decoration-none"),
+ dbcBadge("Success", href = "#", color = "success", className = "me-1 text-decoration-none"),
+ dbcBadge("Warning", href = "#", color = "warning", className = "me-1 text-decoration-none"),
+ dbcBadge("Danger", href = "#", color = "danger", className = "me-1 text-decoration-none"),
+ dbcBadge("Info", href = "#", color = "info", className = "me-1 text-decoration-none"),
+ dbcBadge("Light", href = "#", color = "light", text_color = "dark", className = "me-1 text-decoration-none"),
+ dbcBadge("Dark", href = "#", color = "dark", className = "text-decoration-none")
)
)
diff --git a/docs/components_page/components/badge/links.jl b/docs/components_page/components/badge/links.jl
index a6791443f..4dc3db9ae 100644
--- a/docs/components_page/components/badge/links.jl
+++ b/docs/components_page/components/badge/links.jl
@@ -1,12 +1,43 @@
using DashBootstrapComponents, DashHtmlComponents
badges = html_span([
- dbc_badge("Primary", href="#", color="primary", className="mr-1"),
- dbc_badge("Secondary", href="#", color="secondary", className="mr-1"),
- dbc_badge("Success", href="#", color="success", className="mr-1"),
- dbc_badge("Warning", href="#", color="warning", className="mr-1"),
- dbc_badge("Danger", href="#", color="danger", className="mr-1"),
- dbc_badge("Info", href="#", color="info", className="mr-1"),
- dbc_badge("Light", href="#", color="light", className="mr-1"),
- dbc_badge("Dark", href="#", color="dark"),
-]);
+ dbc_badge(
+ "Primary",
+ href = "#",
+ color = "primary",
+ className = "me-1 text-decoration-none",
+ ),
+ dbc_badge(
+ "Secondary",
+ href = "#",
+ color = "secondary",
+ className = "me-1 text-decoration-none",
+ ),
+ dbc_badge(
+ "Success",
+ href = "#",
+ color = "success",
+ className = "me-1 text-decoration-none",
+ ),
+ dbc_badge(
+ "Warning",
+ href = "#",
+ color = "warning",
+ className = "me-1 text-decoration-none",
+ ),
+ dbc_badge(
+ "Danger",
+ href = "#",
+ color = "danger",
+ className = "me-1 text-decoration-none",
+ ),
+ dbc_badge("Info", href = "#", color = "info", className = "me-1 text-decoration-none"),
+ dbc_badge(
+ "Light",
+ href = "#",
+ color = "light",
+ text_color = "dark",
+ className = "me-1 text-decoration-none",
+ ),
+ dbc_badge("Dark", href = "#", color = "dark", className = "text-decoration-none"),
+],);
diff --git a/docs/components_page/components/badge/links.py b/docs/components_page/components/badge/links.py
index 06c7180c0..51f0c34be 100644
--- a/docs/components_page/components/badge/links.py
+++ b/docs/components_page/components/badge/links.py
@@ -1,15 +1,53 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
badges = html.Span(
[
- dbc.Badge("Primary", href="#", color="primary", className="mr-1"),
- dbc.Badge("Secondary", href="#", color="secondary", className="mr-1"),
- dbc.Badge("Success", href="#", color="success", className="mr-1"),
- dbc.Badge("Warning", href="#", color="warning", className="mr-1"),
- dbc.Badge("Danger", href="#", color="danger", className="mr-1"),
- dbc.Badge("Info", href="#", color="info", className="mr-1"),
- dbc.Badge("Light", href="#", color="light", className="mr-1"),
- dbc.Badge("Dark", href="#", color="dark"),
+ dbc.Badge(
+ "Primary",
+ href="#",
+ color="primary",
+ className="me-1 text-decoration-none",
+ ),
+ dbc.Badge(
+ "Secondary",
+ href="#",
+ color="secondary",
+ className="me-1 text-decoration-none",
+ ),
+ dbc.Badge(
+ "Success",
+ href="#",
+ color="success",
+ className="me-1 text-decoration-none",
+ ),
+ dbc.Badge(
+ "Warning",
+ href="#",
+ color="warning",
+ className="me-1 text-decoration-none",
+ ),
+ dbc.Badge(
+ "Danger",
+ href="#",
+ color="danger",
+ className="me-1 text-decoration-none",
+ ),
+ dbc.Badge(
+ "Info",
+ href="#",
+ color="info",
+ className="me-1 text-decoration-none",
+ ),
+ dbc.Badge(
+ "Light",
+ href="#",
+ color="light",
+ text_color="dark",
+ className="me-1 text-decoration-none",
+ ),
+ dbc.Badge(
+ "Dark", href="#", color="dark", className="text-decoration-none"
+ ),
]
)
diff --git a/docs/components_page/components/badge/pills.R b/docs/components_page/components/badge/pills.R
index 3f40ea8ff..8a6631ef5 100644
--- a/docs/components_page/components/badge/pills.R
+++ b/docs/components_page/components/badge/pills.R
@@ -3,13 +3,13 @@ library(dashHtmlComponents)
badges <- htmlSpan(
list(
- dbcBadge("Primary", pill = TRUE, color = "primary", className = "mr-1"),
- dbcBadge("Secondary", pill = TRUE, color = "secondary", className = "mr-1"),
- dbcBadge("Success", pill = TRUE, color = "success", className = "mr-1"),
- dbcBadge("Warning", pill = TRUE, color = "warning", className = "mr-1"),
- dbcBadge("Danger", pill = TRUE, color = "danger", className = "mr-1"),
- dbcBadge("Info", pill = TRUE, color = "info", className = "mr-1"),
- dbcBadge("Light", pill = TRUE, color = "light", className = "mr-1"),
+ dbcBadge("Primary", pill = TRUE, color = "primary", className = "me-1"),
+ dbcBadge("Secondary", pill = TRUE, color = "secondary", className = "me-1"),
+ dbcBadge("Success", pill = TRUE, color = "success", className = "me-1"),
+ dbcBadge("Warning", pill = TRUE, color = "warning", className = "me-1"),
+ dbcBadge("Danger", pill = TRUE, color = "danger", className = "me-1"),
+ dbcBadge("Info", pill = TRUE, color = "info", className = "me-1"),
+ dbcBadge("Light", pill = TRUE, color = "light", text_color = "dark", className = "me-1"),
dbcBadge("Dark", pill = TRUE, color = "dark")
)
)
diff --git a/docs/components_page/components/badge/pills.jl b/docs/components_page/components/badge/pills.jl
index efa17357d..01204ecd7 100644
--- a/docs/components_page/components/badge/pills.jl
+++ b/docs/components_page/components/badge/pills.jl
@@ -1,12 +1,18 @@
using DashBootstrapComponents, DashHtmlComponents
badges = html_span([
- dbc_badge("Primary", pill=true, color="primary", className="mr-1"),
- dbc_badge("Secondary", pill=true, color="secondary", className="mr-1"),
- dbc_badge("Success", pill=true, color="success", className="mr-1"),
- dbc_badge("Warning", pill=true, color="warning", className="mr-1"),
- dbc_badge("Danger", pill=true, color="danger", className="mr-1"),
- dbc_badge("Info", pill=true, color="info", className="mr-1"),
- dbc_badge("Light", pill=true, color="light", className="mr-1"),
- dbc_badge("Dark", pill=true, color="dark"),
+ dbc_badge("Primary", pill = true, color = "primary", className = "me-1"),
+ dbc_badge("Secondary", pill = true, color = "secondary", className = "me-1"),
+ dbc_badge("Success", pill = true, color = "success", className = "me-1"),
+ dbc_badge("Warning", pill = true, color = "warning", className = "me-1"),
+ dbc_badge("Danger", pill = true, color = "danger", className = "me-1"),
+ dbc_badge("Info", pill = true, color = "info", className = "me-1"),
+ dbc_badge(
+ "Light",
+ pill = true,
+ color = "light",
+ text_color = "dark",
+ className = "me-1",
+ ),
+ dbc_badge("Dark", pill = true, color = "dark"),
]);
diff --git a/docs/components_page/components/badge/pills.py b/docs/components_page/components/badge/pills.py
index 5699c0622..7cd60b945 100644
--- a/docs/components_page/components/badge/pills.py
+++ b/docs/components_page/components/badge/pills.py
@@ -1,15 +1,21 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
badges = html.Span(
[
- dbc.Badge("Primary", pill=True, color="primary", className="mr-1"),
- dbc.Badge("Secondary", pill=True, color="secondary", className="mr-1"),
- dbc.Badge("Success", pill=True, color="success", className="mr-1"),
- dbc.Badge("Warning", pill=True, color="warning", className="mr-1"),
- dbc.Badge("Danger", pill=True, color="danger", className="mr-1"),
- dbc.Badge("Info", pill=True, color="info", className="mr-1"),
- dbc.Badge("Light", pill=True, color="light", className="mr-1"),
+ dbc.Badge("Primary", pill=True, color="primary", className="me-1"),
+ dbc.Badge("Secondary", pill=True, color="secondary", className="me-1"),
+ dbc.Badge("Success", pill=True, color="success", className="me-1"),
+ dbc.Badge("Warning", pill=True, color="warning", className="me-1"),
+ dbc.Badge("Danger", pill=True, color="danger", className="me-1"),
+ dbc.Badge("Info", pill=True, color="info", className="me-1"),
+ dbc.Badge(
+ "Light",
+ pill=True,
+ color="light",
+ text_color="dark",
+ className="me-1",
+ ),
dbc.Badge("Dark", pill=True, color="dark"),
]
)
diff --git a/docs/components_page/components/badge/positioned.R b/docs/components_page/components/badge/positioned.R
new file mode 100644
index 000000000..8a8248bfb
--- /dev/null
+++ b/docs/components_page/components/badge/positioned.R
@@ -0,0 +1,16 @@
+library(dashBootstrapComponents)
+
+badge <- dbcButton(
+ list(
+ "Notifications",
+ dbcBadge(
+ "99+",
+ color = "danger",
+ pill = TRUE,
+ text_color = "white",
+ className = "position-absolute top-0 start-100 translate-middle"
+ )
+ ),
+ color = "primary",
+ className = "position-relative"
+)
diff --git a/docs/components_page/components/badge/positioned.jl b/docs/components_page/components/badge/positioned.jl
new file mode 100644
index 000000000..e1bd789df
--- /dev/null
+++ b/docs/components_page/components/badge/positioned.jl
@@ -0,0 +1,16 @@
+using DashBootstrapComponents
+
+badge = dbc_button(
+ [
+ "Notifications",
+ dbc_badge(
+ "99+",
+ color = "danger",
+ pill = true,
+ text_color = "white",
+ className = "position-absolute top-0 start-100 translate-middle",
+ ),
+ ],
+ color = "primary",
+ className = "position-relative",
+)
diff --git a/docs/components_page/components/badge/positioned.py b/docs/components_page/components/badge/positioned.py
new file mode 100644
index 000000000..18fd405b4
--- /dev/null
+++ b/docs/components_page/components/badge/positioned.py
@@ -0,0 +1,16 @@
+import dash_bootstrap_components as dbc
+
+badge = dbc.Button(
+ [
+ "Notifications",
+ dbc.Badge(
+ "99+",
+ color="danger",
+ pill=True,
+ text_color="white",
+ className="position-absolute top-0 start-100 translate-middle",
+ ),
+ ],
+ color="primary",
+ className="position-relative",
+)
diff --git a/docs/components_page/components/badge/simple.R b/docs/components_page/components/badge/simple.R
index 645b7eb69..acdb2a64c 100644
--- a/docs/components_page/components/badge/simple.R
+++ b/docs/components_page/components/badge/simple.R
@@ -3,7 +3,7 @@ library(dashBootstrapComponents)
badge <- dbcButton(
list(
"Notifications",
- dbcBadge("4", color = "light", className = "ml-1")
+ dbcBadge("4", color = "light", text_color = "primary", className = "ms-1")
),
color = "primary",
)
diff --git a/docs/components_page/components/badge/simple.jl b/docs/components_page/components/badge/simple.jl
index efb96cc24..e907e9678 100644
--- a/docs/components_page/components/badge/simple.jl
+++ b/docs/components_page/components/badge/simple.jl
@@ -1,6 +1,9 @@
using DashBootstrapComponents
badge = dbc_button(
- ["Notifications", dbc_badge("4", color="light", className="ml-1")],
- color="primary",
+ [
+ "Notifications",
+ dbc_badge("4", color = "light", text_color = "primary", className = "ms-1"),
+ ],
+ color = "primary",
);
diff --git a/docs/components_page/components/badge/simple.py b/docs/components_page/components/badge/simple.py
index 8f9ead3ae..cea32c39a 100644
--- a/docs/components_page/components/badge/simple.py
+++ b/docs/components_page/components/badge/simple.py
@@ -1,6 +1,9 @@
import dash_bootstrap_components as dbc
badge = dbc.Button(
- ["Notifications", dbc.Badge("4", color="light", className="ml-1")],
+ [
+ "Notifications",
+ dbc.Badge("4", color="light", text_color="primary", className="ms-1"),
+ ],
color="primary",
)
diff --git a/docs/components_page/components/badge/size.R b/docs/components_page/components/badge/size.R
index c80f44a35..66497da68 100644
--- a/docs/components_page/components/badge/size.R
+++ b/docs/components_page/components/badge/size.R
@@ -3,11 +3,11 @@ library(dashHtmlComponents)
badges <- htmlDiv(
list(
- htmlH1(list("Example heading", dbcBadge("New", className = "ml-1"))),
- htmlH2(list("Example heading", dbcBadge("New", className = "ml-1"))),
- htmlH3(list("Example heading", dbcBadge("New", className = "ml-1"))),
- htmlH4(list("Example heading", dbcBadge("New", className = "ml-1"))),
- htmlH5(list("Example heading", dbcBadge("New", className = "ml-1"))),
- htmlH6(list("Example heading", dbcBadge("New", className = "ml-1")))
+ htmlH1(list("Example heading", dbcBadge("New", className = "ms-1"))),
+ htmlH2(list("Example heading", dbcBadge("New", className = "ms-1"))),
+ htmlH3(list("Example heading", dbcBadge("New", className = "ms-1"))),
+ htmlH4(list("Example heading", dbcBadge("New", className = "ms-1"))),
+ htmlH5(list("Example heading", dbcBadge("New", className = "ms-1"))),
+ htmlH6(list("Example heading", dbcBadge("New", className = "ms-1")))
)
)
diff --git a/docs/components_page/components/badge/size.jl b/docs/components_page/components/badge/size.jl
index 33ef95870..3ab50a512 100644
--- a/docs/components_page/components/badge/size.jl
+++ b/docs/components_page/components/badge/size.jl
@@ -1,10 +1,10 @@
using DashBootstrapComponents, DashHtmlComponents
badges = html_div([
- html_h1(["Example heading", dbc_badge("New", className="ml-1")]),
- html_h2(["Example heading", dbc_badge("New", className="ml-1")]),
- html_h3(["Example heading", dbc_badge("New", className="ml-1")]),
- html_h4(["Example heading", dbc_badge("New", className="ml-1")]),
- html_h5(["Example heading", dbc_badge("New", className="ml-1")]),
- html_h6(["Example heading", dbc_badge("New", className="ml-1")]),
+ html_h1(["Example heading", dbc_badge("New", className = "ms-1")]),
+ html_h2(["Example heading", dbc_badge("New", className = "ms-1")]),
+ html_h3(["Example heading", dbc_badge("New", className = "ms-1")]),
+ html_h4(["Example heading", dbc_badge("New", className = "ms-1")]),
+ html_h5(["Example heading", dbc_badge("New", className = "ms-1")]),
+ html_h6(["Example heading", dbc_badge("New", className = "ms-1")]),
]);
diff --git a/docs/components_page/components/badge/size.py b/docs/components_page/components/badge/size.py
index da88420d6..25addee14 100644
--- a/docs/components_page/components/badge/size.py
+++ b/docs/components_page/components/badge/size.py
@@ -1,13 +1,13 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
badges = html.Div(
[
- html.H1(["Example heading", dbc.Badge("New", className="ml-1")]),
- html.H2(["Example heading", dbc.Badge("New", className="ml-1")]),
- html.H3(["Example heading", dbc.Badge("New", className="ml-1")]),
- html.H4(["Example heading", dbc.Badge("New", className="ml-1")]),
- html.H5(["Example heading", dbc.Badge("New", className="ml-1")]),
- html.H6(["Example heading", dbc.Badge("New", className="ml-1")]),
+ html.H1(["Example heading", dbc.Badge("New", className="ms-1")]),
+ html.H2(["Example heading", dbc.Badge("New", className="ms-1")]),
+ html.H3(["Example heading", dbc.Badge("New", className="ms-1")]),
+ html.H4(["Example heading", dbc.Badge("New", className="ms-1")]),
+ html.H5(["Example heading", dbc.Badge("New", className="ms-1")]),
+ html.H6(["Example heading", dbc.Badge("New", className="ms-1")]),
]
)
diff --git a/docs/components_page/components/badge/text_color.R b/docs/components_page/components/badge/text_color.R
new file mode 100644
index 000000000..d35ac6216
--- /dev/null
+++ b/docs/components_page/components/badge/text_color.R
@@ -0,0 +1,18 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+badges <- htmlSpan(
+ list(
+ dbcBadge("Primary", color = "white", text_color = "primary", className = "border me-1"),
+ dbcBadge("Secondary", color = "white", text_color = "secondary", className = "border me-1"),
+ dbcBadge("Success", color = "white", text_color = "success", className = "border me-1"),
+ dbcBadge("Warning", color = "white", text_color = "warning", className = "border me-1"),
+ dbcBadge("Danger", color = "white", text_color = "danger", className = "border me-1"),
+ dbcBadge("Info", color = "white", text_color = "info", className = "border me-1"),
+ dbcBadge("Dark", color = "white", text_color = "dark", className = "border me-1"),
+ dbcBadge("Black", color = "white", text_color = "black", className = "border me-1"),
+ dbcBadge("Muted", color = "white", text_color = "muted", className = "border me-1"),
+ dbcBadge("Light", color = "secondary", text_color = "light", className = "border me-1"),
+ dbcBadge("White", color = "secondary", text_color = "white", className = "border")
+ )
+)
diff --git a/docs/components_page/components/badge/text_color.jl b/docs/components_page/components/badge/text_color.jl
new file mode 100644
index 000000000..8844f1d47
--- /dev/null
+++ b/docs/components_page/components/badge/text_color.jl
@@ -0,0 +1,40 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+badges = html_span([
+ dbc_badge(
+ "Primary",
+ color = "white",
+ text_color = "primary",
+ className = "border me-1",
+ ),
+ dbc_badge(
+ "Secondary",
+ color = "white",
+ text_color = "secondary",
+ className = "border me-1",
+ ),
+ dbc_badge(
+ "Success",
+ color = "white",
+ text_color = "success",
+ className = "border me-1",
+ ),
+ dbc_badge(
+ "Warning",
+ color = "white",
+ text_color = "warning",
+ className = "border me-1",
+ ),
+ dbc_badge("Danger", color = "white", text_color = "danger", className = "border me-1"),
+ dbc_badge("Info", color = "white", text_color = "info", className = "border me-1"),
+ dbc_badge("Dark", color = "white", text_color = "dark", className = "border me-1"),
+ dbc_badge("Black", color = "white", text_color = "black", className = "border me-1"),
+ dbc_badge("Muted", color = "white", text_color = "muted", className = "border me-1"),
+ dbc_badge(
+ "Light",
+ color = "secondary",
+ text_color = "light",
+ className = "border me-1",
+ ),
+ dbc_badge("White", color = "secondary", text_color = "white", className = "border"),
+])
diff --git a/docs/components_page/components/badge/text_color.py b/docs/components_page/components/badge/text_color.py
new file mode 100644
index 000000000..40edcfadd
--- /dev/null
+++ b/docs/components_page/components/badge/text_color.py
@@ -0,0 +1,64 @@
+import dash_bootstrap_components as dbc
+from dash import html
+
+badges = html.Span(
+ [
+ dbc.Badge(
+ "Primary",
+ color="white",
+ text_color="primary",
+ className="border me-1",
+ ),
+ dbc.Badge(
+ "Secondary",
+ color="white",
+ text_color="secondary",
+ className="border me-1",
+ ),
+ dbc.Badge(
+ "Success",
+ color="white",
+ text_color="success",
+ className="border me-1",
+ ),
+ dbc.Badge(
+ "Warning",
+ color="white",
+ text_color="warning",
+ className="border me-1",
+ ),
+ dbc.Badge(
+ "Danger",
+ color="white",
+ text_color="danger",
+ className="border me-1",
+ ),
+ dbc.Badge(
+ "Info", color="white", text_color="info", className="border me-1"
+ ),
+ dbc.Badge(
+ "Dark", color="white", text_color="dark", className="border me-1"
+ ),
+ dbc.Badge(
+ "Black",
+ color="white",
+ text_color="black",
+ className="border me-1",
+ ),
+ dbc.Badge(
+ "Muted",
+ color="white",
+ text_color="muted",
+ className="border me-1",
+ ),
+ dbc.Badge(
+ "Light",
+ color="secondary",
+ text_color="light",
+ className="border me-1",
+ ),
+ dbc.Badge(
+ "White", color="secondary", text_color="white", className="border"
+ ),
+ ]
+)
diff --git a/docs/components_page/components/breadcrumb.md b/docs/components_page/components/breadcrumb.md
new file mode 100644
index 000000000..3c31ccccb
--- /dev/null
+++ b/docs/components_page/components/breadcrumb.md
@@ -0,0 +1,12 @@
+---
+title: Breadcrumb
+lead: Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
+---
+
+## Examples
+
+You can create breadcrumbs using the `Breadcrumb` component. Items are specified with the `items` prop. You must specify a `label` for each item, and can optionally specify `href` to add a link, `external_link` to determine whether the link should be treated as a Dash style link or whether it should reload the page, and finally `active` to determine whether the item has the "active" style applied to indicate that it corresponds to the current location.
+
+{{example:components/breadcrumb/simple.py:breadcrumb}}
+
+{{apidoc:src/components/breadcrumb/Breadcrumb.js}}
diff --git a/docs/components_page/components/breadcrumb/simple.R b/docs/components_page/components/breadcrumb/simple.R
new file mode 100644
index 000000000..f59eb3c17
--- /dev/null
+++ b/docs/components_page/components/breadcrumb/simple.R
@@ -0,0 +1,9 @@
+library(dashBootstrapComponents)
+
+breadcrumb <- dbcBreadcrumb(
+ items = list(
+ list("label" = "Docs", "href" = "/docs", "external_link" = TRUE),
+ list("label" = "Components", "href" = "/docs/components", "external_link" = TRUE),
+ list("label" = "Breadcrumb", "active" = TRUE)
+ )
+)
diff --git a/docs/components_page/components/breadcrumb/simple.jl b/docs/components_page/components/breadcrumb/simple.jl
new file mode 100644
index 000000000..103ab5977
--- /dev/null
+++ b/docs/components_page/components/breadcrumb/simple.jl
@@ -0,0 +1,13 @@
+using DashBootstrapComponents
+
+breadcrumb = dbc_breadcrumb(
+ items = [
+ Dict("label" => "Docs", "href" => "/docs", "external_link" => true),
+ Dict(
+ "label" => "Components",
+ "href" => "/docs/components",
+ "external_link" => true,
+ ),
+ Dict("label" => "Breadcrumb", "active" => true),
+ ],
+)
diff --git a/docs/components_page/components/breadcrumb/simple.py b/docs/components_page/components/breadcrumb/simple.py
new file mode 100644
index 000000000..d5abcbe8c
--- /dev/null
+++ b/docs/components_page/components/breadcrumb/simple.py
@@ -0,0 +1,13 @@
+import dash_bootstrap_components as dbc
+
+breadcrumb = dbc.Breadcrumb(
+ items=[
+ {"label": "Docs", "href": "/docs", "external_link": True},
+ {
+ "label": "Components",
+ "href": "/docs/components",
+ "external_link": True,
+ },
+ {"label": "Breadcrumb", "active": True},
+ ],
+)
diff --git a/docs/components_page/components/button.md b/docs/components_page/components/button.md
index cf144bac8..a0bc73205 100644
--- a/docs/components_page/components/button.md
+++ b/docs/components_page/components/button.md
@@ -3,7 +3,7 @@ title: Buttons
lead: Documentation and examples for Bootstrap's button styles with _dash-bootstrap-components_.
---
-## Buttons
+## Examples
Bootstrap includes several predefined button styles based on the predefined contextual colors. Chooose between them using the `color` argument.
@@ -29,14 +29,39 @@ Modify the size of the button by setting `size` to either `"sm"` or `"lg"` for a
## Block button
-Create a block level button (one which spans the full width of the parent) by seeing `block=True`.
+Create a Bootstrap 4 style block level button (one which spans the full width
+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
+
+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.
+
+{{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`.
{{example:components/button/active_disabled.py:buttons}}
+## Download option
+
+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}}
+
{{apidoc:src/components/Button.js}}
diff --git a/docs/components_page/components/button/active_disabled.R b/docs/components_page/components/button/active_disabled.R
index ae4d2be6d..8db08a0cc 100644
--- a/docs/components_page/components/button/active_disabled.R
+++ b/docs/components_page/components/button/active_disabled.R
@@ -3,8 +3,8 @@ library(dashHtmlComponents)
buttons <- htmlDiv(
list(
- dbcButton("Regular", color = "primary", className = "mr-1"),
- dbcButton("Active", color = "primary", active = TRUE, className = "mr-1"),
+ dbcButton("Regular", color = "primary", className = "me-1"),
+ dbcButton("Active", color = "primary", active = TRUE, className = "me-1"),
dbcButton("Disabled", color = "primary", disabled = TRUE)
)
)
diff --git a/docs/components_page/components/button/active_disabled.jl b/docs/components_page/components/button/active_disabled.jl
index 11619f3ef..f2e26418b 100644
--- a/docs/components_page/components/button/active_disabled.jl
+++ b/docs/components_page/components/button/active_disabled.jl
@@ -1,7 +1,7 @@
using DashBootstrapComponents, DashHtmlComponents
buttons = html_div([
- dbc_button("Regular", color="primary", className="mr-1"),
- dbc_button("Active", color="primary", active=true, className="mr-1"),
- dbc_button("Disabled", color="primary", disabled=true),
+ dbc_button("Regular", color = "primary", className = "me-1"),
+ dbc_button("Active", color = "primary", active = true, className = "me-1"),
+ dbc_button("Disabled", color = "primary", disabled = true),
]);
diff --git a/docs/components_page/components/button/active_disabled.py b/docs/components_page/components/button/active_disabled.py
index 49cc1a2f6..595c2f2a1 100644
--- a/docs/components_page/components/button/active_disabled.py
+++ b/docs/components_page/components/button/active_disabled.py
@@ -1,10 +1,10 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
buttons = html.Div(
[
- dbc.Button("Regular", color="primary", className="mr-1"),
- dbc.Button("Active", color="primary", active=True, className="mr-1"),
+ dbc.Button("Regular", color="primary", className="me-1"),
+ dbc.Button("Active", color="primary", active=True, className="me-1"),
dbc.Button("Disabled", color="primary", disabled=True),
]
)
diff --git a/docs/components_page/components/button/block.R b/docs/components_page/components/button/block.R
index faced91b6..129d023bb 100644
--- a/docs/components_page/components/button/block.R
+++ b/docs/components_page/components/button/block.R
@@ -1,3 +1,10 @@
library(dashBootstrapComponents)
+library(dashHtmlComponents)
-button <- dbcButton("Block button", color = "primary", block = TRUE)
+button <- htmlDiv(
+ list(
+ dbcButton("Block button", color = "primary"),
+ dbcButton("Block button", color = "secondary")
+ ),
+ className = "d-grid gap-2"
+)
diff --git a/docs/components_page/components/button/block.jl b/docs/components_page/components/button/block.jl
index 623501312..e356761f1 100644
--- a/docs/components_page/components/button/block.jl
+++ b/docs/components_page/components/button/block.jl
@@ -1,3 +1,10 @@
using DashBootstrapComponents
+using DashHtmlComponents
-button = dbc_button("Block button", color="primary", block=true);
+button = html_div(
+ [
+ dbc_button("Block button", color = "primary"),
+ dbc_button("Block button", color = "secondary"),
+ ],
+ className = "d-grid gap-2",
+);
diff --git a/docs/components_page/components/button/block.py b/docs/components_page/components/button/block.py
index d07fad3b4..62c7a29ed 100644
--- a/docs/components_page/components/button/block.py
+++ b/docs/components_page/components/button/block.py
@@ -1,3 +1,10 @@
import dash_bootstrap_components as dbc
+from dash import html
-button = dbc.Button("Block button", color="primary", block=True)
+button = html.Div(
+ [
+ dbc.Button("Block button", color="primary"),
+ dbc.Button("Block button", color="secondary"),
+ ],
+ className="d-grid gap-2",
+)
diff --git a/docs/components_page/components/button/download.R b/docs/components_page/components/button/download.R
new file mode 100644
index 000000000..a130266c6
--- /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..748355eed
--- /dev/null
+++ b/docs/components_page/components/button/download.jl
@@ -0,0 +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",
+ ),
+])
diff --git a/docs/components_page/components/button/download.py b/docs/components_page/components/button/download.py
new file mode 100644
index 000000000..8d69219de
--- /dev/null
+++ b/docs/components_page/components/button/download.py
@@ -0,0 +1,14 @@
+import dash_bootstrap_components as dbc
+from dash import 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/components_page/components/button/flex_block.R b/docs/components_page/components/button/flex_block.R
new file mode 100644
index 000000000..9aec2c052
--- /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", className = "me-md-2"),
+ dbcButton("Button 2", className = "me-md-2"),
+ dbcButton("Button 3")
+ ),
+ className = "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..7ae276ec5
--- /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", className = "me-md-2"),
+ dbc_button("Button 2", className = "me-md-2"),
+ dbc_button("Button 3"),
+ ],
+ className = "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..a5b92e01f
--- /dev/null
+++ b/docs/components_page/components/button/flex_block.py
@@ -0,0 +1,11 @@
+import dash_bootstrap_components as dbc
+from dash import html
+
+button = html.Div(
+ [
+ dbc.Button("Button 1", className="me-md-2"),
+ dbc.Button("Button 2", className="me-md-2"),
+ dbc.Button("Button 3"),
+ ],
+ className="d-grid gap-2 d-md-flex justify-content-md-end",
+)
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..604c5b741
--- /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")
+ ),
+ className = "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..1cce04fbb
--- /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"),
+ ],
+ className = "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..9ac7708ba
--- /dev/null
+++ b/docs/components_page/components/button/half_block.py
@@ -0,0 +1,10 @@
+import dash_bootstrap_components as dbc
+from dash import html
+
+button = html.Div(
+ [
+ dbc.Button("Block button", color="primary"),
+ dbc.Button("Block button", color="secondary"),
+ ],
+ className="d-grid gap-2 col-6 mx-auto",
+)
diff --git a/docs/components_page/components/button/outline.R b/docs/components_page/components/button/outline.R
index 6b42e31b2..4a16326bf 100644
--- a/docs/components_page/components/button/outline.R
+++ b/docs/components_page/components/button/outline.R
@@ -3,15 +3,16 @@ library(dashHtmlComponents)
buttons <- htmlDiv(
list(
- dbcButton("Primary", outline = TRUE, color = "primary", className = "mr-1"),
+ dbcButton("Primary", outline = TRUE, color = "primary", className = "me-1"),
dbcButton(
- "Secondary", outline = TRUE, color = "secondary", className = "mr-1"
+ "Secondary",
+ outline = TRUE, color = "secondary", className = "me-1"
),
- dbcButton("Success", outline = TRUE, color = "success", className = "mr-1"),
- dbcButton("Warning", outline = TRUE, color = "warning", className = "mr-1"),
- dbcButton("Danger", outline = TRUE, color = "danger", className = "mr-1"),
- dbcButton("Info", outline = TRUE, color = "info", className = "mr-1"),
- dbcButton("Light", outline = TRUE, color = "light", className = "mr-1"),
+ dbcButton("Success", outline = TRUE, color = "success", className = "me-1"),
+ dbcButton("Warning", outline = TRUE, color = "warning", className = "me-1"),
+ dbcButton("Danger", outline = TRUE, color = "danger", className = "me-1"),
+ dbcButton("Info", outline = TRUE, color = "info", className = "me-1"),
+ dbcButton("Light", outline = TRUE, color = "light", className = "me-1"),
dbcButton("Dark", outline = TRUE, color = "dark")
)
)
diff --git a/docs/components_page/components/button/outline.jl b/docs/components_page/components/button/outline.jl
index fd8413542..5fd999b97 100644
--- a/docs/components_page/components/button/outline.jl
+++ b/docs/components_page/components/button/outline.jl
@@ -1,12 +1,12 @@
using DashBootstrapComponents, DashHtmlComponents
buttons = html_div([
- dbc_button("Primary", outline=true, color="primary", className="mr-1"),
- dbc_button("Secondary", outline=true, color="secondary", className="mr-1"),
- dbc_button("Success", outline=true, color="success", className="mr-1"),
- dbc_button("Warning", outline=true, color="warning", className="mr-1"),
- dbc_button("Danger", outline=true, color="danger", className="mr-1"),
- dbc_button("Info", outline=true, color="info", className="mr-1"),
- dbc_button("Light", outline=true, color="light", className="mr-1"),
- dbc_button("Dark", outline=true, color="dark"),
+ dbc_button("Primary", outline = true, color = "primary", className = "me-1"),
+ dbc_button("Secondary", outline = true, color = "secondary", className = "me-1"),
+ dbc_button("Success", outline = true, color = "success", className = "me-1"),
+ dbc_button("Warning", outline = true, color = "warning", className = "me-1"),
+ dbc_button("Danger", outline = true, color = "danger", className = "me-1"),
+ dbc_button("Info", outline = true, color = "info", className = "me-1"),
+ dbc_button("Light", outline = true, color = "light", className = "me-1"),
+ dbc_button("Dark", outline = true, color = "dark"),
]);
diff --git a/docs/components_page/components/button/outline.py b/docs/components_page/components/button/outline.py
index 497d53127..6eafbe3f5 100644
--- a/docs/components_page/components/button/outline.py
+++ b/docs/components_page/components/button/outline.py
@@ -1,17 +1,17 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
buttons = html.Div(
[
- dbc.Button("Primary", outline=True, color="primary", className="mr-1"),
+ dbc.Button("Primary", outline=True, color="primary", className="me-1"),
dbc.Button(
- "Secondary", outline=True, color="secondary", className="mr-1"
+ "Secondary", outline=True, color="secondary", className="me-1"
),
- dbc.Button("Success", outline=True, color="success", className="mr-1"),
- dbc.Button("Warning", outline=True, color="warning", className="mr-1"),
- dbc.Button("Danger", outline=True, color="danger", className="mr-1"),
- dbc.Button("Info", outline=True, color="info", className="mr-1"),
- dbc.Button("Light", outline=True, color="light", className="mr-1"),
+ dbc.Button("Success", outline=True, color="success", className="me-1"),
+ dbc.Button("Warning", outline=True, color="warning", className="me-1"),
+ dbc.Button("Danger", outline=True, color="danger", className="me-1"),
+ dbc.Button("Info", outline=True, color="info", className="me-1"),
+ dbc.Button("Light", outline=True, color="light", className="me-1"),
dbc.Button("Dark", outline=True, color="dark"),
]
)
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..c6c83a675
--- /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")
+ ),
+ className = "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..2f220d9fc
--- /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"),
+ ],
+ className = "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..2f665fc5a
--- /dev/null
+++ b/docs/components_page/components/button/responsive_block.py
@@ -0,0 +1,10 @@
+import dash_bootstrap_components as dbc
+from dash import html
+
+button = html.Div(
+ [
+ dbc.Button("Block button", color="primary"),
+ dbc.Button("Block button", color="secondary"),
+ ],
+ className="d-grid gap-2 d-md-block",
+)
diff --git a/docs/components_page/components/button/simple.R b/docs/components_page/components/button/simple.R
index c4632c03d..092a88fcb 100644
--- a/docs/components_page/components/button/simple.R
+++ b/docs/components_page/components/button/simple.R
@@ -3,14 +3,14 @@ library(dashHtmlComponents)
buttons <- htmlDiv(
list(
- dbcButton("Primary", color = "primary", className = "mr-1"),
- dbcButton("Secondary", color = "secondary", className = "mr-1"),
- dbcButton("Success", color = "success", className = "mr-1"),
- dbcButton("Warning", color = "warning", className = "mr-1"),
- dbcButton("Danger", color = "danger", className = "mr-1"),
- dbcButton("Info", color = "info", className = "mr-1"),
- dbcButton("Light", color = "light", className = "mr-1"),
- dbcButton("Dark", color = "dark", className = "mr-1"),
+ dbcButton("Primary", color = "primary", className = "me-1"),
+ dbcButton("Secondary", color = "secondary", className = "me-1"),
+ dbcButton("Success", color = "success", className = "me-1"),
+ dbcButton("Warning", color = "warning", className = "me-1"),
+ dbcButton("Danger", color = "danger", className = "me-1"),
+ dbcButton("Info", color = "info", className = "me-1"),
+ dbcButton("Light", color = "light", className = "me-1"),
+ dbcButton("Dark", color = "dark", className = "me-1"),
dbcButton("Link", color = "link")
)
)
diff --git a/docs/components_page/components/button/simple.jl b/docs/components_page/components/button/simple.jl
index e0ca50b4c..1a0989840 100644
--- a/docs/components_page/components/button/simple.jl
+++ b/docs/components_page/components/button/simple.jl
@@ -1,13 +1,13 @@
using DashBootstrapComponents, DashHtmlComponents
buttons = html_div([
- dbc_button("Primary", color="primary", className="mr-1"),
- dbc_button("Secondary", color="secondary", className="mr-1"),
- dbc_button("Success", color="success", className="mr-1"),
- dbc_button("Warning", color="warning", className="mr-1"),
- dbc_button("Danger", color="danger", className="mr-1"),
- dbc_button("Info", color="info", className="mr-1"),
- dbc_button("Light", color="light", className="mr-1"),
- dbc_button("Dark", color="dark", className="mr-1"),
- dbc_button("Link", color="link"),
+ dbc_button("Primary", color = "primary", className = "me-1"),
+ dbc_button("Secondary", color = "secondary", className = "me-1"),
+ dbc_button("Success", color = "success", className = "me-1"),
+ dbc_button("Warning", color = "warning", className = "me-1"),
+ dbc_button("Danger", color = "danger", className = "me-1"),
+ dbc_button("Info", color = "info", className = "me-1"),
+ dbc_button("Light", color = "light", className = "me-1"),
+ dbc_button("Dark", color = "dark", className = "me-1"),
+ dbc_button("Link", color = "link"),
]);
diff --git a/docs/components_page/components/button/simple.py b/docs/components_page/components/button/simple.py
index a079328d5..e8ec136b1 100644
--- a/docs/components_page/components/button/simple.py
+++ b/docs/components_page/components/button/simple.py
@@ -1,16 +1,16 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
buttons = html.Div(
[
- dbc.Button("Primary", color="primary", className="mr-1"),
- dbc.Button("Secondary", color="secondary", className="mr-1"),
- dbc.Button("Success", color="success", className="mr-1"),
- dbc.Button("Warning", color="warning", className="mr-1"),
- dbc.Button("Danger", color="danger", className="mr-1"),
- dbc.Button("Info", color="info", className="mr-1"),
- dbc.Button("Light", color="light", className="mr-1"),
- dbc.Button("Dark", color="dark", className="mr-1"),
+ dbc.Button("Primary", color="primary", className="me-1"),
+ dbc.Button("Secondary", color="secondary", className="me-1"),
+ dbc.Button("Success", color="success", className="me-1"),
+ dbc.Button("Warning", color="warning", className="me-1"),
+ dbc.Button("Danger", color="danger", className="me-1"),
+ dbc.Button("Info", color="info", className="me-1"),
+ dbc.Button("Light", color="light", className="me-1"),
+ dbc.Button("Dark", color="dark", className="me-1"),
dbc.Button("Link", color="link"),
]
)
diff --git a/docs/components_page/components/button/size.R b/docs/components_page/components/button/size.R
index 265498eb0..9653c13bb 100644
--- a/docs/components_page/components/button/size.R
+++ b/docs/components_page/components/button/size.R
@@ -3,8 +3,8 @@ library(dashHtmlComponents)
buttons <- htmlDiv(
list(
- dbcButton("Large button", size = "lg", className = "mr-1"),
- dbcButton("Regular button", className = "mr-1"),
+ dbcButton("Large button", size = "lg", className = "me-1"),
+ dbcButton("Regular button", className = "me-1"),
dbcButton("Small button", size = "sm")
)
)
diff --git a/docs/components_page/components/button/size.jl b/docs/components_page/components/button/size.jl
index 7b2b9a4f3..f981a042f 100644
--- a/docs/components_page/components/button/size.jl
+++ b/docs/components_page/components/button/size.jl
@@ -1,7 +1,7 @@
using DashBootstrapComponents, DashHtmlComponents
buttons = html_div([
- dbc_button("Large button", size="lg", className="mr-1"),
- dbc_button("Regular button", className="mr-1"),
- dbc_button("Small button", size="sm"),
+ dbc_button("Large button", size = "lg", className = "me-1"),
+ dbc_button("Regular button", className = "me-1"),
+ dbc_button("Small button", size = "sm"),
]);
diff --git a/docs/components_page/components/button/size.py b/docs/components_page/components/button/size.py
index b9136956e..db8c995f0 100644
--- a/docs/components_page/components/button/size.py
+++ b/docs/components_page/components/button/size.py
@@ -1,10 +1,10 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
buttons = html.Div(
[
- dbc.Button("Large button", size="lg", className="mr-1"),
- dbc.Button("Regular button", className="mr-1"),
+ dbc.Button("Large button", size="lg", className="me-1"),
+ dbc.Button("Regular button", className="me-1"),
dbc.Button("Small button", size="sm"),
]
)
diff --git a/docs/components_page/components/button/usage.R b/docs/components_page/components/button/usage.R
index 9426efac3..d95c97f42 100644
--- a/docs/components_page/components/button/usage.R
+++ b/docs/components_page/components/button/usage.R
@@ -1,22 +1,24 @@
library(dashBootstrapComponents)
library(dashHtmlComponents)
-button <- htmlDiv(
+button <- htmlDiv(
list(
- dbcButton("Click me", id = "example-button", n_clicks = 0,
- className = "mr-2"),
+ dbcButton("Click me",
+ id = "example-button", n_clicks = 0,
+ className = "me-2"
+ ),
htmlSpan(id = "example-output", style = list(verticalAlign = "middle"))
)
)
app$callback(
- output("example-output", "children"),
- list(input("example-button", "n_clicks")),
- function(n) {
- if (n > 0) {
- return(sprintf("Clicked %d times.", n))
- }
- return(sprintf("Not clicked"))
+ output("example-output", "children"),
+ list(input("example-button", "n_clicks")),
+ function(n) {
+ if (n > 0) {
+ return(sprintf("Clicked %d times.", n))
}
+ return(sprintf("Not clicked"))
+ }
)
diff --git a/docs/components_page/components/button/usage.jl b/docs/components_page/components/button/usage.jl
index a2fea8be3..f3a4d11a7 100644
--- a/docs/components_page/components/button/usage.jl
+++ b/docs/components_page/components/button/usage.jl
@@ -1,8 +1,8 @@
using DashBootstrapComponents, DashHtmlComponents
button = html_div([
- dbc_button("Click me", id="example-button", className="mr-2", n_clicks=0),
- html_span(id="example-output", style=Dict("verticalAlign" => "middle")),
+ dbc_button("Click me", id = "example-button", className = "me-2", n_clicks = 0),
+ html_span(id = "example-output", style = Dict("verticalAlign" => "middle")),
]);
callback!(
diff --git a/docs/components_page/components/button/usage.py b/docs/components_page/components/button/usage.py
index 92c23a8a3..51311d988 100644
--- a/docs/components_page/components/button/usage.py
+++ b/docs/components_page/components/button/usage.py
@@ -1,11 +1,10 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output
+from dash import Input, Output, html
button = html.Div(
[
dbc.Button(
- "Click me", id="example-button", className="mr-2", n_clicks=0
+ "Click me", id="example-button", className="me-2", n_clicks=0
),
html.Span(id="example-output", style={"verticalAlign": "middle"}),
]
diff --git a/docs/components_page/components/button_group.md b/docs/components_page/components/button_group.md
index 7653be9c7..5c126947d 100644
--- a/docs/components_page/components/button_group.md
+++ b/docs/components_page/components/button_group.md
@@ -3,7 +3,7 @@ title: ButtonGroup
lead: Group a series of buttons on a single line with the `ButtonGroup` component.
---
-## Simple example
+## Examples
Wrap a list of `Button` components with `ButtonGroup`.
@@ -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`.
@@ -29,36 +41,26 @@ Stack buttons in the `ButtonGroup` vertically by setting `vertical=True`.
## RadioItems as ButtonGroup
-Sometimes you might like to use a `ButtonGroup` to let the user choose from a set of options, where the currently chosen option is indicated by that button being marked as "active". Since this requires that buttons respond to other buttons in the group being clicked on, it can be a little awkward to achieve when each button is a separate Dash component. Instead it is easier to use `RadioItems` and do some customisation of the styling. Most of the customisation is achieved with the `labelClassName` and `labelCheckedClassName` props of the `RadioItems` component, though some additional CSS is required (see below).
-
-{{example:components/button_group/radios.py:button_group}}
+Sometimes you might like to use a `ButtonGroup` to let the user choose from a set of options, where the currently chosen option is indicated by that button being marked as "active". Since this requires that buttons respond to other buttons in the group being clicked on, it can be a little awkward to achieve when each button is a separate Dash component. Instead it is easier to use `RadioItems` and do some customisation of the styling. Most of the customisation is achieved with the `inputClassName`, `labelClassName` and `labelCheckedClassName` props of the `RadioItems` component, though some additional CSS is required (see below).
```css
-/* Turn off existing buttons */
-.radio-group .custom-control-input ~ .custom-control-label::before {
- content: none;
-}
-
-.radio-group .custom-radio .custom-control-input ~ .custom-control-label::after {
- content: none;
-}
-
/* restyle radio items */
-.radio-group .custom-control {
+.radio-group .form-check {
padding-left: 0;
}
-.radio-group .btn-group > .custom-control:not(:last-child) > .btn {
+.radio-group .btn-group > .form-check:not(:last-child) > .btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
-.radio-group .btn-group > .custom-control:not(:first-child) > .btn {
+.radio-group .btn-group > .form-check:not(:first-child) > .btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-left: -1px;
}
```
+{{example:components/button_group/radios.py:button_group}}
{{apidoc:src/components/ButtonGroup.js}}
diff --git a/docs/components_page/components/button_group/dropdown.jl b/docs/components_page/components/button_group/dropdown.jl
index 3215d1e79..61653d019 100644
--- a/docs/components_page/components/button_group/dropdown.jl
+++ b/docs/components_page/components/button_group/dropdown.jl
@@ -5,7 +5,7 @@ button_group = dbc_buttongroup([
dbc_button("Second"),
dbc_dropdownmenu(
[dbc_dropdownmenuitem("Item 1"), dbc_dropdownmenuitem("Item 2")],
- label="Dropdown",
- group=true,
+ label = "Dropdown",
+ 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..cdf495682
--- /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..803bf8dfe
--- /dev/null
+++ b/docs/components_page/components/button_group/mixed.jl
@@ -0,0 +1,7 @@
+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..4c422c3b5
--- /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..b06d37fd6
--- /dev/null
+++ b/docs/components_page/components/button_group/outline.jl
@@ -0,0 +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"),
+])
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"),
+ ]
+)
diff --git a/docs/components_page/components/button_group/radios.R b/docs/components_page/components/button_group/radios.R
index e1e33d541..e6772f061 100644
--- a/docs/components_page/components/button_group/radios.R
+++ b/docs/components_page/components/button_group/radios.R
@@ -6,12 +6,13 @@ button_group <- htmlDiv(
dbcRadioItems(
id = "radios",
className = "btn-group",
- labelClassName = "btn btn-secondary",
+ inputClassName = "btn-check",
+ labelClassName = "btn btn-outline-primary",
labelCheckedClassName = "active",
options = list(
- list(label = "Option 1", value = 1),
- list(label = "Option 2", value = 2),
- list(label = "Option 3", value = 3)
+ list(label = "Option 1", value = 1),
+ list(label = "Option 2", value = 2),
+ list(label = "Option 3", value = 3)
),
value = 1,
),
diff --git a/docs/components_page/components/button_group/radios.jl b/docs/components_page/components/button_group/radios.jl
index e572e0c67..345025202 100644
--- a/docs/components_page/components/button_group/radios.jl
+++ b/docs/components_page/components/button_group/radios.jl
@@ -3,20 +3,21 @@ using DashBootstrapComponents, DashHtmlComponents
button_group = html_div(
[
dbc_radioitems(
- id="radios",
- className="btn-group",
- labelClassName="btn btn-secondary",
- labelCheckedClassName="active",
- options=[
+ id = "radios",
+ className = "btn-group",
+ inputClassName = "btn-check",
+ labelClassName = "btn btn-outline-primary",
+ labelCheckedClassName = "active",
+ options = [
Dict("label" => "Option 1", "value" => 1),
Dict("label" => "Option 2", "value" => 2),
Dict("label" => "Option 3", "value" => 3),
],
- value=1,
+ value = 1,
),
- html_div(id="output"),
+ html_div(id = "output"),
],
- className="radio-group",
+ className = "radio-group",
);
callback!(app, Output("output", "children"), Input("radios", "value")) do value
diff --git a/docs/components_page/components/button_group/radios.py b/docs/components_page/components/button_group/radios.py
index dacda614d..5f9a24c59 100644
--- a/docs/components_page/components/button_group/radios.py
+++ b/docs/components_page/components/button_group/radios.py
@@ -1,13 +1,13 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output
+from dash import Input, Output, html
button_group = html.Div(
[
dbc.RadioItems(
id="radios",
className="btn-group",
- labelClassName="btn btn-secondary",
+ inputClassName="btn-check",
+ labelClassName="btn btn-outline-primary",
labelCheckedClassName="active",
options=[
{"label": "Option 1", "value": 1},
diff --git a/docs/components_page/components/button_group/simple.jl b/docs/components_page/components/button_group/simple.jl
index 328fffbb1..f7109962d 100644
--- a/docs/components_page/components/button_group/simple.jl
+++ b/docs/components_page/components/button_group/simple.jl
@@ -1,5 +1,4 @@
using DashBootstrapComponents
-button_group = dbc_buttongroup(
- [dbc_button("Left"), dbc_button("Middle"), dbc_button("Right")]
-);
+button_group =
+ dbc_buttongroup([dbc_button("Left"), dbc_button("Middle"), dbc_button("Right")]);
diff --git a/docs/components_page/components/button_group/size.R b/docs/components_page/components/button_group/size.R
index 8d35648ba..b630df206 100644
--- a/docs/components_page/components/button_group/size.R
+++ b/docs/components_page/components/button_group/size.R
@@ -10,7 +10,7 @@ button_groups <- htmlDiv(
dbcButton("Right")
),
size = "lg",
- className = "mr-1",
+ className = "me-1",
),
dbcButtonGroup(
list(
@@ -18,7 +18,7 @@ button_groups <- htmlDiv(
dbcButton("Right")
),
size = "md",
- className = "mr-1",
+ className = "me-1",
),
dbcButtonGroup(
list(
diff --git a/docs/components_page/components/button_group/size.jl b/docs/components_page/components/button_group/size.jl
index 92f81f638..ea4f5af46 100644
--- a/docs/components_page/components/button_group/size.jl
+++ b/docs/components_page/components/button_group/size.jl
@@ -3,16 +3,16 @@ using DashBootstrapComponents, DashHtmlComponents
button_groups = html_div([
dbc_buttongroup(
[dbc_button("Left"), dbc_button("Middle"), dbc_button("Right")],
- size="lg",
- className="mr-1",
+ size = "lg",
+ className = "me-1",
),
dbc_buttongroup(
[dbc_button("Left"), dbc_button("Middle"), dbc_button("Right")],
- size="md",
- className="mr-1",
+ size = "md",
+ className = "me-1",
),
dbc_buttongroup(
[dbc_button("Left"), dbc_button("Middle"), dbc_button("Right")],
- size="sm",
+ size = "sm",
),
]);
diff --git a/docs/components_page/components/button_group/size.py b/docs/components_page/components/button_group/size.py
index 569e8511b..8a7f37b0e 100644
--- a/docs/components_page/components/button_group/size.py
+++ b/docs/components_page/components/button_group/size.py
@@ -1,17 +1,17 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
button_groups = html.Div(
[
dbc.ButtonGroup(
[dbc.Button("Left"), dbc.Button("Middle"), dbc.Button("Right")],
size="lg",
- className="mr-1",
+ className="me-1",
),
dbc.ButtonGroup(
[dbc.Button("Left"), dbc.Button("Middle"), dbc.Button("Right")],
size="md",
- className="mr-1",
+ className="me-1",
),
dbc.ButtonGroup(
[dbc.Button("Left"), dbc.Button("Middle"), dbc.Button("Right")],
diff --git a/docs/components_page/components/button_group/vertical.jl b/docs/components_page/components/button_group/vertical.jl
index 248076502..4801e0554 100644
--- a/docs/components_page/components/button_group/vertical.jl
+++ b/docs/components_page/components/button_group/vertical.jl
@@ -6,9 +6,9 @@ button_group = dbc_buttongroup(
dbc_button("Second"),
dbc_dropdownmenu(
[dbc_dropdownmenuitem("Item 1"), dbc_dropdownmenuitem("Item 2")],
- label="Dropdown",
- group=true,
+ label = "Dropdown",
+ group = true,
),
],
- vertical=true,
+ vertical = true,
);
diff --git a/docs/components_page/components/card.md b/docs/components_page/components/card.md
index e8041c475..a9d40ae67 100644
--- a/docs/components_page/components/card.md
+++ b/docs/components_page/components/card.md
@@ -3,7 +3,7 @@ title: Cards
lead: Bootstrap's cards provide a flexible content container with multiple variants and options.
---
-## Simple example
+## Examples
Below is an example of a basic card with mixed content and a fixed width, set using the `style` argument. By default, `Card` has no fixed width, so it'll naturally fill the full width of its parent element. This is easily customized with Bootstraps various sizing options detailed below.
@@ -33,6 +33,12 @@ Use `CardImg` when adding images to cards. The `top` argument can be used when t
{{example:components/card/image.py:cards}}
+### Image Overlays
+
+Use `CardImgOverlay` to display the card content over the top of the card image. Depending on the image, you may or may not need additional styles or utilities.
+
+{{example:components/card/image_overlay.py:card}}
+
### List groups
Create lists of content in a card with a `ListGroup` component by setting `flush=True`.
@@ -69,6 +75,12 @@ Finally, you can use custom CSS to control the size of your cards. In this examp
## Card style
+### Horizontal
+
+Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with `.g-0` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content.
+
+{{example:components/card/sizing/horizontal.py:card}}
+
### Background and color
Use the `color` argument of `Card` to set the background and border colors of `Card` to one of Bootstrap's contextual colors. When setting a dark color, use `inverse=True` to invert the text colors for better contrast.
@@ -91,24 +103,8 @@ Use the `CardGroup` component to render cards as a single attached element with
{{example:components/card/layout/group.py:cards}}
-### Card deck
-
-The `CardDeck` component will lay cards out with equal width and height, without attaching them to one another like the `CardGroup` component.
-
-{{example:components/card/layout/deck.py:cards}}
-
-### Card columns
-
-Cards can be organised into [Masonry](https://masonry.desandro.com/)-like columns using the `CardColumns` component. Cards are ordered top to bottom and left to right.
-
-{{example:components/card/layout/columns.py:cards}}
-
-{{apidoc:src/components/card/CardDeck.js}}
-
{{apidoc:src/components/card/CardGroup.js}}
-{{apidoc:src/components/card/CardColumns.js}}
-
{{apidoc:src/components/card/Card.js}}
{{apidoc:src/components/card/CardHeader.js}}
diff --git a/docs/components_page/components/card/body.jl b/docs/components_page/components/card/body.jl
index 866533c18..4cfc1220d 100644
--- a/docs/components_page/components/card/body.jl
+++ b/docs/components_page/components/card/body.jl
@@ -1,6 +1,6 @@
using DashBootstrapComponents, DashHtmlComponents
cards = html_div([
- dbc_card(dbc_cardbody("This is some text within a card body"), className="mb-3"),
- dbc_card("This is also within a body", body=true),
+ dbc_card(dbc_cardbody("This is some text within a card body"), className = "mb-3"),
+ dbc_card("This is also within a body", body = true),
]);
diff --git a/docs/components_page/components/card/body.py b/docs/components_page/components/card/body.py
index ff94eaa75..1e23d1876 100644
--- a/docs/components_page/components/card/body.py
+++ b/docs/components_page/components/card/body.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
cards = html.Div(
[
diff --git a/docs/components_page/components/card/color.jl b/docs/components_page/components/card/color.jl
index 2a4ce1026..522c6039a 100644
--- a/docs/components_page/components/card/color.jl
+++ b/docs/components_page/components/card/color.jl
@@ -3,30 +3,30 @@ using DashBootstrapComponents, DashHtmlComponents
card_content = [
dbc_cardheader("Card header"),
dbc_cardbody([
- html_h5("Card title", className="card-title"),
- html_p("This is some card content that we'll reuse", className="card-text"),
+ html_h5("Card title", className = "card-title"),
+ html_p("This is some card content that we'll reuse", className = "card-text"),
]),
];
cards = html_div([
dbc_row(
[
- dbc_col(dbc_card(card_content, color="primary", inverse=true)),
- dbc_col(dbc_card(card_content, color="secondary", inverse=true)),
- dbc_col(dbc_card(card_content, color="info", inverse=true)),
+ dbc_col(dbc_card(card_content, color = "primary", inverse = true)),
+ dbc_col(dbc_card(card_content, color = "secondary", inverse = true)),
+ dbc_col(dbc_card(card_content, color = "info", inverse = true)),
],
- className="mb-4",
+ className = "mb-4",
),
dbc_row(
[
- dbc_col(dbc_card(card_content, color="success", inverse=true)),
- dbc_col(dbc_card(card_content, color="warning", inverse=true)),
- dbc_col(dbc_card(card_content, color="danger", inverse=true)),
+ dbc_col(dbc_card(card_content, color = "success", inverse = true)),
+ dbc_col(dbc_card(card_content, color = "warning", inverse = true)),
+ dbc_col(dbc_card(card_content, color = "danger", inverse = true)),
],
- className="mb-4",
+ className = "mb-4",
),
dbc_row([
- dbc_col(dbc_card(card_content, color="light")),
- dbc_col(dbc_card(card_content, color="dark", inverse=true)),
+ dbc_col(dbc_card(card_content, color = "light")),
+ dbc_col(dbc_card(card_content, color = "dark", inverse = true)),
]),
]);
diff --git a/docs/components_page/components/card/color.py b/docs/components_page/components/card/color.py
index 3d71a9e68..bdb6c8545 100644
--- a/docs/components_page/components/card/color.py
+++ b/docs/components_page/components/card/color.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
card_content = [
dbc.CardHeader("Card header"),
diff --git a/docs/components_page/components/card/header_footer.R b/docs/components_page/components/card/header_footer.R
index 5e57c210f..572dd94b4 100644
--- a/docs/components_page/components/card/header_footer.R
+++ b/docs/components_page/components/card/header_footer.R
@@ -3,14 +3,14 @@ library(dashHtmlComponents)
card <- dbcCard(
list(
- dbcCardHeader("This is the header"),
- dbcCardBody(
- list(
- htmlH4("Card title", className = "card-title"),
- htmlP("This is some card text", className = "card-text")
- )
- ),
- dbcCardFooter("This is the footer")
+ dbcCardHeader("This is the header"),
+ dbcCardBody(
+ list(
+ htmlH4("Card title", className = "card-title"),
+ htmlP("This is some card text", className = "card-text")
+ )
+ ),
+ dbcCardFooter("This is the footer")
),
style = list(width = "18rem")
)
diff --git a/docs/components_page/components/card/header_footer.jl b/docs/components_page/components/card/header_footer.jl
index 074af5584..8bd27755a 100644
--- a/docs/components_page/components/card/header_footer.jl
+++ b/docs/components_page/components/card/header_footer.jl
@@ -4,10 +4,10 @@ card = dbc_card(
[
dbc_cardheader("This is the header"),
dbc_cardbody([
- html_h4("Card title", className="card-title"),
- html_p("This is some card text", className="card-text"),
+ html_h4("Card title", className = "card-title"),
+ html_p("This is some card text", className = "card-text"),
]),
dbc_cardfooter("This is the footer"),
],
- style=Dict("width" => "18rem"),
+ style = Dict("width" => "18rem"),
);
diff --git a/docs/components_page/components/card/header_footer.py b/docs/components_page/components/card/header_footer.py
index cac004320..ace520a87 100644
--- a/docs/components_page/components/card/header_footer.py
+++ b/docs/components_page/components/card/header_footer.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
card = dbc.Card(
[
diff --git a/docs/components_page/components/card/image.R b/docs/components_page/components/card/image.R
index e8916d8c4..c018ffd80 100644
--- a/docs/components_page/components/card/image.R
+++ b/docs/components_page/components/card/image.R
@@ -8,18 +8,17 @@ top_card <- dbcCard(
htmlP("This card has an image at the top", className = "card-text")
)
),
- style = list(width = "18rem")
+ style = list(width = "18rem")
)
bottom_card <- dbcCard(
list(
-
dbcCardBody(
htmlP("This has a bottom image", className = "card-text")
),
dbcCardImg(src = "/static/images/placeholder286x180.png", bottom = TRUE)
),
- style = list(width = "18rem")
+ style = list(width = "18rem")
)
cards <- dbcRow(
diff --git a/docs/components_page/components/card/image.jl b/docs/components_page/components/card/image.jl
index 2aa19a4d6..ec07fbd96 100644
--- a/docs/components_page/components/card/image.jl
+++ b/docs/components_page/components/card/image.jl
@@ -2,18 +2,18 @@ using DashBootstrapComponents, DashHtmlComponents
top_card = dbc_card(
[
- dbc_cardimg(src="/static/images/placeholder286x180.png", top=true),
- dbc_cardbody(html_p("This card has an image at the top", className="card-text")),
+ dbc_cardimg(src = "/static/images/placeholder286x180.png", top = true),
+ dbc_cardbody(html_p("This card has an image at the top", className = "card-text")),
],
- style=Dict("width" => "18rem"),
+ style = Dict("width" => "18rem"),
);
bottom_card = dbc_card(
[
- dbc_cardbody(html_p("This has a bottom image", className="card-text")),
- dbc_cardimg(src="/static/images/placeholder286x180.png", bottom=true),
+ dbc_cardbody(html_p("This has a bottom image", className = "card-text")),
+ dbc_cardimg(src = "/static/images/placeholder286x180.png", bottom = true),
],
- style=Dict("width" => "18rem"),
+ style = Dict("width" => "18rem"),
);
-cards = dbc_row([dbc_col(top_card, width="auto"), dbc_col(bottom_card, width="auto")]);
+cards = dbc_row([dbc_col(top_card, width = "auto"), dbc_col(bottom_card, width = "auto")]);
diff --git a/docs/components_page/components/card/image.py b/docs/components_page/components/card/image.py
index 9415b11d3..92bb71f71 100644
--- a/docs/components_page/components/card/image.py
+++ b/docs/components_page/components/card/image.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
top_card = dbc.Card(
[
diff --git a/docs/components_page/components/card/image_overlay.R b/docs/components_page/components/card/image_overlay.R
new file mode 100644
index 000000000..6c51ef497
--- /dev/null
+++ b/docs/components_page/components/card/image_overlay.R
@@ -0,0 +1,24 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+card <- dbcCard(
+ list(
+ dbcCardImg(src = "/static/images/placeholder286x180.png", top = TRUE),
+ dbcCardImgOverlay(
+ dbcCardBody(
+ list(
+ htmlH4("Card title", className = "card-title"),
+ htmlP(
+ paste(
+ "An example of using an image in the background of",
+ "a card."
+ ),
+ className = "card-text"
+ ),
+ dbcButton("Go somewhere", color = "primary")
+ )
+ )
+ )
+ ),
+ style = list("width" = "18rem")
+)
diff --git a/docs/components_page/components/card/image_overlay.jl b/docs/components_page/components/card/image_overlay.jl
new file mode 100644
index 000000000..6925b2b19
--- /dev/null
+++ b/docs/components_page/components/card/image_overlay.jl
@@ -0,0 +1,18 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+card = dbc_card(
+ [
+ dbc_cardimg(src = "/static/images/placeholder286x180.png", top = true),
+ dbc_cardimgoverlay(
+ dbc_cardbody([
+ html_h4("Card title", className = "card-title"),
+ html_p(
+ "An example of using an image in the background of " * "a card.",
+ className = "card-text",
+ ),
+ dbc_button("Go somewhere", color = "primary"),
+ ],),
+ ),
+ ],
+ style = Dict("width" => "18rem"),
+)
diff --git a/docs/components_page/components/card/image_overlay.py b/docs/components_page/components/card/image_overlay.py
new file mode 100644
index 000000000..710f9763a
--- /dev/null
+++ b/docs/components_page/components/card/image_overlay.py
@@ -0,0 +1,22 @@
+import dash_bootstrap_components as dbc
+from dash import html
+
+card = dbc.Card(
+ [
+ dbc.CardImg(src="/static/images/placeholder286x180.png", top=True),
+ dbc.CardImgOverlay(
+ dbc.CardBody(
+ [
+ html.H4("Card title", className="card-title"),
+ html.P(
+ "An example of using an image in the background of "
+ "a card.",
+ className="card-text",
+ ),
+ dbc.Button("Go somewhere", color="primary"),
+ ],
+ ),
+ ),
+ ],
+ style={"width": "18rem"},
+)
diff --git a/docs/components_page/components/card/layout/columns.R b/docs/components_page/components/card/layout/columns.R
deleted file mode 100644
index b215dc2de..000000000
--- a/docs/components_page/components/card/layout/columns.R
+++ /dev/null
@@ -1,61 +0,0 @@
-library(dashBootstrapComponents)
-library(dashHtmlComponents)
-
-card_content_1 <- list(
- dbcCardHeader("Card header"),
- dbcCardBody(
- list(
- htmlH5("Card title", className = "card-title"),
- htmlP(
- "This is some card content that we'll reuse",
- className = "card-text"
- )
- )
- )
-)
-
-card_content_2 <- dbcCardBody(
- list(
- htmlBlockquote(
- list(
- htmlP(
- paste(
- "A learning experience is one of those things that says,",
- "'You know that thing you just did? Don't do that.'"
- )
- ),
- htmlFooter(
- htmlSmall("Douglas Adams", className = "text-muted")
- )
- ),
- className = "blockquote"
- )
- )
-)
-
-card_content_3 <- list(
- dbcCardImg(src = "/static/images/placeholder286x180.png", top = TRUE),
- dbcCardBody(
- list(
- htmlH5("Card with image", className = "card-title"),
- htmlP("This card has an image on top, and a button below",
- className = "card-text",
- ),
- dbcButton("Click me!", color = "primary")
- )
- )
-)
-
-cards <- dbcCardColumns(
- list(
- dbcCard(card_content_1, color = "primary", inverse = TRUE),
- dbcCard(card_content_2, body = TRUE),
- dbcCard(card_content_1, color = "secondary", inverse = TRUE),
- dbcCard(card_content_3, color = "info", inverse = TRUE),
- dbcCard(card_content_1, color = "success", inverse = TRUE),
- dbcCard(card_content_1, color = "warning", inverse = TRUE),
- dbcCard(card_content_1, color = "danger", inverse = TRUE),
- dbcCard(card_content_3, color = "light"),
- dbcCard(card_content_1, color = "dark", inverse = TRUE)
- )
-)
diff --git a/docs/components_page/components/card/layout/columns.jl b/docs/components_page/components/card/layout/columns.jl
deleted file mode 100644
index 5341c6022..000000000
--- a/docs/components_page/components/card/layout/columns.jl
+++ /dev/null
@@ -1,47 +0,0 @@
-using DashBootstrapComponents, DashHtmlComponents
-
-card_content_1 = [
- dbc_cardheader("Card header"),
- dbc_cardbody([
- html_h5("Card title", className="card-title"),
- html_p("This is some card content that we'll reuse", className="card-text"),
- ]),
-];
-
-card_content_2 = dbc_cardbody([
- html_blockquote(
- [
- html_p(
- "A learning experience is one of those things that says, " *
- "'You know that thing you just did? Don't do that.'",
- ),
- html_footer(html_small("Douglas Adams", className="text-muted")),
- ],
- className="blockquote",
- ),
-]);
-
-card_content_3 = [
- dbc_cardimg(src="/static/images/placeholder286x180.png", top=true),
- dbc_cardbody([
- html_h5("Card with image", className="card-title"),
- html_p(
- "This card has an image on top, and a button below",
- className="card-text",
- ),
- dbc_button("Click me!", color="primary"),
- ]),
-];
-
-
-cards = dbc_cardcolumns([
- dbc_card(card_content_1, color="primary", inverse=true),
- dbc_card(card_content_2, body=true),
- dbc_card(card_content_1, color="secondary", inverse=true),
- dbc_card(card_content_3, color="info", inverse=true),
- dbc_card(card_content_1, color="success", inverse=true),
- dbc_card(card_content_1, color="warning", inverse=true),
- dbc_card(card_content_1, color="danger", inverse=true),
- dbc_card(card_content_3, color="light"),
- dbc_card(card_content_1, color="dark", inverse=true),
-]);
diff --git a/docs/components_page/components/card/layout/columns.py b/docs/components_page/components/card/layout/columns.py
deleted file mode 100644
index 323fb08cf..000000000
--- a/docs/components_page/components/card/layout/columns.py
+++ /dev/null
@@ -1,61 +0,0 @@
-import dash_bootstrap_components as dbc
-import dash_html_components as html
-
-card_content_1 = [
- dbc.CardHeader("Card header"),
- dbc.CardBody(
- [
- html.H5("Card title", className="card-title"),
- html.P(
- "This is some card content that we'll reuse",
- className="card-text",
- ),
- ]
- ),
-]
-
-card_content_2 = dbc.CardBody(
- [
- html.Blockquote(
- [
- html.P(
- "A learning experience is one of those things that says, "
- "'You know that thing you just did? Don't do that.'"
- ),
- html.Footer(
- html.Small("Douglas Adams", className="text-muted")
- ),
- ],
- className="blockquote",
- )
- ]
-)
-
-card_content_3 = [
- dbc.CardImg(src="/static/images/placeholder286x180.png", top=True),
- dbc.CardBody(
- [
- html.H5("Card with image", className="card-title"),
- html.P(
- "This card has an image on top, and a button below",
- className="card-text",
- ),
- dbc.Button("Click me!", color="primary"),
- ]
- ),
-]
-
-
-cards = dbc.CardColumns(
- [
- dbc.Card(card_content_1, color="primary", inverse=True),
- dbc.Card(card_content_2, body=True),
- dbc.Card(card_content_1, color="secondary", inverse=True),
- dbc.Card(card_content_3, color="info", inverse=True),
- dbc.Card(card_content_1, color="success", inverse=True),
- dbc.Card(card_content_1, color="warning", inverse=True),
- dbc.Card(card_content_1, color="danger", inverse=True),
- dbc.Card(card_content_3, color="light"),
- dbc.Card(card_content_1, color="dark", inverse=True),
- ]
-)
diff --git a/docs/components_page/components/card/layout/deck.R b/docs/components_page/components/card/layout/deck.R
deleted file mode 100644
index ffe9a60fe..000000000
--- a/docs/components_page/components/card/layout/deck.R
+++ /dev/null
@@ -1,57 +0,0 @@
-library(dashBootstrapComponents)
-library(dashHtmlComponents)
-
-cards <- dbcCardDeck(
- list(
- dbcCard(
- dbcCardBody(
- list(
- htmlH5("Card 1", className = "card-title"),
- htmlP(
- paste(
- "This card has some text content, which is a little",
- "bit longer than the second card."
- ),
- className = "card-text"
- ),
- dbcButton(
- "Click here", color = "success", className = "mt-auto"
- )
- )
- )
- ),
- dbcCard(
- dbcCardBody(
- list(
- htmlH5("Card 2", className = "card-title"),
- htmlP(
- "This card has some text content.",
- className = "card-text",
- ),
- dbcButton(
- "Click here", color = "warning", className = "mt-auto"
- )
- )
- )
- ),
- dbcCard(
- dbcCardBody(
- list(
- htmlH5("Card 3", className = "card-title"),
- htmlP(
- paste(
- "This card has some text content, which is longer",
- "than both of the other two cards, in order to",
- "demonstrate the equal height property of cards in a",
- "card group."
- ),
- className = "card-text",
- ),
- dbcButton(
- "Click here", color = "danger", className = "mt-auto"
- )
- )
- )
- )
- )
-)
diff --git a/docs/components_page/components/card/layout/deck.jl b/docs/components_page/components/card/layout/deck.jl
deleted file mode 100644
index ec210ec83..000000000
--- a/docs/components_page/components/card/layout/deck.jl
+++ /dev/null
@@ -1,35 +0,0 @@
-using DashBootstrapComponents, DashHtmlComponents
-
-cards = dbc_carddeck([
- dbc_card(
- dbc_cardbody([
- html_h5("Card 1", className="card-title"),
- html_p(
- "This card has some text content, which is a little " *
- "bit longer than the second card.",
- className="card-text",
- ),
- dbc_button("Click here", color="success", className="mt-auto"),
- ]),
- ),
- dbc_card(
- dbc_cardbody([
- html_h5("Card 2", className="card-title"),
- html_p("This card has some text content.", className="card-text"),
- dbc_button("Click here", color="warning", className="mt-auto"),
- ]),
- ),
- dbc_card(
- dbc_cardbody([
- html_h5("Card 3", className="card-title"),
- html_p(
- "This card has some text content, which is longer " *
- "than both of the other two cards, in order to " *
- "demonstrate the equal height property of cards in a " *
- "card group.",
- className="card-text",
- ),
- dbc_button("Click here", color="danger", className="mt-auto"),
- ]),
- ),
-]);
diff --git a/docs/components_page/components/card/layout/deck.py b/docs/components_page/components/card/layout/deck.py
deleted file mode 100644
index 82d468f10..000000000
--- a/docs/components_page/components/card/layout/deck.py
+++ /dev/null
@@ -1,53 +0,0 @@
-import dash_bootstrap_components as dbc
-import dash_html_components as html
-
-cards = dbc.CardDeck(
- [
- dbc.Card(
- dbc.CardBody(
- [
- html.H5("Card 1", className="card-title"),
- html.P(
- "This card has some text content, which is a little "
- "bit longer than the second card.",
- className="card-text",
- ),
- dbc.Button(
- "Click here", color="success", className="mt-auto"
- ),
- ]
- )
- ),
- dbc.Card(
- dbc.CardBody(
- [
- html.H5("Card 2", className="card-title"),
- html.P(
- "This card has some text content.",
- className="card-text",
- ),
- dbc.Button(
- "Click here", color="warning", className="mt-auto"
- ),
- ]
- )
- ),
- dbc.Card(
- dbc.CardBody(
- [
- html.H5("Card 3", className="card-title"),
- html.P(
- "This card has some text content, which is longer "
- "than both of the other two cards, in order to "
- "demonstrate the equal height property of cards in a "
- "card group.",
- className="card-text",
- ),
- dbc.Button(
- "Click here", color="danger", className="mt-auto"
- ),
- ]
- )
- ),
- ]
-)
diff --git a/docs/components_page/components/card/layout/group.R b/docs/components_page/components/card/layout/group.R
index 7f2fe49e1..a0a01c6ba 100644
--- a/docs/components_page/components/card/layout/group.R
+++ b/docs/components_page/components/card/layout/group.R
@@ -15,7 +15,8 @@ cards <- dbcCardGroup(
className = "card-text",
),
dbcButton(
- "Click here", color = "success", className = "mt-auto"
+ "Click here",
+ color = "success", className = "mt-auto"
)
)
)
@@ -29,7 +30,8 @@ cards <- dbcCardGroup(
className = "card-text",
),
dbcButton(
- "Click here", color = "warning", className = "mt-auto"
+ "Click here",
+ color = "warning", className = "mt-auto"
)
)
)
@@ -48,7 +50,8 @@ cards <- dbcCardGroup(
className = "card-text",
),
dbcButton(
- "Click here", color = "danger", className = "mt-auto"
+ "Click here",
+ color = "danger", className = "mt-auto"
)
)
)
diff --git a/docs/components_page/components/card/layout/group.jl b/docs/components_page/components/card/layout/group.jl
index cd4aa9be6..d76ada7a8 100644
--- a/docs/components_page/components/card/layout/group.jl
+++ b/docs/components_page/components/card/layout/group.jl
@@ -3,33 +3,33 @@ using DashBootstrapComponents, DashHtmlComponents
cards = dbc_cardgroup([
dbc_card(
dbc_cardbody([
- html_h5("Card 1", className="card-title"),
+ html_h5("Card 1", className = "card-title"),
html_p(
"This card has some text content, which is a little " *
"bit longer than the second card.",
- className="card-text",
+ className = "card-text",
),
- dbc_button("Click here", color="success", className="mt-auto"),
+ dbc_button("Click here", color = "success", className = "mt-auto"),
]),
),
dbc_card(
dbc_cardbody([
- html_h5("Card 2", className="card-title"),
- html_p("This card has some text content.", className="card-text"),
- dbc_button("Click here", color="warning", className="mt-auto"),
+ html_h5("Card 2", className = "card-title"),
+ html_p("This card has some text content.", className = "card-text"),
+ dbc_button("Click here", color = "warning", className = "mt-auto"),
]),
),
dbc_card(
dbc_cardbody([
- html_h5("Card 3", className="card-title"),
+ html_h5("Card 3", className = "card-title"),
html_p(
"This card has some text content, which is longer " *
"than both of the other two cards, in order to " *
"demonstrate the equal height property of cards in a " *
"card group.",
- className="card-text",
+ className = "card-text",
),
- dbc_button("Click here", color="danger", className="mt-auto"),
+ dbc_button("Click here", color = "danger", className = "mt-auto"),
]),
),
]);
diff --git a/docs/components_page/components/card/layout/group.py b/docs/components_page/components/card/layout/group.py
index c2b17a3f6..85293f700 100644
--- a/docs/components_page/components/card/layout/group.py
+++ b/docs/components_page/components/card/layout/group.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
cards = dbc.CardGroup(
[
diff --git a/docs/components_page/components/card/list_group.R b/docs/components_page/components/card/list_group.R
index 9a22d4161..4f8dcd3ad 100644
--- a/docs/components_page/components/card/list_group.R
+++ b/docs/components_page/components/card/list_group.R
@@ -11,5 +11,5 @@ card <- dbcCard(
),
flush = TRUE
),
- style = list(width = "18rem")
+ style = list(width = "18rem")
)
diff --git a/docs/components_page/components/card/list_group.jl b/docs/components_page/components/card/list_group.jl
index fc94d54b5..d9aa5ec31 100644
--- a/docs/components_page/components/card/list_group.jl
+++ b/docs/components_page/components/card/list_group.jl
@@ -7,7 +7,7 @@ card = dbc_card(
dbc_listgroupitem("Item 2"),
dbc_listgroupitem("Item 3"),
],
- flush=true,
+ flush = true,
),
- style=Dict("width" => "18rem"),
+ style = Dict("width" => "18rem"),
);
diff --git a/docs/components_page/components/card/outline.jl b/docs/components_page/components/card/outline.jl
index d8c6e86d2..afe5f6156 100644
--- a/docs/components_page/components/card/outline.jl
+++ b/docs/components_page/components/card/outline.jl
@@ -3,32 +3,32 @@ using DashBootstrapComponents, DashHtmlComponents
card_content = [
dbc_cardheader("Card header"),
dbc_cardbody([
- html_h5("Card title", className="card-title"),
- html_p("This is some card content that we'll reuse", className="card-text"),
+ html_h5("Card title", className = "card-title"),
+ html_p("This is some card content that we'll reuse", className = "card-text"),
]),
];
row_1 = dbc_row(
[
- dbc_col(dbc_card(card_content, color="primary", outline=true)),
- dbc_col(dbc_card(card_content, color="secondary", outline=true)),
- dbc_col(dbc_card(card_content, color="info", outline=true)),
+ dbc_col(dbc_card(card_content, color = "primary", outline = true)),
+ dbc_col(dbc_card(card_content, color = "secondary", outline = true)),
+ dbc_col(dbc_card(card_content, color = "info", outline = true)),
],
- className="mb-4",
+ className = "mb-4",
);
row_2 = dbc_row(
[
- dbc_col(dbc_card(card_content, color="success", outline=true)),
- dbc_col(dbc_card(card_content, color="warning", outline=true)),
- dbc_col(dbc_card(card_content, color="danger", outline=true)),
+ dbc_col(dbc_card(card_content, color = "success", outline = true)),
+ dbc_col(dbc_card(card_content, color = "warning", outline = true)),
+ dbc_col(dbc_card(card_content, color = "danger", outline = true)),
],
- className="mb-4",
+ className = "mb-4",
);
row_3 = dbc_row([
- dbc_col(dbc_card(card_content, color="light", outline=true)),
- dbc_col(dbc_card(card_content, color="dark", outline=true)),
+ dbc_col(dbc_card(card_content, color = "light", outline = true)),
+ dbc_col(dbc_card(card_content, color = "dark", outline = true)),
]);
cards = html_div([row_1, row_2, row_3]);
diff --git a/docs/components_page/components/card/outline.py b/docs/components_page/components/card/outline.py
index 56e8c050e..13e2badaf 100644
--- a/docs/components_page/components/card/outline.py
+++ b/docs/components_page/components/card/outline.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
card_content = [
dbc.CardHeader("Card header"),
diff --git a/docs/components_page/components/card/simple.R b/docs/components_page/components/card/simple.R
index ae2bb31b4..e8c789bfb 100644
--- a/docs/components_page/components/card/simple.R
+++ b/docs/components_page/components/card/simple.R
@@ -8,11 +8,11 @@ card <- dbcCard(
list(
htmlH4("Card title", className = "card-title"),
htmlP(
- paste(
- "Some quick example text to build on the card title and",
- "make up the bulk of the card's content."
- ),
- className = "card-text"
+ paste(
+ "Some quick example text to build on the card title and",
+ "make up the bulk of the card's content."
+ ),
+ className = "card-text"
),
dbcButton("Go somewhere", color = "primary")
)
diff --git a/docs/components_page/components/card/simple.jl b/docs/components_page/components/card/simple.jl
index e75dfbab8..17d20997f 100644
--- a/docs/components_page/components/card/simple.jl
+++ b/docs/components_page/components/card/simple.jl
@@ -2,16 +2,16 @@ using DashBootstrapComponents, DashHtmlComponents
card = dbc_card(
[
- dbc_cardimg(src="/static/images/placeholder286x180.png", top=true),
+ dbc_cardimg(src = "/static/images/placeholder286x180.png", top = true),
dbc_cardbody([
- html_h4("Card title", className="card-title"),
+ html_h4("Card title", className = "card-title"),
html_p(
"Some quick example text to build on the card title and " *
"make up the bulk of the card's content.",
- className="card-text",
+ className = "card-text",
),
- dbc_button("Go somewhere", color="primary"),
+ dbc_button("Go somewhere", color = "primary"),
]),
],
- style=Dict("width" => "18rem"),
+ style = Dict("width" => "18rem"),
);
diff --git a/docs/components_page/components/card/simple.py b/docs/components_page/components/card/simple.py
index f040d6be8..180efb20b 100644
--- a/docs/components_page/components/card/simple.py
+++ b/docs/components_page/components/card/simple.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
card = dbc.Card(
[
diff --git a/docs/components_page/components/card/sizing/css.jl b/docs/components_page/components/card/sizing/css.jl
index f1fd82bfd..240af9d83 100644
--- a/docs/components_page/components/card/sizing/css.jl
+++ b/docs/components_page/components/card/sizing/css.jl
@@ -2,11 +2,11 @@ using DashBootstrapComponents, DashHtmlComponents
cards = dbc_card(
dbc_cardbody([
- html_h5("Custom CSS", className="card-title"),
+ html_h5("Custom CSS", className = "card-title"),
html_p(
"This card has inline styles applied controlling the width. " *
"You could also apply the same styles with a custom CSS class.",
),
]),
- style=Dict("width" => "18rem"),
+ style = Dict("width" => "18rem"),
);
diff --git a/docs/components_page/components/card/sizing/css.py b/docs/components_page/components/card/sizing/css.py
index 15e883e66..ce561e269 100644
--- a/docs/components_page/components/card/sizing/css.py
+++ b/docs/components_page/components/card/sizing/css.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
cards = dbc.Card(
dbc.CardBody(
diff --git a/docs/components_page/components/card/sizing/grid.jl b/docs/components_page/components/card/sizing/grid.jl
index 96fd343c8..fd6376a89 100644
--- a/docs/components_page/components/card/sizing/grid.jl
+++ b/docs/components_page/components/card/sizing/grid.jl
@@ -2,23 +2,23 @@ using DashBootstrapComponents, DashHtmlComponents
first_card = dbc_card(
dbc_cardbody([
- html_h5("Card title", className="card-title"),
+ html_h5("Card title", className = "card-title"),
html_p("This card has some text content, but not much else"),
- dbc_button("Go somewhere", color="primary"),
+ dbc_button("Go somewhere", color = "primary"),
]),
);
second_card = dbc_card(
dbc_cardbody([
- html_h5("Card title", className="card-title"),
+ html_h5("Card title", className = "card-title"),
html_p(
"This card also has some text content and not much else, but " *
"it is twice as wide as the first card.",
),
- dbc_button("Go somewhere", color="primary"),
+ dbc_button("Go somewhere", color = "primary"),
]),
);
-cards = dbc_row([dbc_col(first_card, width=4), dbc_col(second_card, width=8)]);
+cards = dbc_row([dbc_col(first_card, width = 4), dbc_col(second_card, width = 8)]);
diff --git a/docs/components_page/components/card/sizing/grid.py b/docs/components_page/components/card/sizing/grid.py
index 9fdaec7a6..dfc4313f8 100644
--- a/docs/components_page/components/card/sizing/grid.py
+++ b/docs/components_page/components/card/sizing/grid.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
first_card = dbc.Card(
dbc.CardBody(
diff --git a/docs/components_page/components/card/sizing/horizontal.R b/docs/components_page/components/card/sizing/horizontal.R
new file mode 100644
index 000000000..871083048
--- /dev/null
+++ b/docs/components_page/components/card/sizing/horizontal.R
@@ -0,0 +1,41 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+card <- dbcCard(
+ list(
+ dbcRow(
+ list(
+ dbcCol(
+ dbcCardImg(
+ src = "/static/images/placeholder286x180.png",
+ className = "img-fluid rounded-start"
+ ),
+ className = "col-md-4"
+ ),
+ dbcCol(
+ dbcCardBody(
+ list(
+ htmlH4("Card title", className = "card-title"),
+ htmlP(
+ paste(
+ "This is a wider card with supporting text",
+ "below as a natural lead-in to additional",
+ "content. This content is a bit longer."
+ ),
+ className = "card-text"
+ ),
+ htmlSmall(
+ "Last updated 3 mins ago",
+ className = "card-text text-muted"
+ )
+ )
+ ),
+ className = "col-md-8"
+ )
+ ),
+ className = "g-0 d-flex align-items-center"
+ )
+ ),
+ className = "mb-3",
+ style = list("maxWidth" = "540px")
+)
diff --git a/docs/components_page/components/card/sizing/horizontal.jl b/docs/components_page/components/card/sizing/horizontal.jl
new file mode 100644
index 000000000..9f5ddb50d
--- /dev/null
+++ b/docs/components_page/components/card/sizing/horizontal.jl
@@ -0,0 +1,36 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+card = dbc_card(
+ [
+ dbc_row(
+ [
+ dbc_col(
+ dbc_cardimg(
+ src = "/static/images/placeholder286x180.png",
+ className = "img-fluid rounded-start",
+ ),
+ className = "col-md-4",
+ ),
+ dbc_col(
+ dbc_cardbody([
+ html_h4("Card title", className = "card-title"),
+ html_p(
+ "This is a wider card with supporting text " *
+ "below as a natural lead-in to additional " *
+ "content. This content is a bit longer.",
+ className = "card-text",
+ ),
+ html_small(
+ "Last updated 3 mins ago",
+ className = "card-text text-muted",
+ ),
+ ]),
+ className = "col-md-8",
+ ),
+ ],
+ className = "g-0 d-flex align-items-center",
+ ),
+ ],
+ className = "mb-3",
+ style = Dict("maxWidth" => "540px"),
+)
diff --git a/docs/components_page/components/card/sizing/horizontal.py b/docs/components_page/components/card/sizing/horizontal.py
new file mode 100644
index 000000000..0587fef1a
--- /dev/null
+++ b/docs/components_page/components/card/sizing/horizontal.py
@@ -0,0 +1,39 @@
+import dash_bootstrap_components as dbc
+from dash import html
+
+card = dbc.Card(
+ [
+ dbc.Row(
+ [
+ dbc.Col(
+ dbc.CardImg(
+ src="/static/images/placeholder286x180.png",
+ className="img-fluid rounded-start",
+ ),
+ className="col-md-4",
+ ),
+ dbc.Col(
+ dbc.CardBody(
+ [
+ html.H4("Card title", className="card-title"),
+ html.P(
+ "This is a wider card with supporting text "
+ "below as a natural lead-in to additional "
+ "content. This content is a bit longer.",
+ className="card-text",
+ ),
+ html.Small(
+ "Last updated 3 mins ago",
+ className="card-text text-muted",
+ ),
+ ]
+ ),
+ className="col-md-8",
+ ),
+ ],
+ className="g-0 d-flex align-items-center",
+ )
+ ],
+ className="mb-3",
+ style={"maxWidth": "540px"},
+)
diff --git a/docs/components_page/components/card/sizing/utility.jl b/docs/components_page/components/card/sizing/utility.jl
index 9649d6ad5..4eb9b8468 100644
--- a/docs/components_page/components/card/sizing/utility.jl
+++ b/docs/components_page/components/card/sizing/utility.jl
@@ -3,30 +3,30 @@ using DashBootstrapComponents, DashHtmlComponents
cards = html_div([
dbc_card(
dbc_cardbody([
- html_h5("75% width card", className="card-title"),
+ html_h5("75% width card", className = "card-title"),
html_p(
[
"This card uses the ",
html_code("w-75"),
" class to set the width to 75%",
],
- className="card-text",
+ className = "card-text",
),
]),
- className="w-75 mb-3",
+ className = "w-75 mb-3",
),
dbc_card(
dbc_cardbody([
- html_h5("50% width card", className="card-title"),
+ html_h5("50% width card", className = "card-title"),
html_p(
[
"This card uses the ",
html_code("w-50"),
" class to set the width to 50%",
],
- className="card-text",
+ className = "card-text",
),
]),
- className="w-50",
+ className = "w-50",
),
]);
diff --git a/docs/components_page/components/card/sizing/utility.py b/docs/components_page/components/card/sizing/utility.py
index 4af2a73a9..b2d0bd228 100644
--- a/docs/components_page/components/card/sizing/utility.py
+++ b/docs/components_page/components/card/sizing/utility.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
cards = html.Div(
[
diff --git a/docs/components_page/components/card/ttl.R b/docs/components_page/components/card/ttl.R
index 72bfac506..b061cee4a 100644
--- a/docs/components_page/components/card/ttl.R
+++ b/docs/components_page/components/card/ttl.R
@@ -7,15 +7,15 @@ card <- dbcCard(
htmlH4("Title", className = "card-title"),
htmlH6("Card subtitle", className = "card-subtitle"),
htmlP(
- paste(
- "Some quick example text to build on the card title and",
- "make up the bulk of the card's content."
- ),
- className = "card-text",
+ paste(
+ "Some quick example text to build on the card title and",
+ "make up the bulk of the card's content."
+ ),
+ className = "card-text",
),
dbcCardLink("Card link", href = "#"),
dbcCardLink("External link", href = "https://google.com")
)
),
- style = list(width = "18rem")
+ style = list(width = "18rem")
)
diff --git a/docs/components_page/components/card/ttl.jl b/docs/components_page/components/card/ttl.jl
index 05e93163c..caae09fca 100644
--- a/docs/components_page/components/card/ttl.jl
+++ b/docs/components_page/components/card/ttl.jl
@@ -2,15 +2,15 @@ using DashBootstrapComponents, DashHtmlComponents
card = dbc_card(
dbc_cardbody([
- html_h4("Title", className="card-title"),
- html_h6("Card subtitle", className="card-subtitle"),
+ html_h4("Title", className = "card-title"),
+ html_h6("Card subtitle", className = "card-subtitle"),
html_p(
"Some quick example text to build on the card title and make " *
"up the bulk of the card's content.",
- className="card-text",
+ className = "card-text",
),
- dbc_cardlink("Card link", href="#"),
- dbc_cardlink("External link", href="https://google.com"),
+ dbc_cardlink("Card link", href = "#"),
+ dbc_cardlink("External link", href = "https://google.com"),
]),
- style=Dict("width" => "18rem"),
+ style = Dict("width" => "18rem"),
);
diff --git a/docs/components_page/components/card/ttl.py b/docs/components_page/components/card/ttl.py
index 00d88b842..b05ab15e8 100644
--- a/docs/components_page/components/card/ttl.py
+++ b/docs/components_page/components/card/ttl.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
card = dbc.Card(
dbc.CardBody(
diff --git a/docs/components_page/components/carousel.md b/docs/components_page/components/carousel.md
index 91bb8a20d..8ece874c2 100644
--- a/docs/components_page/components/carousel.md
+++ b/docs/components_page/components/carousel.md
@@ -3,12 +3,13 @@ title: Carousel
lead: Use the Carousel component to create a slideshow that cycles through a series of content.
---
-## Simple example
+## Examples
This is a carousel with slides only. The default cycle time is 5000ms, but here we use the `interval` prop to set the cycle time to 2000ms. Note that hovering over a slide pauses the slideshow.
{{example:components/carousel/simple.py:carousel}}
+
## With controls
Here we add the previous and next controls. The default is for the slideshow to autoplay after the user manually cycles the first item. Set `ride="carousel"` to start the slideshow on page load.
@@ -29,6 +30,11 @@ You can add headings or captions to the slide by including the text in the `item
{{example:components/carousel/captions.py:carousel}}
+## Dark variant
+
+Add `variant="dark"` to the Carousel for darker controls, indicators, and captions.
+
+{{example:components/carousel/dark.py:carousel}}
## Crossfade
@@ -42,6 +48,5 @@ Add `className="carousel-fade"` to your carousel to animate slides with a fade t
Control which slide number is displayed by using the `active_index` in a callback. This slideshow is being controlled by `dbc.RadioItems`
{{example:components/carousel/callback.py:carousel}}
-
+
{{apidoc:src/components/Carousel.js}}
-
\ No newline at end of file
diff --git a/docs/components_page/components/carousel/callback.R b/docs/components_page/components/carousel/callback.R
index 0ddfdab60..fadb7c083 100644
--- a/docs/components_page/components/carousel/callback.R
+++ b/docs/components_page/components/carousel/callback.R
@@ -5,17 +5,17 @@ carousel <- htmlDiv(
list(
dbcCarousel(
id = "carousel",
- items = list (
+ items = list(
list(key = "1", src = "/static/images/slide1.svg"),
list(key = "2", src = "/static/images/slide2.svg"),
list(key = "3", src = "/static/images/slide3.svg")
),
controls = FALSE,
indicators = FALSE,
- interval = FALSE
+ interval = NULL
),
dbcRadioItems(
- id="slide-number",
+ id = "slide-number",
options = list(
list(label = "Slide 1", value = 0),
list(label = "Slide 2", value = 1),
diff --git a/docs/components_page/components/carousel/callback.jl b/docs/components_page/components/carousel/callback.jl
index 6ae07e65c..e28718327 100644
--- a/docs/components_page/components/carousel/callback.jl
+++ b/docs/components_page/components/carousel/callback.jl
@@ -1,34 +1,29 @@
using DashBootstrapComponents, DashHtmlComponents
carousel = html_div([
- dbc_carousel(
- id="carousel",
- items=[
+ dbc_carousel(
+ id = "carousel",
+ items = [
Dict("key" => "1", "src" => "/static/images/slide1.svg"),
Dict("key" => "2", "src" => "/static/images/slide2.svg"),
Dict("key" => "3", "src" => "/static/images/slide3.svg"),
],
- controls=false,
- indicators=false,
- interval=false,
+ controls = false,
+ indicators = false,
+ interval = nothing,
),
-
dbc_radioitems(
- id="slide-number",
- options=[
+ id = "slide-number",
+ options = [
Dict("label" => "Slide 1", "value" => 0),
Dict("label" => "Slide 2", "value" => 1),
Dict("label" => "Slide 3", "value" => 2),
],
- value=0,
- inline=true,
+ value = 0,
+ inline = true,
),
]);
-callback!(
- app,
- Output("carousel", "active_index"),
- Input("slide-number", "value"),
-) do idx
+callback!(app, Output("carousel", "active_index"), Input("slide-number", "value")) do idx
return idx
end;
diff --git a/docs/components_page/components/carousel/callback.py b/docs/components_page/components/carousel/callback.py
index 4c8c803db..37e770076 100644
--- a/docs/components_page/components/carousel/callback.py
+++ b/docs/components_page/components/carousel/callback.py
@@ -1,6 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output
+from dash import Input, Output, html
carousel = html.Div(
[
@@ -13,7 +12,7 @@
],
controls=False,
indicators=False,
- interval=False,
+ interval=None,
),
dbc.RadioItems(
id="slide-number",
diff --git a/docs/components_page/components/carousel/captions.R b/docs/components_page/components/carousel/captions.R
index 55ecc5c4e..377f1804f 100644
--- a/docs/components_page/components/carousel/captions.R
+++ b/docs/components_page/components/carousel/captions.R
@@ -22,7 +22,3 @@ carousel <- dbcCarousel(
)
)
)
-
-
-
-
diff --git a/docs/components_page/components/carousel/captions.jl b/docs/components_page/components/carousel/captions.jl
index 922e0695b..e7cf2212e 100644
--- a/docs/components_page/components/carousel/captions.jl
+++ b/docs/components_page/components/carousel/captions.jl
@@ -1,7 +1,7 @@
using DashBootstrapComponents
carousel = dbc_carousel(
- items=[
+ items = [
Dict(
"key" => "1",
"src" => "/static/images/slide1.svg",
@@ -20,5 +20,5 @@ carousel = dbc_carousel(
"header" => "",
"caption" => "This slide has a caption only",
),
- ]
+ ],
);
diff --git a/docs/components_page/components/carousel/controls.jl b/docs/components_page/components/carousel/controls.jl
index fc986f391..e3e77ba69 100644
--- a/docs/components_page/components/carousel/controls.jl
+++ b/docs/components_page/components/carousel/controls.jl
@@ -1,11 +1,11 @@
using DashBootstrapComponents
carousel = dbc_carousel(
- items=[
+ items = [
Dict("key" => "1", "src" => "/static/images/slide1.svg"),
Dict("key" => "2", "src" => "/static/images/slide2.svg"),
Dict("key" => "3", "src" => "/static/images/slide3.svg"),
],
- controls=true,
- indicators=false,
+ controls = true,
+ indicators = false,
);
diff --git a/docs/components_page/components/carousel/crossfade.jl b/docs/components_page/components/carousel/crossfade.jl
index e162c772d..148f20748 100644
--- a/docs/components_page/components/carousel/crossfade.jl
+++ b/docs/components_page/components/carousel/crossfade.jl
@@ -1,10 +1,10 @@
using DashBootstrapComponents
carousel = dbc_carousel(
- items=[
+ items = [
Dict("key" => "1", "src" => "/static/images/slide1.svg"),
Dict("key" => "2", "src" => "/static/images/slide2.svg"),
Dict("key" => "3", "src" => "/static/images/slide3.svg"),
],
- className="carousel-fade",
+ className = "carousel-fade",
);
diff --git a/docs/components_page/components/carousel/dark.R b/docs/components_page/components/carousel/dark.R
new file mode 100644
index 000000000..934fbc0e4
--- /dev/null
+++ b/docs/components_page/components/carousel/dark.R
@@ -0,0 +1,25 @@
+library(dashBootstrapComponents)
+
+carousel <- dbcCarousel(
+ items = list(
+ list(
+ key = "1",
+ src = "/static/images/slide1.svg",
+ header = "With header ",
+ caption = "and caption"
+ ),
+ list(
+ key = "2",
+ src = "/static/images/slide2.svg",
+ header = "With header only",
+ caption = ""
+ ),
+ list(
+ key = "3",
+ src = "/static/images/slide3.svg",
+ header = "",
+ caption = "This slide has a caption only"
+ )
+ ),
+ variant = "dark"
+)
diff --git a/docs/components_page/components/carousel/dark.jl b/docs/components_page/components/carousel/dark.jl
new file mode 100644
index 000000000..d20fcaced
--- /dev/null
+++ b/docs/components_page/components/carousel/dark.jl
@@ -0,0 +1,25 @@
+using DashBootstrapComponents
+
+carousel = dbc_carousel(
+ items = [
+ Dict(
+ "key" => "1",
+ "src" => "/static/images/slide1.svg",
+ "header" => "With header ",
+ "caption" => "and caption",
+ ),
+ Dict(
+ "key" => "2",
+ "src" => "/static/images/slide2.svg",
+ "header" => "With header only",
+ "caption" => "",
+ ),
+ Dict(
+ "key" => "3",
+ "src" => "/static/images/slide3.svg",
+ "header" => "",
+ "caption" => "This slide has a caption only",
+ ),
+ ],
+ variant = "dark",
+);
diff --git a/docs/components_page/components/carousel/dark.py b/docs/components_page/components/carousel/dark.py
new file mode 100644
index 000000000..7d66edb20
--- /dev/null
+++ b/docs/components_page/components/carousel/dark.py
@@ -0,0 +1,25 @@
+import dash_bootstrap_components as dbc
+
+carousel = dbc.Carousel(
+ items=[
+ {
+ "key": "1",
+ "src": "/static/images/slide1.svg",
+ "header": "With header ",
+ "caption": "and caption",
+ },
+ {
+ "key": "2",
+ "src": "/static/images/slide2.svg",
+ "header": "With header only",
+ "caption": "",
+ },
+ {
+ "key": "3",
+ "src": "/static/images/slide3.svg",
+ "header": "",
+ "caption": "This slide has a caption only",
+ },
+ ],
+ variant="dark",
+)
diff --git a/docs/components_page/components/carousel/indicators.jl b/docs/components_page/components/carousel/indicators.jl
index 8a02d113a..5015c5fb5 100644
--- a/docs/components_page/components/carousel/indicators.jl
+++ b/docs/components_page/components/carousel/indicators.jl
@@ -1,11 +1,11 @@
using DashBootstrapComponents
carousel = dbc_carousel(
- items=[
+ items = [
Dict("key" => "1", "src" => "/static/images/slide1.svg"),
Dict("key" => "2", "src" => "/static/images/slide2.svg"),
Dict("key" => "3", "src" => "/static/images/slide3.svg"),
],
- controls=true,
- indicators=true,
+ controls = true,
+ indicators = true,
);
diff --git a/docs/components_page/components/carousel/simple.jl b/docs/components_page/components/carousel/simple.jl
index 7e144543c..506391eb0 100644
--- a/docs/components_page/components/carousel/simple.jl
+++ b/docs/components_page/components/carousel/simple.jl
@@ -1,13 +1,13 @@
using DashBootstrapComponents
carousel = dbc_carousel(
- items=[
+ items = [
Dict("key" => "1", "src" => "/static/images/slide1.svg"),
Dict("key" => "2", "src" => "/static/images/slide2.svg"),
Dict("key" => "3", "src" => "/static/images/slide3.svg"),
],
- controls=false,
- indicators=false,
- interval=2000,
- ride="carousel",
+ controls = false,
+ indicators = false,
+ interval = 2000,
+ ride = "carousel",
);
diff --git a/docs/components_page/components/collapse.md b/docs/components_page/components/collapse.md
index 098e8780b..2997940a2 100644
--- a/docs/components_page/components/collapse.md
+++ b/docs/components_page/components/collapse.md
@@ -3,7 +3,7 @@ title: Collapse
lead: Toggle the visibility of content in your apps using the `Collapse` component.
---
-## Simple example
+## Examples
The `Collapse` component can be used to show and hide content in your apps. Simply set `is_open=True` to show the content, and `is_open=False` to hide it. This simple example uses a button click to toggle the `is_open` prop.
@@ -15,10 +15,4 @@ You can write arbitrarily complex callbacks to control the behaviour of your `Co
{{example:components/collapse/multiple.py:collapses}}
-## Accordion
-
-You can replicate the accordion example in the [Bootstrap docs](https://getbootstrap.com/docs/4.3/components/collapse/#accordion-example) by writing a callback with multiple outputs.
-
-{{example:components/collapse/accordion.py:accordion}}
-
{{apidoc:src/components/Collapse.js}}
diff --git a/docs/components_page/components/collapse/accordion.R b/docs/components_page/components/collapse/accordion.R
deleted file mode 100644
index ea56f1df7..000000000
--- a/docs/components_page/components/collapse/accordion.R
+++ /dev/null
@@ -1,67 +0,0 @@
-library(dashBootstrapComponents)
-library(dashHtmlComponents)
-
-make_item <- function(i) {
- # we use this function to make the example items to avoid code duplication
- return(
- dbcCard(
- list(
- dbcCardHeader(
- htmlH2(
- dbcButton(
- sprintf("Collapsible group #%d", i),
- color = "link",
- id = sprintf("group-%d-toggle", i),
- n_clicks = 0
- )
- )
- ),
- dbcCollapse(
- dbcCardBody(sprintf("This is the content of group %d...", i)),
- id = sprintf("collapse-%d", i),
- is_open = FALSE
- )
- )
- )
- )
-}
-
-accordion <- htmlDiv(
- list(
- make_item(1), make_item(2), make_item(3)
- ),
- className = "accordion"
-)
-
-
-app$callback(
- list(
- output("collapse-1", "is_open"),
- output("collapse-2", "is_open"),
- output("collapse-3", "is_open")
- ),
- list(
- input("group-1-toggle", "n_clicks"),
- input("group-2-toggle", "n_clicks"),
- input("group-3-toggle", "n_clicks"),
- state("collapse-1", "is_open"),
- state("collapse-2", "is_open"),
- state("collapse-3", "is_open")
- ),
- function(n1, n2, n3, is_open1, is_open2, is_open3) {
- ctx <- app$callback_context()
-
- button_id <- if (ctx$triggered$value) {
- unlist(strsplit(ctx$triggered$prop_id, "[.]"))[1]
- } else return(list(FALSE, FALSE, FALSE))
-
- if (button_id == "group-1-toggle" && n1 > 0) {
- return(list(!is_open1, FALSE, FALSE))
- } else if (button_id == "group-2-toggle" && n2 > 0) {
- return(list(FALSE, !is_open2, FALSE))
- } else if (button_id == "group-3-toggle" && n3 > 0) {
- return(list(FALSE, FALSE, !is_open3))
- }
- return(list(FALSE, FALSE, FALSE))
- }
-)
diff --git a/docs/components_page/components/collapse/accordion.jl b/docs/components_page/components/collapse/accordion.jl
deleted file mode 100644
index 50f5708f6..000000000
--- a/docs/components_page/components/collapse/accordion.jl
+++ /dev/null
@@ -1,56 +0,0 @@
-using Dash, DashBootstrapComponents, DashHtmlComponents
-
-
-function make_item(i)
- # we use this function to make the example items to avoid code duplication
- return dbc_card([
- dbc_cardheader(
- html_h2(
- dbc_button(
- "Collapsible group #$i",
- color="link",
- id="group-$i-toggle",
- n_clicks=0,
- ),
- ),
- ),
- dbc_collapse(
- dbc_cardbody("This is the content of group $i..."),
- id="collapse-$i",
- is_open=false,
- ),
- ])
-end;
-
-accordion = html_div([make_item(1), make_item(2), make_item(3)], className="accordion");
-
-callback!(
- app,
- Output("collapse-1", "is_open"),
- Output("collapse-2", "is_open"),
- Output("collapse-3", "is_open"),
- Input("group-1-toggle", "n_clicks"),
- Input("group-2-toggle", "n_clicks"),
- Input("group-3-toggle", "n_clicks"),
- State("collapse-1", "is_open"),
- State("collapse-2", "is_open"),
- State("collapse-3", "is_open"),
-) do n1, n2, n3, is_open1, is_open2, is_open3
- ctx = callback_context()
-
- if length(ctx.triggered) == 0
- return false, false, false
- else
- button_id = split(ctx.triggered[1][:prop_id], ".")[1]
- end
-
- if button_id == "group-1-toggle" && n1 > 0
- return is_open1 == 0, false, false
- elseif button_id == "group-2-toggle" && n2 > 0
- return false, is_open2 == 0, false
- elseif button_id == "group-3-toggle" && n3 > 0
- return false, false, is_open3 == 0
- else
- return false, false, false
- end
-end;
diff --git a/docs/components_page/components/collapse/accordion.py b/docs/components_page/components/collapse/accordion.py
deleted file mode 100644
index 42cf80c25..000000000
--- a/docs/components_page/components/collapse/accordion.py
+++ /dev/null
@@ -1,54 +0,0 @@
-import dash
-import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output, State
-
-
-def make_item(i):
- # we use this function to make the example items to avoid code duplication
- return dbc.Card(
- [
- dbc.CardHeader(
- html.H2(
- dbc.Button(
- f"Collapsible group #{i}",
- color="link",
- id=f"group-{i}-toggle",
- n_clicks=0,
- )
- )
- ),
- dbc.Collapse(
- dbc.CardBody(f"This is the content of group {i}..."),
- id=f"collapse-{i}",
- is_open=False,
- ),
- ]
- )
-
-
-accordion = html.Div(
- [make_item(1), make_item(2), make_item(3)], className="accordion"
-)
-
-
-@app.callback(
- [Output(f"collapse-{i}", "is_open") for i in range(1, 4)],
- [Input(f"group-{i}-toggle", "n_clicks") for i in range(1, 4)],
- [State(f"collapse-{i}", "is_open") for i in range(1, 4)],
-)
-def toggle_accordion(n1, n2, n3, is_open1, is_open2, is_open3):
- ctx = dash.callback_context
-
- if not ctx.triggered:
- return False, False, False
- else:
- button_id = ctx.triggered[0]["prop_id"].split(".")[0]
-
- if button_id == "group-1-toggle" and n1:
- return not is_open1, False, False
- elif button_id == "group-2-toggle" and n2:
- return False, not is_open2, False
- elif button_id == "group-3-toggle" and n3:
- return False, False, not is_open3
- return False, False, False
diff --git a/docs/components_page/components/collapse/multiple.R b/docs/components_page/components/collapse/multiple.R
index 2f59ecc31..d2163b80b 100644
--- a/docs/components_page/components/collapse/multiple.R
+++ b/docs/components_page/components/collapse/multiple.R
@@ -3,11 +3,13 @@ library(dashHtmlComponents)
collapses <- htmlDiv(
list(
- dbcButton("Toggle left", color = "primary", id = "left",
- className = "mr-1", n_clicks = 0
+ dbcButton("Toggle left",
+ color = "primary", id = "left",
+ className = "me-1", n_clicks = 0
),
- dbcButton("Toggle right", color = "primary", id = "right",
- className = "mr-1", n_clicks = 0
+ dbcButton("Toggle right",
+ color = "primary", id = "right",
+ className = "me-1", n_clicks = 0
),
dbcButton("Toggle both", color = "primary", id = "both", n_clicks = 0),
dbcRow(
diff --git a/docs/components_page/components/collapse/multiple.jl b/docs/components_page/components/collapse/multiple.jl
index 07434f9e3..1d8f5abd7 100644
--- a/docs/components_page/components/collapse/multiple.jl
+++ b/docs/components_page/components/collapse/multiple.jl
@@ -3,37 +3,37 @@ using DashBootstrapComponents, DashHtmlComponents
collapses = html_div([
dbc_button(
"Toggle left",
- color="primary",
- id="left",
- className="mr-1",
- n_clicks=0,
+ color = "primary",
+ id = "left",
+ className = "me-1",
+ n_clicks = 0,
),
dbc_button(
"Toggle right",
- color="primary",
- id="right",
- className="mr-1",
- n_clicks=0,
+ color = "primary",
+ id = "right",
+ className = "me-1",
+ n_clicks = 0,
),
- dbc_button("Toggle both", color="primary", id="both", n_clicks=0),
+ dbc_button("Toggle both", color = "primary", id = "both", n_clicks = 0),
dbc_row(
[
dbc_col(
dbc_collapse(
- dbc_card("This is the left card!", body=true),
- id="left-collapse",
- is_open=true,
+ dbc_card("This is the left card!", body = true),
+ id = "left-collapse",
+ is_open = true,
),
),
dbc_col(
dbc_collapse(
- dbc_card("This is the right card!", body=true),
- id="right-collapse",
- is_open=true,
+ dbc_card("This is the right card!", body = true),
+ id = "right-collapse",
+ is_open = true,
),
),
],
- className="mt-3",
+ className = "mt-3",
),
]);
diff --git a/docs/components_page/components/collapse/multiple.py b/docs/components_page/components/collapse/multiple.py
index 6e969d8da..f7703632d 100644
--- a/docs/components_page/components/collapse/multiple.py
+++ b/docs/components_page/components/collapse/multiple.py
@@ -1,6 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output, State
+from dash import Input, Output, State, html
collapses = html.Div(
[
@@ -8,14 +7,14 @@
"Toggle left",
color="primary",
id="left",
- className="mr-1",
+ className="me-1",
n_clicks=0,
),
dbc.Button(
"Toggle right",
color="primary",
id="right",
- className="mr-1",
+ className="me-1",
n_clicks=0,
),
dbc.Button("Toggle both", color="primary", id="both", n_clicks=0),
diff --git a/docs/components_page/components/collapse/simple.jl b/docs/components_page/components/collapse/simple.jl
index 0bc2c18cc..730835f6b 100644
--- a/docs/components_page/components/collapse/simple.jl
+++ b/docs/components_page/components/collapse/simple.jl
@@ -3,15 +3,15 @@ using DashBootstrapComponents, DashHtmlComponents
collapse = html_div([
dbc_button(
"Open collapse",
- id="collapse-button",
- className="mb-3",
- color="primary",
- n_clicks=0,
+ id = "collapse-button",
+ className = "mb-3",
+ color = "primary",
+ n_clicks = 0,
),
dbc_collapse(
dbc_card(dbc_cardbody("This content is hidden in the collapse")),
- id="collapse",
- is_open=false,
+ id = "collapse",
+ is_open = false,
),
]);
diff --git a/docs/components_page/components/collapse/simple.py b/docs/components_page/components/collapse/simple.py
index f53dfc5fe..f81df3ba2 100644
--- a/docs/components_page/components/collapse/simple.py
+++ b/docs/components_page/components/collapse/simple.py
@@ -1,6 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output, State
+from dash import Input, Output, State, html
collapse = html.Div(
[
diff --git a/docs/components_page/components/dropdown.md b/docs/components_page/components/dropdown.md
index 2994fc940..5e27b7ae7 100644
--- a/docs/components_page/components/dropdown.md
+++ b/docs/components_page/components/dropdown.md
@@ -7,7 +7,7 @@ DropdownMenus are built up using the `DropdownMenu`, and `DropdownMenuItem` comp
Note: our `DropdownMenu` is an analogue of Bootstrap's Dropdown component. We have changed the name to avoid a clash with the existing `Dropdown` component in _dash-core-components_ which serves a different purpose.
-## Simple example
+## Examples
This example creates a simple dropdown menu with three items.
@@ -17,6 +17,12 @@ Each `DropdownMenuItem` can be used like `dash_core_components.Link`, as a regul
{{example:components/dropdown/menu_items.py:dropdown}}
+## Dark Dropdown
+
+Set `menu_variant="dark"` to change the dropdown menu to a dark colour scheme.
+
+{{example:components/dropdown/dark.py:dropdown}}
+
## Styling the toggle
You can use the `color` prop of `DropdownMenu` to set the color to one of the Bootstrap contextual colors. If you want to further customise the style you can use the `toggle_style` and `toggleClassName` arguments.
@@ -31,13 +37,13 @@ Control the size of the `DropdownMenu` toggle using the `size` argument. You can
## DropdownMenu direction
-Use the `direction` argument to control where the menu is rendered relative to the toggle. The possible options are `'up'`, `'down'` (default), `'left'`, or `'right'`.
+Use the `direction` argument to control where the menu is rendered relative to the toggle. The possible options are `'up'`, `'down'` (default), `'start'`, or `'end'`.
{{example:components/dropdown/direction.py:dropdown}}
## DropdownMenu alignment
-By default the menu is aligned with left of the toggle. Set `right=True` for a right aligned menu.
+By default the menu is aligned with left of the toggle. Set `align_end=True` for a right aligned menu.
{{example:components/dropdown/alignment.py:dropdown}}
diff --git a/docs/components_page/components/dropdown/alignment.R b/docs/components_page/components/dropdown/alignment.R
index 977e67dd3..6b8f19234 100644
--- a/docs/components_page/components/dropdown/alignment.R
+++ b/docs/components_page/components/dropdown/alignment.R
@@ -14,12 +14,12 @@ dropdown <- dbcRow(
dbcDropdownMenu(
label = "Left-aligned menu (default)",
children = items,
- right = FALSE
+ align_end = FALSE
)
),
dbcCol(
dbcDropdownMenu(
- label = "Right-aligned menu", children = items, right = TRUE
+ label = "Right-aligned menu", children = items, align_end = TRUE
)
)
)
diff --git a/docs/components_page/components/dropdown/alignment.jl b/docs/components_page/components/dropdown/alignment.jl
index 3296fe8a0..e9d31aaa1 100644
--- a/docs/components_page/components/dropdown/alignment.jl
+++ b/docs/components_page/components/dropdown/alignment.jl
@@ -4,17 +4,19 @@ items = [
dbc_dropdownmenuitem("Action"),
dbc_dropdownmenuitem("Another action"),
dbc_dropdownmenuitem("Something else here"),
- dbc_dropdownmenuitem(divider=true),
+ dbc_dropdownmenuitem(divider = true),
dbc_dropdownmenuitem("Something else here after the divider"),
];
dropdown = dbc_row([
dbc_col(
dbc_dropdownmenu(
- label="Left-aligned menu (default)",
- children=items,
- right=false,
+ label = "Left-aligned menu (default)",
+ children = items,
+ align_end = false,
),
),
- dbc_col(dbc_dropdownmenu(label="Right-aligned menu", children=items, right=true)),
+ dbc_col(
+ dbc_dropdownmenu(label = "Right-aligned menu", children = items, align_end = true),
+ ),
]);
diff --git a/docs/components_page/components/dropdown/alignment.py b/docs/components_page/components/dropdown/alignment.py
index 819eb6b0c..e8632ac54 100644
--- a/docs/components_page/components/dropdown/alignment.py
+++ b/docs/components_page/components/dropdown/alignment.py
@@ -14,12 +14,12 @@
dbc.DropdownMenu(
label="Left-aligned menu (default)",
children=items,
- right=False,
+ align_end=False,
)
),
dbc.Col(
dbc.DropdownMenu(
- label="Right-aligned menu", children=items, right=True
+ label="Right-aligned menu", children=items, align_end=True
)
),
]
diff --git a/docs/components_page/components/dropdown/content.jl b/docs/components_page/components/dropdown/content.jl
index a6aea5f08..3f92a63a8 100644
--- a/docs/components_page/components/dropdown/content.jl
+++ b/docs/components_page/components/dropdown/content.jl
@@ -2,17 +2,17 @@ using DashBootstrapComponents, DashHtmlComponents
dropdown = dbc_dropdownmenu(
[
- dbc_dropdownmenuitem("Header", header=true),
+ dbc_dropdownmenuitem("Header", header = true),
dbc_dropdownmenuitem("An item"),
- dbc_dropdownmenuitem(divider=true),
- dbc_dropdownmenuitem("Active and disabled", header=true),
- dbc_dropdownmenuitem("Active item", active=true),
- dbc_dropdownmenuitem("Disabled item", disabled=true),
- dbc_dropdownmenuitem(divider=true),
+ dbc_dropdownmenuitem(divider = true),
+ dbc_dropdownmenuitem("Active and disabled", header = true),
+ dbc_dropdownmenuitem("Active item", active = true),
+ dbc_dropdownmenuitem("Disabled item", disabled = true),
+ dbc_dropdownmenuitem(divider = true),
html_p(
"You can have other content here like text if you like.",
- className="text-muted px-4 mt-4",
+ className = "text-muted px-4 mt-4",
),
],
- label="Menu",
+ label = "Menu",
);
diff --git a/docs/components_page/components/dropdown/content.py b/docs/components_page/components/dropdown/content.py
index e073f631f..5fb1b7031 100644
--- a/docs/components_page/components/dropdown/content.py
+++ b/docs/components_page/components/dropdown/content.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
dropdown = dbc.DropdownMenu(
[
diff --git a/docs/components_page/components/dropdown/dark.R b/docs/components_page/components/dropdown/dark.R
new file mode 100644
index 000000000..856bf669d
--- /dev/null
+++ b/docs/components_page/components/dropdown/dark.R
@@ -0,0 +1,11 @@
+library(dashBootstrapComponents)
+
+dropdown <- dbcDropdownMenu(
+ label = "Menu",
+ menu_variant = "dark",
+ children = list(
+ dbcDropdownMenuItem("Item 1"),
+ dbcDropdownMenuItem("Item 2"),
+ dbcDropdownMenuItem("Item 3")
+ )
+)
diff --git a/docs/components_page/components/dropdown/dark.jl b/docs/components_page/components/dropdown/dark.jl
new file mode 100644
index 000000000..fc0ce233e
--- /dev/null
+++ b/docs/components_page/components/dropdown/dark.jl
@@ -0,0 +1,11 @@
+using DashBootstrapComponents
+
+dropdown = dbc_dropdownmenu(
+ label = "Menu",
+ menu_variant = "dark",
+ children = [
+ dbc_dropdownmenuitem("Item 1"),
+ dbc_dropdownmenuitem("Item 2"),
+ dbc_dropdownmenuitem("Item 3"),
+ ],
+)
diff --git a/docs/components_page/components/dropdown/dark.py b/docs/components_page/components/dropdown/dark.py
new file mode 100644
index 000000000..b8de25edc
--- /dev/null
+++ b/docs/components_page/components/dropdown/dark.py
@@ -0,0 +1,11 @@
+import dash_bootstrap_components as dbc
+
+dropdown = dbc.DropdownMenu(
+ label="Menu",
+ menu_variant="dark",
+ children=[
+ dbc.DropdownMenuItem("Item 1"),
+ dbc.DropdownMenuItem("Item 2"),
+ dbc.DropdownMenuItem("Item 3"),
+ ],
+)
diff --git a/docs/components_page/components/dropdown/direction.R b/docs/components_page/components/dropdown/direction.R
index f87275cf7..c07067381 100644
--- a/docs/components_page/components/dropdown/direction.R
+++ b/docs/components_page/components/dropdown/direction.R
@@ -17,19 +17,21 @@ dropdown <- dbcRow(
),
dbcCol(
dbcDropdownMenu(
- label = "Dropleft", children = items_direction, direction = "left"
+ label = "Dropstart", children = items_direction, direction = "start"
),
width = "auto"
),
dbcCol(
dbcDropdownMenu(
- label = "Dropright", children = items_direction, direction = "right"
+ label = "Dropend", children = items_direction, direction = "end"
),
width = "auto"
),
dbcCol(
- dbcDropdownMenu(label = "Dropup", children = items_direction,
- direction = "up"),
+ dbcDropdownMenu(
+ label = "Dropup", children = items_direction,
+ direction = "up"
+ ),
width = "auto"
)
),
diff --git a/docs/components_page/components/dropdown/direction.jl b/docs/components_page/components/dropdown/direction.jl
index 1cb5b26c6..a775ab17a 100644
--- a/docs/components_page/components/dropdown/direction.jl
+++ b/docs/components_page/components/dropdown/direction.jl
@@ -2,7 +2,7 @@ using DashBootstrapComponents
items = [
dbc_dropdownmenuitem("First"),
- dbc_dropdownmenuitem(divider=true),
+ dbc_dropdownmenuitem(divider = true),
dbc_dropdownmenuitem("Second"),
];
@@ -10,24 +10,24 @@ dropdown = dbc_row(
[
dbc_col(
dbc_dropdownmenu(
- label="Dropdown (default)",
- children=items,
- direction="down",
+ label = "Dropdown (default)",
+ children = items,
+ direction = "down",
),
- width="auto",
+ width = "auto",
),
dbc_col(
- dbc_dropdownmenu(label="Dropleft", children=items, direction="left"),
- width="auto",
+ dbc_dropdownmenu(label = "Dropstart", children = items, direction = "start"),
+ width = "auto",
),
dbc_col(
- dbc_dropdownmenu(label="Dropright", children=items, direction="right"),
- width="auto",
+ dbc_dropdownmenu(label = "Dropend", children = items, direction = "end"),
+ width = "auto",
),
dbc_col(
- dbc_dropdownmenu(label="Dropup", children=items, direction="up"),
- width="auto",
+ dbc_dropdownmenu(label = "Dropup", children = items, direction = "up"),
+ width = "auto",
),
],
- justify="between",
+ justify = "between",
);
diff --git a/docs/components_page/components/dropdown/direction.py b/docs/components_page/components/dropdown/direction.py
index 76f252a67..c87940de0 100644
--- a/docs/components_page/components/dropdown/direction.py
+++ b/docs/components_page/components/dropdown/direction.py
@@ -16,14 +16,12 @@
),
dbc.Col(
dbc.DropdownMenu(
- label="Dropleft", children=items, direction="left"
+ label="Dropstart", children=items, direction="start"
),
width="auto",
),
dbc.Col(
- dbc.DropdownMenu(
- label="Dropright", children=items, direction="right"
- ),
+ dbc.DropdownMenu(label="Dropend", children=items, direction="end"),
width="auto",
),
dbc.Col(
diff --git a/docs/components_page/components/dropdown/menu_items.R b/docs/components_page/components/dropdown/menu_items.R
index 2c46f5986..9179946fe 100644
--- a/docs/components_page/components/dropdown/menu_items.R
+++ b/docs/components_page/components/dropdown/menu_items.R
@@ -7,10 +7,12 @@ dropdown <- htmlDiv(
list(
dbcDropdownMenuItem("A button", id = "dropdown-button", n_clicks = 0),
dbcDropdownMenuItem(
- "Internal link", href = "/docs/components/dropdown_menu"
+ "Internal link",
+ href = "/docs/components/dropdown_menu"
),
dbcDropdownMenuItem(
- "External Link", href = "https://github.com"
+ "External Link",
+ href = "https://github.com"
),
dbcDropdownMenuItem(
"External relative",
diff --git a/docs/components_page/components/dropdown/menu_items.jl b/docs/components_page/components/dropdown/menu_items.jl
index 359dd88d5..2e920b85b 100644
--- a/docs/components_page/components/dropdown/menu_items.jl
+++ b/docs/components_page/components/dropdown/menu_items.jl
@@ -3,18 +3,18 @@ using DashBootstrapComponents, DashHtmlComponents
dropdown = html_div([
dbc_dropdownmenu(
[
- dbc_dropdownmenuitem("A button", id="dropdown-button", n_clicks=0),
- dbc_dropdownmenuitem("Internal link", href="/docs/components/dropdown_menu"),
- dbc_dropdownmenuitem("External Link", href="https://github.com"),
+ dbc_dropdownmenuitem("A button", id = "dropdown-button", n_clicks = 0),
+ dbc_dropdownmenuitem("Internal link", href = "/docs/components/dropdown_menu"),
+ dbc_dropdownmenuitem("External Link", href = "https://github.com"),
dbc_dropdownmenuitem(
"External relative",
- href="/docs/components/dropdown_menu",
- external_link=true,
+ href = "/docs/components/dropdown_menu",
+ external_link = true,
),
],
- label="Menu",
+ label = "Menu",
),
- html_p(id="item-clicks", className="mt-3"),
+ html_p(id = "item-clicks", className = "mt-3"),
]);
callback!(app, Output("item-clicks", "children"), Input("dropdown-button", "n_clicks")) do n
diff --git a/docs/components_page/components/dropdown/menu_items.py b/docs/components_page/components/dropdown/menu_items.py
index eebe8229f..03ddf995f 100644
--- a/docs/components_page/components/dropdown/menu_items.py
+++ b/docs/components_page/components/dropdown/menu_items.py
@@ -1,6 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output
+from dash import Input, Output, html
dropdown = html.Div(
[
diff --git a/docs/components_page/components/dropdown/simple.jl b/docs/components_page/components/dropdown/simple.jl
index e6f63f118..64ac12445 100644
--- a/docs/components_page/components/dropdown/simple.jl
+++ b/docs/components_page/components/dropdown/simple.jl
@@ -1,8 +1,8 @@
using DashBootstrapComponents
dropdown = dbc_dropdownmenu(
- label="Menu",
- children=[
+ label = "Menu",
+ children = [
dbc_dropdownmenuitem("Item 1"),
dbc_dropdownmenuitem("Item 2"),
dbc_dropdownmenuitem("Item 3"),
diff --git a/docs/components_page/components/dropdown/size.R b/docs/components_page/components/dropdown/size.R
index 0375745a5..79ece1bf9 100644
--- a/docs/components_page/components/dropdown/size.R
+++ b/docs/components_page/components/dropdown/size.R
@@ -1,7 +1,7 @@
library(dashBootstrapComponents)
library(dashHtmlComponents)
-items_size <- list(
+items <- list(
dbcDropdownMenuItem("First"),
dbcDropdownMenuItem(divider = TRUE),
dbcDropdownMenuItem("Second")
@@ -10,15 +10,17 @@ items_size <- list(
dropdown <- htmlDiv(
list(
dbcDropdownMenu(
- label = "large dropdown",
- bs_size = "lg",
- children = items_size,
- className = "mb-3"
+ label = "large dropdown",
+ size = "lg",
+ children = items,
+ className = "mb-3"
),
dbcDropdownMenu(
- label = "normal dropdown", children = items_size, className = "mb-3"
+ label = "normal dropdown", children = items, className = "mb-3"
),
- dbcDropdownMenu(label = "small dropdown", bs_size = "sm",
- children = items_size)
+ dbcDropdownMenu(
+ label = "small dropdown", size = "sm",
+ children = items
+ )
)
)
diff --git a/docs/components_page/components/dropdown/size.jl b/docs/components_page/components/dropdown/size.jl
index 78e58319a..5a91ed256 100644
--- a/docs/components_page/components/dropdown/size.jl
+++ b/docs/components_page/components/dropdown/size.jl
@@ -2,18 +2,17 @@ using DashBootstrapComponents, DashHtmlComponents
items = [
dbc_dropdownmenuitem("First"),
- dbc_dropdownmenuitem(divider=true),
+ dbc_dropdownmenuitem(divider = true),
dbc_dropdownmenuitem("Second"),
];
dropdown = html_div([
dbc_dropdownmenu(
- label="large dropdown",
- bs_size="lg",
- children=items,
- className="mb-3",
+ label = "large dropdown",
+ size = "lg",
+ children = items,
+ className = "mb-3",
),
- dbc_dropdownmenu(label="normal dropdown", children=items, className="mb-3"),
- dbc_dropdownmenu(label="small dropdown", bs_size="sm", children=items),
-])
-;
\ No newline at end of file
+ dbc_dropdownmenu(label = "normal dropdown", children = items, className = "mb-3"),
+ dbc_dropdownmenu(label = "small dropdown", size = "sm", children = items),
+]);
diff --git a/docs/components_page/components/dropdown/size.py b/docs/components_page/components/dropdown/size.py
index d994fb214..b1f91c3d3 100644
--- a/docs/components_page/components/dropdown/size.py
+++ b/docs/components_page/components/dropdown/size.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
items = [
dbc.DropdownMenuItem("First"),
@@ -11,13 +11,13 @@
[
dbc.DropdownMenu(
label="large dropdown",
- bs_size="lg",
+ size="lg",
children=items,
className="mb-3",
),
dbc.DropdownMenu(
label="normal dropdown", children=items, className="mb-3"
),
- dbc.DropdownMenu(label="small dropdown", bs_size="sm", children=items),
+ dbc.DropdownMenu(label="small dropdown", size="sm", children=items),
]
)
diff --git a/docs/components_page/components/dropdown/style.R b/docs/components_page/components/dropdown/style.R
index 73cb1f5ee..80d56bdd1 100644
--- a/docs/components_page/components/dropdown/style.R
+++ b/docs/components_page/components/dropdown/style.R
@@ -10,24 +10,29 @@ items_style <- list(
dropdowns <- htmlDiv(
list(
dbcDropdownMenu(
- items_style, label = "Primary", color = "primary", className = "m-1"
+ items_style,
+ label = "Primary", color = "primary", className = "m-1"
),
dbcDropdownMenu(
- items_style, label = "Secondary", color = "secondary", className = "m-1"
+ items_style,
+ label = "Secondary", color = "secondary", className = "m-1"
),
dbcDropdownMenu(
- items_style, label = "Success", color = "success", className = "m-1"
+ items_style,
+ label = "Success", color = "success", className = "m-1"
),
dbcDropdownMenu(
- items_style, label = "Warning", color = "warning", className = "m-1"
+ items_style,
+ label = "Warning", color = "warning", className = "m-1"
),
dbcDropdownMenu(
- items_style, label = "Danger", color = "danger", className = "m-1"
+ items_style,
+ label = "Danger", color = "danger", className = "m-1"
),
- dbcDropdownMenu(items_style, label = "Info", color = "info",
- className = "m-1"),
- dbcDropdownMenu(items_style, label = "Link", color = "link",
- className = "m-1")
+ dbcDropdownMenu(items_style,
+ label = "Info", color = "info",
+ className = "m-1"
+ )
),
style = list(display = "flex", flexWrap = "wrap")
)
diff --git a/docs/components_page/components/dropdown/style.jl b/docs/components_page/components/dropdown/style.jl
index 2cf023018..73489b2c3 100644
--- a/docs/components_page/components/dropdown/style.jl
+++ b/docs/components_page/components/dropdown/style.jl
@@ -8,18 +8,17 @@ items = [
dropdowns = html_div(
[
- dbc_dropdownmenu(items, label="Primary", color="primary", className="m-1"),
+ dbc_dropdownmenu(items, label = "Primary", color = "primary", className = "m-1"),
dbc_dropdownmenu(
items,
- label="Secondary",
- color="secondary",
- className="m-1",
+ label = "Secondary",
+ color = "secondary",
+ className = "m-1",
),
- dbc_dropdownmenu(items, label="Success", color="success", className="m-1"),
- dbc_dropdownmenu(items, label="Warning", color="warning", className="m-1"),
- dbc_dropdownmenu(items, label="Danger", color="danger", className="m-1"),
- dbc_dropdownmenu(items, label="Info", color="info", className="m-1"),
- dbc_dropdownmenu(items, label="Link", color="link", className="m-1"),
+ dbc_dropdownmenu(items, label = "Success", color = "success", className = "m-1"),
+ dbc_dropdownmenu(items, label = "Warning", color = "warning", className = "m-1"),
+ dbc_dropdownmenu(items, label = "Danger", color = "danger", className = "m-1"),
+ dbc_dropdownmenu(items, label = "Info", color = "info", className = "m-1"),
],
- style=Dict("display" => "flex", "flexWrap" => "wrap"),
+ style = Dict("display" => "flex", "flexWrap" => "wrap"),
);
diff --git a/docs/components_page/components/dropdown/style.py b/docs/components_page/components/dropdown/style.py
index 91e7f12cd..d5275cd1c 100644
--- a/docs/components_page/components/dropdown/style.py
+++ b/docs/components_page/components/dropdown/style.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
items = [
dbc.DropdownMenuItem("Item 1"),
@@ -25,7 +25,6 @@
items, label="Danger", color="danger", className="m-1"
),
dbc.DropdownMenu(items, label="Info", color="info", className="m-1"),
- dbc.DropdownMenu(items, label="Link", color="link", className="m-1"),
],
style={"display": "flex", "flexWrap": "wrap"},
)
diff --git a/docs/components_page/components/fade.md b/docs/components_page/components/fade.md
index 57abf27e2..de69edce8 100644
--- a/docs/components_page/components/fade.md
+++ b/docs/components_page/components/fade.md
@@ -3,7 +3,7 @@ title: Fade
lead: Toggle the visibility of content in your apps with a fade animation using the `Fade` component.
---
-## Simple example
+## Examples
The `Fade` component can be used to show and hide content in your apps. When the visibility is toggled, the content will fade in / out. Simply set `is_in=True` to show the content, and `is_in=False` to hide it again. The simple example below uses a button click to toggle in the `is_in` prop.
diff --git a/docs/components_page/components/fade/fade.R b/docs/components_page/components/fade/fade.R
index 37a036c29..a6810fad9 100644
--- a/docs/components_page/components/fade/fade.R
+++ b/docs/components_page/components/fade/fade.R
@@ -3,14 +3,17 @@ library(dashHtmlComponents)
fade <- htmlDiv(
list(
- dbcButton("Toggle fade", id = "fade-button", n_clicks = 0,
- className = "mb-3"),
+ dbcButton("Toggle fade",
+ id = "fade-button", n_clicks = 0,
+ className = "mb-3"
+ ),
dbcFade(
dbcCard(
dbcCardBody(
- htmlP(
- "This content fades in and out", className = "card-text"
- )
+ htmlP(
+ "This content fades in and out",
+ className = "card-text"
+ )
)
),
id = "fade",
diff --git a/docs/components_page/components/fade/fade.jl b/docs/components_page/components/fade/fade.jl
index 03f7332c3..d071521f8 100644
--- a/docs/components_page/components/fade/fade.jl
+++ b/docs/components_page/components/fade/fade.jl
@@ -1,14 +1,14 @@
using DashBootstrapComponents, DashHtmlComponents
fade = html_div([
- dbc_button("Toggle fade", id="fade-button", className="mb-3", n_clicks=0),
+ dbc_button("Toggle fade", id = "fade-button", className = "mb-3", n_clicks = 0),
dbc_fade(
dbc_card(
- dbc_cardbody(html_p("This content fades in and out", className="card-text")),
+ dbc_cardbody(html_p("This content fades in and out", className = "card-text")),
),
- id="fade",
- is_in=true,
- appear=false,
+ id = "fade",
+ is_in = true,
+ appear = false,
),
]);
diff --git a/docs/components_page/components/fade/fade.py b/docs/components_page/components/fade/fade.py
index df19c76a9..a4952edb2 100644
--- a/docs/components_page/components/fade/fade.py
+++ b/docs/components_page/components/fade/fade.py
@@ -1,6 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output, State
+from dash import Input, Output, State, html
fade = html.Div(
[
diff --git a/docs/components_page/components/fade/transition.R b/docs/components_page/components/fade/transition.R
index 96e0f1a19..7186a89be 100644
--- a/docs/components_page/components/fade/transition.R
+++ b/docs/components_page/components/fade/transition.R
@@ -3,20 +3,23 @@ library(dashHtmlComponents)
fade <- htmlDiv(
list(
- dbcButton("Toggle fade", id = "fade-transition-button", n_clicks = 0,
- className = "mb-3"),
+ dbcButton("Toggle fade",
+ id = "fade-transition-button", n_clicks = 0,
+ className = "mb-3"
+ ),
dbcFade(
dbcCard(
dbcCardBody(
- htmlP(
- "This content fades in and out", className = "card-text"
- )
+ htmlP(
+ "This content fades in and out",
+ className = "card-text"
+ )
)
),
id = "fade-transition",
is_in = TRUE,
style = list(transition = "opacity 2000ms ease"),
- timeout=2000
+ timeout = 2000
)
)
)
diff --git a/docs/components_page/components/fade/transition.jl b/docs/components_page/components/fade/transition.jl
index 3fc9c8edf..127582ee6 100644
--- a/docs/components_page/components/fade/transition.jl
+++ b/docs/components_page/components/fade/transition.jl
@@ -3,18 +3,18 @@ using DashBootstrapComponents, DashHtmlComponents
fade = html_div([
dbc_button(
"Toggle fade",
- id="fade-transition-button",
- className="mb-3",
- n_clicks=0,
+ id = "fade-transition-button",
+ className = "mb-3",
+ n_clicks = 0,
),
dbc_fade(
dbc_card(
- dbc_cardbody(html_p("This content fades in and out", className="card-text")),
+ dbc_cardbody(html_p("This content fades in and out", className = "card-text")),
),
- id="fade-transition",
- is_in=true,
- style=Dict("transition" => "opacity 2000ms ease"),
- timeout=2000,
+ id = "fade-transition",
+ is_in = true,
+ style = Dict("transition" => "opacity 2000ms ease"),
+ timeout = 2000,
),
]);
diff --git a/docs/components_page/components/fade/transition.py b/docs/components_page/components/fade/transition.py
index 9603087bb..482b64a69 100644
--- a/docs/components_page/components/fade/transition.py
+++ b/docs/components_page/components/fade/transition.py
@@ -1,6 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output, State
+from dash import Input, Output, State, html
fade = html.Div(
[
diff --git a/docs/components_page/components/form.md b/docs/components_page/components/form.md
index cb97aeaf5..88980569f 100644
--- a/docs/components_page/components/form.md
+++ b/docs/components_page/components/form.md
@@ -5,27 +5,33 @@ lead: Use Bootstrap's form components to control the layout and style of your in
When building Dash apps we rarely make use of HTML forms, instead attaching callbacks to input components. However, Bootstrap's form components can still be a powerful way to control the layout of a collection of input components. We demonstrate a number of layout options below.
-## Simple example
+## Examples
The `FormGroup` is the easiest way to add structure to forms. It encourages proper grouping of labels, controls, optional help text, and form validation messaging. See this simple example.
{{example:components/form/simple.py:form}}
+
+## Floating labels
+
+Wrap an `Input` and `Label` with `FormFloating` to create a label that floats over the form field. Note that you _must_ set a placeholder on the `Input` in order for the floating label to display properly.
+
+{{example:components/form/floating.py:form}}
## Horizontal form
-Create a horizontal form by setting `row=True` on the `FormGroup` component. Be sure to specify `width` on the `Label` component, and wrap your inputs in `Col` components.
+Create a horizontal form by using the `Row` component. Be sure to specify `width` on the `Label` component, and wrap your inputs in `Col` components.
{{example:components/form/row.py:form}}
## Using grid layout with forms
-You can also use the grid components `Row` and `Col` to build more complex layouts. You can set `form=True` in the `Row` component to reduce the size of the column gutters for tighter, more compact layouts.
+You can also use the grid components `Row` and `Col` to build more complex layouts. You can use Bootstrap's [gutter modifier classes](https://getbootstrap.com/docs/5.1/layout/gutters/) to adjust the spacing between the form components.
{{example:components/form/grid.py:form}}
## Inline form
-You can use the `Form` component with `inline=True` to display a series of labels, controls and buttons on a single horizontal row. Use [Bootstrap's spacing utilities](https://getbootstrap.com/docs/4.3/utilities/spacing/) as we have below to control the spacing between components in the inline form.
+Similarly using `Row` and `Col` you can create a fully inline form. Set `width="auto"` on the `Label` components to make sure they resize to take up only the width of the label text. Use Bootstrap's [gutter modifier classes](https://getbootstrap.com/docs/5.1/layout/gutters/) and [spacing utilities](https://getbootstrap.com/docs/5.0/utilities/spacing/) as we have below to control the spacing between components in the inline form.
{{example:components/form/inline.py:form}}
@@ -35,7 +41,7 @@ Use the `valid` and `invalid` properties of `Input`, alongside the `FormFeedback
The `Input` component has two properties, `valid` and `invalid`, that can be set in callbacks. They can be used to indicate whether the input value is valid or invalid. When `valid=True`, the `Input` will be styled with a green colored border, similarly when `invalid=True` the input will be styled with a red colored border.
-The `FormFeedback` component should be added to the `FormGroup` containing the `Input` it is associated with. Use the `valid` property to indicate whether the feedback should display for valid or invalid inputs. The feedback automatically display when the validity of the `Input` in the `FormGroup` matches that of the `FormFeedback`. This is perhaps easiest to see with an example such as the below.
+The `FormFeedback` component should be added to a `html.Div` containing the `Input` it is associated with. Use the `type` property to indicate whether the feedback should display for valid or invalid inputs, it accepts the strings `"valid"` or `"invalid"`. The feedback automatically displays when the validity of the `Input` in the `html.Div` matches that of the `FormFeedback`. This is perhaps easiest to see with an example such as the below.
{{example:components/form/feedback.py:email_input}}
@@ -47,7 +53,7 @@ The `Form` and `FormGroup` components can also be used with _dash-core-component
{{apidoc:src/components/form/Form.js}}
-{{apidoc:src/components/form/FormGroup.js}}
+{{apidoc:src/components/form/FormFloating.js}}
{{apidoc:src/components/form/FormText.js}}
diff --git a/docs/components_page/components/form/dash_core.R b/docs/components_page/components/form/dash_core.R
index 82cba08d7..120a752c0 100644
--- a/docs/components_page/components/form/dash_core.R
+++ b/docs/components_page/components/form/dash_core.R
@@ -1,31 +1,34 @@
library(dashBootstrapComponents)
library(dashCoreComponents)
-dropdown <- dbcFormGroup(
+dropdown <- htmlDiv(
list(
dbcLabel("Dropdown", html_for = "dropdown"),
dccDropdown(
id = "dropdown",
options = list(
- list(label = "Option 1", value = 1),
- list(label = "Option 2", value = 2)
+ list(label = "Option 1", value = 1),
+ list(label = "Option 2", value = 2)
)
)
- )
+ ),
+ className = "mb-3",
)
-slider <- dbcFormGroup(
+slider <- htmlDiv(
list(
dbcLabel("Slider", html_for = "slider"),
dccSlider(id = "slider", min = 0, max = 10, step = 0.5, value = 3)
- )
+ ),
+ className = "mb-3"
)
-range_slider <- dbcFormGroup(
+range_slider <- htmlDiv(
list(
dbcLabel("RangeSlider", html_for = "range-slider"),
dccRangeSlider(id = "range-slider", min = 0, max = 10, value = list(3, 7))
- )
+ ),
+ className = "mb-3"
)
form <- dbcForm(list(dropdown, slider, range_slider))
diff --git a/docs/components_page/components/form/dash_core.jl b/docs/components_page/components/form/dash_core.jl
index 77416d7ea..6875f941c 100644
--- a/docs/components_page/components/form/dash_core.jl
+++ b/docs/components_page/components/form/dash_core.jl
@@ -1,24 +1,33 @@
using DashBootstrapComponents, DashCoreComponents
-dropdown = dbc_formgroup([
- dbc_label("Dropdown", html_for="dropdown"),
- dcc_dropdown(
- id="dropdown",
- options=[
- Dict("label" => "Option 1", "value" => 1),
- Dict("label" => "Option 2", "value" => 2),
- ],
- ),
-]);
+dropdown = html_div(
+ [
+ dbc_label("Dropdown", html_for = "dropdown"),
+ dcc_dropdown(
+ id = "dropdown",
+ options = [
+ Dict("label" => "Option 1", "value" => 1),
+ Dict("label" => "Option 2", "value" => 2),
+ ],
+ ),
+ ],
+ className = "mb-3",
+);
-slider = dbc_formgroup([
- dbc_label("Slider", html_for="slider"),
- dcc_slider(id="slider", min=0, max=10, step=0.5, value=3),
-]);
+slider = html_div(
+ [
+ dbc_label("Slider", html_for = "slider"),
+ dcc_slider(id = "slider", min = 0, max = 10, step = 0.5, value = 3),
+ ],
+ className = "mb-3",
+);
-range_slider = dbc_formgroup([
- dbc_label("RangeSlider", html_for="range-slider"),
- dcc_rangeslider(id="range-slider", min=0, max=10, value=[3, 7]),
-]);
+range_slider = html_div(
+ [
+ dbc_label("RangeSlider", html_for = "range-slider"),
+ dcc_rangeslider(id = "range-slider", min = 0, max = 10, value = [3, 7]),
+ ],
+ className = "mb-3",
+);
form = dbc_form([dropdown, slider, range_slider]);
diff --git a/docs/components_page/components/form/dash_core.py b/docs/components_page/components/form/dash_core.py
index 3052f8d2e..904836557 100644
--- a/docs/components_page/components/form/dash_core.py
+++ b/docs/components_page/components/form/dash_core.py
@@ -1,7 +1,7 @@
import dash_bootstrap_components as dbc
-import dash_core_components as dcc
+from dash import dcc, html
-dropdown = dbc.FormGroup(
+dropdown = html.Div(
[
dbc.Label("Dropdown", html_for="dropdown"),
dcc.Dropdown(
@@ -11,21 +11,24 @@
{"label": "Option 2", "value": 2},
],
),
- ]
+ ],
+ className="mb-3",
)
-slider = dbc.FormGroup(
+slider = html.Div(
[
dbc.Label("Slider", html_for="slider"),
dcc.Slider(id="slider", min=0, max=10, step=0.5, value=3),
- ]
+ ],
+ className="mb-3",
)
-range_slider = dbc.FormGroup(
+range_slider = html.Div(
[
dbc.Label("RangeSlider", html_for="range-slider"),
dcc.RangeSlider(id="range-slider", min=0, max=10, value=[3, 7]),
- ]
+ ],
+ className="mb-3",
)
form = dbc.Form([dropdown, slider, range_slider])
diff --git a/docs/components_page/components/form/feedback.R b/docs/components_page/components/form/feedback.R
index 3eaf39efe..78e5d4141 100644
--- a/docs/components_page/components/form/feedback.R
+++ b/docs/components_page/components/form/feedback.R
@@ -3,19 +3,16 @@ library(dashHtmlComponents)
email_input <- htmlDiv(
list(
- dbcFormGroup(
- list(
- dbcLabel("Email"),
- dbcInput(id = "email-input", type = "email", value = ""),
- dbcFormText("We only accept gmail..."),
- dbcFormFeedback(
- "That looks like a gmail address :-)", valid = TRUE
- ),
- dbcFormFeedback(
- "Sorry, we only accept gmail for some reason...",
- valid = FALSE
- )
- )
+ dbcLabel("Email"),
+ dbcInput(id = "email-input", type = "email", value = ""),
+ dbcFormText("We only accept gmail..."),
+ dbcFormFeedback(
+ "That looks like a gmail address :-)",
+ type = "valid"
+ ),
+ dbcFormFeedback(
+ "Sorry, we only accept gmail for some reason...",
+ type = "invalid"
)
)
)
diff --git a/docs/components_page/components/form/feedback.jl b/docs/components_page/components/form/feedback.jl
index ca6ff329d..5934b0c6f 100644
--- a/docs/components_page/components/form/feedback.jl
+++ b/docs/components_page/components/form/feedback.jl
@@ -1,21 +1,15 @@
using DashBootstrapComponents, DashHtmlComponents
email_input = html_div([
- dbc_formgroup([
- dbc_label("Email"),
- dbc_input(id="email-input", type="email", value=""),
- dbc_formtext("We only accept gmail..."),
- dbc_formfeedback("That looks like a gmail address :-)", valid=true),
- dbc_formfeedback("Sorry, we only accept gmail for some reason...", valid=false),
- ]),
+ dbc_label("Email"),
+ dbc_input(id = "email-input", type = "email", value = ""),
+ dbc_formtext("We only accept gmail..."),
+ dbc_formfeedback("That looks like a gmail address :-)", type = "valid"),
+ dbc_formfeedback("Sorry, we only accept gmail for some reason...", type = "invalid"),
]);
-callback!(
- app,
- Output("email-input", "invalid"),
- Input("email-input", "value"),
-) do text
+callback!(app, Output("email-input", "invalid"), Input("email-input", "value")) do text
if length(text) > 0
is_gmail = endswith(text, "@gmail.com")
return !is_gmail
@@ -23,11 +17,7 @@ callback!(
return false
end;
-callback!(
- app,
- Output("email-input", "valid"),
- Input("email-input", "value"),
-) do text
+callback!(app, Output("email-input", "valid"), Input("email-input", "value")) do text
if length(text) > 0
is_gmail = endswith(text, "@gmail.com")
return is_gmail
diff --git a/docs/components_page/components/form/feedback.py b/docs/components_page/components/form/feedback.py
index 71a498238..04aaf21dd 100644
--- a/docs/components_page/components/form/feedback.py
+++ b/docs/components_page/components/form/feedback.py
@@ -1,23 +1,16 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output
+from dash import Input, Output, html
email_input = html.Div(
[
- dbc.FormGroup(
- [
- dbc.Label("Email"),
- dbc.Input(id="email-input", type="email", value=""),
- dbc.FormText("We only accept gmail..."),
- dbc.FormFeedback(
- "That looks like a gmail address :-)", valid=True
- ),
- dbc.FormFeedback(
- "Sorry, we only accept gmail for some reason...",
- valid=False,
- ),
- ]
- )
+ dbc.Label("Email"),
+ dbc.Input(id="email-input", type="email", value=""),
+ dbc.FormText("We only accept gmail..."),
+ dbc.FormFeedback("That looks like a gmail address :-)", type="valid"),
+ dbc.FormFeedback(
+ "Sorry, we only accept gmail for some reason...",
+ type="invalid",
+ ),
]
)
diff --git a/docs/components_page/components/form/floating.R b/docs/components_page/components/form/floating.R
new file mode 100644
index 000000000..4a8ec2411
--- /dev/null
+++ b/docs/components_page/components/form/floating.R
@@ -0,0 +1,8 @@
+library(dashBootstrapComponents)
+
+form <- dbcFormFloating(
+ list(
+ dbcInput(type = "email", placeholder = "example@internet.com"),
+ dbcLabel("Email address")
+ )
+)
diff --git a/docs/components_page/components/form/floating.jl b/docs/components_page/components/form/floating.jl
new file mode 100644
index 000000000..83cae79b5
--- /dev/null
+++ b/docs/components_page/components/form/floating.jl
@@ -0,0 +1,6 @@
+using DashBootstrapComponents
+
+form = dbc_formfloating([
+ dbc_input(type = "email", placeholder = "example@internet.com"),
+ dbc_label("Email address"),
+])
diff --git a/docs/components_page/components/form/floating.py b/docs/components_page/components/form/floating.py
new file mode 100644
index 000000000..d40e2964c
--- /dev/null
+++ b/docs/components_page/components/form/floating.py
@@ -0,0 +1,8 @@
+import dash_bootstrap_components as dbc
+
+form = dbc.FormFloating(
+ [
+ dbc.Input(type="email", placeholder="example@internet.com"),
+ dbc.Label("Email address"),
+ ]
+)
diff --git a/docs/components_page/components/form/grid.R b/docs/components_page/components/form/grid.R
index 5868773d5..e54ae38ae 100644
--- a/docs/components_page/components/form/grid.R
+++ b/docs/components_page/components/form/grid.R
@@ -3,31 +3,27 @@ library(dashBootstrapComponents)
form <- dbcRow(
list(
dbcCol(
- dbcFormGroup(
- list(
- dbcLabel("Email", html_for = "example-email-grid"),
- dbcInput(
- type = "email",
- id = "example-email-grid",
- placeholder = "Enter email"
- )
+ list(
+ dbcLabel("Email", html_for = "example-email-grid"),
+ dbcInput(
+ type = "email",
+ id = "example-email-grid",
+ placeholder = "Enter email",
)
),
width = 6,
),
dbcCol(
- dbcFormGroup(
- list(
- dbcLabel("Password", html_for = "example-password-grid"),
- dbcInput(
- type = "password",
- id = "example-password-grid",
- placeholder = "Enter password"
- )
+ list(
+ dbcLabel("Password", html_for = "example-password-grid"),
+ dbcInput(
+ type = "password",
+ id = "example-password-grid",
+ placeholder = "Enter password",
)
),
- width = 6
+ width = 6,
)
),
- form = TRUE
+ className = "g-3",
)
diff --git a/docs/components_page/components/form/grid.jl b/docs/components_page/components/form/grid.jl
index 007632a94..0ac3feb9f 100644
--- a/docs/components_page/components/form/grid.jl
+++ b/docs/components_page/components/form/grid.jl
@@ -3,27 +3,27 @@ using DashBootstrapComponents
form = dbc_row(
[
dbc_col(
- dbc_formgroup([
- dbc_label("Email", html_for="example-email-grid"),
+ [
+ dbc_label("Email", html_for = "example-email-grid"),
dbc_input(
- type="email",
- id="example-email-grid",
- placeholder="Enter email",
+ type = "email",
+ id = "example-email-grid",
+ placeholder = "Enter email",
),
- ]),
- width=6,
+ ],
+ width = 6,
),
dbc_col(
- dbc_formgroup([
- dbc_label("Password", html_for="example-password-grid"),
+ [
+ dbc_label("Password", html_for = "example-password-grid"),
dbc_input(
- type="password",
- id="example-password-grid",
- placeholder="Enter password",
+ type = "password",
+ id = "example-password-grid",
+ placeholder = "Enter password",
),
- ]),
- width=6,
+ ],
+ width = 6,
),
],
- form=true,
-);
+ className = "g-3",
+)
diff --git a/docs/components_page/components/form/grid.py b/docs/components_page/components/form/grid.py
index 278b84cdc..133d984d9 100644
--- a/docs/components_page/components/form/grid.py
+++ b/docs/components_page/components/form/grid.py
@@ -3,31 +3,27 @@
form = dbc.Row(
[
dbc.Col(
- dbc.FormGroup(
- [
- dbc.Label("Email", html_for="example-email-grid"),
- dbc.Input(
- type="email",
- id="example-email-grid",
- placeholder="Enter email",
- ),
- ]
- ),
+ [
+ dbc.Label("Email", html_for="example-email-grid"),
+ dbc.Input(
+ type="email",
+ id="example-email-grid",
+ placeholder="Enter email",
+ ),
+ ],
width=6,
),
dbc.Col(
- dbc.FormGroup(
- [
- dbc.Label("Password", html_for="example-password-grid"),
- dbc.Input(
- type="password",
- id="example-password-grid",
- placeholder="Enter password",
- ),
- ]
- ),
+ [
+ dbc.Label("Password", html_for="example-password-grid"),
+ dbc.Input(
+ type="password",
+ id="example-password-grid",
+ placeholder="Enter password",
+ ),
+ ],
width=6,
),
],
- form=True,
+ className="g-3",
)
diff --git a/docs/components_page/components/form/inline.R b/docs/components_page/components/form/inline.R
index d9999e8d9..aa1da9360 100644
--- a/docs/components_page/components/form/inline.R
+++ b/docs/components_page/components/form/inline.R
@@ -1,28 +1,20 @@
library(dashBootstrapComponents)
form <- dbcForm(
- list(
- dbcFormGroup(
- list(
- dbcLabel("Email", className = "mr-2"),
- dbcInput(
- type = "email",
- placeholder = "Enter email"
- )
+ dbcRow(
+ list(
+ dbcLabel("Email", width = "auto"),
+ dbcCol(
+ dbcInput(type = "email", placeholder = "Enter email"),
+ className = "me-3",
),
- className = "mr-3"
- ),
- dbcFormGroup(
- list(
- dbcLabel("Password", className = "mr-2"),
- dbcInput(
- type = "password",
- placeholder = "Enter password"
- )
+ dbcLabel("Password", width = "auto"),
+ dbcCol(
+ dbcInput(type = "password", placeholder = "Enter password"),
+ className = "me-3",
),
- className = "mr-3"
+ dbcCol(dbcButton("Submit", color = "primary"), width = "auto")
),
- dbcButton("Submit", color = "primary")
- ),
- inline = TRUE
+ className = "g-2",
+ )
)
diff --git a/docs/components_page/components/form/inline.jl b/docs/components_page/components/form/inline.jl
index c0fc2ad7e..cf5950a80 100644
--- a/docs/components_page/components/form/inline.jl
+++ b/docs/components_page/components/form/inline.jl
@@ -1,22 +1,20 @@
using DashBootstrapComponents
form = dbc_form(
- [
- dbc_formgroup(
- [
- dbc_label("Email", className="mr-2"),
- dbc_input(type="email", placeholder="Enter email"),
- ],
- className="mr-3",
- ),
- dbc_formgroup(
- [
- dbc_label("Password", className="mr-2"),
- dbc_input(type="password", placeholder="Enter password"),
- ],
- className="mr-3",
- ),
- dbc_button("Submit", color="primary"),
- ],
- inline=true,
-);
+ dbc_row(
+ [
+ dbc_label("Email", width = "auto"),
+ dbc_col(
+ dbc_input(type = "email", placeholder = "Enter email"),
+ className = "me-3",
+ ),
+ dbc_label("Password", width = "auto"),
+ dbc_col(
+ dbc_input(type = "password", placeholder = "Enter password"),
+ className = "me-3",
+ ),
+ dbc_col(dbc_button("Submit", color = "primary"), width = "auto"),
+ ],
+ className = "g-2",
+ ),
+)
diff --git a/docs/components_page/components/form/inline.py b/docs/components_page/components/form/inline.py
index 42d52a5c8..cd07c5db3 100644
--- a/docs/components_page/components/form/inline.py
+++ b/docs/components_page/components/form/inline.py
@@ -1,22 +1,20 @@
import dash_bootstrap_components as dbc
form = dbc.Form(
- [
- dbc.FormGroup(
- [
- dbc.Label("Email", className="mr-2"),
+ dbc.Row(
+ [
+ dbc.Label("Email", width="auto"),
+ dbc.Col(
dbc.Input(type="email", placeholder="Enter email"),
- ],
- className="mr-3",
- ),
- dbc.FormGroup(
- [
- dbc.Label("Password", className="mr-2"),
+ className="me-3",
+ ),
+ dbc.Label("Password", width="auto"),
+ dbc.Col(
dbc.Input(type="password", placeholder="Enter password"),
- ],
- className="mr-3",
- ),
- dbc.Button("Submit", color="primary"),
- ],
- inline=True,
+ className="me-3",
+ ),
+ dbc.Col(dbc.Button("Submit", color="primary"), width="auto"),
+ ],
+ className="g-2",
+ )
)
diff --git a/docs/components_page/components/form/row.R b/docs/components_page/components/form/row.R
index 3beff4090..f5fb22460 100644
--- a/docs/components_page/components/form/row.R
+++ b/docs/components_page/components/form/row.R
@@ -1,6 +1,6 @@
library(dashBootstrapComponents)
-email_input <- dbcFormGroup(
+email_input <- dbcRow(
list(
dbcLabel("Email", html_for = "example-email-row", width = 2),
dbcCol(
@@ -10,43 +10,44 @@ email_input <- dbcFormGroup(
width = 10
)
),
- row = TRUE
+ className = "mb-3",
)
-password_input <- dbcFormGroup(
+password_input <- dbcRow(
list(
dbcLabel("Password", html_for = "example-password-row", width = 2),
dbcCol(
dbcInput(
- type = "password",
- id = "example-password-row",
- placeholder = "Enter password",
+ type = "password",
+ id = "example-password-row",
+ placeholder = "Enter password",
),
width = 10
)
),
- row = TRUE
+ className = "mb-3",
)
-radios_input <- dbcFormGroup(
+radios_input <- dbcRow(
list(
dbcLabel("Radios", html_for = "example-radios-row", width = 2),
dbcCol(
dbcRadioItems(
id = "example-radios-row",
options = list(
- list(label = "First radio", value = 1),
- list(label = "Second radio", value = 2),
- list(label = "Third disabled radio",
- value = 3,
- disabled = TRUE
+ list(label = "First radio", value = 1),
+ list(label = "Second radio", value = 2),
+ list(
+ label = "Third disabled radio",
+ value = 3,
+ disabled = TRUE
)
)
),
width = 10
)
),
- row = TRUE
+ className = "mb-3",
)
form <- dbcForm(list(email_input, password_input, radios_input))
diff --git a/docs/components_page/components/form/row.jl b/docs/components_page/components/form/row.jl
index c73ec5b5e..519a42c98 100644
--- a/docs/components_page/components/form/row.jl
+++ b/docs/components_page/components/form/row.jl
@@ -1,42 +1,42 @@
using DashBootstrapComponents
-email_input = dbc_formgroup(
+email_input = dbc_row(
[
- dbc_label("Email", html_for="example-email-row", width=2),
+ dbc_label("Email", html_for = "example-email-row", width = 2),
dbc_col(
dbc_input(
- type="email",
- id="example-email-row",
- placeholder="Enter email",
+ type = "email",
+ id = "example-email-row",
+ placeholder = "Enter email",
),
- width=10,
+ width = 10,
),
],
- row=true,
+ className = "mb-3",
);
-password_input = dbc_formgroup(
+password_input = dbc_row(
[
- dbc_label("Password", html_for="example-password-row", width=2),
+ dbc_label("Password", html_for = "example-password-row", width = 2),
dbc_col(
dbc_input(
- type="password",
- id="example-password-row",
- placeholder="Enter password",
+ type = "password",
+ id = "example-password-row",
+ placeholder = "Enter password",
),
- width=10,
+ width = 10,
),
],
- row=true,
+ className = "mb-3",
);
-radios_input = dbc_formgroup(
+radios_input = dbc_row(
[
- dbc_label("Radios", html_for="example-radios-row", width=2),
+ dbc_label("Radios", html_for = "example-radios-row", width = 2),
dbc_col(
dbc_radioitems(
- id="example-radios-row",
- options=[
+ id = "example-radios-row",
+ options = [
Dict("label" => "First radio", "value" => 1),
Dict("label" => "Second radio", "value" => 2),
Dict(
@@ -46,10 +46,10 @@ radios_input = dbc_formgroup(
),
],
),
- width=10,
+ width = 10,
),
],
- row=true,
+ className = "mb-3",
);
form = dbc_form([email_input, password_input, radios_input]);
diff --git a/docs/components_page/components/form/row.py b/docs/components_page/components/form/row.py
index 2bc76e4d1..fa0556114 100644
--- a/docs/components_page/components/form/row.py
+++ b/docs/components_page/components/form/row.py
@@ -1,6 +1,6 @@
import dash_bootstrap_components as dbc
-email_input = dbc.FormGroup(
+email_input = dbc.Row(
[
dbc.Label("Email", html_for="example-email-row", width=2),
dbc.Col(
@@ -10,10 +10,10 @@
width=10,
),
],
- row=True,
+ className="mb-3",
)
-password_input = dbc.FormGroup(
+password_input = dbc.Row(
[
dbc.Label("Password", html_for="example-password-row", width=2),
dbc.Col(
@@ -25,10 +25,10 @@
width=10,
),
],
- row=True,
+ className="mb-3",
)
-radios_input = dbc.FormGroup(
+radios_input = dbc.Row(
[
dbc.Label("Radios", html_for="example-radios-row", width=2),
dbc.Col(
@@ -47,7 +47,7 @@
width=10,
),
],
- row=True,
+ className="mb-3",
)
form = dbc.Form([email_input, password_input, radios_input])
diff --git a/docs/components_page/components/form/simple.R b/docs/components_page/components/form/simple.R
index e303c9c6f..2df049fe7 100644
--- a/docs/components_page/components/form/simple.R
+++ b/docs/components_page/components/form/simple.R
@@ -1,6 +1,6 @@
library(dashBootstrapComponents)
-email_input_simple <- dbcFormGroup(
+email_input_simple <- htmlDiv(
list(
dbcLabel("Email", html_for = "example-email"),
dbcInput(type = "email", id = "example-email", placeholder = "Enter email"),
@@ -8,22 +8,24 @@ email_input_simple <- dbcFormGroup(
"Are you on email? You simply have to be these days",
color = "secondary",
)
- )
+ ),
+ className = "mb-3"
)
-password_input_simple <- dbcFormGroup(
+password_input_simple <- htmlDiv(
list(
dbcLabel("Password", html_for = "example-password"),
dbcInput(
- type = "password",
- id = "example-password",
- placeholder = "Enter password",
+ type = "password",
+ id = "example-password",
+ placeholder = "Enter password",
),
dbcFormText(
- "A password stops mean people taking your stuff",
- color = "secondary"
+ "A password stops mean people taking your stuff",
+ color = "secondary"
)
- )
+ ),
+ className = "mb-3"
)
form <- dbcForm(list(email_input_simple, password_input_simple))
diff --git a/docs/components_page/components/form/simple.jl b/docs/components_page/components/form/simple.jl
index 8a8eb0cf2..60f596fa5 100644
--- a/docs/components_page/components/form/simple.jl
+++ b/docs/components_page/components/form/simple.jl
@@ -1,15 +1,28 @@
using DashBootstrapComponents
-email_input = dbc_formgroup([
- dbc_label("Email", html_for="example-email"),
- dbc_input(type="email", id="example-email", placeholder="Enter email"),
- dbc_formtext("Are you on email? You simply have to be these days", color="secondary"),
-]);
+email_input = html_div(
+ [
+ dbc_label("Email", html_for = "example-email"),
+ dbc_input(type = "email", id = "example-email", placeholder = "Enter email"),
+ dbc_formtext(
+ "Are you on email? You simply have to be these days",
+ color = "secondary",
+ ),
+ ],
+ className = "mb-3",
+);
-password_input = dbc_formgroup([
- dbc_label("Password", html_for="example-password"),
- dbc_input(type="password", id="example-password", placeholder="Enter password"),
- dbc_formtext("A password stops mean people taking your stuff", color="secondary"),
-]);
+password_input = html_div(
+ [
+ dbc_label("Password", html_for = "example-password"),
+ dbc_input(
+ type = "password",
+ id = "example-password",
+ placeholder = "Enter password",
+ ),
+ dbc_formtext("A password stops mean people taking your stuff", color = "secondary"),
+ ],
+ className = "mb-3",
+);
form = dbc_form([email_input, password_input]);
diff --git a/docs/components_page/components/form/simple.py b/docs/components_page/components/form/simple.py
index 76a3cf0d4..ce5c62288 100644
--- a/docs/components_page/components/form/simple.py
+++ b/docs/components_page/components/form/simple.py
@@ -1,6 +1,7 @@
import dash_bootstrap_components as dbc
+from dash import html
-email_input = dbc.FormGroup(
+email_input = html.Div(
[
dbc.Label("Email", html_for="example-email"),
dbc.Input(type="email", id="example-email", placeholder="Enter email"),
@@ -8,10 +9,11 @@
"Are you on email? You simply have to be these days",
color="secondary",
),
- ]
+ ],
+ className="mb-3",
)
-password_input = dbc.FormGroup(
+password_input = html.Div(
[
dbc.Label("Password", html_for="example-password"),
dbc.Input(
@@ -22,7 +24,8 @@
dbc.FormText(
"A password stops mean people taking your stuff", color="secondary"
),
- ]
+ ],
+ className="mb-3",
)
form = dbc.Form([email_input, password_input])
diff --git a/docs/components_page/components/index.md b/docs/components_page/components/index.md
new file mode 100644
index 000000000..27960fb32
--- /dev/null
+++ b/docs/components_page/components/index.md
@@ -0,0 +1,27 @@
+---
+title: Components
+lead: Usage examples for all components in dash-bootstrap-components
+---
+
+The component documentation for _dash-bootstrap-components_ contains many snippets showing example usage, as well as API documentation for each component explaining the different props that you can set.
+
+Example snippets for the different components will look something like this, with tabs to switch between R or Julia versions of the examples.
+
+{{example:components/badge/simple.py:badge}}
+
+## Adding the snippets to your app
+
+Note that the contents of each snippet **do not by themselves constitute a working app**. We generally omit boilerplate code such as standard imports and instantiation of the app. In the above example you would additionally need to:
+
+1. Import Dash.
+2. Create a Dash app instance (making sure to link a Bootstrap stylesheet, see the [themes documentation](/docs/themes/) for details).
+3. Add the example to the app's layout.
+4. Start the Dash server.
+
+For example, a simple application incorporating example above could look like this, where we wrap the snippet in a container and add it to the layout.
+
+{{code-example:components/index/simple.py}}
+
+There is more detail on this in the [Quickstart](/docs/quickstart/) instructions for creating a basic app. Additionally, the [examples](https://github.com/facultyai/dash-bootstrap-components/tree/main/examples) in our GitHub repository demonstrate how multiple components can be combined to create a feature rich application.
+
+For more details on Dash in general, please refer to the official Dash documentation for [Python](https://dash.plotly.com/), [R](https://dashr.plotly.com/), or [Julia](https://dash-julia.plotly.com/).
diff --git a/docs/components_page/components/index/simple.R b/docs/components_page/components/index/simple.R
new file mode 100644
index 000000000..c8eb95f16
--- /dev/null
+++ b/docs/components_page/components/index/simple.R
@@ -0,0 +1,23 @@
+# 1. Import Dash
+library(dash)
+library(dashBootstrapComponents)
+
+# 2. Create a Dash app instance
+app <- Dash$new(external_stylesheets = dbcThemes$BOOTSTRAP)
+
+# 3. Add the example to the app's layout
+# First we copy the snippet from the docs
+badge <- dbcButton(
+ list(
+ "Notifications",
+ dbcBadge("4", color = "light", text_color = "primary", className = "ms-1")
+ ),
+ color = "primary"
+)
+
+# Then we incorporate the snippet into our layout.
+# This example keeps it simple and just wraps it in a Container
+app$layout(dbcContainer(badge, fluid = TRUE))
+
+# 5. Start the Dash server
+app$run_server(port = 8050)
diff --git a/docs/components_page/components/index/simple.jl b/docs/components_page/components/index/simple.jl
new file mode 100644
index 000000000..77cda2d2d
--- /dev/null
+++ b/docs/components_page/components/index/simple.jl
@@ -0,0 +1,22 @@
+# 1. Import Dash
+using Dash, DashBootstrapComponents
+
+# 2. Create a Dash app instance
+app = dash(external_stylesheets = [dbc_themes.BOOTSTRAP])
+
+# 3. Add the example to the app's layout
+# First we copy the snippet from the docs
+badge = dbc_button(
+ [
+ "Notifications",
+ dbc_badge("4", color = "light", text_color = "primary", className = "ms-1"),
+ ],
+ color = "primary",
+)
+
+# Then we incorporate the snippet into our layout.
+# This example keeps it simple and just wraps it in a Container
+app.layout = dbc_container(badge, fluid = true)
+
+# 5. Start the Dash server
+run_server(app, "0.0.0.0", 8050)
diff --git a/docs/components_page/components/index/simple.py b/docs/components_page/components/index/simple.py
new file mode 100644
index 000000000..c2195dd05
--- /dev/null
+++ b/docs/components_page/components/index/simple.py
@@ -0,0 +1,24 @@
+# 1. Import Dash
+import dash
+import dash_bootstrap_components as dbc
+
+# 2. Create a Dash app instance
+app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
+
+# 3. Add the example to the app's layout
+# First we copy the snippet from the docs
+badge = dbc.Button(
+ [
+ "Notifications",
+ dbc.Badge("4", color="light", text_color="primary", className="ms-1"),
+ ],
+ color="primary",
+)
+
+# Then we incorporate the snippet into our layout.
+# This example keeps it simple and just wraps it in a Container
+app.layout = dbc.Container(badge, fluid=True)
+
+# 5. Start the Dash server
+if __name__ == "__main__":
+ app.run_server()
diff --git a/docs/components_page/components/input.md b/docs/components_page/components/input.md
index 2028b363a..7a5f35055 100644
--- a/docs/components_page/components/input.md
+++ b/docs/components_page/components/input.md
@@ -5,7 +5,7 @@ lead: Documentation and examples for input components in _dash-bootstrap-compone
_dash-bootstrap-components_ has its own versions of some of the input components available in _dash-core-components_. They have been designed to share the same interface as the corresponding components in _dash-core-components_ for familiarity, but have a few additional Bootstrap specific features.
-## Input
+## Examples
The input component allows for text or numeric input, its basic usage is the same as `dcc.Input`, but Bootstrap styles will be applied for you.
@@ -31,13 +31,13 @@ When using `Input` with `type='number'`, the `value` prop will be given the valu
## Labels and text
-Use the `FormGroup` component along with `Label` and `FormText` to control the layout of your `Input` components. See the [documentation for forms](/l/components/form) for more details.
+Use the `Label` and `FormText` components to add additional information about the `Input` to your layout. See the [documentation for forms](/docs/components/form/) for more details.
{{example:components/input/text_label.py:text_input}}
## Input size
-You can control the size of the `Input` using the `bs_size` keyword argument. It accepts the values `sm`, `md` or `lg` for small, medium or large sizes respectively.
+You can control the size of the `Input` using the `size` keyword argument. It accepts the values `sm`, `md` or `lg` for small, medium or large sizes respectively. If you want to set the HTML size attribute of the underlying `` use the `html_size` keyword argument.
{{example:components/input/size.py:inputs}}
@@ -49,13 +49,13 @@ Add valid / invalid styles to your `Input` components using the `valid` and `inv
## Textarea
-The `Textarea` component works like the _dash-core-components_ analogue, but accepts the additional arguments `valid`, `invalid`, and `bs_size` much like `Input`.
+The `Textarea` component works like the _dash-core-components_ analogue, but accepts the additional arguments `valid`, `invalid`, and `size` much like `Input`.
{{example:components/input/textarea.py:textareas}}
## Select
-The `Select` component can be used to render a Bootstrap themed select input. The options are specified with a list of dictionaries much like the `Dropdown` component in _dash-core-components_, i.e. with keys `'label'`, `'value'` and optional key `'disabled'`. Like `Input` it also accepts keyword arguments such as `bs_size`, `valid`, `invalid`, all of which can be targeted with callbacks.
+The `Select` component can be used to render a Bootstrap themed select input. The options are specified with a list of dictionaries much like the `Dropdown` component in _dash-core-components_, i.e. with keys `'label'`, `'value'` and optional key `'disabled'`. Like `Input` it also accepts keyword arguments such as `size`, `valid`, `invalid`, all of which can be targeted with callbacks.
{{example:components/input/select.py:select}}
@@ -63,8 +63,6 @@ The `Select` component can be used to render a Bootstrap themed select input. Th
`RadioItems` and `Checklist` components also work like _dash-core-components_. Provided you specify an `id`, _dash-bootstrap-components_ will render custom themed radio buttons or checkboxes rather than using the native browser buttons. When using `Checklist` you can also specify `switch=True` to render toggle-like switches rather than checkboxes. If you prefer to use the native buttons and checkboxes, set `custom=False`. Note that there is no native browser switch, so if you set `custom=False` then `switch` will be ignored.
-Use these components with `FormGroup` for automatic spacing and padding.
-
{{example:components/input/radio_check.py:inputs}}
Set `inline=True` to make the radio items or checklists fit next to each other on a line.
@@ -73,22 +71,13 @@ Set `inline=True` to make the radio items or checklists fit next to each other o
## Checked item styles
-Use the `labelCheckedStyle` and `labelCheckedClassName` arguments to apply different styles to the labels of checked items. When using custom inputs you can override the styles of the inputs using custom CSS. See the below example.
-
-```css
-#checklist-selected-style
- .custom-control-input:checked
- ~ .custom-control-label::before {
- background-color: #fa7268;
- border-color: #ea6258;
-}
-```
+Use the `input_checked_style`, `inputCheckedClassName`, `label_checked_style` and `labelCheckedClassName` arguments to apply different styles to the labels of checked items.
{{example:components/input/selected_styles.py:checklist}}
-## Standalone checkboxes and radio buttons
+## Standalone checkboxes, toggle switches and radio buttons
-If you need more granular control over checkboxes and radio buttons, you can also create standalone components. Bind callbacks to the `checked` keyword to react to changes in the input state. To attach a label, create a FormGroup with `check=True` and use the label's `html_for` keyword to bind it to the checkbox.
+If you need more granular control over checkboxes and radio buttons, you can also create standalone components. Bind callbacks to the `value` keyword to react to changes in the input state. Bind the `label` to the checkbox, switch or radio button by specifying an `id`.
{{example:components/input/radio_check_standalone.py:standalone_radio_check}}
@@ -98,13 +87,12 @@ When using `Input` with `type="color"`, the user may specify a color, either by
Note that the color picker presentation may vary substantially from one browser and/or platform to another.
-As you drag the selector around the color picker, notice that the text color is smoothly updated. While this is a nice feature, it may cause a performance issue in your app, because the callback fires continuously.
+As you drag the selector around the color picker, notice that the text color is smoothly updated. While this is a nice feature, it may cause a performance issue in your app, because the callback fires continuously.
-This is a great use-case for a [Dash clientside callback](https://dash.plotly.com/clientside-callbacks). This example uses a clientside callback so the callback runs directly in the browser instead of making requests to the Dash server. For your reference, the regular Dash callback is shown as a comment.
+This is a great use-case for a [Dash clientside callback](https://dash.plotly.com/clientside-callbacks). This example uses a clientside callback so the callback runs directly in the browser instead of making requests to the Dash server. For your reference, the regular Dash callback is shown as a comment.
{{example:components/input/colorpicker.py:colorpicker}}
-
{{apidoc:src/components/input/Input.js}}
{{apidoc:src/components/input/Textarea.js}}
diff --git a/docs/components_page/components/input/colorpicker.py b/docs/components_page/components/input/colorpicker.py
index d911b4f8b..d2d7c0216 100644
--- a/docs/components_page/components/input/colorpicker.py
+++ b/docs/components_page/components/input/colorpicker.py
@@ -1,8 +1,7 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output
+from dash import Input, Output, html
-colorpicker = dbc.FormGroup(
+colorpicker = html.Div(
[
dbc.Label(["Select a ", html.Span("color", id="color")]),
dbc.Input(
@@ -16,7 +15,7 @@
app.clientside_callback(
"""
- function(color) {
+ function(color) {
return {"color": color}
}
""",
diff --git a/docs/components_page/components/input/number_input.jl b/docs/components_page/components/input/number_input.jl
index 72f98f7d7..f6c2ebe20 100644
--- a/docs/components_page/components/input/number_input.jl
+++ b/docs/components_page/components/input/number_input.jl
@@ -3,7 +3,7 @@ using DashBootstrapComponents, DashHtmlComponents
number_input = html_div(
[
html_p("Type a number outside the range 0-10"),
- dbc_input(type="number", min=0, max=10, step=1),
+ dbc_input(type = "number", min = 0, max = 10, step = 1),
],
- id="styled-numeric-input",
+ id = "styled-numeric-input",
);
diff --git a/docs/components_page/components/input/number_input.py b/docs/components_page/components/input/number_input.py
index 7ef9f9f83..1c73fa6b2 100644
--- a/docs/components_page/components/input/number_input.py
+++ b/docs/components_page/components/input/number_input.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
number_input = html.Div(
[
diff --git a/docs/components_page/components/input/radio_check.R b/docs/components_page/components/input/radio_check.R
index bcc1c0aae..d7561f2e6 100644
--- a/docs/components_page/components/input/radio_check.R
+++ b/docs/components_page/components/input/radio_check.R
@@ -1,14 +1,14 @@
library(dashBootstrapComponents)
library(dashHtmlComponents)
-radioitems <- dbcFormGroup(
+radioitems <- htmlDiv(
list(
dbcLabel("Choose one"),
dbcRadioItems(
options = list(
- list(label = "Option 1", value = 1),
- list(label = "Option 2", value = 2),
- list(label = "Disabled Option", value = 3, disabled = TRUE)
+ list(label = "Option 1", value = 1),
+ list(label = "Option 2", value = 2),
+ list(label = "Disabled Option", value = 3, disabled = TRUE)
),
value = 1,
id = "radioitems-input"
@@ -17,14 +17,14 @@ radioitems <- dbcFormGroup(
)
-checklist <- dbcFormGroup(
+checklist <- htmlDiv(
list(
dbcLabel("Choose a bunch"),
dbcChecklist(
options = list(
- list(label = "Option 1", value = 1),
- list(label = "Option 2", value = 2),
- list(label = "Disabled Option", value = 3, disabled = TRUE)
+ list(label = "Option 1", value = 1),
+ list(label = "Option 2", value = 2),
+ list(label = "Disabled Option", value = 3, disabled = TRUE)
),
value = list(1),
id = "checklist-input"
@@ -32,14 +32,14 @@ checklist <- dbcFormGroup(
)
)
-switches <- dbcFormGroup(
+switches <- htmlDiv(
list(
dbcLabel("Toggle a bunch"),
dbcChecklist(
options = list(
- list(label = "Option 1", value = 1),
- list(label = "Option 2", value = 2),
- list(label = "Disabled Option", value = 3, disabled = TRUE)
+ list(label = "Option 1", value = 1),
+ list(label = "Option 2", value = 2),
+ list(label = "Disabled Option", value = 3, disabled = TRUE)
),
value = list(1),
id = "switches-input",
@@ -64,11 +64,10 @@ app$callback(
input("switches-input", "value")
),
function(radio_items_value, checklist_value, switches_value) {
-
n_checkboxes <- length(checklist_value)
n_switches <- length(switches_value)
- s <- if (n_checkboxes != 1) "s" else ""
- es <- if (n_switches != 1) "es" else ""
+ s <- if (n_checkboxes != 1) "s" else ""
+ es <- if (n_switches != 1) "es" else ""
template <- "Radio button %d, %d checklist item%s and %d switch%s selected."
diff --git a/docs/components_page/components/input/radio_check.jl b/docs/components_page/components/input/radio_check.jl
index d7ba1994d..eb68086c3 100644
--- a/docs/components_page/components/input/radio_check.jl
+++ b/docs/components_page/components/input/radio_check.jl
@@ -1,48 +1,48 @@
using DashBootstrapComponents, DashHtmlComponents
-radioitems = dbc_formgroup([
+radioitems = html_div([
dbc_label("Choose one"),
dbc_radioitems(
- options=[
+ options = [
Dict("label" => "Option 1", "value" => 1),
Dict("label" => "Option 2", "value" => 2),
Dict("label" => "Disabled Option", "value" => 3, "disabled" => true),
],
- value=1,
- id="radioitems-input",
+ value = 1,
+ id = "radioitems-input",
),
]);
-checklist = dbc_formgroup([
+checklist = html_div([
dbc_label("Choose a bunch"),
dbc_checklist(
- options=[
+ options = [
Dict("label" => "Option 1", "value" => 1),
Dict("label" => "Option 2", "value" => 2),
Dict("label" => "Disabled Option", "value" => 3, "disabled" => true),
],
- value=[1],
- id="checklist-input",
+ value = [1],
+ id = "checklist-input",
),
]);
-switches = dbc_formgroup([
+switches = html_div([
dbc_label("Toggle a bunch"),
dbc_checklist(
- options=[
+ options = [
Dict("label" => "Option 1", "value" => 1),
Dict("label" => "Option 2", "value" => 2),
Dict("label" => "Disabled Option", "value" => 3, "disabled" => true),
],
- value=[1],
- id="switches-input",
- switch=true,
+ value = [1],
+ id = "switches-input",
+ switch = true,
),
]);
inputs = html_div([
dbc_form([radioitems, checklist, switches]),
- html_p(id="radioitems-checklist-output"),
+ html_p(id = "radioitems-checklist-output"),
]);
diff --git a/docs/components_page/components/input/radio_check.py b/docs/components_page/components/input/radio_check.py
index edda8b3ae..fc6a3dfde 100644
--- a/docs/components_page/components/input/radio_check.py
+++ b/docs/components_page/components/input/radio_check.py
@@ -1,8 +1,7 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output
+from dash import Input, Output, html
-radioitems = dbc.FormGroup(
+radioitems = html.Div(
[
dbc.Label("Choose one"),
dbc.RadioItems(
@@ -17,7 +16,7 @@
]
)
-checklist = dbc.FormGroup(
+checklist = html.Div(
[
dbc.Label("Choose a bunch"),
dbc.Checklist(
@@ -32,7 +31,7 @@
]
)
-switches = dbc.FormGroup(
+switches = html.Div(
[
dbc.Label("Toggle a bunch"),
dbc.Checklist(
diff --git a/docs/components_page/components/input/radio_check_inline.R b/docs/components_page/components/input/radio_check_inline.R
index 888910c83..cb3f42515 100644
--- a/docs/components_page/components/input/radio_check_inline.R
+++ b/docs/components_page/components/input/radio_check_inline.R
@@ -1,13 +1,13 @@
library(dashBootstrapComponents)
library(dashHtmlComponents)
-inline_radioitems <- dbcFormGroup(
+inline_radioitems <- htmlDiv(
list(
dbcLabel("Choose one"),
dbcRadioItems(
options = list(
- list(label = "Option 1", value = 1),
- list(label = "Option 2", value = 2)
+ list(label = "Option 1", value = 1),
+ list(label = "Option 2", value = 2)
),
value = 1,
id = "radioitems-inline-input",
@@ -16,13 +16,13 @@ inline_radioitems <- dbcFormGroup(
)
)
-inline_checklist <- dbcFormGroup(
+inline_checklist <- htmlDiv(
list(
dbcLabel("Choose a bunch"),
dbcChecklist(
options = list(
- list(label = "Option 1", value = 1),
- list(label = "Option 2", value = 2)
+ list(label = "Option 1", value = 1),
+ list(label = "Option 2", value = 2)
),
value = list(),
id = "checklist-inline-input",
@@ -31,13 +31,13 @@ inline_checklist <- dbcFormGroup(
)
)
-inline_switches <- dbcFormGroup(
+inline_switches <- htmlDiv(
list(
dbcLabel("Toggle a bunch"),
dbcChecklist(
options = list(
- list(label = "Option 1", value = 1),
- list(label = "Option 2", value = 2)
+ list(label = "Option 1", value = 1),
+ list(label = "Option 2", value = 2)
),
value = list(),
id = "switches-inline-input",
@@ -48,5 +48,5 @@ inline_switches <- dbcFormGroup(
)
inline_inputs <- dbcForm(
- list(inline_radioitems, inline_checklist, inline_switches)
+ list(inline_radioitems, inline_checklist, inline_switches)
)
diff --git a/docs/components_page/components/input/radio_check_inline.jl b/docs/components_page/components/input/radio_check_inline.jl
index 9e684986c..b9a982be3 100644
--- a/docs/components_page/components/input/radio_check_inline.jl
+++ b/docs/components_page/components/input/radio_check_inline.jl
@@ -1,42 +1,42 @@
-using DashBootstrapComponents
+using DashBootstrapComponents, DashHtmlComponents
-inline_radioitems = dbc_formgroup([
+inline_radioitems = html_div([
dbc_label("Choose one"),
dbc_radioitems(
- options=[
+ options = [
Dict("label" => "Option 1", "value" => 1),
Dict("label" => "Option 2", "value" => 2),
],
- value=1,
- id="radioitems-inline-input",
- inline=true,
+ value = 1,
+ id = "radioitems-inline-input",
+ inline = true,
),
]);
-inline_checklist = dbc_formgroup([
+inline_checklist = html_div([
dbc_label("Choose a bunch"),
dbc_checklist(
- options=[
+ options = [
Dict("label" => "Option 1", "value" => 1),
Dict("label" => "Option 2", "value" => 2),
],
- value=[],
- id="checklist-inline-input",
- inline=true,
+ value = [],
+ id = "checklist-inline-input",
+ inline = true,
),
]);
-inline_switches = dbc_formgroup([
+inline_switches = html_div([
dbc_label("Toggle a bunch"),
dbc_checklist(
- options=[
+ options = [
Dict("label" => "Option 1", "value" => 1),
Dict("label" => "Option 2", "value" => 2),
],
- value=[],
- id="switches-inline-input",
- inline=true,
- switch=true,
+ value = [],
+ id = "switches-inline-input",
+ inline = true,
+ switch = true,
),
]);
diff --git a/docs/components_page/components/input/radio_check_inline.py b/docs/components_page/components/input/radio_check_inline.py
index fa0f10cc7..f76ed7089 100644
--- a/docs/components_page/components/input/radio_check_inline.py
+++ b/docs/components_page/components/input/radio_check_inline.py
@@ -1,6 +1,7 @@
import dash_bootstrap_components as dbc
+from dash import html
-inline_radioitems = dbc.FormGroup(
+inline_radioitems = html.Div(
[
dbc.Label("Choose one"),
dbc.RadioItems(
@@ -15,7 +16,7 @@
]
)
-inline_checklist = dbc.FormGroup(
+inline_checklist = html.Div(
[
dbc.Label("Choose a bunch"),
dbc.Checklist(
@@ -30,7 +31,7 @@
]
)
-inline_switches = dbc.FormGroup(
+inline_switches = html.Div(
[
dbc.Label("Toggle a bunch"),
dbc.Checklist(
diff --git a/docs/components_page/components/input/radio_check_standalone.R b/docs/components_page/components/input/radio_check_standalone.R
index c144b191a..8528255ed 100644
--- a/docs/components_page/components/input/radio_check_standalone.R
+++ b/docs/components_page/components/input/radio_check_standalone.R
@@ -3,35 +3,25 @@ library(dashHtmlComponents)
standalone_radio_check <- htmlDiv(
list(
- dbcFormGroup(
+ htmlDiv(
list(
dbcCheckbox(
id = "standalone-checkbox",
- className = "form-check-input"
+ label = "This is a checkbox",
+ value = FALSE
),
- dbcLabel(
- "This is a checkbox",
- html_for = "standalone-checkbox",
- className = "form-check-label"
- )
- ),
- check = TRUE
- ),
- dbcFormGroup(
- list(
- dbcRadioButton(
- id = "standalone-radio",
- className = "form-check-input"
+ dbcSwitch(
+ id = "standalone-switch",
+ label = "This is a toggle switch",
+ value = FALSE
),
- dbcLabel(
- "This is a radio button",
- html_for = "standalone-radio",
- className = "form-check-label"
+ dbcRadioButton(
+ id = "standalone-radio",
+ label = "This is a radio button",
+ value = FALSE
)
- ),
- check = TRUE,
+ )
),
- htmlBr(),
htmlP(id = "standalone-radio-check-output")
)
)
@@ -40,16 +30,20 @@ standalone_radio_check <- htmlDiv(
app$callback(
output("standalone-radio-check-output", "children"),
list(
- input("standalone-checkbox", "checked"),
- input("standalone-radio", "checked")
+ input("standalone-checkbox", "value"),
+ input("standalone-switch", "value"),
+ input("standalone-radio", "value")
),
- function(checkbox_checked, radio_checked) {
- if (checkbox_checked & radio_checked) {
- return("Both checked.")
- } else if (checkbox_checked | radio_checked) {
- return("One checked.")
- } else {
- return("None checked.")
- }
+ function(checkbox_checked, switch_checked, radio_checked) {
+ check <- if (checkbox_checked) "True" else "False"
+ switch <- if (switch_checked) "True" else "False"
+ radio <- if (radio_checked) "True" else "False"
+
+
+ template <- "Selections: Checkbox: %s, Toggle Switch: %s, Radio Button: %s"
+
+ return(
+ sprintf(template, check, switch, radio)
+ )
}
)
diff --git a/docs/components_page/components/input/radio_check_standalone.jl b/docs/components_page/components/input/radio_check_standalone.jl
index 26e8b15db..87d33d3fe 100644
--- a/docs/components_page/components/input/radio_check_standalone.jl
+++ b/docs/components_page/components/input/radio_check_standalone.jl
@@ -1,44 +1,40 @@
using DashBootstrapComponents, DashHtmlComponents
+
standalone_radio_check = html_div([
- dbc_formgroup(
- [
- dbc_checkbox(id="standalone-checkbox", className="form-check-input"),
- dbc_label(
- "This is a checkbox",
- html_for="standalone-checkbox",
- className="form-check-label",
- ),
- ],
- check=true,
- ),
- dbc_formgroup(
- [
- dbc_radiobutton(id="standalone-radio", className="form-check-input"),
- dbc_label(
- "This is a radio button",
- html_for="standalone-radio",
- className="form-check-label",
- ),
- ],
- check=true,
- ),
- html_br(),
- html_p(id="standalone-radio-check-output"),
+ html_div([
+ dbc_checkbox(
+ id = "standalone-checkbox",
+ label = "This is a checkbox",
+ value = false,
+ ),
+ dbc_switch(
+ id = "standalone-switch",
+ label = "This is a toggle switch",
+ value = false,
+ ),
+ dbc_radiobutton(
+ id = "standalone-radio",
+ label = "This is a radio button",
+ value = false,
+ ),
+ ]),
+ html_p(id = "standalone-radio-check-output"),
]);
callback!(
app,
Output("standalone-radio-check-output", "children"),
- Input("standalone-checkbox", "checked"),
- Input("standalone-radio", "checked"),
-) do checkbox_checked, radio_checked
- if checkbox_checked == 1 && radio_checked == 1
- return "Both checked."
- elseif checkbox_checked == 1 || radio_checked == 1
- return "One checked."
- else
- return "None checked."
- end
+ Input("standalone-checkbox", "value"),
+ Input("standalone-switch", "value"),
+ Input("standalone-radio", "value"),
+) do checkbox_checked, switch_checked, radio_checked
+
+ output_string =
+ """Selections: """ *
+ """Checkbox: $(checkbox_checked ? "True" : "False"), """ *
+ """Toggle Switch: $(switch_checked ? "True" : "False"), """ *
+ """Radio Button: $(radio_checked ? "True" : "False")"""
+ return output_string
end;
diff --git a/docs/components_page/components/input/radio_check_standalone.py b/docs/components_page/components/input/radio_check_standalone.py
index a70db391f..408230af4 100644
--- a/docs/components_page/components/input/radio_check_standalone.py
+++ b/docs/components_page/components/input/radio_check_standalone.py
@@ -1,36 +1,27 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output
+from dash import Input, Output, html
standalone_radio_check = html.Div(
[
- dbc.FormGroup(
+ html.Div(
[
dbc.Checkbox(
- id="standalone-checkbox", className="form-check-input"
+ id="standalone-checkbox",
+ label="This is a checkbox",
+ value=False,
),
- dbc.Label(
- "This is a checkbox",
- html_for="standalone-checkbox",
- className="form-check-label",
+ dbc.Switch(
+ id="standalone-switch",
+ label="This is a toggle switch",
+ value=False,
),
- ],
- check=True,
- ),
- dbc.FormGroup(
- [
dbc.RadioButton(
- id="standalone-radio", className="form-check-input"
- ),
- dbc.Label(
- "This is a radio button",
- html_for="standalone-radio",
- className="form-check-label",
+ id="standalone-radio",
+ label="This is a radio button",
+ value=False,
),
- ],
- check=True,
+ ]
),
- html.Br(),
html.P(id="standalone-radio-check-output"),
]
)
@@ -39,14 +30,10 @@
@app.callback(
Output("standalone-radio-check-output", "children"),
[
- Input("standalone-checkbox", "checked"),
- Input("standalone-radio", "checked"),
+ Input("standalone-checkbox", "value"),
+ Input("standalone-switch", "value"),
+ Input("standalone-radio", "value"),
],
)
-def on_form_change(checkbox_checked, radio_checked):
- if checkbox_checked and radio_checked:
- return "Both checked."
- elif checkbox_checked or radio_checked:
- return "One checked."
- else:
- return "None checked."
+def on_form_change(checkbox_checked, switch_checked, radio_checked):
+ return f"Selections: Checkbox: {checkbox_checked}, Toggle Switch: {switch_checked}, Radio Button: {radio_checked}"
diff --git a/docs/components_page/components/input/select.R b/docs/components_page/components/input/select.R
index 0d49f3ba3..a0f3c19de 100644
--- a/docs/components_page/components/input/select.R
+++ b/docs/components_page/components/input/select.R
@@ -3,8 +3,8 @@ library(dashBootstrapComponents)
select <- dbcSelect(
id = "select",
options = list(
- list(label = "Option 1", value = "1"),
- list(label = "Option 2", value = "2"),
- list(label = "Disabled option", value = "3", disabled = TRUE)
+ list(label = "Option 1", value = "1"),
+ list(label = "Option 2", value = "2"),
+ list(label = "Disabled option", value = "3", disabled = TRUE)
)
)
diff --git a/docs/components_page/components/input/select.jl b/docs/components_page/components/input/select.jl
index 03c682f18..d84b7c93d 100644
--- a/docs/components_page/components/input/select.jl
+++ b/docs/components_page/components/input/select.jl
@@ -1,8 +1,8 @@
using DashBootstrapComponents
select = dbc_select(
- id="select",
- options=[
+ id = "select",
+ options = [
Dict("label" => "Option 1", "value" => "1"),
Dict("label" => "Option 2", "value" => "2"),
Dict("label" => "Disabled option", "value" => "3", "disabled" => true),
diff --git a/docs/components_page/components/input/selected_styles.R b/docs/components_page/components/input/selected_styles.R
index 8d883dfa3..b94f87245 100644
--- a/docs/components_page/components/input/selected_styles.R
+++ b/docs/components_page/components/input/selected_styles.R
@@ -1,11 +1,31 @@
library(dashBootstrapComponents)
+library(dashHtmlComponents)
-checklist <- dbcChecklist(
- id = "checklist-selected-style",
- options = list(
- list(label = "Option 1", value = 1),
- list(label = "Option 2", value = 2),
- list(label = "Option 3", value = 3)
- ),
- labelCheckedStyle = list(color = "red")
+checklist <- htmlDiv(
+ list(
+ dbcChecklist(
+ id = "checklist-selected-style",
+ options = list(
+ list(label = "Option 1", value = 1),
+ list(label = "Option 2", value = 2),
+ list(label = "Option 3", value = 3)
+ ),
+ label_checked_style = list("color" = "red"),
+ input_checked_style = list(
+ "backgroundColor" = "#fa7268",
+ "borderColor" = "#ea6258"
+ )
+ ),
+ htmlHr(),
+ dbcRadioItems(
+ id = "radio-selected-style",
+ options = list(
+ list(label = "Option 1", value = 1),
+ list(label = "Option 2", value = 2),
+ list(label = "Option 3", value = 3)
+ ),
+ labelCheckedClassName = "text-success",
+ inputCheckedClassName = "border border-success bg-success"
+ )
+ )
)
diff --git a/docs/components_page/components/input/selected_styles.jl b/docs/components_page/components/input/selected_styles.jl
index 6b9c5d7cc..ead29b15e 100644
--- a/docs/components_page/components/input/selected_styles.jl
+++ b/docs/components_page/components/input/selected_styles.jl
@@ -1,11 +1,29 @@
using DashBootstrapComponents
+using DashHtmlComponents
-checklist = dbc_checklist(
- id="checklist-selected-style",
- options=[
- Dict("label" => "Option 1", "value" => 1),
- Dict("label" => "Option 2", "value" => 2),
- Dict("label" => "Option 3", "value" => 3),
- ],
- labelCheckedStyle=Dict("color" => "red"),
-);
+checklist = html_div([
+ dbc_checklist(
+ id = "checklist-selected-style",
+ options = [
+ Dict("label" => "Option 1", "value" => 1),
+ Dict("label" => "Option 2", "value" => 2),
+ Dict("label" => "Option 3", "value" => 3),
+ ],
+ label_checked_style = Dict("color" => "red"),
+ input_checked_style = Dict(
+ "backgroundColor" => "#fa7268",
+ "borderColor" => "#ea6258",
+ ),
+ ),
+ html_hr(),
+ dbc_radioitems(
+ id = "radio-selected-style",
+ options = [
+ Dict("label" => "Option 1", "value" => 1),
+ Dict("label" => "Option 2", "value" => 2),
+ Dict("label" => "Option 3", "value" => 3),
+ ],
+ labelCheckedClassName = "text-success",
+ inputCheckedClassName = "border border-success bg-success",
+ ),
+]);
diff --git a/docs/components_page/components/input/selected_styles.py b/docs/components_page/components/input/selected_styles.py
index cf705c410..70902fd8a 100644
--- a/docs/components_page/components/input/selected_styles.py
+++ b/docs/components_page/components/input/selected_styles.py
@@ -1,11 +1,31 @@
import dash_bootstrap_components as dbc
+from dash import html
-checklist = dbc.Checklist(
- id="checklist-selected-style",
- options=[
- {"label": "Option 1", "value": 1},
- {"label": "Option 2", "value": 2},
- {"label": "Option 3", "value": 3},
- ],
- labelCheckedStyle={"color": "red"},
+checklist = html.Div(
+ [
+ dbc.Checklist(
+ id="checklist-selected-style",
+ options=[
+ {"label": "Option 1", "value": 1},
+ {"label": "Option 2", "value": 2},
+ {"label": "Option 3", "value": 3},
+ ],
+ label_checked_style={"color": "red"},
+ input_checked_style={
+ "backgroundColor": "#fa7268",
+ "borderColor": "#ea6258",
+ },
+ ),
+ html.Hr(),
+ dbc.RadioItems(
+ id="radio-selected-style",
+ options=[
+ {"label": "Option 1", "value": 1},
+ {"label": "Option 2", "value": 2},
+ {"label": "Option 3", "value": 3},
+ ],
+ labelCheckedClassName="text-success",
+ inputCheckedClassName="border border-success bg-success",
+ ),
+ ]
)
diff --git a/docs/components_page/components/input/simple.jl b/docs/components_page/components/input/simple.jl
index 543ce6243..4af06760f 100644
--- a/docs/components_page/components/input/simple.jl
+++ b/docs/components_page/components/input/simple.jl
@@ -1,9 +1,9 @@
using DashBootstrapComponents, DashHtmlComponents
text_input = html_div([
- dbc_input(id="input", placeholder="Type something...", type="text"),
+ dbc_input(id = "input", placeholder = "Type something...", type = "text"),
html_br(),
- html_p(id="output"),
+ html_p(id = "output"),
]);
callback!(app, Output("output", "children"), Input("input", "value")) do value
diff --git a/docs/components_page/components/input/simple.py b/docs/components_page/components/input/simple.py
index c29a00d6d..6e25e96d5 100644
--- a/docs/components_page/components/input/simple.py
+++ b/docs/components_page/components/input/simple.py
@@ -1,6 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output
+from dash import Input, Output, html
text_input = html.Div(
[
diff --git a/docs/components_page/components/input/size.R b/docs/components_page/components/input/size.R
index f3a1f3f4b..a86bb920d 100644
--- a/docs/components_page/components/input/size.R
+++ b/docs/components_page/components/input/size.R
@@ -4,11 +4,11 @@ library(dashHtmlComponents)
inputs <- htmlDiv(
list(
dbcInput(
- placeholder = "A large input...", bs_size = "lg", className = "mb-3"
+ placeholder = "A large input...", size = "lg", className = "mb-3"
),
dbcInput(
- placeholder = "A medium input...", bs_size = "md", className = "mb-3"
+ placeholder = "A medium input...", size = "md", className = "mb-3"
),
- dbcInput(placeholder = "A small input...", bs_size = "sm")
+ dbcInput(placeholder = "A small input...", size = "sm")
)
)
diff --git a/docs/components_page/components/input/size.jl b/docs/components_page/components/input/size.jl
index 100e63812..42f3466c1 100644
--- a/docs/components_page/components/input/size.jl
+++ b/docs/components_page/components/input/size.jl
@@ -1,7 +1,7 @@
using DashBootstrapComponents, DashHtmlComponents
inputs = html_div([
- dbc_input(placeholder="A large input...", bs_size="lg", className="mb-3"),
- dbc_input(placeholder="A medium input...", bs_size="md", className="mb-3"),
- dbc_input(placeholder="A small input...", bs_size="sm"),
+ dbc_input(placeholder = "A large input...", size = "lg", className = "mb-3"),
+ dbc_input(placeholder = "A medium input...", size = "md", className = "mb-3"),
+ dbc_input(placeholder = "A small input...", size = "sm"),
]);
diff --git a/docs/components_page/components/input/size.py b/docs/components_page/components/input/size.py
index 2cd34e2b2..c43e28968 100644
--- a/docs/components_page/components/input/size.py
+++ b/docs/components_page/components/input/size.py
@@ -1,14 +1,12 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
inputs = html.Div(
[
+ dbc.Input(placeholder="A large input...", size="lg", className="mb-3"),
dbc.Input(
- placeholder="A large input...", bs_size="lg", className="mb-3"
+ placeholder="A medium input...", size="md", className="mb-3"
),
- dbc.Input(
- placeholder="A medium input...", bs_size="md", className="mb-3"
- ),
- dbc.Input(placeholder="A small input...", bs_size="sm"),
+ dbc.Input(placeholder="A small input...", size="sm"),
]
)
diff --git a/docs/components_page/components/input/text_label.R b/docs/components_page/components/input/text_label.R
index 5348d2cb7..4678bfd54 100644
--- a/docs/components_page/components/input/text_label.R
+++ b/docs/components_page/components/input/text_label.R
@@ -1,6 +1,7 @@
library(dashBootstrapComponents)
+library(dashHtmlComponents)
-text_input <- dbcFormGroup(
+text_input <- htmlDiv(
list(
dbcLabel("Text"),
dbcInput(placeholder = "Input goes here...", type = "text"),
diff --git a/docs/components_page/components/input/text_label.jl b/docs/components_page/components/input/text_label.jl
index 463e398ea..da6e5cb5e 100644
--- a/docs/components_page/components/input/text_label.jl
+++ b/docs/components_page/components/input/text_label.jl
@@ -1,7 +1,7 @@
-using DashBootstrapComponents
+using DashBootstrapComponents, DashHtmlComponents
-text_input = dbc_formgroup([
+text_input = html_div([
dbc_label("Text"),
- dbc_input(placeholder="Input goes here...", type="text"),
+ dbc_input(placeholder = "Input goes here...", type = "text"),
dbc_formtext("Type something in the box above"),
]);
diff --git a/docs/components_page/components/input/text_label.py b/docs/components_page/components/input/text_label.py
index a615d3ca6..c6df14262 100644
--- a/docs/components_page/components/input/text_label.py
+++ b/docs/components_page/components/input/text_label.py
@@ -1,6 +1,7 @@
import dash_bootstrap_components as dbc
+from dash import html
-text_input = dbc.FormGroup(
+text_input = html.Div(
[
dbc.Label("Text"),
dbc.Input(placeholder="Input goes here...", type="text"),
diff --git a/docs/components_page/components/input/textarea.R b/docs/components_page/components/input/textarea.R
index 817398093..cf796d04f 100644
--- a/docs/components_page/components/input/textarea.R
+++ b/docs/components_page/components/input/textarea.R
@@ -5,13 +5,13 @@ textareas <- htmlDiv(
dbcTextarea(className = "mb-3", placeholder = "A Textarea"),
dbcTextarea(
valid = TRUE,
- bs_size = "sm",
+ size = "sm",
className = "mb-3",
placeholder = "A small, valid Textarea",
),
dbcTextarea(
- invalid = TRUE, bs_size = "lg",
- placeholder = "A large, invalid Textarea"
+ invalid = TRUE, size = "lg",
+ placeholder = "A large, invalid Textarea"
)
)
)
diff --git a/docs/components_page/components/input/textarea.jl b/docs/components_page/components/input/textarea.jl
index f79dbc4cf..be118769b 100644
--- a/docs/components_page/components/input/textarea.jl
+++ b/docs/components_page/components/input/textarea.jl
@@ -1,12 +1,12 @@
using DashBootstrapComponents, DashHtmlComponents
textareas = html_div([
- dbc_textarea(className="mb-3", placeholder="A Textarea"),
+ dbc_textarea(className = "mb-3", placeholder = "A Textarea"),
dbc_textarea(
- valid=true,
- bs_size="sm",
- className="mb-3",
- placeholder="A small, valid Textarea",
+ valid = true,
+ size = "sm",
+ className = "mb-3",
+ placeholder = "A small, valid Textarea",
),
- dbc_textarea(invalid=true, bs_size="lg", placeholder="A large, invalid Textarea"),
+ dbc_textarea(invalid = true, size = "lg", placeholder = "A large, invalid Textarea"),
]);
diff --git a/docs/components_page/components/input/textarea.py b/docs/components_page/components/input/textarea.py
index 15cf8449e..f08b18801 100644
--- a/docs/components_page/components/input/textarea.py
+++ b/docs/components_page/components/input/textarea.py
@@ -1,17 +1,17 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
textareas = html.Div(
[
dbc.Textarea(className="mb-3", placeholder="A Textarea"),
dbc.Textarea(
valid=True,
- bs_size="sm",
+ size="sm",
className="mb-3",
placeholder="A small, valid Textarea",
),
dbc.Textarea(
- invalid=True, bs_size="lg", placeholder="A large, invalid Textarea"
+ invalid=True, size="lg", placeholder="A large, invalid Textarea"
),
]
)
diff --git a/docs/components_page/components/input/validation.jl b/docs/components_page/components/input/validation.jl
index 1ebd87d1f..21aceb508 100644
--- a/docs/components_page/components/input/validation.jl
+++ b/docs/components_page/components/input/validation.jl
@@ -1,6 +1,6 @@
using DashBootstrapComponents, DashHtmlComponents
inputs = html_div([
- dbc_input(placeholder="Valid input...", valid=true, className="mb-3"),
- dbc_input(placeholder="Invalid input...", invalid=true),
+ dbc_input(placeholder = "Valid input...", valid = true, className = "mb-3"),
+ dbc_input(placeholder = "Invalid input...", invalid = true),
]);
diff --git a/docs/components_page/components/input/validation.py b/docs/components_page/components/input/validation.py
index 47a829fee..535d162df 100644
--- a/docs/components_page/components/input/validation.py
+++ b/docs/components_page/components/input/validation.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
inputs = html.Div(
[
diff --git a/docs/components_page/components/input_group.md b/docs/components_page/components/input_group.md
index df2f90a84..0b6c62639 100644
--- a/docs/components_page/components/input_group.md
+++ b/docs/components_page/components/input_group.md
@@ -3,34 +3,36 @@ title: InputGroup
lead: Easily extend form controls by adding text, buttons or button groups on either side of `Input`, `Textarea` and `Select` components.
---
-## Basic example
+## Examples
-Wrap a compatible input component and an `InputGroupAddon` in an `InputGroup`. Use the `addon_type` keyword argument of `InputGroupAddon` to ensure the correct styling.
+Wrap a compatible input component and either a `Button` or `InputGroupText` in an `InputGroup`.
{{example:components/input_group/simple.py:input_groups}}
## Sizing
-Use the `size` argument of `InputGroup` to set the size of all the contents, including inputs and addons. Possible options are `'lg'`, `'md'`, and `'sm'` for large, medium and small respectively.
+Use the `size` argument of `InputGroup` to set the size of all the contents, including inputs and addons. Possible options are `'lg'`, `'md'` (the default), and `'sm'` for large, medium and small respectively.
{{example:components/input_group/size.py:input_group}}
## Checkboxes and radios
-You can place a `Checkbox` or `RadioButton` inside the `InputGroup` instead of just text.
+You can place a `Checkbox` or `RadioButton` inside the `InputGroupText` instead of just text.
{{example:components/input_group/check_radio.py:input_groups}}
## Button addons
+Buttons can be placed inside an `InputGroup`
+
{{example:components/input_group/button.py:input_group}}
## DropdownMenu addons
+And so can `DropdownMenu` components.
+
{{example:components/input_group/dropdown.py:input_group}}
{{apidoc:src/components/input/InputGroup.js}}
-{{apidoc:src/components/input/InputGroupAddon.js}}
-
{{apidoc:src/components/input/InputGroupText.js}}
diff --git a/docs/components_page/components/input_group/button.R b/docs/components_page/components/input_group/button.R
index ef2660f4e..fc8d5b8ae 100644
--- a/docs/components_page/components/input_group/button.R
+++ b/docs/components_page/components/input_group/button.R
@@ -2,10 +2,7 @@ library(dashBootstrapComponents)
input_group <- dbcInputGroup(
list(
- dbcInputGroupAddon(
- dbcButton("Random name", id = "input-group-button", n_clicks = 0),
- addon_type = "prepend",
- ),
+ dbcButton("Random name", id = "input-group-button", n_clicks = 0),
dbcInput(id = "input-group-button-input", placeholder = "name")
)
)
@@ -18,7 +15,6 @@ app$callback(
if (n_clicks > 0) {
names <- c("Arthur Dent", "Ford Prefect", "Trillian Astra")
return(sample(names, 1))
-
}
return("")
}
diff --git a/docs/components_page/components/input_group/button.jl b/docs/components_page/components/input_group/button.jl
index ff98c3c8b..c07d54c1e 100644
--- a/docs/components_page/components/input_group/button.jl
+++ b/docs/components_page/components/input_group/button.jl
@@ -1,11 +1,8 @@
using DashBootstrapComponents
input_group = dbc_inputgroup([
- dbc_inputgroupaddon(
- dbc_button("Random name", id="input-group-button", n_clicks=0),
- addon_type="prepend",
- ),
- dbc_input(id="input-group-button-input", placeholder="name"),
+ dbc_button("Random name", id = "input-group-button", n_clicks = 0),
+ dbc_input(id = "input-group-button-input", placeholder = "name"),
]);
@@ -17,7 +14,7 @@ callback!(
if n_clicks > 0
names = ["Arthur Dent", "Ford Prefect", "Trillian Astra"]
which = n_clicks % length(names)
- return names[which + 1]
+ return names[which+1]
else
return ""
end
diff --git a/docs/components_page/components/input_group/button.py b/docs/components_page/components/input_group/button.py
index 389813f95..4c5332486 100644
--- a/docs/components_page/components/input_group/button.py
+++ b/docs/components_page/components/input_group/button.py
@@ -1,12 +1,9 @@
import dash_bootstrap_components as dbc
-from dash.dependencies import Input, Output
+from dash import Input, Output
input_group = dbc.InputGroup(
[
- dbc.InputGroupAddon(
- dbc.Button("Random name", id="input-group-button", n_clicks=0),
- addon_type="prepend",
- ),
+ dbc.Button("Random name", id="input-group-button", n_clicks=0),
dbc.Input(id="input-group-button-input", placeholder="name"),
]
)
diff --git a/docs/components_page/components/input_group/check_radio.R b/docs/components_page/components/input_group/check_radio.R
index fe5a1053c..a75d907c1 100644
--- a/docs/components_page/components/input_group/check_radio.R
+++ b/docs/components_page/components/input_group/check_radio.R
@@ -5,14 +5,14 @@ input_groups <- htmlDiv(
list(
dbcInputGroup(
list(
- dbcInputGroupAddon(dbcRadioButton(), addon_type = "prepend"),
+ dbcInputGroupText(dbcRadioButton()),
dbcInput()
),
className = "mb-3",
),
dbcInputGroup(
list(
- dbcInputGroupAddon(dbcCheckbox(), addon_type = "prepend"),
+ dbcInputGroupText(dbcCheckbox()),
dbcInput()
)
)
diff --git a/docs/components_page/components/input_group/check_radio.jl b/docs/components_page/components/input_group/check_radio.jl
index 907356410..3d82fffcb 100644
--- a/docs/components_page/components/input_group/check_radio.jl
+++ b/docs/components_page/components/input_group/check_radio.jl
@@ -2,11 +2,8 @@ using DashBootstrapComponents, DashHtmlComponents
input_groups = html_div([
dbc_inputgroup(
- [dbc_inputgroupaddon(dbc_radiobutton(), addon_type="prepend"), dbc_input()],
- className="mb-3",
+ [dbc_inputgrouptext(dbc_radiobutton()), dbc_input()],
+ className = "mb-3",
),
- dbc_inputgroup([
- dbc_inputgroupaddon(dbc_checkbox(), addon_type="prepend"),
- dbc_input(),
- ]),
+ dbc_inputgroup([dbc_inputgrouptext(dbc_checkbox()), dbc_input()]),
]);
diff --git a/docs/components_page/components/input_group/check_radio.py b/docs/components_page/components/input_group/check_radio.py
index 769e9f624..45119bf86 100644
--- a/docs/components_page/components/input_group/check_radio.py
+++ b/docs/components_page/components/input_group/check_radio.py
@@ -1,20 +1,12 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
input_groups = html.Div(
[
dbc.InputGroup(
- [
- dbc.InputGroupAddon(dbc.RadioButton(), addon_type="prepend"),
- dbc.Input(),
- ],
+ [dbc.InputGroupText(dbc.RadioButton()), dbc.Input()],
className="mb-3",
),
- dbc.InputGroup(
- [
- dbc.InputGroupAddon(dbc.Checkbox(), addon_type="prepend"),
- dbc.Input(),
- ]
- ),
+ dbc.InputGroup([dbc.InputGroupText(dbc.Checkbox()), dbc.Input()]),
]
)
diff --git a/docs/components_page/components/input_group/dropdown.R b/docs/components_page/components/input_group/dropdown.R
index eaf559d37..72bf73d78 100644
--- a/docs/components_page/components/input_group/dropdown.R
+++ b/docs/components_page/components/input_group/dropdown.R
@@ -1,16 +1,17 @@
library(dashBootstrapComponents)
dropdown_menu_items <- list(
- dbcDropdownMenuItem("Deep thought", id = "dropdown-menu-item-1"),
- dbcDropdownMenuItem("Hal", id = "dropdown-menu-item-2"),
- dbcDropdownMenuItem(divider = TRUE),
- dbcDropdownMenuItem("Clear", id = "dropdown-menu-item-clear")
+ dbcDropdownMenuItem("Deep thought", id = "dropdown-menu-item-1"),
+ dbcDropdownMenuItem("Hal", id = "dropdown-menu-item-2"),
+ dbcDropdownMenuItem(divider = TRUE),
+ dbcDropdownMenuItem("Clear", id = "dropdown-menu-item-clear")
)
input_group <- dbcInputGroup(
list(
dbcDropdownMenu(
- dropdown_menu_items, label = "Generate", addon_type = "prepend"
+ dropdown_menu_items,
+ label = "Generate"
),
dbcInput(id = "input-group-dropdown-input", placeholder = "name")
)
@@ -29,7 +30,9 @@ app$callback(
button_id <- if (ctx$triggered$value) {
unlist(strsplit(ctx$triggered$prop_id, "[.]"))[1]
- } else return("")
+ } else {
+ return("")
+ }
if (button_id == "dropdown-menu-item-clear") {
return("")
diff --git a/docs/components_page/components/input_group/dropdown.jl b/docs/components_page/components/input_group/dropdown.jl
index d10c8de0f..539723975 100644
--- a/docs/components_page/components/input_group/dropdown.jl
+++ b/docs/components_page/components/input_group/dropdown.jl
@@ -1,16 +1,16 @@
using Dash, DashBootstrapComponents
dropdown_menu_items = [
- dbc_dropdownmenuitem("Deep thought", id="dropdown-menu-item-1"),
- dbc_dropdownmenuitem("Hal", id="dropdown-menu-item-2"),
- dbc_dropdownmenuitem(divider=true),
- dbc_dropdownmenuitem("Clear", id="dropdown-menu-item-clear"),
+ dbc_dropdownmenuitem("Deep thought", id = "dropdown-menu-item-1"),
+ dbc_dropdownmenuitem("Hal", id = "dropdown-menu-item-2"),
+ dbc_dropdownmenuitem(divider = true),
+ dbc_dropdownmenuitem("Clear", id = "dropdown-menu-item-clear"),
];
input_group = dbc_inputgroup([
- dbc_dropdownmenu(dropdown_menu_items, label="Generate", addon_type="prepend"),
- dbc_input(id="input-group-dropdown-input", placeholder="name"),
+ dbc_dropdownmenu(dropdown_menu_items, label = "Generate"),
+ dbc_input(id = "input-group-dropdown-input", placeholder = "name"),
]);
@@ -34,11 +34,11 @@ callback!(
elseif button_id == "dropdown-menu-item-1"
names = ["Arthur Dent", "Ford Prefect", "Trillian Astra"]
which = n1 % length(names)
- return names[which + 1]
+ return names[which+1]
else
names = ["David Bowman", "Frank Poole", "Dr. Heywood Floyd"]
which = n2 % length(names)
- return names[which + 1]
+ return names[which+1]
end
end;
diff --git a/docs/components_page/components/input_group/dropdown.py b/docs/components_page/components/input_group/dropdown.py
index f3664cfb5..f28b131ef 100644
--- a/docs/components_page/components/input_group/dropdown.py
+++ b/docs/components_page/components/input_group/dropdown.py
@@ -1,6 +1,6 @@
import dash
import dash_bootstrap_components as dbc
-from dash.dependencies import Input, Output
+from dash import Input, Output
dropdown_menu_items = [
dbc.DropdownMenuItem("Deep thought", id="dropdown-menu-item-1"),
@@ -9,12 +9,10 @@
dbc.DropdownMenuItem("Clear", id="dropdown-menu-item-clear"),
]
-
+# TODO: check this renders properly once DropdownMenu is updated
input_group = dbc.InputGroup(
[
- dbc.DropdownMenu(
- dropdown_menu_items, label="Generate", addon_type="prepend"
- ),
+ dbc.DropdownMenu(dropdown_menu_items, label="Generate"),
dbc.Input(id="input-group-dropdown-input", placeholder="name"),
]
)
diff --git a/docs/components_page/components/input_group/simple.R b/docs/components_page/components/input_group/simple.R
index fd31ab316..1316ac2f1 100644
--- a/docs/components_page/components/input_group/simple.R
+++ b/docs/components_page/components/input_group/simple.R
@@ -4,7 +4,7 @@ input_groups <- htmlDiv(
list(
dbcInputGroup(
list(
- dbcInputGroupAddon("@", addon_type = "prepend"),
+ dbcInputGroupText("@"),
dbcInput(placeholder = "Username")
),
className = "mb-3"
@@ -12,21 +12,31 @@ input_groups <- htmlDiv(
dbcInputGroup(
list(
dbcInput(placeholder = "Recipient's username"),
- dbcInputGroupAddon("@example.com", addon_type = "append")
+ dbcInputGroupText("@example.com")
),
className = "mb-3"
),
dbcInputGroup(
list(
- dbcInputGroupAddon("$", addon_type = "prepend"),
+ dbcInputGroupText("$"),
dbcInput(placeholder = "Amount", type = "number"),
- dbcInputGroupAddon(".00", addon_type = "append")
+ dbcInputGroupText(".00")
),
className = "mb-3"
),
dbcInputGroup(
list(
- dbcInputGroupAddon("With textarea", addon_type = "prepend"),
+ dbcInputGroupText("Total:"),
+ dbcInputGroupText("$"),
+ dbcInput(placeholder = "Amount", type = "number"),
+ dbcInputGroupText(".00"),
+ dbcInputGroupText("only")
+ ),
+ className = "mb-3"
+ ),
+ dbcInputGroup(
+ list(
+ dbcInputGroupText("With textarea"),
dbcTextarea()
),
className = "mb-3"
@@ -35,11 +45,11 @@ input_groups <- htmlDiv(
list(
dbcSelect(
options = list(
- list(label = "Option 1", value = 1),
- list(label = "Option 2", value = 2)
+ list(label = "Option 1", value = 1),
+ list(label = "Option 2", value = 2)
)
),
- dbcInputGroupAddon("With select", addon_type = "append")
+ dbcInputGroupText("With select")
)
)
)
diff --git a/docs/components_page/components/input_group/simple.jl b/docs/components_page/components/input_group/simple.jl
index 70e535345..f5705188d 100644
--- a/docs/components_page/components/input_group/simple.jl
+++ b/docs/components_page/components/input_group/simple.jl
@@ -1,39 +1,46 @@
using DashBootstrapComponents, DashHtmlComponents
input_groups = html_div([
+ dbc_inputgroup(
+ [dbc_inputgrouptext("@"), dbc_input(placeholder = "Username")],
+ className = "mb-3",
+ ),
dbc_inputgroup(
[
- dbc_inputgroupaddon("@", addon_type="prepend"),
- dbc_input(placeholder="Username"),
+ dbc_input(placeholder = "Recipient's username"),
+ dbc_inputgrouptext("@example.com"),
],
- className="mb-3",
+ className = "mb-3",
),
dbc_inputgroup(
[
- dbc_input(placeholder="Recipient's username"),
- dbc_inputgroupaddon("@example.com", addon_type="append"),
+ dbc_inputgrouptext("\$"),
+ dbc_input(placeholder = "Amount", type = "number"),
+ dbc_inputgrouptext(".00"),
],
- className="mb-3",
+ className = "mb-3",
),
dbc_inputgroup(
[
- dbc_inputgroupaddon("\$", addon_type="prepend"),
- dbc_input(placeholder="Amount", type="number"),
- dbc_inputgroupaddon(".00", addon_type="append"),
+ dbc_inputgrouptext("Total:"),
+ dbc_inputgrouptext("\$"),
+ dbc_input(placeholder = "Amount", type = "number"),
+ dbc_inputgrouptext(".00"),
+ dbc_inputgrouptext("only"),
],
- className="mb-3",
+ className = "mb-3",
),
dbc_inputgroup(
- [dbc_inputgroupaddon("With textarea", addon_type="prepend"), dbc_textarea()],
- className="mb-3",
+ [dbc_inputgrouptext("With textarea"), dbc_textarea()],
+ className = "mb-3",
),
dbc_inputgroup([
dbc_select(
- options=[
+ options = [
Dict("label" => "Option 1", "value" => 1),
Dict("label" => "Option 2", "value" => 2),
],
),
- dbc_inputgroupaddon("With select", addon_type="append"),
+ dbc_inputgrouptext("With select"),
]),
]);
diff --git a/docs/components_page/components/input_group/simple.py b/docs/components_page/components/input_group/simple.py
index 408bed4bc..f0ed54640 100644
--- a/docs/components_page/components/input_group/simple.py
+++ b/docs/components_page/components/input_group/simple.py
@@ -1,33 +1,40 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
input_groups = html.Div(
[
+ dbc.InputGroup(
+ [dbc.InputGroupText("@"), dbc.Input(placeholder="Username")],
+ className="mb-3",
+ ),
dbc.InputGroup(
[
- dbc.InputGroupAddon("@", addon_type="prepend"),
- dbc.Input(placeholder="Username"),
+ dbc.Input(placeholder="Recipient's username"),
+ dbc.InputGroupText("@example.com"),
],
className="mb-3",
),
dbc.InputGroup(
[
- dbc.Input(placeholder="Recipient's username"),
- dbc.InputGroupAddon("@example.com", addon_type="append"),
+ dbc.InputGroupText("$"),
+ dbc.Input(placeholder="Amount", type="number"),
+ dbc.InputGroupText(".00"),
],
className="mb-3",
),
dbc.InputGroup(
[
- dbc.InputGroupAddon("$", addon_type="prepend"),
+ dbc.InputGroupText("Total:"),
+ dbc.InputGroupText("$"),
dbc.Input(placeholder="Amount", type="number"),
- dbc.InputGroupAddon(".00", addon_type="append"),
+ dbc.InputGroupText(".00"),
+ dbc.InputGroupText("only"),
],
className="mb-3",
),
dbc.InputGroup(
[
- dbc.InputGroupAddon("With textarea", addon_type="prepend"),
+ dbc.InputGroupText("With textarea"),
dbc.Textarea(),
],
className="mb-3",
@@ -40,7 +47,7 @@
{"label": "Option 2", "value": 2},
]
),
- dbc.InputGroupAddon("With select", addon_type="append"),
+ dbc.InputGroupText("With select"),
]
),
]
diff --git a/docs/components_page/components/input_group/size.R b/docs/components_page/components/input_group/size.R
index d1ff65494..60606d327 100644
--- a/docs/components_page/components/input_group/size.R
+++ b/docs/components_page/components/input_group/size.R
@@ -5,20 +5,20 @@ input_group <- htmlDiv(
list(
dbcInputGroup(
list(
- dbcInputGroupAddon("Large", addon_type = "prepend"), dbcInput()
+ dbcInputGroupText("Large"), dbcInput()
),
size = "lg"
),
htmlBr(),
dbcInputGroup(
list(
- dbcInputGroupAddon("Default", addon_type = "prepend"), dbcInput()
+ dbcInputGroupText("Default"), dbcInput()
)
),
htmlBr(),
dbcInputGroup(
list(
- dbcInputGroupAddon("Small", addon_type = "prepend"), dbcInput()
+ dbcInputGroupText("Small"), dbcInput()
),
size = "sm"
)
diff --git a/docs/components_page/components/input_group/size.jl b/docs/components_page/components/input_group/size.jl
index 18028b1a6..2699c9595 100644
--- a/docs/components_page/components/input_group/size.jl
+++ b/docs/components_page/components/input_group/size.jl
@@ -1,15 +1,9 @@
using DashBootstrapComponents, DashHtmlComponents
input_group = html_div([
- dbc_inputgroup(
- [dbc_inputgroupaddon("Large", addon_type="prepend"), dbc_input()],
- size="lg",
- ),
+ dbc_inputgroup([dbc_inputgrouptext("Large"), dbc_input()], size = "lg"),
html_br(),
- dbc_inputgroup([dbc_inputgroupaddon("Default", addon_type="prepend"), dbc_input()]),
+ dbc_inputgroup([dbc_inputgrouptext("Default"), dbc_input()]),
html_br(),
- dbc_inputgroup(
- [dbc_inputgroupaddon("Small", addon_type="prepend"), dbc_input()],
- size="sm",
- ),
+ dbc_inputgroup([dbc_inputgrouptext("Small"), dbc_input()], size = "sm"),
]);
diff --git a/docs/components_page/components/input_group/size.py b/docs/components_page/components/input_group/size.py
index 6b63a252b..bfe04b795 100644
--- a/docs/components_page/components/input_group/size.py
+++ b/docs/components_page/components/input_group/size.py
@@ -1,20 +1,12 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
input_group = html.Div(
[
- dbc.InputGroup(
- [dbc.InputGroupAddon("Large", addon_type="prepend"), dbc.Input()],
- size="lg",
- ),
+ dbc.InputGroup([dbc.InputGroupText("Large"), dbc.Input()], size="lg"),
html.Br(),
- dbc.InputGroup(
- [dbc.InputGroupAddon("Default", addon_type="prepend"), dbc.Input()]
- ),
+ dbc.InputGroup([dbc.InputGroupText("Default"), dbc.Input()]),
html.Br(),
- dbc.InputGroup(
- [dbc.InputGroupAddon("Small", addon_type="prepend"), dbc.Input()],
- size="sm",
- ),
+ dbc.InputGroup([dbc.InputGroupText("Small"), dbc.Input()], size="sm"),
]
)
diff --git a/docs/components_page/components/jumbotron.md b/docs/components_page/components/jumbotron.md
index b81f3b597..035fc0fa4 100644
--- a/docs/components_page/components/jumbotron.md
+++ b/docs/components_page/components/jumbotron.md
@@ -1,16 +1,16 @@
---
title: Jumbotron
-lead: Lightweight component for showcasing key content and messages.
+lead: Lightweight styling for showcasing key content and messages.
---
-## Simple example
+## Examples
-{{example:components/jumbotron/simple.py:simple_jumbotron}}
+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
-## Fluid jumbotron
+{{example:components/jumbotron/simple.py:jumbotron}}
-To make the jumbotron full width, and without rounded corners, set `fluid=True`.
+### Styling the "Jumbotron"
-{{example:components/jumbotron/fluid.py:fluid_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.
-{{apidoc:src/components/Jumbotron.js}}
+{{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..c41dceb12
--- /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", className = "display-3"),
+ htmlHr(className = "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)
+ ),
+ className = "h-100 p-5 text-white bg-dark rounded-3"
+ ),
+ md = 6
+)
+
+right_jumbotron <- dbcCol(
+ htmlDiv(
+ list(
+ htmlH2("Add borders", className = "display-3"),
+ htmlHr(className = "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)
+ ),
+ className = "h-100 p-5 bg-light border rounded-3"
+ ),
+ md = 6
+)
+
+jumbotron <- dbcRow(
+ list(left_jumbotron, right_jumbotron),
+ className = "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..e4ce2039d
--- /dev/null
+++ b/docs/components_page/components/jumbotron/custom.jl
@@ -0,0 +1,35 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+left_jumbotron = dbc_col(
+ html_div(
+ [
+ html_h2("Change the background", className = "display-3"),
+ html_hr(className = "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),
+ ],
+ className = "h-100 p-5 text-white bg-dark rounded-3",
+ ),
+ md = 6,
+)
+
+right_jumbotron = dbc_col(
+ html_div(
+ [
+ html_h2("Add borders", className = "display-3"),
+ html_hr(className = "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),
+ ],
+ className = "h-100 p-5 bg-light border rounded-3",
+ ),
+ md = 6,
+)
+
+jumbotron = dbc_row([left_jumbotron, right_jumbotron], className = "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..3bcdf0063
--- /dev/null
+++ b/docs/components_page/components/jumbotron/custom.py
@@ -0,0 +1,39 @@
+import dash_bootstrap_components as dbc
+from dash import html
+
+left_jumbotron = dbc.Col(
+ html.Div(
+ [
+ html.H2("Change the background", className="display-3"),
+ html.Hr(className="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),
+ ],
+ className="h-100 p-5 text-white bg-dark rounded-3",
+ ),
+ md=6,
+)
+
+right_jumbotron = dbc.Col(
+ html.Div(
+ [
+ html.H2("Add borders", className="display-3"),
+ html.Hr(className="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),
+ ],
+ className="h-100 p-5 bg-light border rounded-3",
+ ),
+ md=6,
+)
+
+jumbotron = dbc.Row(
+ [left_jumbotron, right_jumbotron],
+ className="align-items-md-stretch",
+)
diff --git a/docs/components_page/components/jumbotron/fluid.R b/docs/components_page/components/jumbotron/fluid.R
deleted file mode 100644
index ac896e97c..000000000
--- a/docs/components_page/components/jumbotron/fluid.R
+++ /dev/null
@@ -1,28 +0,0 @@
-library(dashBootstrapComponents)
-library(dashHtmlComponents)
-
-fluid_jumbotron <- dbcJumbotron(
- list(
- dbcContainer(
- list(
- htmlH1("Fluid jumbotron", className = "display-3"),
- htmlP(
- paste(
- "This jumbotron occupies the entire horizontal",
- "space of its parent."
- ),
- className = "lead",
- ),
- htmlP(
- paste(
- "You will need to embed a fluid container in",
- "the jumbotron."
- ),
- className = "lead"
- )
- ),
- fluid = TRUE
- )
- ),
- fluid = TRUE
-)
diff --git a/docs/components_page/components/jumbotron/fluid.jl b/docs/components_page/components/jumbotron/fluid.jl
deleted file mode 100644
index 4830d0be9..000000000
--- a/docs/components_page/components/jumbotron/fluid.jl
+++ /dev/null
@@ -1,22 +0,0 @@
-using DashBootstrapComponents, DashHtmlComponents
-
-fluid_jumbotron = dbc_jumbotron(
- [
- dbc_container(
- [
- html_h1("Fluid jumbotron", className="display-3"),
- html_p(
- "This jumbotron occupies the entire horizontal " *
- "space of its parent.",
- className="lead",
- ),
- html_p(
- "You will need to embed a fluid container in " * "the jumbotron.",
- className="lead",
- ),
- ],
- fluid=true,
- ),
- ],
- fluid=true,
-);
diff --git a/docs/components_page/components/jumbotron/fluid.py b/docs/components_page/components/jumbotron/fluid.py
deleted file mode 100644
index 00b0f23d1..000000000
--- a/docs/components_page/components/jumbotron/fluid.py
+++ /dev/null
@@ -1,24 +0,0 @@
-import dash_bootstrap_components as dbc
-import dash_html_components as html
-
-fluid_jumbotron = dbc.Jumbotron(
- [
- dbc.Container(
- [
- html.H1("Fluid jumbotron", className="display-3"),
- html.P(
- "This jumbotron occupies the entire horizontal "
- "space of its parent.",
- className="lead",
- ),
- html.P(
- "You will need to embed a fluid container in "
- "the jumbotron.",
- className="lead",
- ),
- ],
- fluid=True,
- )
- ],
- fluid=True,
-)
diff --git a/docs/components_page/components/jumbotron/simple.R b/docs/components_page/components/jumbotron/simple.R
index eac300cab..8bad3f21f 100644
--- a/docs/components_page/components/jumbotron/simple.R
+++ b/docs/components_page/components/jumbotron/simple.R
@@ -1,23 +1,31 @@
library(dashBootstrapComponents)
library(dashHtmlComponents)
-simple_jumbotron <- dbcJumbotron(
- list(
- htmlH1("Jumbotron", className = "display-3"),
- htmlP(
+jumbotron <- htmlDiv(
+ dbcContainer(
+ list(
+ htmlH1("Jumbotron", className = "display-3"),
+ htmlP(
paste(
- "Use a jumbotron to call attention to",
+ "Use Containers to create a jumbotron to call attention to",
"featured content or information."
),
- className = "lead",
- ),
- htmlHr(className = "my-2"),
- htmlP(
+ className = "lead"
+ ),
+ htmlHr(className = "my-2"),
+ htmlP(
paste(
- "Jumbotrons use utility classes for typography and",
- "spacing to suit the larger container."
+ "Use utility classes for typography and spacing to suit the",
+ "larger container."
)
+ ),
+ htmlP(
+ dbcButton("Learn more", color = "primary"),
+ className = "lead"
+ )
),
- htmlP(dbcButton("Learn more", color = "primary"), className = "lead")
- )
+ fluid = TRUE,
+ className = "py-3"
+ ),
+ className = "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 1d12658dc..bc83699ed 100644
--- a/docs/components_page/components/jumbotron/simple.jl
+++ b/docs/components_page/components/jumbotron/simple.jl
@@ -1,15 +1,23 @@
using DashBootstrapComponents, DashHtmlComponents
-simple_jumbotron = dbc_jumbotron([
- html_h1("Jumbotron", className="display-3"),
- html_p(
- "Use a jumbotron to call attention to " * "featured content or information.",
- className="lead",
+jumbotron = html_div(
+ dbc_container(
+ [
+ html_h1("Jumbotron", className = "display-3"),
+ html_p(
+ "Use Containers to create a jumbotron to call attention to " *
+ "featured content or information.",
+ className = "lead",
+ ),
+ html_hr(className = "my-2"),
+ html_p(
+ "Use utility classes for typography and spacing to suit the " *
+ "larger container.",
+ ),
+ html_p(dbc_button("Learn more", color = "primary"), className = "lead"),
+ ],
+ fluid = true,
+ className = "py-3",
),
- html_hr(className="my-2"),
- html_p(
- "Jumbotrons use utility classes for typography and " *
- "spacing to suit the larger container.",
- ),
- html_p(dbc_button("Learn more", color="primary"), className="lead"),
-]);
+ className = "p-3 bg-light rounded-3",
+)
diff --git a/docs/components_page/components/jumbotron/simple.py b/docs/components_page/components/jumbotron/simple.py
index ac9a37cff..4dcf9e4be 100644
--- a/docs/components_page/components/jumbotron/simple.py
+++ b/docs/components_page/components/jumbotron/simple.py
@@ -1,19 +1,26 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
-simple_jumbotron = dbc.Jumbotron(
- [
- html.H1("Jumbotron", className="display-3"),
- html.P(
- "Use a jumbotron to call attention to "
- "featured content or information.",
- className="lead",
- ),
- html.Hr(className="my-2"),
- html.P(
- "Jumbotrons use utility classes for typography and "
- "spacing to suit the larger container."
- ),
- html.P(dbc.Button("Learn more", color="primary"), className="lead"),
- ]
+jumbotron = html.Div(
+ dbc.Container(
+ [
+ html.H1("Jumbotron", className="display-3"),
+ html.P(
+ "Use Containers to create a jumbotron to call attention to "
+ "featured content or information.",
+ className="lead",
+ ),
+ html.Hr(className="my-2"),
+ html.P(
+ "Use utility classes for typography and spacing to suit the "
+ "larger container."
+ ),
+ html.P(
+ dbc.Button("Learn more", color="primary"), className="lead"
+ ),
+ ],
+ fluid=True,
+ className="py-3",
+ ),
+ className="p-3 bg-light rounded-3",
)
diff --git a/docs/components_page/components/layout.md b/docs/components_page/components/layout.md
index b11f2d6a0..c4b361e8b 100644
--- a/docs/components_page/components/layout.md
+++ b/docs/components_page/components/layout.md
@@ -3,11 +3,13 @@ title: Layout
lead: Components for laying out your Dash app, including wrapping containers, and a powerful, responsive grid system.
---
+## Examples
+
Layout in Bootstrap is controlled using the grid system. The Bootstrap grid has twelve columns, and five responsive tiers (allowing you to specify different behaviours on different screen sizes, see below). The width of your columns can be specified in terms of how many of the twelve grid columns it should span, or you can allow the columns to expand or shrink to fit either their content or the available space in the row.
-There are three main layout components in *dash-bootstrap-components*: `Container`, `Row`, and `Col`.
+There are three main layout components in _dash-bootstrap-components_: `Container`, `Row`, and `Col`.
-The `Container` component can be used to center and horizontally pad your app's content. The docs you are currently reading are themselves a Dash app built with *dash-bootstrap-components*. The content on this page has been centered by wrapping it in a `Container` component. By default the container has a responsive pixel width. Use the keyword argument `fluid=True` if you want your `Container` to fill available horizontal space and resize fluidly.
+The `Container` component can be used to center and horizontally pad your app's content. The docs you are currently reading are themselves a Dash app built with _dash-bootstrap-components_. The content on this page has been centered by wrapping it in a `Container` component. By default the container has a responsive pixel width. Use the keyword argument `fluid=True` if you want your `Container` to fill available horizontal space and resize fluidly.
The `Row` component is a wrapper for columns. The layout of your app should be built as a series of rows of columns.
@@ -40,7 +42,7 @@ In addition to the simple width arguments outlined above, you can pass a diction
`size` takes any of the simple arguments that `width` understands, i.e. `True`, "auto", or an integer `1`,...,`12`, and specifies the size / width of the column.
-`order` can be used to reorder the columns. It accepts the integers `1`,...,`12`, or the strings `"first"` and `"last"`. Columns will then be ordered numerically, with columns specified as `"first"` or `"last"` being placed first and last respectively. If two columns have the same order, they will keep the order they are specified in the source.
+`order` can be used to reorder the columns. It accepts the integers `1`,...,`5`, or the strings `"first"` and `"last"`. Columns will then be ordered numerically, with columns specified as `"first"` or `"last"` being placed first and last respectively. If two columns have the same order, they will keep the order they are specified in the source.
Finally `offset` accepts the integers `1`, ..., `12` and increases the left margin of the column by that number of grid columns.
@@ -60,7 +62,7 @@ By setting different sizes, orders and offsets for the different responsive tier
## Row without 'gutters'
-By default, horizontal spacing is added between the columns. Use `no_gutters=True` to disable this.
+By default, horizontal spacing is added between the columns. Use Bootstrap's [gutter modifier classes](https://getbootstrap.com/docs/5.1/layout/gutters/) to adjust this.
{{example:components/layout/no_gutters.py:row}}
@@ -80,7 +82,7 @@ You can also control horizontal alignment of columns using the `justify` keyword
Sometimes you may wish to use Bootstrap's grid system for specifying the layout of your app, but you don't want the changes Bootstrap makes to the typography, or to load all the additional CSS classes that Bootstrap specifies. In such a situation, you can link only the CSS required for the grid system using the `themes` module.
-{{code-example:components/layout/grid_only.py:python}}
+{{code-example:components/layout/grid_only.py}}
Alternatively download `bootstrap-grid.css` from the [Bootstrap website](https://getbootstrap.com/docs/4.2/getting-started/download/) and place it in your app's `assets/` directory. See the [Plotly Dash documentation](https://dash.plot.ly/external-resources) for details.
diff --git a/docs/components_page/components/layout/breakpoints.R b/docs/components_page/components/layout/breakpoints.R
index 7a6d50f57..1af6e8cd5 100644
--- a/docs/components_page/components/layout/breakpoints.R
+++ b/docs/components_page/components/layout/breakpoints.R
@@ -6,23 +6,30 @@ row <- htmlDiv(
dbcRow(
list(
dbcCol(htmlDiv(
- "One of three columns"), md = 4),
+ "One of three columns"
+ ), md = 4),
dbcCol(htmlDiv(
- "One of three columns"), md = 4),
+ "One of three columns"
+ ), md = 4),
dbcCol(htmlDiv(
- "One of three columns"), md = 4)
+ "One of three columns"
+ ), md = 4)
)
),
dbcRow(
list(
dbcCol(htmlDiv(
- "One of four columns"), width = 6, lg = 3),
+ "One of four columns"
+ ), width = 6, lg = 3),
dbcCol(htmlDiv(
- "One of four columns"), width = 6, lg = 3),
+ "One of four columns"
+ ), width = 6, lg = 3),
dbcCol(htmlDiv(
- "One of four columns"), width = 6, lg = 3),
+ "One of four columns"
+ ), width = 6, lg = 3),
dbcCol(htmlDiv(
- "One of four columns"), width = 6, lg = 3)
+ "One of four columns"
+ ), width = 6, lg = 3)
)
)
)
diff --git a/docs/components_page/components/layout/breakpoints.jl b/docs/components_page/components/layout/breakpoints.jl
index f5d7ea111..7bab6de82 100644
--- a/docs/components_page/components/layout/breakpoints.jl
+++ b/docs/components_page/components/layout/breakpoints.jl
@@ -2,14 +2,14 @@ using DashBootstrapComponents, DashHtmlComponents
row = html_div([
dbc_row([
- dbc_col(html_div("One of three columns"), md=4),
- dbc_col(html_div("One of three columns"), md=4),
- dbc_col(html_div("One of three columns"), md=4),
+ dbc_col(html_div("One of three columns"), md = 4),
+ dbc_col(html_div("One of three columns"), md = 4),
+ dbc_col(html_div("One of three columns"), md = 4),
]),
dbc_row([
- dbc_col(html_div("One of four columns"), width=6, lg=3),
- dbc_col(html_div("One of four columns"), width=6, lg=3),
- dbc_col(html_div("One of four columns"), width=6, lg=3),
- dbc_col(html_div("One of four columns"), width=6, lg=3),
+ dbc_col(html_div("One of four columns"), width = 6, lg = 3),
+ dbc_col(html_div("One of four columns"), width = 6, lg = 3),
+ dbc_col(html_div("One of four columns"), width = 6, lg = 3),
+ dbc_col(html_div("One of four columns"), width = 6, lg = 3),
]),
]);
diff --git a/docs/components_page/components/layout/breakpoints.py b/docs/components_page/components/layout/breakpoints.py
index 48d2217fd..5cce6f144 100644
--- a/docs/components_page/components/layout/breakpoints.py
+++ b/docs/components_page/components/layout/breakpoints.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
row = html.Div(
[
diff --git a/docs/components_page/components/layout/grid_only.jl b/docs/components_page/components/layout/grid_only.jl
index 1218095cf..6370dfe2c 100644
--- a/docs/components_page/components/layout/grid_only.jl
+++ b/docs/components_page/components/layout/grid_only.jl
@@ -1,3 +1,3 @@
using Dash, DashBootstrapComponents
-app = dash(external_stylesheets=[dbc_themes.GRID]);
+app = dash(external_stylesheets = [dbc_themes.GRID]);
diff --git a/docs/components_page/components/layout/horizontal.R b/docs/components_page/components/layout/horizontal.R
index 60110ba54..ce567820a 100644
--- a/docs/components_page/components/layout/horizontal.R
+++ b/docs/components_page/components/layout/horizontal.R
@@ -1,7 +1,7 @@
library(dashBootstrapComponents)
library(dashHtmlComponents)
-row <- htmlDiv(
+row <- htmlDiv(
list(
dbcRow(
list(
diff --git a/docs/components_page/components/layout/horizontal.jl b/docs/components_page/components/layout/horizontal.jl
index 2a68318a1..36439d8f4 100644
--- a/docs/components_page/components/layout/horizontal.jl
+++ b/docs/components_page/components/layout/horizontal.jl
@@ -3,37 +3,37 @@ using DashBootstrapComponents, DashHtmlComponents
row = html_div([
dbc_row(
[
- dbc_col(html_div("One of two columns"), width=4),
- dbc_col(html_div("One of two columns"), width=4),
+ dbc_col(html_div("One of two columns"), width = 4),
+ dbc_col(html_div("One of two columns"), width = 4),
],
- justify="start",
+ justify = "start",
),
dbc_row(
[
- dbc_col(html_div("One of two columns"), width=4),
- dbc_col(html_div("One of two columns"), width=4),
+ dbc_col(html_div("One of two columns"), width = 4),
+ dbc_col(html_div("One of two columns"), width = 4),
],
- justify="center",
+ justify = "center",
),
dbc_row(
[
- dbc_col(html_div("One of two columns"), width=4),
- dbc_col(html_div("One of two columns"), width=4),
+ dbc_col(html_div("One of two columns"), width = 4),
+ dbc_col(html_div("One of two columns"), width = 4),
],
- justify="end",
+ justify = "end",
),
dbc_row(
[
- dbc_col(html_div("One of two columns"), width=4),
- dbc_col(html_div("One of two columns"), width=4),
+ dbc_col(html_div("One of two columns"), width = 4),
+ dbc_col(html_div("One of two columns"), width = 4),
],
- justify="between",
+ justify = "between",
),
dbc_row(
[
- dbc_col(html_div("One of two columns"), width=4),
- dbc_col(html_div("One of two columns"), width=4),
+ dbc_col(html_div("One of two columns"), width = 4),
+ dbc_col(html_div("One of two columns"), width = 4),
],
- justify="around",
+ justify = "around",
),
]);
diff --git a/docs/components_page/components/layout/horizontal.py b/docs/components_page/components/layout/horizontal.py
index 8bf4c8128..007b4ed4c 100644
--- a/docs/components_page/components/layout/horizontal.py
+++ b/docs/components_page/components/layout/horizontal.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
row = html.Div(
[
diff --git a/docs/components_page/components/layout/no_gutters.R b/docs/components_page/components/layout/no_gutters.R
index 6e2469dd3..c46fe4c3a 100644
--- a/docs/components_page/components/layout/no_gutters.R
+++ b/docs/components_page/components/layout/no_gutters.R
@@ -7,5 +7,5 @@ row <- dbcRow(
dbcCol(htmlDiv("One of three columns")),
dbcCol(htmlDiv("One of three columns"))
),
- no_gutters = TRUE,
+ className = "g-0"
)
diff --git a/docs/components_page/components/layout/no_gutters.jl b/docs/components_page/components/layout/no_gutters.jl
index e4c6a5091..b55b8ec3e 100644
--- a/docs/components_page/components/layout/no_gutters.jl
+++ b/docs/components_page/components/layout/no_gutters.jl
@@ -6,5 +6,5 @@ row = dbc_row(
dbc_col(html_div("One of three columns")),
dbc_col(html_div("One of three columns")),
],
- no_gutters=true,
+ className = "g-0",
);
diff --git a/docs/components_page/components/layout/no_gutters.py b/docs/components_page/components/layout/no_gutters.py
index 06cae0dda..c113e7f33 100644
--- a/docs/components_page/components/layout/no_gutters.py
+++ b/docs/components_page/components/layout/no_gutters.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
row = dbc.Row(
[
@@ -7,5 +7,5 @@
dbc.Col(html.Div("One of three columns")),
dbc.Col(html.Div("One of three columns")),
],
- no_gutters=True,
+ className="g-0",
)
diff --git a/docs/components_page/components/layout/order_offset.R b/docs/components_page/components/layout/order_offset.R
index ce59b6dd5..03d8fa879 100644
--- a/docs/components_page/components/layout/order_offset.R
+++ b/docs/components_page/components/layout/order_offset.R
@@ -5,8 +5,8 @@ row <- htmlDiv(
list(
dbcRow(
dbcCol(
- htmlDiv("A single, half-width column"),
- width = list(size = 6, offset = 3)
+ htmlDiv("A single, half-width column"),
+ width = list(size = 6, offset = 3)
)
),
dbcRow(
@@ -21,7 +21,7 @@ row <- htmlDiv(
),
dbcCol(
htmlDiv("The second of three columns"),
- width = list(size = 3, order = 12)
+ width = list(size = 3, order = 5)
)
)
)
diff --git a/docs/components_page/components/layout/order_offset.jl b/docs/components_page/components/layout/order_offset.jl
index 7c7eb950f..b630de0b3 100644
--- a/docs/components_page/components/layout/order_offset.jl
+++ b/docs/components_page/components/layout/order_offset.jl
@@ -4,21 +4,21 @@ row = html_div([
dbc_row(
dbc_col(
html_div("A single, half-width column"),
- width=Dict("size" => 6, "offset" => 3),
+ width = Dict("size" => 6, "offset" => 3),
),
),
dbc_row([
dbc_col(
html_div("The last of three columns"),
- width=Dict("size" => 3, "order" => "last", "offset" => 1),
+ width = Dict("size" => 3, "order" => "last", "offset" => 1),
),
dbc_col(
html_div("The first of three columns"),
- width=Dict("size" => 3, "order" => 1, "offset" => 2),
+ width = Dict("size" => 3, "order" => 1, "offset" => 2),
),
dbc_col(
html_div("The second of three columns"),
- width=Dict("size" => 3, "order" => 12),
+ width = Dict("size" => 3, "order" => 5),
),
]),
]);
diff --git a/docs/components_page/components/layout/order_offset.py b/docs/components_page/components/layout/order_offset.py
index c917c36a9..b79fef460 100644
--- a/docs/components_page/components/layout/order_offset.py
+++ b/docs/components_page/components/layout/order_offset.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
row = html.Div(
[
@@ -21,7 +21,7 @@
),
dbc.Col(
html.Div("The second of three columns"),
- width={"size": 3, "order": 12},
+ width={"size": 3, "order": 5},
),
]
),
diff --git a/docs/components_page/components/layout/simple.py b/docs/components_page/components/layout/simple.py
index 68d93ffd3..80cb6dac5 100644
--- a/docs/components_page/components/layout/simple.py
+++ b/docs/components_page/components/layout/simple.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
row = html.Div(
[
diff --git a/docs/components_page/components/layout/vertical.jl b/docs/components_page/components/layout/vertical.jl
index 99006464e..ea3889e76 100644
--- a/docs/components_page/components/layout/vertical.jl
+++ b/docs/components_page/components/layout/vertical.jl
@@ -7,7 +7,7 @@ row = html_div([
dbc_col(html_div("One of three columns")),
dbc_col(html_div("One of three columns")),
],
- align="start",
+ align = "start",
),
dbc_row(
[
@@ -15,7 +15,7 @@ row = html_div([
dbc_col(html_div("One of three columns")),
dbc_col(html_div("One of three columns")),
],
- align="center",
+ align = "center",
),
dbc_row(
[
@@ -23,11 +23,11 @@ row = html_div([
dbc_col(html_div("One of three columns")),
dbc_col(html_div("One of three columns")),
],
- align="end",
+ align = "end",
),
dbc_row([
- dbc_col(html_div("One of three columns"), align="start"),
- dbc_col(html_div("One of three columns"), align="center"),
- dbc_col(html_div("One of three columns"), align="end"),
+ dbc_col(html_div("One of three columns"), align = "start"),
+ dbc_col(html_div("One of three columns"), align = "center"),
+ dbc_col(html_div("One of three columns"), align = "end"),
]),
]);
diff --git a/docs/components_page/components/layout/vertical.py b/docs/components_page/components/layout/vertical.py
index dac3ff769..44002f60d 100644
--- a/docs/components_page/components/layout/vertical.py
+++ b/docs/components_page/components/layout/vertical.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
row = html.Div(
[
diff --git a/docs/components_page/components/layout/width.R b/docs/components_page/components/layout/width.R
index 61820784e..3c9d12ba4 100644
--- a/docs/components_page/components/layout/width.R
+++ b/docs/components_page/components/layout/width.R
@@ -4,7 +4,7 @@ library(dashHtmlComponents)
row <- htmlDiv(
list(
dbcRow(
- dbcCol(htmlDiv("A single, half-width column"),width = 6)
+ dbcCol(htmlDiv("A single, half-width column"), width = 6)
),
dbcRow(
dbcCol(htmlDiv("An automatically sized column"), width = "auto")
@@ -14,7 +14,7 @@ row <- htmlDiv(
dbcCol(htmlDiv("One of three columns"), width = 3),
dbcCol(htmlDiv("One of three columns")),
dbcCol(htmlDiv("One of three columns"), width = 3)
- )
+ )
)
)
)
diff --git a/docs/components_page/components/layout/width.jl b/docs/components_page/components/layout/width.jl
index 597b56afe..43184464f 100644
--- a/docs/components_page/components/layout/width.jl
+++ b/docs/components_page/components/layout/width.jl
@@ -1,11 +1,11 @@
using DashBootstrapComponents, DashHtmlComponents
row = html_div([
- dbc_row(dbc_col(html_div("A single, half-width column"), width=6)),
- dbc_row(dbc_col(html_div("An automatically sized column"), width="auto")),
+ dbc_row(dbc_col(html_div("A single, half-width column"), width = 6)),
+ dbc_row(dbc_col(html_div("An automatically sized column"), width = "auto")),
dbc_row([
- dbc_col(html_div("One of three columns"), width=3),
+ dbc_col(html_div("One of three columns"), width = 3),
dbc_col(html_div("One of three columns")),
- dbc_col(html_div("One of three columns"), width=3),
+ dbc_col(html_div("One of three columns"), width = 3),
]),
]);
diff --git a/docs/components_page/components/layout/width.py b/docs/components_page/components/layout/width.py
index dd99f66c2..ae2c2ff10 100644
--- a/docs/components_page/components/layout/width.py
+++ b/docs/components_page/components/layout/width.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
row = html.Div(
[
diff --git a/docs/components_page/components/list_group.md b/docs/components_page/components/list_group.md
index 11b9f7016..72e71dbf2 100644
--- a/docs/components_page/components/list_group.md
+++ b/docs/components_page/components/list_group.md
@@ -3,7 +3,7 @@ title: ListGroup
lead: A simple, flexible component for displaying a series of content.
---
-## Simple example
+## Examples
The most basic `ListGroup` is an unordered list of `ListGroupItem` components.
@@ -27,9 +27,15 @@ Pass one of Bootstrap's contextual colors to the `color` argument of `ListGroupI
{{example:components/list_group/colors.py:list_group}}
+## Flush
+
+Add flush to change some of the styling, including removing borders, and rounding some of the edges to fit in line with the parent container.
+
+{{example:components/list_group/flush.py:list_group}}
+
## Custom content
-You can pass any Dash components to the children of `ListGroupItem`. The components `ListGroupItemHeading` and `ListGroupItemText` automatically apply the relevant CSS classes for styling text content in list groups.
+You can pass any Dash components to the children of `ListGroupItem`.
{{example:components/list_group/content.py:list_group}}
@@ -44,7 +50,3 @@ In the below example, the first list group is always horizontal, the second is h
{{apidoc:src/components/listgroup/ListGroup.js}}
{{apidoc:src/components/listgroup/ListGroupItem.js}}
-
-{{apidoc:src/components/listgroup/ListGroupItemHeading.js}}
-
-{{apidoc:src/components/listgroup/ListGroupItemText.js}}
diff --git a/docs/components_page/components/list_group/active.jl b/docs/components_page/components/list_group/active.jl
index 3e3f76448..fb84c3582 100644
--- a/docs/components_page/components/list_group/active.jl
+++ b/docs/components_page/components/list_group/active.jl
@@ -1,7 +1,7 @@
using DashBootstrapComponents
list_group = dbc_listgroup([
- dbc_listgroupitem("Active item", active=true),
+ dbc_listgroupitem("Active item", active = true),
dbc_listgroupitem("Item 2"),
dbc_listgroupitem("Item 3"),
]);
diff --git a/docs/components_page/components/list_group/colors.R b/docs/components_page/components/list_group/colors.R
index eedffcd2c..70956fdbf 100644
--- a/docs/components_page/components/list_group/colors.R
+++ b/docs/components_page/components/list_group/colors.R
@@ -2,11 +2,14 @@ library(dashBootstrapComponents)
list_group <- dbcListGroup(
list(
+ dbcListGroupItem("No color applied"),
dbcListGroupItem("The primary item", color = "primary"),
dbcListGroupItem("A secondary item", color = "secondary"),
dbcListGroupItem("A successful item", color = "success"),
dbcListGroupItem("A warning item", color = "warning"),
dbcListGroupItem("A dangerous item", color = "danger"),
- dbcListGroupItem("An informative item", color = "info")
+ dbcListGroupItem("An informative item", color = "info"),
+ dbcListGroupItem("A light item", color = "light"),
+ dbcListGroupItem("A dark item", color = "dark")
)
)
diff --git a/docs/components_page/components/list_group/colors.jl b/docs/components_page/components/list_group/colors.jl
index 424df55b0..5a2d002d7 100644
--- a/docs/components_page/components/list_group/colors.jl
+++ b/docs/components_page/components/list_group/colors.jl
@@ -1,10 +1,13 @@
using DashBootstrapComponents
list_group = dbc_listgroup([
- dbc_listgroupitem("The primary item", color="primary"),
- dbc_listgroupitem("A secondary item", color="secondary"),
- dbc_listgroupitem("A successful item", color="success"),
- dbc_listgroupitem("A warning item", color="warning"),
- dbc_listgroupitem("A dangerous item", color="danger"),
- dbc_listgroupitem("An informative item", color="info"),
+ dbc_listgroupitem("No color applied"),
+ dbc_listgroupitem("The primary item", color = "primary"),
+ dbc_listgroupitem("A secondary item", color = "secondary"),
+ dbc_listgroupitem("A successful item", color = "success"),
+ dbc_listgroupitem("A warning item", color = "warning"),
+ dbc_listgroupitem("A dangerous item", color = "danger"),
+ dbc_listgroupitem("An informative item", color = "info"),
+ dbc_listgroupitem("A light item", color = "light"),
+ dbc_listgroupitem("A dark item", color = "dark"),
]);
diff --git a/docs/components_page/components/list_group/colors.py b/docs/components_page/components/list_group/colors.py
index 5fb479750..5acee6b23 100644
--- a/docs/components_page/components/list_group/colors.py
+++ b/docs/components_page/components/list_group/colors.py
@@ -2,11 +2,14 @@
list_group = dbc.ListGroup(
[
+ dbc.ListGroupItem("No color applied"),
dbc.ListGroupItem("The primary item", color="primary"),
dbc.ListGroupItem("A secondary item", color="secondary"),
dbc.ListGroupItem("A successful item", color="success"),
dbc.ListGroupItem("A warning item", color="warning"),
dbc.ListGroupItem("A dangerous item", color="danger"),
dbc.ListGroupItem("An informative item", color="info"),
+ dbc.ListGroupItem("A light item", color="light"),
+ dbc.ListGroupItem("A dark item", color="dark"),
]
)
diff --git a/docs/components_page/components/list_group/content.R b/docs/components_page/components/list_group/content.R
index 9d5970e01..ace1bb52b 100644
--- a/docs/components_page/components/list_group/content.R
+++ b/docs/components_page/components/list_group/content.R
@@ -4,14 +4,34 @@ list_group <- dbcListGroup(
list(
dbcListGroupItem(
list(
- dbcListGroupItemHeading("This item has a heading"),
- dbcListGroupItemText("And some text underneath")
+ htmlDiv(
+ list(
+ htmlH5("This item has a heading", className = "mb-1"),
+ htmlSmall("Yay!", className = "text-success")
+ ),
+ className = "d-flex w-100 justify-content-between"
+ ),
+ htmlP("And some text underneath", className = "mb-1"),
+ htmlSmall("Plus some small print.", className = "text-muted")
)
),
dbcListGroupItem(
list(
- dbcListGroupItemHeading("This item also has a heading"),
- dbcListGroupItemText("And some more text underneath too")
+ htmlDiv(
+ list(
+ htmlH5(
+ "This item also has a heading",
+ className = "mb-1"
+ ),
+ htmlSmall("Ok!", className = "text-warning")
+ ),
+ className = "d-flex w-100 justify-content-between"
+ ),
+ htmlP("And some more text underneath too", className = "mb-1"),
+ htmlSmall(
+ "Plus even more small print.",
+ className = "text-muted"
+ )
)
)
)
diff --git a/docs/components_page/components/list_group/content.jl b/docs/components_page/components/list_group/content.jl
index d1cfbf774..7d1e9723d 100644
--- a/docs/components_page/components/list_group/content.jl
+++ b/docs/components_page/components/list_group/content.jl
@@ -1,12 +1,26 @@
-using DashBootstrapComponents
+using DashBootstrapComponents, DashHtmlComponents
list_group = dbc_listgroup([
dbc_listgroupitem([
- dbc_listgroupitemheading("This item has a heading"),
- dbc_listgroupitemtext("And some text underneath"),
+ html_div(
+ [
+ html_h5("This item has a heading", className = "mb-1"),
+ html_small("Yay!", className = "text-success"),
+ ],
+ className = "d-flex w-100 justify-content-between",
+ ),
+ html_p("And some text underneath", className = "mb-1"),
+ html_small("Plus some small print.", className = "text-muted"),
]),
dbc_listgroupitem([
- dbc_listgroupitemheading("This item also has a heading"),
- dbc_listgroupitemtext("And some more text underneath too"),
+ html_div(
+ [
+ html_h5("This item also has a heading", className = "mb-1"),
+ html_small("Ok!", className = "text-warning"),
+ ],
+ className = "d-flex w-100 justify-content-between",
+ ),
+ html_p("And some more text underneath too", className = "mb-1"),
+ html_small("Plus even more small print.", className = "text-muted"),
]),
]);
diff --git a/docs/components_page/components/list_group/content.py b/docs/components_page/components/list_group/content.py
index df70cb627..bee95f729 100644
--- a/docs/components_page/components/list_group/content.py
+++ b/docs/components_page/components/list_group/content.py
@@ -1,17 +1,36 @@
import dash_bootstrap_components as dbc
+from dash import html
list_group = dbc.ListGroup(
[
dbc.ListGroupItem(
[
- dbc.ListGroupItemHeading("This item has a heading"),
- dbc.ListGroupItemText("And some text underneath"),
+ html.Div(
+ [
+ html.H5("This item has a heading", className="mb-1"),
+ html.Small("Yay!", className="text-success"),
+ ],
+ className="d-flex w-100 justify-content-between",
+ ),
+ html.P("And some text underneath", className="mb-1"),
+ html.Small("Plus some small print.", className="text-muted"),
]
),
dbc.ListGroupItem(
[
- dbc.ListGroupItemHeading("This item also has a heading"),
- dbc.ListGroupItemText("And some more text underneath too"),
+ html.Div(
+ [
+ html.H5(
+ "This item also has a heading", className="mb-1"
+ ),
+ html.Small("Ok!", className="text-warning"),
+ ],
+ className="d-flex w-100 justify-content-between",
+ ),
+ html.P("And some more text underneath too", className="mb-1"),
+ html.Small(
+ "Plus even more small print.", className="text-muted"
+ ),
]
),
]
diff --git a/docs/components_page/components/list_group/flush.R b/docs/components_page/components/list_group/flush.R
new file mode 100644
index 000000000..3083176b5
--- /dev/null
+++ b/docs/components_page/components/list_group/flush.R
@@ -0,0 +1,10 @@
+library(dashBootstrapComponents)
+
+list_group <- dbcListGroup(
+ list(
+ dbcListGroupItem("Item 1"),
+ dbcListGroupItem("Item 2"),
+ dbcListGroupItem("Item 3")
+ ),
+ flush = TRUE
+)
diff --git a/docs/components_page/components/list_group/flush.jl b/docs/components_page/components/list_group/flush.jl
new file mode 100644
index 000000000..62b4d1489
--- /dev/null
+++ b/docs/components_page/components/list_group/flush.jl
@@ -0,0 +1,6 @@
+using DashBootstrapComponents
+
+list_group = dbc_listgroup(
+ [dbc_listgroupitem("Item 1"), dbc_listgroupitem("Item 2"), dbc_listgroupitem("Item 3")],
+ flush = true,
+);
diff --git a/docs/components_page/components/list_group/flush.py b/docs/components_page/components/list_group/flush.py
new file mode 100644
index 000000000..765dc370b
--- /dev/null
+++ b/docs/components_page/components/list_group/flush.py
@@ -0,0 +1,10 @@
+import dash_bootstrap_components as dbc
+
+list_group = dbc.ListGroup(
+ [
+ dbc.ListGroupItem("Item 1"),
+ dbc.ListGroupItem("Item 2"),
+ dbc.ListGroupItem("Item 3"),
+ ],
+ flush=True,
+)
diff --git a/docs/components_page/components/list_group/horizontal.R b/docs/components_page/components/list_group/horizontal.R
index 7a5355224..3e42d7135 100644
--- a/docs/components_page/components/list_group/horizontal.R
+++ b/docs/components_page/components/list_group/horizontal.R
@@ -10,7 +10,7 @@ list_group <- htmlDiv(
dbcListGroupItem("Item 3")
),
horizontal = TRUE,
- className = "mb-2",
+ className = "mb-2"
),
dbcListGroup(
list(
diff --git a/docs/components_page/components/list_group/horizontal.jl b/docs/components_page/components/list_group/horizontal.jl
index 4d9b5f1a2..71072070b 100644
--- a/docs/components_page/components/list_group/horizontal.jl
+++ b/docs/components_page/components/list_group/horizontal.jl
@@ -7,8 +7,8 @@ list_group = html_div([
dbc_listgroupitem("Item 2"),
dbc_listgroupitem("Item 3"),
],
- horizontal=true,
- className="mb-2",
+ horizontal = true,
+ className = "mb-2",
),
dbc_listgroup(
[
@@ -16,6 +16,6 @@ list_group = html_div([
dbc_listgroupitem("Item 2"),
dbc_listgroupitem("Item 3"),
],
- horizontal="lg",
+ horizontal = "lg",
),
]);
diff --git a/docs/components_page/components/list_group/horizontal.py b/docs/components_page/components/list_group/horizontal.py
index 278c09630..dda329e22 100644
--- a/docs/components_page/components/list_group/horizontal.py
+++ b/docs/components_page/components/list_group/horizontal.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
list_group = html.Div(
[
diff --git a/docs/components_page/components/list_group/links.R b/docs/components_page/components/list_group/links.R
index da691723f..e5ca17060 100644
--- a/docs/components_page/components/list_group/links.R
+++ b/docs/components_page/components/list_group/links.R
@@ -6,14 +6,17 @@ list_group <- htmlDiv(
dbcListGroup(
list(
dbcListGroupItem(
- "Internal link", href = "/l/components/list_group"
+ "Internal link",
+ href = "/l/components/list_group"
),
dbcListGroupItem("External link", href = "https://google.com"),
dbcListGroupItem(
- "Disabled link", href = "https://google.com", disabled = TRUE
+ "Disabled link",
+ href = "https://google.com", disabled = TRUE
),
dbcListGroupItem(
- "Button", id = "button-item", n_clicks = 0, action = TRUE
+ "Button",
+ id = "button-item", n_clicks = 0, action = TRUE
)
)
),
diff --git a/docs/components_page/components/list_group/links.jl b/docs/components_page/components/list_group/links.jl
index e1988daa0..f96a1bb83 100644
--- a/docs/components_page/components/list_group/links.jl
+++ b/docs/components_page/components/list_group/links.jl
@@ -2,12 +2,12 @@ using DashBootstrapComponents, DashHtmlComponents
list_group = html_div([
dbc_listgroup([
- dbc_listgroupitem("Internal link", href="/l/components/list_group"),
- dbc_listgroupitem("External link", href="https://google.com"),
- dbc_listgroupitem("Disabled link", href="https://google.com", disabled=true),
- dbc_listgroupitem("Button", id="button-item", n_clicks=0, action=true),
+ dbc_listgroupitem("Internal link", href = "/l/components/list_group"),
+ dbc_listgroupitem("External link", href = "https://google.com"),
+ dbc_listgroupitem("Disabled link", href = "https://google.com", disabled = true),
+ dbc_listgroupitem("Button", id = "button-item", n_clicks = 0, action = true),
]),
- html_p(id="counter"),
+ html_p(id = "counter"),
]);
diff --git a/docs/components_page/components/list_group/links.py b/docs/components_page/components/list_group/links.py
index 9f3e62614..a5ab5575a 100644
--- a/docs/components_page/components/list_group/links.py
+++ b/docs/components_page/components/list_group/links.py
@@ -1,6 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output
+from dash import Input, Output, html
list_group = html.Div(
[
diff --git a/docs/components_page/components/modal.md b/docs/components_page/components/modal.md
index c8ae15271..15b5a687a 100644
--- a/docs/components_page/components/modal.md
+++ b/docs/components_page/components/modal.md
@@ -3,7 +3,9 @@ title: Modal
lead: Use the `Modal` component to add dialogs to your app for lightboxes, user notifications, or completely custom content.
---
-Modals are built up using the `Modal`, `ModalHeader`, `ModalBody` and `ModalFooter` components. Set the `is_open` prop of the `Modal` to `True` to open the modal. By default, the modal can be dismissed by clicking outside the modal or by pressing the escape key (these behaviours can both be overridden, see below), though you can also write your own callbacks that set `is_open` to `False`.
+## Examples
+
+Modals are built up using the `Modal`, `ModalHeader`, `ModalTitle`, `ModalBody` and `ModalFooter` components. Set the `is_open` prop of the `Modal` to `True` to open the modal. By default, the modal can be dismissed by clicking outside the modal, clicking the close button in the header, or by pressing the escape key (these behaviours can all be overridden, see below), though you can also write your own callbacks that set `is_open` to `False`.
{{example:components/modal/simple.py:modal}}
@@ -19,6 +21,20 @@ By default the modal will render with a backdrop that dismisses the modal on cli
{{example:components/modal/backdrop.py:modal}}
+## Controlling closing behaviour
+
+You can hide the close button in the header by setting `close_button=False` in `ModalHeader`.
+
+If `backdrop="static"` you can prevent the user from dismissing the modal with the escape key by setting `keyboard=False`.
+
+{{example:components/modal/dismiss.py:modal}}
+
+## Fullscreen Modal
+
+You can create a fullscreen modal by setting `fullscreen=True`. Alternatively for a modal which is fullscreen on smaller screens but renders as a regular modal on larger screens, set `fullscreen="-down"` where `` is one of `sm`, `md`, `lg`, `xl`, or `xxl`.
+
+{{example:components/modal/fullscreen.py:modal}}
+
## Scrolling long content
When modals become too long for the user’s viewport or device, they scroll independently of the page itself. By default, the entire modal (including its header and footer) scrolls. If you prefer you can specify `scrollable=True` to scroll only the body of the modal.
@@ -31,6 +47,12 @@ To vertically center the modal on the page, set `centered=True`.
{{example:components/modal/centered.py:modal}}
+## Toggle between modals
+
+With some clever use of callbacks, you can also create modals that open other modals.
+
+{{example:components/modal/toggle.py:modal}}
+
{{apidoc:src/components/modal/Modal.js}}
{{apidoc:src/components/modal/ModalHeader.js}}
diff --git a/docs/components_page/components/modal/backdrop.R b/docs/components_page/components/modal/backdrop.R
index 4232106d3..0516dff39 100644
--- a/docs/components_page/components/modal/backdrop.R
+++ b/docs/components_page/components/modal/backdrop.R
@@ -3,33 +3,36 @@ library(dashHtmlComponents)
modal <- htmlDiv(
list(
- dbcFormGroup(
+ htmlDiv(
list(
dbcLabel("Backdrop:"),
dbcRadioItems(
- id = "backdrop-selector",
- options = list(
- list(label = "True (default)", value = TRUE),
- list(label = "False", value = FALSE),
- list(label = "'static'", value = "static")
- ),
- inline = TRUE,
- value = TRUE,
+ id = "backdrop-selector",
+ options = list(
+ list("label" = "True (default)", "value" = TRUE),
+ list("label" = "False", "value" = FALSE),
+ list("label" = "'static'", "value" = "static")
+ ),
+ inline = TRUE,
+ value = TRUE,
)
- )
+ ),
+ className = "mb-2"
),
dbcButton("Open modal", id = "open-backdrop", n_clicks = 0),
dbcModal(
list(
- dbcModalHeader("Header"),
+ dbcModalHeader(dbcModalTitle("Header"), close_button = TRUE),
dbcModalBody(
"Change the backdrop of this modal with the radio buttons"
),
dbcModalFooter(
- dbcButton(
- "Close", id = "close-backdrop", n_clicks = 0,
- className = "ml-auto"
- )
+ dbcButton(
+ "Close",
+ id = "close-backdrop",
+ className = "ms-auto",
+ n_clicks = 0
+ )
)
),
id = "modal-backdrop",
@@ -38,7 +41,6 @@ modal <- htmlDiv(
)
)
-
app$callback(
output("modal-backdrop", "backdrop"),
list(input("backdrop-selector", "value")),
diff --git a/docs/components_page/components/modal/backdrop.jl b/docs/components_page/components/modal/backdrop.jl
index cbc4a72b3..da96dcfb5 100644
--- a/docs/components_page/components/modal/backdrop.jl
+++ b/docs/components_page/components/modal/backdrop.jl
@@ -1,37 +1,40 @@
using DashBootstrapComponents, DashHtmlComponents
modal = html_div([
- dbc_formgroup([
- dbc_label("Backdrop:"),
- dbc_radioitems(
- id="backdrop-selector",
- options=[
- Dict("label" => "True (default)", "value" => true),
- Dict("label" => "False", "value" => false),
- Dict("label" => "'static'", "value" => "static"),
- ],
- inline=true,
- value=true,
- ),
- ]),
- dbc_button("Open modal", id="open-backdrop", n_clicks=0),
+ html_div(
+ [
+ dbc_label("Backdrop:"),
+ dbc_radioitems(
+ id = "backdrop-selector",
+ options = [
+ Dict("label" => "True (default)", "value" => true),
+ Dict("label" => "False", "value" => false),
+ Dict("label" => "'static'", "value" => "static"),
+ ],
+ inline = true,
+ value = true,
+ ),
+ ],
+ className = "mb-2",
+ ),
+ dbc_button("Open modal", id = "open-backdrop", n_clicks = 0),
dbc_modal(
[
- dbc_modalheader("Header"),
+ dbc_modalheader(dbc_modaltitle("Header"), close_button = true),
dbc_modalbody("Change the backdrop of this modal with the radio buttons"),
dbc_modalfooter(
dbc_button(
"Close",
- id="close-backdrop",
- className="ml-auto",
- n_clicks=0,
+ id = "close-backdrop",
+ className = "ms-auto",
+ n_clicks = 0,
),
),
],
- id="modal-backdrop",
- is_open=false,
+ id = "modal-backdrop",
+ is_open = false,
),
-]);
+])
callback!(
app,
diff --git a/docs/components_page/components/modal/backdrop.py b/docs/components_page/components/modal/backdrop.py
index a514b8faa..f0e51158c 100644
--- a/docs/components_page/components/modal/backdrop.py
+++ b/docs/components_page/components/modal/backdrop.py
@@ -1,10 +1,9 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output, State
+from dash import Input, Output, State, html
modal = html.Div(
[
- dbc.FormGroup(
+ html.Div(
[
dbc.Label("Backdrop:"),
dbc.RadioItems(
@@ -17,12 +16,13 @@
inline=True,
value=True,
),
- ]
+ ],
+ className="mb-2",
),
dbc.Button("Open modal", id="open-backdrop", n_clicks=0),
dbc.Modal(
[
- dbc.ModalHeader("Header"),
+ dbc.ModalHeader(dbc.ModalTitle("Header"), close_button=True),
dbc.ModalBody(
"Change the backdrop of this modal with the radio buttons"
),
@@ -30,7 +30,7 @@
dbc.Button(
"Close",
id="close-backdrop",
- className="ml-auto",
+ className="ms-auto",
n_clicks=0,
)
),
diff --git a/docs/components_page/components/modal/centered.R b/docs/components_page/components/modal/centered.R
index eb0a78a78..110061897 100644
--- a/docs/components_page/components/modal/centered.R
+++ b/docs/components_page/components/modal/centered.R
@@ -6,11 +6,12 @@ modal <- htmlDiv(
dbcButton("Open", id = "open-centered"),
dbcModal(
list(
- dbcModalHeader("Header"),
+ dbcModalHeader(dbcModalTitle("Header"), close_button = TRUE),
dbcModalBody("This modal is vertically centered"),
dbcModalFooter(
dbcButton(
- "Close", id = "close-centered", className = "ml-auto", n_clicks=0
+ "Close",
+ id = "close-centered", className = "ms-auto", n_clicks = 0
)
)
),
@@ -30,7 +31,7 @@ app$callback(
state("modal-centered", "is_open")
),
function(n1, n2, is_open) {
- if (n1 | n2) {
+ if (n1 > 0 | n2 > 0) {
return(!is_open)
}
return(is_open)
diff --git a/docs/components_page/components/modal/centered.jl b/docs/components_page/components/modal/centered.jl
index 3dd46e155..985250a3e 100644
--- a/docs/components_page/components/modal/centered.jl
+++ b/docs/components_page/components/modal/centered.jl
@@ -1,23 +1,23 @@
using DashBootstrapComponents, DashHtmlComponents
modal = html_div([
- dbc_button("Open", id="open-centered"),
+ dbc_button("Open", id = "open-centered"),
dbc_modal(
[
- dbc_modalheader("Header"),
+ dbc_modalheader(dbc_modaltitle("Header"), close_button = true),
dbc_modalbody("This modal is vertically centered"),
dbc_modalfooter(
dbc_button(
"Close",
- id="close-centered",
- className="ml-auto",
- n_clicks=0,
+ id = "close-centered",
+ className = "ms-auto",
+ n_clicks = 0,
),
),
],
- id="modal-centered",
- centered=true,
- is_open=false,
+ id = "modal-centered",
+ centered = true,
+ is_open = false,
),
]);
diff --git a/docs/components_page/components/modal/centered.py b/docs/components_page/components/modal/centered.py
index bac6fd168..cef9baf43 100644
--- a/docs/components_page/components/modal/centered.py
+++ b/docs/components_page/components/modal/centered.py
@@ -1,19 +1,18 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output, State
+from dash import Input, Output, State, html
modal = html.Div(
[
dbc.Button("Open", id="open-centered"),
dbc.Modal(
[
- dbc.ModalHeader("Header"),
+ dbc.ModalHeader(dbc.ModalTitle("Header"), close_button=True),
dbc.ModalBody("This modal is vertically centered"),
dbc.ModalFooter(
dbc.Button(
"Close",
id="close-centered",
- className="ml-auto",
+ className="ms-auto",
n_clicks=0,
)
),
diff --git a/docs/components_page/components/modal/dismiss.R b/docs/components_page/components/modal/dismiss.R
new file mode 100644
index 000000000..7cbb8fa1d
--- /dev/null
+++ b/docs/components_page/components/modal/dismiss.R
@@ -0,0 +1,43 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+modal <- htmlDiv(
+ list(
+ dbcButton("Open modal", id = "open-dismiss"),
+ dbcModal(
+ list(
+ dbcModalHeader(
+ dbcModalTitle("Dismissing"),
+ close_button = FALSE
+ ),
+ dbcModalBody(
+ paste(
+ "This modal has no close button and can't be dismissed by",
+ "pressing ESC. Try clicking on the backdrop or the below",
+ "close button."
+ )
+ ),
+ dbcModalFooter(dbcButton("Close", id = "close-dismiss"))
+ ),
+ id = "modal-dismiss",
+ keyboard = FALSE,
+ backdrop = "static"
+ )
+ )
+)
+
+
+app$callback(
+ output("modal-dismiss", "is_open"),
+ list(
+ input("open-dismiss", "n_clicks"),
+ input("close-dismiss", "n_clicks"),
+ state("modal-dismiss", "is_open")
+ ),
+ function(n_open, n_close, is_open) {
+ if (n_open > 0 | n_close > 0) {
+ return(!is_open)
+ }
+ return(is_open)
+ }
+)
diff --git a/docs/components_page/components/modal/dismiss.jl b/docs/components_page/components/modal/dismiss.jl
new file mode 100644
index 000000000..031bc6e18
--- /dev/null
+++ b/docs/components_page/components/modal/dismiss.jl
@@ -0,0 +1,30 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+modal = html_div([
+ dbc_button("Open modal", id = "open-dismiss"),
+ dbc_modal(
+ [
+ dbc_modalheader(dbc_modaltitle("Dismissing"), close_button = false),
+ dbc_modalbody(
+ "This modal has no close button and can't be dismissed by " *
+ "pressing ESC. Try clicking on the backdrop or the below " *
+ "close button.",
+ ),
+ dbc_modalfooter(dbc_button("Close", id = "close-dismiss")),
+ ],
+ id = "modal-dismiss",
+ keyboard = false,
+ backdrop = "static",
+ ),
+],)
+
+
+callback!(
+ app,
+ Output("modal-dismiss", "is_open"),
+ Input("open-dismiss", "n_clicks"),
+ Input("close-dismiss", "n_clicks"),
+ State("modal-dismiss", "is_open"),
+) do n_open, n_close, is_open
+ return n_open > 0 || n_close > 0 ? is_open == 0 : is_open
+end;
diff --git a/docs/components_page/components/modal/dismiss.py b/docs/components_page/components/modal/dismiss.py
new file mode 100644
index 000000000..d24c465b0
--- /dev/null
+++ b/docs/components_page/components/modal/dismiss.py
@@ -0,0 +1,35 @@
+import dash_bootstrap_components as dbc
+from dash import Input, Output, State, html
+
+modal = html.Div(
+ [
+ dbc.Button("Open modal", id="open-dismiss"),
+ dbc.Modal(
+ [
+ dbc.ModalHeader(
+ dbc.ModalTitle("Dismissing"), close_button=False
+ ),
+ dbc.ModalBody(
+ "This modal has no close button and can't be dismissed by "
+ "pressing ESC. Try clicking on the backdrop or the below "
+ "close button."
+ ),
+ dbc.ModalFooter(dbc.Button("Close", id="close-dismiss")),
+ ],
+ id="modal-dismiss",
+ keyboard=False,
+ backdrop="static",
+ ),
+ ],
+)
+
+
+@app.callback(
+ Output("modal-dismiss", "is_open"),
+ [Input("open-dismiss", "n_clicks"), Input("close-dismiss", "n_clicks")],
+ [State("modal-dismiss", "is_open")],
+)
+def toggle_modal(n_open, n_close, is_open):
+ if n_open or n_close:
+ return not is_open
+ return is_open
diff --git a/docs/components_page/components/modal/fullscreen.R b/docs/components_page/components/modal/fullscreen.R
new file mode 100644
index 000000000..749a0fefe
--- /dev/null
+++ b/docs/components_page/components/modal/fullscreen.R
@@ -0,0 +1,31 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+modal <- htmlDiv(
+ list(
+ dbcButton("Open modal", id = "open-fs"),
+ dbcModal(
+ list(
+ dbcModalHeader(dbcModalTitle("Fullscreen modal")),
+ dbcModalBody("Wow this thing takes up a lot of space...")
+ ),
+ id = "modal-fs",
+ fullscreen = TRUE
+ )
+ )
+)
+
+
+app$callback(
+ output("modal-fs", "is_open"),
+ list(
+ input("open-fs", "n_clicks"),
+ state("modal-fs", "is_open")
+ ),
+ function(n, is_open) {
+ if (n > 0) {
+ return(!is_open)
+ }
+ return(is_open)
+ }
+)
diff --git a/docs/components_page/components/modal/fullscreen.jl b/docs/components_page/components/modal/fullscreen.jl
new file mode 100644
index 000000000..f985d055a
--- /dev/null
+++ b/docs/components_page/components/modal/fullscreen.jl
@@ -0,0 +1,23 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+modal = html_div([
+ dbc_button("Open modal", id = "open-fs"),
+ dbc_modal(
+ [
+ dbc_modalheader(dbc_modaltitle("Fullscreen modal")),
+ dbc_modalbody("Wow this thing takes up a lot of space..."),
+ ],
+ id = "modal-fs",
+ fullscreen = true,
+ ),
+])
+
+
+callback!(
+ app,
+ Output("modal-fs", "is_open"),
+ Input("open-fs", "n_clicks"),
+ State("modal-fs", "is_open"),
+) do n, is_open
+ return n > 0 ? is_open == 0 : is_open
+end;
diff --git a/docs/components_page/components/modal/fullscreen.py b/docs/components_page/components/modal/fullscreen.py
new file mode 100644
index 000000000..d03ee5981
--- /dev/null
+++ b/docs/components_page/components/modal/fullscreen.py
@@ -0,0 +1,27 @@
+import dash_bootstrap_components as dbc
+from dash import Input, Output, State, html
+
+modal = html.Div(
+ [
+ dbc.Button("Open modal", id="open-fs"),
+ dbc.Modal(
+ [
+ dbc.ModalHeader(dbc.ModalTitle("Fullscreen modal")),
+ dbc.ModalBody("Wow this thing takes up a lot of space..."),
+ ],
+ id="modal-fs",
+ fullscreen=True,
+ ),
+ ]
+)
+
+
+@app.callback(
+ Output("modal-fs", "is_open"),
+ Input("open-fs", "n_clicks"),
+ State("modal-fs", "is_open"),
+)
+def toggle_modal(n, is_open):
+ if n:
+ return not is_open
+ return is_open
diff --git a/docs/components_page/components/modal/scrollable.R b/docs/components_page/components/modal/scrollable.R
index 1d924ca21..6333d2ebf 100644
--- a/docs/components_page/components/modal/scrollable.R
+++ b/docs/components_page/components/modal/scrollable.R
@@ -5,23 +5,28 @@ LOREM <- paste(
readLines(
"https://raw.githubusercontent.com/facultyai/dash-bootstrap-components/main/docs/components_page/components/modal/lorem.txt",
),
- collapse="\n"
+ collapse = "\n"
)
modal <- htmlDiv(
list(
dbcButton(
- "Scrolling modal", id = "open-scroll", n_clicks = 0, className = "mr-1"
+ "Scrolling modal",
+ id = "open-scroll", n_clicks = 0, className = "me-1"
+ ),
+ dbcButton("Modal with scrollable body",
+ id = "open-body-scroll",
+ n_clicks = 0
),
- dbcButton("Modal with scrollable body", id = "open-body-scroll",
- n_clicks = 0),
dbcModal(
list(
- dbcModalHeader("Header"),
+ dbcModalHeader(dbcModalTitle("Scrolling modal")),
dbcModalBody(LOREM),
dbcModalFooter(
- dbcButton("Close", id = "close-scroll", n_clicks = 0,
- className = "ml-auto")
+ dbcButton("Close",
+ id = "close-scroll", n_clicks = 0,
+ className = "ms-auto"
+ )
)
),
id = "modal-scroll",
@@ -29,12 +34,13 @@ modal <- htmlDiv(
),
dbcModal(
list(
- dbcModalHeader("Header"),
+ dbcModalHeader(dbcModalTitle("Modal with scrollable body")),
dbcModalBody(LOREM),
dbcModalFooter(
dbcButton(
- "Close", id = "close-body-scroll", n_clicks = 0,
- className = "ml-auto"
+ "Close",
+ id = "close-body-scroll", n_clicks = 0,
+ className = "ms-auto"
)
)
),
@@ -47,10 +53,10 @@ modal <- htmlDiv(
toggle_modal <- function(n1, n2, is_open) {
- if (n1 | n2) {
- return(!is_open)
- }
- return(is_open)
+ if (n1 | n2) {
+ return(!is_open)
+ }
+ return(is_open)
}
diff --git a/docs/components_page/components/modal/scrollable.jl b/docs/components_page/components/modal/scrollable.jl
index 7d088869e..15eddda34 100644
--- a/docs/components_page/components/modal/scrollable.jl
+++ b/docs/components_page/components/modal/scrollable.jl
@@ -1,43 +1,50 @@
using DashBootstrapComponents, DashHtmlComponents
using HTTP
-LOREM = rstrip(String(HTTP.get("https://raw.githubusercontent.com/facultyai/dash-bootstrap-components/main/docs/components_page/components/modal/lorem.txt").body), ['\n'])
+LOREM = rstrip(
+ String(
+ HTTP.get(
+ "https://raw.githubusercontent.com/facultyai/dash-bootstrap-components/main/docs/components_page/components/modal/lorem.txt",
+ ).body,
+ ),
+ ['\n'],
+)
modal = html_div([
- dbc_button("Scrolling modal", id="open-scroll", className="mr-1", n_clicks=0),
- dbc_button("Modal with scrollable body", id="open-body-scroll", n_clicks=0),
+ dbc_button("Scrolling modal", id = "open-scroll", className = "me-1", n_clicks = 0),
+ dbc_button("Modal with scrollable body", id = "open-body-scroll", n_clicks = 0),
dbc_modal(
[
- dbc_modalheader("Header"),
+ dbc_modalheader(dbc_modaltitle("Scrolling modal")),
dbc_modalbody(LOREM),
dbc_modalfooter(
dbc_button(
"Close",
- id="close-scroll",
- className="ml-auto",
- n_clicks=0,
+ id = "close-scroll",
+ className = "ms-auto",
+ n_clicks = 0,
),
),
],
- id="modal-scroll",
- is_open=false,
+ id = "modal-scroll",
+ is_open = false,
),
dbc_modal(
[
- dbc_modalheader("Header"),
+ dbc_modalheader(dbc_modaltitle("Modal with scrollable body")),
dbc_modalbody(LOREM),
dbc_modalfooter(
dbc_button(
"Close",
- id="close-body-scroll",
- className="ml-auto",
- n_clicks=0,
+ id = "close-body-scroll",
+ className = "ms-auto",
+ n_clicks = 0,
),
),
],
- id="modal-body-scroll",
- scrollable=true,
- is_open=false,
+ id = "modal-body-scroll",
+ scrollable = true,
+ is_open = false,
),
]);
diff --git a/docs/components_page/components/modal/scrollable.py b/docs/components_page/components/modal/scrollable.py
index 8fa044f67..df14ce997 100644
--- a/docs/components_page/components/modal/scrollable.py
+++ b/docs/components_page/components/modal/scrollable.py
@@ -1,24 +1,23 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output, State
+from dash import Input, Output, State, html
modal = html.Div(
[
dbc.Button(
- "Scrolling modal", id="open-scroll", className="mr-1", n_clicks=0
+ "Scrolling modal", id="open-scroll", className="me-1", n_clicks=0
),
dbc.Button(
"Modal with scrollable body", id="open-body-scroll", n_clicks=0
),
dbc.Modal(
[
- dbc.ModalHeader("Header"),
+ dbc.ModalHeader(dbc.ModalTitle("Scrolling modal")),
dbc.ModalBody(LOREM),
dbc.ModalFooter(
dbc.Button(
"Close",
id="close-scroll",
- className="ml-auto",
+ className="ms-auto",
n_clicks=0,
)
),
@@ -28,13 +27,13 @@
),
dbc.Modal(
[
- dbc.ModalHeader("Header"),
+ dbc.ModalHeader(dbc.ModalTitle("Modal with scrollable body")),
dbc.ModalBody(LOREM),
dbc.ModalFooter(
dbc.Button(
"Close",
id="close-body-scroll",
- className="ml-auto",
+ className="ms-auto",
n_clicks=0,
)
),
diff --git a/docs/components_page/components/modal/simple.R b/docs/components_page/components/modal/simple.R
index aa8927a9d..e302b1d16 100644
--- a/docs/components_page/components/modal/simple.R
+++ b/docs/components_page/components/modal/simple.R
@@ -6,12 +6,13 @@ modal <- htmlDiv(
dbcButton("Open modal", id = "open", n_clicks = 0),
dbcModal(
list(
- dbcModalHeader("Header"),
+ dbcModalHeader(dbcModalTitle("Header")),
dbcModalBody("This is the content of the modal"),
dbcModalFooter(
- dbcButton(
- "Close", id = "close", n_clicks = 0, className = "ml-auto"
- )
+ dbcButton(
+ "Close",
+ id = "close", n_clicks = 0, className = "ms-auto"
+ )
)
),
id = "modal",
@@ -32,6 +33,6 @@ app$callback(
if (n1 > 0 | n2 > 0) {
return(!is_open)
}
- return(is_open)
+ return(is_open)
}
)
diff --git a/docs/components_page/components/modal/simple.jl b/docs/components_page/components/modal/simple.jl
index 4d2b5927b..4df7d38cc 100644
--- a/docs/components_page/components/modal/simple.jl
+++ b/docs/components_page/components/modal/simple.jl
@@ -1,17 +1,17 @@
using DashBootstrapComponents, DashHtmlComponents
modal = html_div([
- dbc_button("Open modal", id="open", n_clicks=0),
+ dbc_button("Open modal", id = "open", n_clicks = 0),
dbc_modal(
[
- dbc_modalheader("Header"),
+ dbc_modalheader(dbc_modaltitle("Header")),
dbc_modalbody("This is the content of the modal"),
dbc_modalfooter(
- dbc_button("Close", id="close", className="ml-auto", n_clicks=0),
+ dbc_button("Close", id = "close", className = "ms-auto", n_clicks = 0),
),
],
- id="modal",
- is_open=false,
+ id = "modal",
+ is_open = false,
),
]);
diff --git a/docs/components_page/components/modal/simple.py b/docs/components_page/components/modal/simple.py
index 438d4adeb..ca6541ede 100644
--- a/docs/components_page/components/modal/simple.py
+++ b/docs/components_page/components/modal/simple.py
@@ -1,17 +1,16 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output, State
+from dash import Input, Output, State, html
modal = html.Div(
[
dbc.Button("Open modal", id="open", n_clicks=0),
dbc.Modal(
[
- dbc.ModalHeader("Header"),
+ dbc.ModalHeader(dbc.ModalTitle("Header")),
dbc.ModalBody("This is the content of the modal"),
dbc.ModalFooter(
dbc.Button(
- "Close", id="close", className="ml-auto", n_clicks=0
+ "Close", id="close", className="ms-auto", n_clicks=0
)
),
],
diff --git a/docs/components_page/components/modal/size.R b/docs/components_page/components/modal/size.R
index 629804497..9e38e0498 100644
--- a/docs/components_page/components/modal/size.R
+++ b/docs/components_page/components/modal/size.R
@@ -3,18 +3,13 @@ library(dashHtmlComponents)
modal <- htmlDiv(
list(
- dbcButton("Small modal", id = "open-sm", n_clicks = 0, className = "mr-1"),
- dbcButton("Large modal", id = "open-lg", n_clicks = 0, className = "mr-1"),
+ dbcButton("Small modal", id = "open-sm", n_clicks = 0, className = "me-1"),
+ dbcButton("Large modal", id = "open-lg", n_clicks = 0, className = "me-1"),
dbcButton("Extra large modal", n_clicks = 0, id = "open-xl"),
dbcModal(
list(
- dbcModalHeader("Header"),
- dbcModalBody("A small modal."),
- dbcModalFooter(
- dbcButton(
- "Close", id = "close-sm", n_clicks = 0, className = "ml-auto"
- )
- )
+ dbcModalHeader(dbcModalTitle("Header")),
+ dbcModalBody("A small modal.")
),
id = "modal-sm",
is_open = FALSE,
@@ -22,13 +17,8 @@ modal <- htmlDiv(
),
dbcModal(
list(
- dbcModalHeader("Header"),
- dbcModalBody("A large modal."),
- dbcModalFooter(
- dbcButton(
- "Close", id = "close-lg", n_clicks = 0, className = "ml-auto"
- )
- )
+ dbcModalHeader(dbcModalTitle("Header")),
+ dbcModalBody("A large modal.")
),
id = "modal-lg",
is_open = FALSE,
@@ -36,13 +26,8 @@ modal <- htmlDiv(
),
dbcModal(
list(
- dbcModalHeader("Header"),
- dbcModalBody("An extra large modal."),
- dbcModalFooter(
- dbcButton(
- "Close", id = "close-xl", n_clicks = 0, className = "ml-auto"
- )
- )
+ dbcModalHeader(dbcModalTitle("Header")),
+ dbcModalBody("An extra large modal.")
),
id = "modal-xl",
is_open = FALSE,
@@ -52,18 +37,17 @@ modal <- htmlDiv(
)
-toggle_modal <- function(n1, n2, is_open) {
- if (n1 > 0 | n2 > 0) {
- return(!is_open)
- }
- return(is_open)
+toggle_modal <- function(n1, is_open) {
+ if (n1 > 0) {
+ return(!is_open)
+ }
+ return(is_open)
}
app$callback(
output("modal-sm", "is_open"),
list(
input("open-sm", "n_clicks"),
- input("close-sm", "n_clicks"),
state("modal-sm", "is_open")
),
toggle_modal
@@ -73,7 +57,6 @@ app$callback(
output("modal-lg", "is_open"),
list(
input("open-lg", "n_clicks"),
- input("close-lg", "n_clicks"),
state("modal-lg", "is_open")
),
toggle_modal
@@ -83,7 +66,6 @@ app$callback(
output("modal-xl", "is_open"),
list(
input("open-xl", "n_clicks"),
- input("close-xl", "n_clicks"),
state("modal-xl", "is_open")
),
toggle_modal
diff --git a/docs/components_page/components/modal/size.jl b/docs/components_page/components/modal/size.jl
index 8e8768ca2..125b5d068 100644
--- a/docs/components_page/components/modal/size.jl
+++ b/docs/components_page/components/modal/size.jl
@@ -1,50 +1,32 @@
using DashBootstrapComponents, DashHtmlComponents
modal = html_div([
- dbc_button("Small modal", id="open-sm", className="mr-1", n_clicks=0),
- dbc_button("Large modal", id="open-lg", className="mr-1", n_clicks=0),
- dbc_button("Extra large modal", id="open-xl", n_clicks=0),
+ dbc_button("Small modal", id = "open-sm", className = "me-1", n_clicks = 0),
+ dbc_button("Large modal", id = "open-lg", className = "me-1", n_clicks = 0),
+ dbc_button("Extra large modal", id = "open-xl", n_clicks = 0),
dbc_modal(
- [
- dbc_modalheader("Header"),
- dbc_modalbody("A small modal."),
- dbc_modalfooter(
- dbc_button("Close", id="close-sm", className="ml-auto", n_clicks=0),
- ),
- ],
- id="modal-sm",
- size="sm",
- is_open=false,
+ [dbc_modalheader(dbc_modaltitle("Header")), dbc_modalbody("A small modal.")],
+ id = "modal-sm",
+ size = "sm",
+ is_open = false,
),
dbc_modal(
- [
- dbc_modalheader("Header"),
- dbc_modalbody("A large modal."),
- dbc_modalfooter(
- dbc_button("Close", id="close-lg", className="ml-auto", n_clicks=0),
- ),
- ],
- id="modal-lg",
- size="lg",
- is_open=false,
+ [dbc_modalheader(dbc_modaltitle("Header")), dbc_modalbody("A large modal.")],
+ id = "modal-lg",
+ size = "lg",
+ is_open = false,
),
dbc_modal(
- [
- dbc_modalheader("Header"),
- dbc_modalbody("An extra large modal."),
- dbc_modalfooter(
- dbc_button("Close", id="close-xl", className="ml-auto", n_clicks=0),
- ),
- ],
- id="modal-xl",
- size="xl",
- is_open=false,
+ [dbc_modalheader(dbc_modaltitle("Header")), dbc_modalbody("An extra large modal.")],
+ id = "modal-xl",
+ size = "xl",
+ is_open = false,
),
]);
-function toggle_modal(n1, n2, is_open)
- return n1 > 0 || n2 > 0 ? is_open == 0 : is_open
+function toggle_modal(n1, is_open)
+ return n1 > 0 ? is_open == 0 : is_open
end;
@@ -52,28 +34,25 @@ callback!(
app,
Output("modal-sm", "is_open"),
Input("open-sm", "n_clicks"),
- Input("close-sm", "n_clicks"),
State("modal-sm", "is_open"),
-) do n1, n2, is_open
- return toggle_modal(n1, n2, is_open)
+) do n1, is_open
+ return toggle_modal(n1, is_open)
end;
callback!(
app,
Output("modal-lg", "is_open"),
Input("open-lg", "n_clicks"),
- Input("close-lg", "n_clicks"),
State("modal-lg", "is_open"),
-) do n1, n2, is_open
- return toggle_modal(n1, n2, is_open)
+) do n1, is_open
+ return toggle_modal(n1, is_open)
end;
callback!(
app,
Output("modal-xl", "is_open"),
Input("open-xl", "n_clicks"),
- Input("close-xl", "n_clicks"),
State("modal-xl", "is_open"),
-) do n1, n2, is_open
- return toggle_modal(n1, n2, is_open)
+) do n1, is_open
+ return toggle_modal(n1, is_open)
end;
diff --git a/docs/components_page/components/modal/size.py b/docs/components_page/components/modal/size.py
index 2cec61a85..a24d3fbb1 100644
--- a/docs/components_page/components/modal/size.py
+++ b/docs/components_page/components/modal/size.py
@@ -1,21 +1,15 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output, State
+from dash import Input, Output, State, html
modal = html.Div(
[
- dbc.Button("Small modal", id="open-sm", className="mr-1", n_clicks=0),
- dbc.Button("Large modal", id="open-lg", className="mr-1", n_clicks=0),
+ dbc.Button("Small modal", id="open-sm", className="me-1", n_clicks=0),
+ dbc.Button("Large modal", id="open-lg", className="me-1", n_clicks=0),
dbc.Button("Extra large modal", id="open-xl", n_clicks=0),
dbc.Modal(
[
- dbc.ModalHeader("Header"),
+ dbc.ModalHeader(dbc.ModalTitle("Header")),
dbc.ModalBody("A small modal."),
- dbc.ModalFooter(
- dbc.Button(
- "Close", id="close-sm", className="ml-auto", n_clicks=0
- )
- ),
],
id="modal-sm",
size="sm",
@@ -23,13 +17,8 @@
),
dbc.Modal(
[
- dbc.ModalHeader("Header"),
+ dbc.ModalHeader(dbc.ModalTitle("Header")),
dbc.ModalBody("A large modal."),
- dbc.ModalFooter(
- dbc.Button(
- "Close", id="close-lg", className="ml-auto", n_clicks=0
- )
- ),
],
id="modal-lg",
size="lg",
@@ -37,13 +26,8 @@
),
dbc.Modal(
[
- dbc.ModalHeader("Header"),
+ dbc.ModalHeader(dbc.ModalTitle("Header")),
dbc.ModalBody("An extra large modal."),
- dbc.ModalFooter(
- dbc.Button(
- "Close", id="close-xl", className="ml-auto", n_clicks=0
- )
- ),
],
id="modal-xl",
size="xl",
@@ -53,26 +37,26 @@
)
-def toggle_modal(n1, n2, is_open):
- if n1 or n2:
+def toggle_modal(n1, is_open):
+ if n1:
return not is_open
return is_open
app.callback(
Output("modal-sm", "is_open"),
- [Input("open-sm", "n_clicks"), Input("close-sm", "n_clicks")],
- [State("modal-sm", "is_open")],
+ Input("open-sm", "n_clicks"),
+ State("modal-sm", "is_open"),
)(toggle_modal)
app.callback(
Output("modal-lg", "is_open"),
- [Input("open-lg", "n_clicks"), Input("close-lg", "n_clicks")],
- [State("modal-lg", "is_open")],
+ Input("open-lg", "n_clicks"),
+ State("modal-lg", "is_open"),
)(toggle_modal)
app.callback(
Output("modal-xl", "is_open"),
- [Input("open-xl", "n_clicks"), Input("close-xl", "n_clicks")],
- [State("modal-xl", "is_open")],
+ Input("open-xl", "n_clicks"),
+ State("modal-xl", "is_open"),
)(toggle_modal)
diff --git a/docs/components_page/components/modal/toggle.R b/docs/components_page/components/modal/toggle.R
new file mode 100644
index 000000000..f3474f6dd
--- /dev/null
+++ b/docs/components_page/components/modal/toggle.R
@@ -0,0 +1,76 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+modal_1 <- dbcModal(
+ list(
+ dbcModalHeader(dbcModalTitle("Modal 1")),
+ dbcModalBody("This is the content of the first modal"),
+ dbcModalFooter(
+ dbcButton(
+ "Open Modal 2",
+ id = "open-toggle-modal-2",
+ className = "ms-auto",
+ n_clicks = 0
+ )
+ )
+ ),
+ id = "toggle-modal-1",
+ is_open = FALSE
+)
+
+modal_2 <- dbcModal(
+ list(
+ dbcModalHeader(dbcModalTitle("Modal 2")),
+ dbcModalBody("This is the second modal"),
+ dbcModalFooter(
+ dbcButton(
+ "Back to Modal 1",
+ id = "open-toggle-modal-1",
+ className = "ms-auto",
+ n_clicks = 0
+ )
+ )
+ ),
+ id = "toggle-modal-2",
+ is_open = FALSE
+)
+
+
+modal <- htmlDiv(
+ list(
+ dbcButton("Open modal", id = "open-toggle-modal", n_clicks = 0),
+ modal_1,
+ modal_2
+ )
+)
+
+app$callback(
+ output("toggle-modal-1", "is_open"),
+ list(
+ input("open-toggle-modal", "n_clicks"),
+ input("open-toggle-modal-1", "n_clicks"),
+ input("open-toggle-modal-2", "n_clicks"),
+ state("toggle-modal-1", "is_open")
+ ),
+ function(n0, n1, n2, is_open) {
+ if (n0 > 0 | n1 > 0 | n2 > 0) {
+ return(!is_open)
+ }
+ return(is_open)
+ }
+)
+
+app$callback(
+ output("toggle-modal-2", "is_open"),
+ list(
+ input("open-toggle-modal-2", "n_clicks"),
+ input("open-toggle-modal-1", "n_clicks"),
+ state("toggle-modal-2", "is_open")
+ ),
+ function(n2, n1, is_open) {
+ if (n1 > 0 | n2 > 0) {
+ return(!is_open)
+ }
+ return(is_open)
+ }
+)
diff --git a/docs/components_page/components/modal/toggle.jl b/docs/components_page/components/modal/toggle.jl
new file mode 100644
index 000000000..68660d5f3
--- /dev/null
+++ b/docs/components_page/components/modal/toggle.jl
@@ -0,0 +1,63 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+modal_1 = dbc_modal(
+ [
+ dbc_modalheader(dbc_modaltitle("Modal 1")),
+ dbc_modalbody("This is the content of the first modal"),
+ dbc_modalfooter(
+ dbc_button(
+ "Open Modal 2",
+ id = "open-toggle-modal-2",
+ className = "ms-auto",
+ n_clicks = 0,
+ ),
+ ),
+ ],
+ id = "toggle-modal-1",
+ is_open = false,
+)
+
+modal_2 = dbc_modal(
+ [
+ dbc_modalheader(dbc_modaltitle("Modal 2")),
+ dbc_modalbody("This is the second modal"),
+ dbc_modalfooter(
+ dbc_button(
+ "Back to Modal 1",
+ id = "open-toggle-modal-1",
+ className = "ms-auto",
+ n_clicks = 0,
+ ),
+ ),
+ ],
+ id = "toggle-modal-2",
+ is_open = false,
+)
+
+
+modal = html_div([
+ dbc_button("Open modal", id = "open-toggle-modal", n_clicks = 0),
+ modal_1,
+ modal_2,
+])
+
+callback!(
+ app,
+ Output("toggle-modal-1", "is_open"),
+ Input("open-toggle-modal", "n_clicks"),
+ Input("open-toggle-modal-1", "n_clicks"),
+ Input("open-toggle-modal-2", "n_clicks"),
+ State("toggle-modal-1", "is_open"),
+) do n0, n1, n2, is_open
+ return n0 > 0 || n1 > 0 || n2 > 0 ? is_open == 0 : is_open
+end;
+
+callback!(
+ app,
+ Output("toggle-modal-2", "is_open"),
+ Input("open-toggle-modal-2", "n_clicks"),
+ Input("open-toggle-modal-1", "n_clicks"),
+ State("toggle-modal-2", "is_open"),
+) do n2, n1, is_open
+ return n1 > 0 || n2 > 0 ? is_open == 0 : is_open
+end;
diff --git a/docs/components_page/components/modal/toggle.py b/docs/components_page/components/modal/toggle.py
new file mode 100644
index 000000000..a730fd13a
--- /dev/null
+++ b/docs/components_page/components/modal/toggle.py
@@ -0,0 +1,74 @@
+import dash_bootstrap_components as dbc
+from dash import Input, Output, State, html
+
+modal_1 = dbc.Modal(
+ [
+ dbc.ModalHeader(dbc.ModalTitle("Modal 1")),
+ dbc.ModalBody("This is the content of the first modal"),
+ dbc.ModalFooter(
+ dbc.Button(
+ "Open Modal 2",
+ id="open-toggle-modal-2",
+ className="ms-auto",
+ n_clicks=0,
+ )
+ ),
+ ],
+ id="toggle-modal-1",
+ is_open=False,
+)
+
+modal_2 = dbc.Modal(
+ [
+ dbc.ModalHeader(dbc.ModalTitle("Modal 2")),
+ dbc.ModalBody("This is the second modal"),
+ dbc.ModalFooter(
+ dbc.Button(
+ "Back to Modal 1",
+ id="open-toggle-modal-1",
+ className="ms-auto",
+ n_clicks=0,
+ )
+ ),
+ ],
+ id="toggle-modal-2",
+ is_open=False,
+)
+
+
+modal = html.Div(
+ [
+ dbc.Button("Open modal", id="open-toggle-modal", n_clicks=0),
+ modal_1,
+ modal_2,
+ ]
+)
+
+
+@app.callback(
+ Output("toggle-modal-1", "is_open"),
+ [
+ Input("open-toggle-modal", "n_clicks"),
+ Input("open-toggle-modal-1", "n_clicks"),
+ Input("open-toggle-modal-2", "n_clicks"),
+ ],
+ [State("toggle-modal-1", "is_open")],
+)
+def toggle_modal_1(n0, n1, n2, is_open):
+ if n0 or n1 or n2:
+ return not is_open
+ return is_open
+
+
+@app.callback(
+ Output("toggle-modal-2", "is_open"),
+ [
+ Input("open-toggle-modal-2", "n_clicks"),
+ Input("open-toggle-modal-1", "n_clicks"),
+ ],
+ [State("toggle-modal-2", "is_open")],
+)
+def toggle_modal_2(n2, n1, is_open):
+ if n1 or n2:
+ return not is_open
+ return is_open
diff --git a/docs/components_page/components/nav.md b/docs/components_page/components/nav.md
index c03446298..17e73868d 100644
--- a/docs/components_page/components/nav.md
+++ b/docs/components_page/components/nav.md
@@ -3,7 +3,7 @@ title: Navs
lead: Documentation and examples for how to use Bootstrap's navigation components with _dash-bootstrap-components_.
---
-## Base nav
+## Examples
Navigation is built up using `Nav`, `NavItem`, `NavLink` and `DropdownMenu`. Use `nav=True` when using `DropdownMenu` inside a `Nav` for consistent styling with `NavItem` and `NavLink`.
@@ -33,13 +33,13 @@ Use the `vertical` argument to stack navigation items. You can pass either a Boo
## Pills
-Use the `pills` argument to indicate active state with pill styled nav items. The `active` property can be set to `True` or `False` to manually control whether the link is active, or to `"exact"` to automatically set the `active` property when the current pathname matches the `href`, or to `"partial"` to automatically set the `active` property when the current pathname starts with `href`.
+Use the `pills` argument to indicate active state with pill styled nav links. The `active` property of `NavLink` can be set to `True` or `False` to manually control whether the link is active, to `"exact"` to automatically set the `active` property when the current pathname matches the `href`, or to `"partial"` to automatically set the `active` property when the current pathname starts with `href`.
{{example:components/nav/pill.py:nav}}
## Tabs
-Bootstrap also lets you apply tab styling to navs, check out our self-contained `Tabs` component [here](/l/components/tabs).
+Bootstrap also lets you apply tab styling to navs, check out our self-contained `Tabs` component [here](/docs/components/tabs).
{{apidoc:src/components/nav/Nav.js}}
diff --git a/docs/components_page/components/nav/fill.jl b/docs/components_page/components/nav/fill.jl
index 135c7e4a1..a3f8e3a22 100644
--- a/docs/components_page/components/nav/fill.jl
+++ b/docs/components_page/components/nav/fill.jl
@@ -2,18 +2,18 @@ using DashBootstrapComponents, DashHtmlComponents
nav1 = dbc_nav(
[
- dbc_navitem(dbc_navlink("A link", href="#")),
- dbc_navitem(dbc_navlink("Another link with a longer label", href="#")),
+ dbc_navitem(dbc_navlink("A link", href = "#")),
+ dbc_navitem(dbc_navlink("Another link with a longer label", href = "#")),
],
- fill=true,
+ fill = true,
);
nav2 = dbc_nav(
[
- dbc_navitem(dbc_navlink("A link", href="#")),
- dbc_navitem(dbc_navlink("Another link with a longer label", href="#")),
+ dbc_navitem(dbc_navlink("A link", href = "#")),
+ dbc_navitem(dbc_navlink("Another link with a longer label", href = "#")),
],
- justified=true,
+ justified = true,
);
navs = html_div([nav1, html_hr(), nav2]);
diff --git a/docs/components_page/components/nav/fill.py b/docs/components_page/components/nav/fill.py
index 6a2ece65b..502770ce2 100644
--- a/docs/components_page/components/nav/fill.py
+++ b/docs/components_page/components/nav/fill.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
nav1 = dbc.Nav(
[
diff --git a/docs/components_page/components/nav/link_based.jl b/docs/components_page/components/nav/link_based.jl
index c329ad7c0..435298b88 100644
--- a/docs/components_page/components/nav/link_based.jl
+++ b/docs/components_page/components/nav/link_based.jl
@@ -1,8 +1,8 @@
using DashBootstrapComponents
nav = dbc_nav([
- dbc_navlink("Active", active=true, href="#"),
- dbc_navlink("A link", href="#"),
- dbc_navlink("Another link", href="#"),
- dbc_navlink("Disabled", disabled=true, href="#"),
+ dbc_navlink("Active", active = true, href = "#"),
+ dbc_navlink("A link", href = "#"),
+ dbc_navlink("Another link", href = "#"),
+ dbc_navlink("Disabled", disabled = true, href = "#"),
]);
diff --git a/docs/components_page/components/nav/navlink.R b/docs/components_page/components/nav/navlink.R
index f5a2a6157..4312be4db 100644
--- a/docs/components_page/components/nav/navlink.R
+++ b/docs/components_page/components/nav/navlink.R
@@ -8,9 +8,9 @@ nav <- htmlDiv(
dbcNavLink("Internal link", href = "/l/components/nav"),
dbcNavLink("External link", href = "https://github.com"),
dbcNavLink(
- "External relative",
- href = "/l/components/nav",
- external_link = TRUE
+ "External relative",
+ href = "/l/components/nav",
+ external_link = TRUE
),
dbcNavLink("Button", id = "button-link", n_clicks = 0)
)
diff --git a/docs/components_page/components/nav/navlink.jl b/docs/components_page/components/nav/navlink.jl
index af3695a04..788dbda56 100644
--- a/docs/components_page/components/nav/navlink.jl
+++ b/docs/components_page/components/nav/navlink.jl
@@ -2,13 +2,13 @@ using DashBootstrapComponents, DashHtmlComponents
nav = html_div([
dbc_nav([
- dbc_navlink("Internal link", href="/l/components/nav"),
- dbc_navlink("External link", href="https://github.com"),
- dbc_navlink("External relative", href="/l/components/nav", external_link=true),
- dbc_navlink("Button", id="button-link", n_clicks=0),
+ dbc_navlink("Internal link", href = "/l/components/nav"),
+ dbc_navlink("External link", href = "https://github.com"),
+ dbc_navlink("External relative", href = "/l/components/nav", external_link = true),
+ dbc_navlink("Button", id = "button-link", n_clicks = 0),
]),
html_br(),
- html_p(id="button-clicks"),
+ html_p(id = "button-clicks"),
]);
callback!(app, Output("button-clicks", "children"), Input("button-link", "n_clicks")) do n
diff --git a/docs/components_page/components/nav/navlink.py b/docs/components_page/components/nav/navlink.py
index e4b497b0a..91f8def73 100644
--- a/docs/components_page/components/nav/navlink.py
+++ b/docs/components_page/components/nav/navlink.py
@@ -1,6 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output
+from dash import Input, Output, html
nav = html.Div(
[
diff --git a/docs/components_page/components/nav/pill.jl b/docs/components_page/components/nav/pill.jl
index d48877c3f..a3131fed3 100644
--- a/docs/components_page/components/nav/pill.jl
+++ b/docs/components_page/components/nav/pill.jl
@@ -2,10 +2,10 @@ using DashBootstrapComponents
nav = dbc_nav(
[
- dbc_navitem(dbc_navlink("Active", active=true, href="#")),
- dbc_navitem(dbc_navlink("A link", href="#")),
- dbc_navitem(dbc_navlink("Another link", href="#")),
- dbc_navitem(dbc_navlink("Disabled", disabled=true, href="#")),
+ dbc_navitem(dbc_navlink("Active", active = true, href = "#")),
+ dbc_navitem(dbc_navlink("A link", href = "#")),
+ dbc_navitem(dbc_navlink("Another link", href = "#")),
+ dbc_navitem(dbc_navlink("Disabled", disabled = true, href = "#")),
],
- pills=true,
+ pills = true,
);
diff --git a/docs/components_page/components/nav/simple.jl b/docs/components_page/components/nav/simple.jl
index abf71e514..6ef17f0e5 100644
--- a/docs/components_page/components/nav/simple.jl
+++ b/docs/components_page/components/nav/simple.jl
@@ -1,13 +1,13 @@
using DashBootstrapComponents
nav = dbc_nav([
- dbc_navitem(dbc_navlink("Active", active=true, href="#")),
- dbc_navitem(dbc_navlink("A link", href="#")),
- dbc_navitem(dbc_navlink("Another link", href="#")),
- dbc_navitem(dbc_navlink("Disabled", disabled=true, href="#")),
+ dbc_navitem(dbc_navlink("Active", active = true, href = "#")),
+ dbc_navitem(dbc_navlink("A link", href = "#")),
+ dbc_navitem(dbc_navlink("Another link", href = "#")),
+ dbc_navitem(dbc_navlink("Disabled", disabled = true, href = "#")),
dbc_dropdownmenu(
[dbc_dropdownmenuitem("Item 1"), dbc_dropdownmenuitem("Item 2")],
- label="Dropdown",
- nav=true,
+ label = "Dropdown",
+ nav = true,
),
]);
diff --git a/docs/components_page/components/nav/vertical.jl b/docs/components_page/components/nav/vertical.jl
index c8cd360bd..31a9cf763 100644
--- a/docs/components_page/components/nav/vertical.jl
+++ b/docs/components_page/components/nav/vertical.jl
@@ -2,10 +2,10 @@ using DashBootstrapComponents
nav = dbc_nav(
[
- dbc_navitem(dbc_navlink("Active", active=true, href="#")),
- dbc_navitem(dbc_navlink("A link", href="#")),
- dbc_navitem(dbc_navlink("Another link", href="#")),
- dbc_navitem(dbc_navlink("Disabled", disabled=true, href="#")),
+ dbc_navitem(dbc_navlink("Active", active = true, href = "#")),
+ dbc_navitem(dbc_navlink("A link", href = "#")),
+ dbc_navitem(dbc_navlink("Another link", href = "#")),
+ dbc_navitem(dbc_navlink("Disabled", disabled = true, href = "#")),
],
- vertical="md",
+ vertical = "md",
);
diff --git a/docs/components_page/components/navbar.md b/docs/components_page/components/navbar.md
index 52fd3f0cd..665a0907c 100644
--- a/docs/components_page/components/navbar.md
+++ b/docs/components_page/components/navbar.md
@@ -3,6 +3,8 @@ title: Navbar
lead: Easily create responsive navigation headers using the `NavbarSimple` and `Navbar` components.
---
+## Examples
+
There are two navbar components in *dash-bootstrap-components*, `NavbarSimple` and `Navbar`. The `NavbarSimple` component is simpler but less flexible, whereas the `Navbar` component is fully customisable, but requires more boilerplate to get working.
## NavbarSimple
@@ -15,7 +17,7 @@ The `NavbarSimple` will collapse on smaller screens, and add a toggle for reveal
## Navbar
-If you want to have more control over the layout of your navbar you can use the `Navbar` component. This gives you full control over the children, but you will have to write your own callbacks to achieve things like the toggle behaviour on small screens. We recommend using a `Nav` component to wrap the navigation items, check the [docs here](/docs/components/nav).
+If you want to have more control over the layout of your navbar you can use the `Navbar` component. This gives you full control over the children, but you will have to write your own callbacks to achieve things like the toggle behaviour on small screens. From Bootstrap 5, all elements inside the `NavBar` should be contained within a [`Container`](/docs/components/layout). We also recommend using a `Nav` component to wrap the navigation items, check the [docs here](/docs/components/nav).
Here is an example of a custom navbar, see the `examples/` folder in the [GitHub repo](https://github.com/facultyai/dash-bootstrap-components/blob/main/examples/python/advanced-component-usage/navbars.py) for more.
diff --git a/docs/components_page/components/navbar/navbar.R b/docs/components_page/components/navbar/navbar.R
index efb85a7ae..e87a2ef18 100644
--- a/docs/components_page/components/navbar/navbar.R
+++ b/docs/components_page/components/navbar/navbar.R
@@ -8,33 +8,39 @@ search_bar <- dbcRow(
dbcCol(dbcInput(type = "search", placeholder = "Search")),
dbcCol(
dbcButton(
- "Search", color = "primary", n_clicks = 0, className = "ml-2"
+ "Search",
+ color = "primary", n_clicks = 0, className = "ms-2"
),
width = "auto"
)
),
- no_gutters = TRUE,
- className = "ml-auto flex-nowrap mt-3 mt-md-0",
- align = "center",
+ className = "g-0 ms-auto flex-nowrap mt-3 mt-md-0",
+ align = "center"
)
navbar <- dbcNavbar(
- list(
- htmlA(
- # Use row and col to control vertical alignment of logo / brand
- dbcRow(
- list(
- dbcCol(htmlImg(src = PLOTLY_LOGO, height = "30px")),
- dbcCol(dbcNavbarBrand("Navbar", className = "ml-2"))
+ dbcContainer(
+ list(
+ htmlA(
+ # Use row and col to control vertical alignment of logo / brand
+ dbcRow(
+ list(
+ dbcCol(htmlImg(src = PLOTLY_LOGO, height = "30px")),
+ dbcCol(dbcNavbarBrand("Navbar", className = "ms-2"))
+ ),
+ align = "center",
+ className = "g-0"
),
- align = "center",
- no_gutters = TRUE
+ href = "https://plotly.com",
+ style = list("textDecoration" = "none")
),
- href = "https://plotly.com"
- ),
- dbcNavbarToggler(id = "navbar-toggler", n_clicks = 0),
- dbcCollapse(
- search_bar, id = "navbar-collapse", is_open = FALSE, navbar = TRUE
+ dbcNavbarToggler(id = "navbar-toggler", n_clicks = 0),
+ dbcCollapse(
+ search_bar,
+ id = "navbar-collapse",
+ is_open = FALSE,
+ navbar = TRUE
+ )
)
),
color = "dark",
diff --git a/docs/components_page/components/navbar/navbar.jl b/docs/components_page/components/navbar/navbar.jl
index 1c72b1da9..5e7321b95 100644
--- a/docs/components_page/components/navbar/navbar.jl
+++ b/docs/components_page/components/navbar/navbar.jl
@@ -4,37 +4,37 @@ PLOTLY_LOGO = "https://images.plot.ly/logo/new-branding/plotly-logomark.png";
search_bar = dbc_row(
[
- dbc_col(dbc_input(type="search", placeholder="Search")),
+ dbc_col(dbc_input(type = "search", placeholder = "Search")),
dbc_col(
- dbc_button("Search", color="primary", className="ml-2", n_clicks=0),
- width="auto",
+ dbc_button("Search", color = "primary", className = "ms-2", n_clicks = 0),
+ width = "auto",
),
],
- no_gutters=true,
- className="ml-auto flex-nowrap mt-3 mt-md-0",
- align="center",
+ className = "g-0 ms-auto flex-nowrap mt-3 mt-md-0",
+ align = "center",
);
navbar = dbc_navbar(
- [
+ dbc_container([
html_a(
# Use row and col to control vertical alignment of logo / brand
dbc_row(
[
- dbc_col(html_img(src=PLOTLY_LOGO, height="30px")),
- dbc_col(dbc_navbarbrand("Navbar", className="ml-2")),
+ dbc_col(html_img(src = PLOTLY_LOGO, height = "30px")),
+ dbc_col(dbc_navbarbrand("Navbar", className = "ms-2")),
],
- align="center",
- no_gutters=true,
+ align = "center",
+ className = "g-0",
),
- href="https://plotly.com",
+ href = "https://plotly.com",
+ style = Dict("textDecoration" => "none"),
),
- dbc_navbartoggler(id="navbar-toggler", n_clicks=0),
- dbc_collapse(search_bar, id="navbar-collapse", navbar=true, is_open=false),
- ],
- color="dark",
- dark=true,
-);
+ dbc_navbartoggler(id = "navbar-toggler", n_clicks = 0),
+ dbc_collapse(search_bar, id = "navbar-collapse", is_open = false, navbar = true),
+ ]),
+ color = "dark",
+ dark = true,
+)
# add callback for toggling the collapse on small screens
diff --git a/docs/components_page/components/navbar/navbar.py b/docs/components_page/components/navbar/navbar.py
index d0a3bbff5..fc25a38c5 100644
--- a/docs/components_page/components/navbar/navbar.py
+++ b/docs/components_page/components/navbar/navbar.py
@@ -1,6 +1,6 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output, State
+from dash import Input, Output, State, html
+from dash_bootstrap_components._components.Container import Container
PLOTLY_LOGO = "https://images.plot.ly/logo/new-branding/plotly-logomark.png"
@@ -9,35 +9,40 @@
dbc.Col(dbc.Input(type="search", placeholder="Search")),
dbc.Col(
dbc.Button(
- "Search", color="primary", className="ml-2", n_clicks=0
+ "Search", color="primary", className="ms-2", n_clicks=0
),
width="auto",
),
],
- no_gutters=True,
- className="ml-auto flex-nowrap mt-3 mt-md-0",
+ className="g-0 ms-auto flex-nowrap mt-3 mt-md-0",
align="center",
)
navbar = dbc.Navbar(
- [
- html.A(
- # Use row and col to control vertical alignment of logo / brand
- dbc.Row(
- [
- dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")),
- dbc.Col(dbc.NavbarBrand("Navbar", className="ml-2")),
- ],
- align="center",
- no_gutters=True,
+ dbc.Container(
+ [
+ html.A(
+ # Use row and col to control vertical alignment of logo / brand
+ dbc.Row(
+ [
+ dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")),
+ dbc.Col(dbc.NavbarBrand("Navbar", className="ms-2")),
+ ],
+ align="center",
+ className="g-0",
+ ),
+ href="https://plotly.com",
+ style={"textDecoration": "none"},
),
- href="https://plotly.com",
- ),
- dbc.NavbarToggler(id="navbar-toggler", n_clicks=0),
- dbc.Collapse(
- search_bar, id="navbar-collapse", navbar=True, is_open=False
- ),
- ],
+ dbc.NavbarToggler(id="navbar-toggler", n_clicks=0),
+ dbc.Collapse(
+ search_bar,
+ id="navbar-collapse",
+ is_open=False,
+ navbar=True,
+ ),
+ ]
+ ),
color="dark",
dark=True,
)
diff --git a/docs/components_page/components/navbar/simple.jl b/docs/components_page/components/navbar/simple.jl
index 0590430db..dee8e1fde 100644
--- a/docs/components_page/components/navbar/simple.jl
+++ b/docs/components_page/components/navbar/simple.jl
@@ -1,21 +1,21 @@
using DashBootstrapComponents
navbar = dbc_navbarsimple(
- children=[
- dbc_navitem(dbc_navlink("Page 1", href="#")),
+ children = [
+ dbc_navitem(dbc_navlink("Page 1", href = "#")),
dbc_dropdownmenu(
- children=[
- dbc_dropdownmenuitem("More pages", header=true),
- dbc_dropdownmenuitem("Page 2", href="#"),
- dbc_dropdownmenuitem("Page 3", href="#"),
+ children = [
+ dbc_dropdownmenuitem("More pages", header = true),
+ dbc_dropdownmenuitem("Page 2", href = "#"),
+ dbc_dropdownmenuitem("Page 3", href = "#"),
],
- nav=true,
- in_navbar=true,
- label="More",
+ nav = true,
+ in_navbar = true,
+ label = "More",
),
],
- brand="NavbarSimple",
- brand_href="#",
- color="primary",
- dark=true,
+ brand = "NavbarSimple",
+ brand_href = "#",
+ color = "primary",
+ dark = true,
);
diff --git a/docs/components_page/components/offcanvas.md b/docs/components_page/components/offcanvas.md
new file mode 100644
index 000000000..f24b9ebd8
--- /dev/null
+++ b/docs/components_page/components/offcanvas.md
@@ -0,0 +1,30 @@
+---
+title: Offcanvas
+lead: Use the `Offcanvas` component to add a customisable sidebar to your apps.
+---
+
+## Examples
+
+`Offcanvas` components work in a similar fashion to a simplified `Modal`. Set the `is_open` prop of the `Offcanvas` to `True` to open the offcanvas. By default, the offcanvas can be dismissed by clicking the close button in the header, outside the offcanvas or by pressing the escape key (these behaviours can all be overridden, using `close_button=False`, `backdrop="static"` and `keyboard=False` respectively - see below), though you can also write your own callbacks that set `is_open` to `False`.
+
+{{example:components/offcanvas/simple.py:offcanvas}}
+
+## Placement
+
+By default the offcanvas will appear to the left of the screen (`start`). You can change where it appears though by using the `placement` property.
+
+{{example:components/offcanvas/placement.py:offcanvas}}
+
+## Backdrop
+
+By default the offcanvas will render with a backdrop that dismisses the offcanvas on click. Set `backdrop=False` to render the offcanvas without a backdrop, or `backdrop="static"` to render a backdrop that doesn't dismiss the offcanvas when clicked.
+
+{{example:components/offcanvas/backdrop.py:offcanvas}}
+
+## Scrolling main page contents
+
+By default, when an offcanvas is displaying, the user is unable to scroll content on the main page. If you prefer you can specify `scrollable=True` to allow the user to still scroll the content whilst the offcanvas is showing.
+
+{{example:components/offcanvas/scrollable.py:offcanvas}}
+
+{{apidoc:src/components/offcanvas/Offcanvas.js}}
diff --git a/docs/components_page/components/offcanvas/backdrop.R b/docs/components_page/components/offcanvas/backdrop.R
new file mode 100644
index 000000000..081d1577a
--- /dev/null
+++ b/docs/components_page/components/offcanvas/backdrop.R
@@ -0,0 +1,60 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+backdrop_selector <- htmlDiv(
+ list(
+ dbcLabel("Backdrop:"),
+ dbcRadioItems(
+ id = "offcanvas-backdrop-selector",
+ options = list(
+ list("label" = "True (default)", "value" = TRUE),
+ list("label" = "False", "value" = FALSE),
+ list("label" = "Static (no dismiss)", "value" = "static")
+ ),
+ inline = TRUE,
+ value = TRUE
+ )
+ ),
+ className = "mb-2"
+)
+
+
+offcanvas <- htmlDiv(
+ list(
+ backdrop_selector,
+ dbcButton(
+ "Open backdrop offcanvas",
+ id = "open-offcanvas-backdrop", n_clicks = 0
+ ),
+ dbcOffcanvas(
+ htmlP("Here is some content..."),
+ id = "offcanvas-backdrop",
+ title = "Offcanvas with/without backdrop",
+ is_open = FALSE
+ )
+ )
+)
+
+
+app$callback(
+ output("offcanvas-backdrop", "backdrop"),
+ list(input("offcanvas-backdrop-selector", "value")),
+ function(backdrop) {
+ return(backdrop)
+ }
+)
+
+
+app$callback(
+ output("offcanvas-backdrop", "is_open"),
+ list(
+ input("open-offcanvas-backdrop", "n_clicks"),
+ state("offcanvas-backdrop", "is_open")
+ ),
+ function(n1, is_open) {
+ if (n1 > 0) {
+ return(!is_open)
+ }
+ return(is_open)
+ }
+)
diff --git a/docs/components_page/components/offcanvas/backdrop.jl b/docs/components_page/components/offcanvas/backdrop.jl
new file mode 100644
index 000000000..04761488d
--- /dev/null
+++ b/docs/components_page/components/offcanvas/backdrop.jl
@@ -0,0 +1,48 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+backdrop_selector = html_div(
+ [
+ dbc_label("Backdrop:"),
+ dbc_radioitems(
+ id = "offcanvas-backdrop-selector",
+ options = [
+ Dict("label" => "True (default)", "value" => true),
+ Dict("label" => "False", "value" => false),
+ Dict("label" => "Static (no dismiss)", "value" => "static"),
+ ],
+ inline = true,
+ value = true,
+ ),
+ ],
+ className = "mb-2",
+)
+
+offcanvas = html_div([
+ backdrop_selector,
+ dbc_button("Open backdrop offcanvas", id = "open-offcanvas-backdrop", n_clicks = 0),
+ dbc_offcanvas(
+ html_p("Here is some content..."),
+ id = "offcanvas-backdrop",
+ title = "Offcanvas with/without backdrop",
+ is_open = false,
+ ),
+])
+
+
+callback!(
+ app,
+ Output("offcanvas-backdrop", "backdrop"),
+ Input("offcanvas-backdrop-selector", "value"),
+) do backdrop
+ return backdrop
+end;
+
+
+callback!(
+ app,
+ Output("offcanvas-backdrop", "is_open"),
+ Input("open-offcanvas-backdrop", "n_clicks"),
+ State("offcanvas-backdrop", "is_open"),
+) do n1, is_open
+ return n1 > 0 ? is_open == 0 : is_open
+end;
diff --git a/docs/components_page/components/offcanvas/backdrop.py b/docs/components_page/components/offcanvas/backdrop.py
new file mode 100644
index 000000000..bba8180ae
--- /dev/null
+++ b/docs/components_page/components/offcanvas/backdrop.py
@@ -0,0 +1,53 @@
+import dash_bootstrap_components as dbc
+from dash import Input, Output, State, html
+
+backdrop_selector = html.Div(
+ [
+ dbc.Label("Backdrop:"),
+ dbc.RadioItems(
+ id="offcanvas-backdrop-selector",
+ options=[
+ {"label": "True (default)", "value": True},
+ {"label": "False", "value": False},
+ {"label": "Static (no dismiss)", "value": "static"},
+ ],
+ inline=True,
+ value=True,
+ ),
+ ],
+ className="mb-2",
+)
+
+offcanvas = html.Div(
+ [
+ backdrop_selector,
+ dbc.Button(
+ "Open backdrop offcanvas", id="open-offcanvas-backdrop", n_clicks=0
+ ),
+ dbc.Offcanvas(
+ html.P("Here is some content..."),
+ id="offcanvas-backdrop",
+ title="Offcanvas with/without backdrop",
+ is_open=False,
+ ),
+ ]
+)
+
+
+@app.callback(
+ Output("offcanvas-backdrop", "backdrop"),
+ [Input("offcanvas-backdrop-selector", "value")],
+)
+def select_backdrop(backdrop):
+ return backdrop
+
+
+@app.callback(
+ Output("offcanvas-backdrop", "is_open"),
+ Input("open-offcanvas-backdrop", "n_clicks"),
+ State("offcanvas-backdrop", "is_open"),
+)
+def toggle_offcanvas(n1, is_open):
+ if n1:
+ return not is_open
+ return is_open
diff --git a/docs/components_page/components/offcanvas/placement.R b/docs/components_page/components/offcanvas/placement.R
new file mode 100644
index 000000000..0fa3f97ca
--- /dev/null
+++ b/docs/components_page/components/offcanvas/placement.R
@@ -0,0 +1,59 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+placement_selector <- htmlDiv(
+ list(
+ dbcLabel("Placement:"),
+ dbcRadioItems(
+ id = "offcanvas-placement-selector",
+ options = list(
+ list("label" = "start (Default)", "value" = "start"),
+ list("label" = "end", "value" = "end"),
+ list("label" = "top", "value" = "top"),
+ list("label" = "bottom", "value" = "bottom")
+ ),
+ value = "start",
+ inline = TRUE
+ )
+ ),
+ className = "mb-2"
+)
+
+offcanvas <- htmlDiv(
+ list(
+ placement_selector,
+ dbcButton("Open Offcanvas", id = "open-offcanvas-placement", n_clicks = 0),
+ dbcOffcanvas(
+ htmlP("Some offcanvas content..."),
+ id = "offcanvas-placement",
+ title = "Placement",
+ is_open = FALSE
+ )
+ )
+)
+
+
+app$callback(
+ output("offcanvas-placement", "is_open"),
+ list(
+ input("open-offcanvas-placement", "n_clicks"),
+ state("offcanvas-placement", "is_open")
+ ),
+ function(n1, is_open) {
+ if (n1 > 0) {
+ return(!is_open)
+ }
+ return(is_open)
+ }
+)
+
+
+app$callback(
+ output("offcanvas-placement", "placement"),
+ list(
+ input("offcanvas-placement-selector", "value")
+ ),
+ function(placement) {
+ return(placement)
+ }
+)
diff --git a/docs/components_page/components/offcanvas/placement.jl b/docs/components_page/components/offcanvas/placement.jl
new file mode 100644
index 000000000..f8fd7d810
--- /dev/null
+++ b/docs/components_page/components/offcanvas/placement.jl
@@ -0,0 +1,49 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+placement_selector = html_div(
+ [
+ dbc_label("Placement:"),
+ dbc_radioitems(
+ id = "offcanvas-placement-selector",
+ options = [
+ Dict("label" => "start (Default)", "value" => "start"),
+ Dict("label" => "end", "value" => "end"),
+ Dict("label" => "top", "value" => "top"),
+ Dict("label" => "bottom", "value" => "bottom"),
+ ],
+ value = "start",
+ inline = true,
+ ),
+ ],
+ className = "mb-2",
+)
+
+offcanvas = html_div([
+ placement_selector,
+ dbc_button("Open Offcanvas", id = "open-offcanvas-placement", n_clicks = 0),
+ dbc_offcanvas(
+ html_p("Some offcanvas content..."),
+ id = "offcanvas-placement",
+ title = "Placement",
+ is_open = false,
+ ),
+])
+
+
+callback!(
+ app,
+ Output("offcanvas-placement", "is_open"),
+ Input("open-offcanvas-placement", "n_clicks"),
+ State("offcanvas-placement", "is_open"),
+) do n1, is_open
+ return n1 > 0 ? is_open == 0 : is_open
+end;
+
+
+callback!(
+ app,
+ Output("offcanvas-placement", "placement"),
+ Input("offcanvas-placement-selector", "value"),
+) do placement
+ return placement
+end;
diff --git a/docs/components_page/components/offcanvas/placement.py b/docs/components_page/components/offcanvas/placement.py
new file mode 100644
index 000000000..8bd60c2a9
--- /dev/null
+++ b/docs/components_page/components/offcanvas/placement.py
@@ -0,0 +1,54 @@
+import dash_bootstrap_components as dbc
+from dash import Input, Output, State, html
+
+placement_selector = html.Div(
+ [
+ dbc.Label("Placement:"),
+ dbc.RadioItems(
+ id="offcanvas-placement-selector",
+ options=[
+ {"label": "start (Default)", "value": "start"},
+ {"label": "end", "value": "end"},
+ {"label": "top", "value": "top"},
+ {"label": "bottom", "value": "bottom"},
+ ],
+ value="start",
+ inline=True,
+ ),
+ ],
+ className="mb-2",
+)
+
+offcanvas = html.Div(
+ [
+ placement_selector,
+ dbc.Button(
+ "Open Offcanvas", id="open-offcanvas-placement", n_clicks=0
+ ),
+ dbc.Offcanvas(
+ html.P("Some offcanvas content..."),
+ id="offcanvas-placement",
+ title="Placement",
+ is_open=False,
+ ),
+ ]
+)
+
+
+@app.callback(
+ Output("offcanvas-placement", "is_open"),
+ Input("open-offcanvas-placement", "n_clicks"),
+ [State("offcanvas-placement", "is_open")],
+)
+def toggle_offcanvas(n1, is_open):
+ if n1:
+ return not is_open
+ return is_open
+
+
+@app.callback(
+ Output("offcanvas-placement", "placement"),
+ Input("offcanvas-placement-selector", "value"),
+)
+def toggle_placement(placement):
+ return placement
diff --git a/docs/components_page/components/offcanvas/scrollable.R b/docs/components_page/components/offcanvas/scrollable.R
new file mode 100644
index 000000000..f15609b43
--- /dev/null
+++ b/docs/components_page/components/offcanvas/scrollable.R
@@ -0,0 +1,34 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+offcanvas <- htmlDiv(
+ list(
+ dbcButton(
+ "Open scrollable offcanvas",
+ id = "open-offcanvas-scrollable",
+ n_clicks = 0,
+ ),
+ dbcOffcanvas(
+ htmlP("The contents on the main page are now scrollable."),
+ id = "offcanvas-scrollable",
+ scrollable = TRUE,
+ title = "Scrollable Offcanvas",
+ is_open = FALSE
+ )
+ )
+)
+
+
+app$callback(
+ output("offcanvas-scrollable", "is_open"),
+ list(
+ input("open-offcanvas-scrollable", "n_clicks"),
+ state("offcanvas-scrollable", "is_open")
+ ),
+ function(n1, is_open) {
+ if (n1 > 0) {
+ return(!is_open)
+ }
+ return(is_open)
+ }
+)
diff --git a/docs/components_page/components/offcanvas/scrollable.jl b/docs/components_page/components/offcanvas/scrollable.jl
new file mode 100644
index 000000000..60f58b941
--- /dev/null
+++ b/docs/components_page/components/offcanvas/scrollable.jl
@@ -0,0 +1,22 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+offcanvas = html_div([
+ dbc_button("Open scrollable offcanvas", id = "open-offcanvas-scrollable", n_clicks = 0),
+ dbc_offcanvas(
+ html_p("The contents on the main page are now scrollable."),
+ id = "offcanvas-scrollable",
+ scrollable = true,
+ title = "Scrollable Offcanvas",
+ is_open = false,
+ ),
+])
+
+
+callback!(
+ app,
+ Output("offcanvas-scrollable", "is_open"),
+ Input("open-offcanvas-scrollable", "n_clicks"),
+ State("offcanvas-scrollable", "is_open"),
+) do n1, is_open
+ return n1 > 0 ? is_open == 0 : is_open
+end;
diff --git a/docs/components_page/components/offcanvas/scrollable.py b/docs/components_page/components/offcanvas/scrollable.py
new file mode 100644
index 000000000..f7391aa48
--- /dev/null
+++ b/docs/components_page/components/offcanvas/scrollable.py
@@ -0,0 +1,30 @@
+import dash_bootstrap_components as dbc
+from dash import Input, Output, State, html
+
+offcanvas = html.Div(
+ [
+ dbc.Button(
+ "Open scrollable offcanvas",
+ id="open-offcanvas-scrollable",
+ n_clicks=0,
+ ),
+ dbc.Offcanvas(
+ html.P("The contents on the main page are now scrollable."),
+ id="offcanvas-scrollable",
+ scrollable=True,
+ title="Scrollable Offcanvas",
+ is_open=False,
+ ),
+ ]
+)
+
+
+@app.callback(
+ Output("offcanvas-scrollable", "is_open"),
+ Input("open-offcanvas-scrollable", "n_clicks"),
+ State("offcanvas-scrollable", "is_open"),
+)
+def toggle_offcanvas_scrollable(n1, is_open):
+ if n1:
+ return not is_open
+ return is_open
diff --git a/docs/components_page/components/offcanvas/simple.R b/docs/components_page/components/offcanvas/simple.R
new file mode 100644
index 000000000..efa21e84f
--- /dev/null
+++ b/docs/components_page/components/offcanvas/simple.R
@@ -0,0 +1,35 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+offcanvas <- htmlDiv(
+ list(
+ dbcButton("Open Offcanvas", id = "open-offcanvas", n_clicks = 0),
+ dbcOffcanvas(
+ htmlP(
+ paste(
+ "This is the content of the Offcanvas.",
+ "Close it by clicking on the close button, or",
+ "the backdrop."
+ )
+ ),
+ id = "offcanvas",
+ title = "Title",
+ is_open = FALSE
+ )
+ )
+)
+
+
+app$callback(
+ output("offcanvas", "is_open"),
+ list(
+ input("open-offcanvas", "n_clicks"),
+ state("offcanvas", "is_open")
+ ),
+ function(n1, is_open) {
+ if (n1 > 0) {
+ return(!is_open)
+ }
+ return(is_open)
+ }
+)
diff --git a/docs/components_page/components/offcanvas/simple.jl b/docs/components_page/components/offcanvas/simple.jl
new file mode 100644
index 000000000..7efa90435
--- /dev/null
+++ b/docs/components_page/components/offcanvas/simple.jl
@@ -0,0 +1,25 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+offcanvas = html_div([
+ dbc_button("Open Offcanvas", id = "open-offcanvas", n_clicks = 0),
+ dbc_offcanvas(
+ html_p(
+ "This is the content of the Offcanvas. " *
+ "Close it by clicking on the close button, or " *
+ "the backdrop.",
+ ),
+ id = "offcanvas",
+ title = "Title",
+ is_open = false,
+ ),
+]);
+
+
+callback!(
+ app,
+ Output("offcanvas", "is_open"),
+ Input("open-offcanvas", "n_clicks"),
+ State("offcanvas", "is_open"),
+) do n1, is_open
+ return n1 > 0 ? is_open == 0 : is_open
+end;
diff --git a/docs/components_page/components/offcanvas/simple.py b/docs/components_page/components/offcanvas/simple.py
new file mode 100644
index 000000000..da5cf7de7
--- /dev/null
+++ b/docs/components_page/components/offcanvas/simple.py
@@ -0,0 +1,29 @@
+import dash_bootstrap_components as dbc
+from dash import Input, Output, State, html
+
+offcanvas = html.Div(
+ [
+ dbc.Button("Open Offcanvas", id="open-offcanvas", n_clicks=0),
+ dbc.Offcanvas(
+ html.P(
+ "This is the content of the Offcanvas. "
+ "Close it by clicking on the close button, or "
+ "the backdrop."
+ ),
+ id="offcanvas",
+ title="Title",
+ is_open=False,
+ ),
+ ]
+)
+
+
+@app.callback(
+ Output("offcanvas", "is_open"),
+ Input("open-offcanvas", "n_clicks"),
+ [State("offcanvas", "is_open")],
+)
+def toggle_offcanvas(n1, is_open):
+ if n1:
+ return not is_open
+ return is_open
diff --git a/docs/components_page/components/pagination.md b/docs/components_page/components/pagination.md
new file mode 100644
index 000000000..f3594382c
--- /dev/null
+++ b/docs/components_page/components/pagination.md
@@ -0,0 +1,36 @@
+---
+title: Pagination
+lead: Use the pagination component to create a pagination UI.
+---
+
+## Examples
+
+`Pagination` components allow you to quickly create an easy-to-use pagination display. The number of values displayed is controlled using the `max_value` property, and this must be defined. See below for details about changing the `min_value` and `step`.
+
+{{example:components/pagination/simple.py:pagination}}
+
+## Pagination item size
+
+Set the size of the pagination items using the `size` prop. The options are `"sm"` or `"lg"` for small or large items. If you don't specify anything, you will get the default pagination size.
+
+{{example:components/pagination/size.py:pagination}}
+
+## First, Previous, Next and Last icons
+
+You can choose to include the First and Last icons to navigate to the first and last page respectively, by making use of the `first_last` property. Previous and Next icons can be added with the `previous_next` property.
+
+{{example:components/pagination/navigation.py:pagination}}
+
+## Collapse
+
+If there are too many numbers, the pagination object can become unwieldy. Instead, set `fully_expanded=False` to replace some of the numbers with ellipsis. If the `max_value` is too small for this to make a difference, a standard pagination component showing all numbers is rendered instead, even when `fully_expanded=False`.
+
+{{example:components/pagination/collapse.py:pagination}}
+
+## Callbacks
+
+The `active_page` prop allows you to dynamically change which page is active, as well as be used in callbacks to identify when a user has clicked one of the buttons.
+
+{{example:components/pagination/callback.py:pagination}}
+
+{{apidoc:src/components/pagination/Pagination.js}}
diff --git a/docs/components_page/components/pagination/callback.R b/docs/components_page/components/pagination/callback.R
new file mode 100644
index 000000000..4fbdb6ec8
--- /dev/null
+++ b/docs/components_page/components/pagination/callback.R
@@ -0,0 +1,54 @@
+library(dashBootstrapComponents)
+library(dashCoreComponents)
+library(dashHtmlComponents)
+
+
+pagination <- htmlDiv(
+ list(
+ htmlDiv("Select a page", id = "pagination-contents"),
+ dbcPagination(
+ id = "pagination",
+ max_value = 10,
+ ),
+ htmlDiv("Or set the page dynamically using the slider below"),
+ dccSlider(
+ id = "page-change",
+ min = 1,
+ max = 10,
+ step = 1,
+ value = 1,
+ marks = list(
+ "1" = "1",
+ "2" = "2",
+ "3" = "3",
+ "4" = "4",
+ "5" = "5",
+ "6" = "6",
+ "7" = "7",
+ "8" = "8",
+ "9" = "9",
+ "10" = "10"
+ )
+ )
+ )
+)
+
+
+app$callback(
+ output("pagination-contents", "children"),
+ list(input("pagination", "active_page")),
+ function(page) {
+ if (page > 0) {
+ return(paste("Page selected: ", page))
+ }
+ return("Select a page")
+ }
+)
+
+app$callback(
+ output("pagination", "active_page"),
+ list(input("page-change", "value")),
+ function(value) {
+ return(value)
+ }
+)
diff --git a/docs/components_page/components/pagination/callback.jl b/docs/components_page/components/pagination/callback.jl
new file mode 100644
index 000000000..d8b9ca3d9
--- /dev/null
+++ b/docs/components_page/components/pagination/callback.jl
@@ -0,0 +1,41 @@
+using DashBootstrapComponents, DashCoreComponents, DashHtmlComponents
+
+
+pagination = html_div([
+ html_div("Select a page", id = "pagination-contents"),
+ dbc_pagination(id = "pagination", max_value = 10),
+ html_div("Or set the page dynamically using the slider below"),
+ dcc_slider(
+ id = "page-change",
+ min = 1,
+ max = 10,
+ step = 1,
+ value = 1,
+ marks = Dict(
+ 1 => "1",
+ 2 => "2",
+ 3 => "3",
+ 4 => "4",
+ 5 => "5",
+ 6 => "6",
+ 7 => "7",
+ 8 => "8",
+ 9 => "9",
+ 10 => "10",
+ ),
+ ),
+])
+
+
+callback!(
+ app,
+ Output("pagination-contents", "children"),
+ Input("pagination", "active_page"),
+) do page
+ return page > 0 ? "Page selected: $page" : "Select a page"
+end;
+
+
+callback!(app, Output("pagination", "active_page"), Input("page-change", "value")) do value
+ return value
+end;
diff --git a/docs/components_page/components/pagination/callback.py b/docs/components_page/components/pagination/callback.py
new file mode 100644
index 000000000..416894e0e
--- /dev/null
+++ b/docs/components_page/components/pagination/callback.py
@@ -0,0 +1,35 @@
+import dash_bootstrap_components as dbc
+from dash import Input, Output, dcc, html
+
+pagination = html.Div(
+ [
+ html.Div("Select a page", id="pagination-contents"),
+ dbc.Pagination(id="pagination", max_value=10),
+ html.Div("Or set the page dynamically using the slider below"),
+ dcc.Slider(
+ id="page-change",
+ min=1,
+ max=10,
+ step=1,
+ value=1,
+ marks={i: str(i) for i in range(1, 11)},
+ ),
+ ]
+)
+
+
+@app.callback(
+ Output("pagination-contents", "children"),
+ [Input("pagination", "active_page")],
+)
+def change_page(page):
+ if page:
+ return f"Page selected: {page}"
+ return "Select a page"
+
+
+@app.callback(
+ Output("pagination", "active_page"), [Input("page-change", "value")]
+)
+def change_active_page(value):
+ return value
diff --git a/docs/components_page/components/pagination/collapse.R b/docs/components_page/components/pagination/collapse.R
new file mode 100644
index 000000000..2fb7eeefe
--- /dev/null
+++ b/docs/components_page/components/pagination/collapse.R
@@ -0,0 +1,11 @@
+library(dashBootstrapComponents)
+library(dashCoreComponents)
+
+pagination <- htmlDiv(
+ list(
+ htmlDiv("Collapse long pagination objects using ellipsis"),
+ dbcPagination(max_value = 10, fully_expanded = FALSE),
+ htmlDiv("If space won't be saved, it won't be collapsed"),
+ dbcPagination(max_value = 5, fully_expanded = FALSE)
+ )
+)
diff --git a/docs/components_page/components/pagination/collapse.jl b/docs/components_page/components/pagination/collapse.jl
new file mode 100644
index 000000000..9c8ea0d3a
--- /dev/null
+++ b/docs/components_page/components/pagination/collapse.jl
@@ -0,0 +1,8 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+pagination = html_div([
+ html_div("Collapse long pagination objects using ellipsis"),
+ dbc_pagination(max_value = 10, fully_expanded = false),
+ html_div("If space won't be saved, it won't be collapsed"),
+ dbc_pagination(max_value = 5, fully_expanded = false),
+])
diff --git a/docs/components_page/components/pagination/collapse.py b/docs/components_page/components/pagination/collapse.py
new file mode 100644
index 000000000..296f4bbbb
--- /dev/null
+++ b/docs/components_page/components/pagination/collapse.py
@@ -0,0 +1,11 @@
+import dash_bootstrap_components as dbc
+from dash import html
+
+pagination = html.Div(
+ [
+ html.Div("Collapse long pagination objects using ellipsis"),
+ dbc.Pagination(max_value=10, fully_expanded=False),
+ html.Div("If space won't be saved, it won't be collapsed"),
+ dbc.Pagination(max_value=5, fully_expanded=False),
+ ]
+)
diff --git a/docs/components_page/components/pagination/navigation.R b/docs/components_page/components/pagination/navigation.R
new file mode 100644
index 000000000..eb65b023d
--- /dev/null
+++ b/docs/components_page/components/pagination/navigation.R
@@ -0,0 +1,10 @@
+library(dashBootstrapComponents)
+library(dashCoreComponents)
+
+pagination <- htmlDiv(
+ list(
+ dbcPagination(max_value = 5, first_last = TRUE),
+ dbcPagination(max_value = 5, previous_next = TRUE),
+ dbcPagination(max_value = 5, first_last = TRUE, previous_next = TRUE)
+ )
+)
diff --git a/docs/components_page/components/pagination/navigation.jl b/docs/components_page/components/pagination/navigation.jl
new file mode 100644
index 000000000..002c6682c
--- /dev/null
+++ b/docs/components_page/components/pagination/navigation.jl
@@ -0,0 +1,7 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+pagination = html_div([
+ dbc_pagination(max_value = 5, first_last = true),
+ dbc_pagination(max_value = 5, previous_next = true),
+ dbc_pagination(max_value = 5, first_last = true, previous_next = true),
+])
diff --git a/docs/components_page/components/pagination/navigation.py b/docs/components_page/components/pagination/navigation.py
new file mode 100644
index 000000000..4fdac0f98
--- /dev/null
+++ b/docs/components_page/components/pagination/navigation.py
@@ -0,0 +1,10 @@
+import dash_bootstrap_components as dbc
+from dash import html
+
+pagination = html.Div(
+ [
+ dbc.Pagination(max_value=5, first_last=True),
+ dbc.Pagination(max_value=5, previous_next=True),
+ dbc.Pagination(max_value=5, first_last=True, previous_next=True),
+ ]
+)
diff --git a/docs/components_page/components/pagination/simple.R b/docs/components_page/components/pagination/simple.R
new file mode 100644
index 000000000..6a4323926
--- /dev/null
+++ b/docs/components_page/components/pagination/simple.R
@@ -0,0 +1,9 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+
+pagination <- htmlDiv(
+ dbcPagination(
+ max_value = 10
+ )
+)
diff --git a/docs/components_page/components/pagination/simple.jl b/docs/components_page/components/pagination/simple.jl
new file mode 100644
index 000000000..4b46da0ef
--- /dev/null
+++ b/docs/components_page/components/pagination/simple.jl
@@ -0,0 +1,4 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+
+pagination = html_div(dbc_pagination(max_value = 10))
diff --git a/docs/components_page/components/pagination/simple.py b/docs/components_page/components/pagination/simple.py
new file mode 100644
index 000000000..3fa3f672d
--- /dev/null
+++ b/docs/components_page/components/pagination/simple.py
@@ -0,0 +1,6 @@
+import dash_bootstrap_components as dbc
+from dash import html
+
+pagination = html.Div(
+ dbc.Pagination(max_value=10),
+)
diff --git a/docs/components_page/components/pagination/size.R b/docs/components_page/components/pagination/size.R
new file mode 100644
index 000000000..a745aa398
--- /dev/null
+++ b/docs/components_page/components/pagination/size.R
@@ -0,0 +1,21 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+pagination <- htmlDiv(
+ list(
+ htmlDiv("Small"),
+ dbcPagination(
+ max_value = 5,
+ size = "sm"
+ ),
+ htmlDiv("Default"),
+ dbcPagination(
+ max_value = 5
+ ),
+ htmlDiv("Large"),
+ dbcPagination(
+ max_value = 5,
+ size = "lg"
+ )
+ )
+)
diff --git a/docs/components_page/components/pagination/size.jl b/docs/components_page/components/pagination/size.jl
new file mode 100644
index 000000000..8fe5bb952
--- /dev/null
+++ b/docs/components_page/components/pagination/size.jl
@@ -0,0 +1,10 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+pagination = html_div([
+ html_div("Small"),
+ dbc_pagination(max_value = 5, size = "sm"),
+ html_div("Default"),
+ dbc_pagination(max_value = 5),
+ html_div("Large"),
+ dbc_pagination(max_value = 5, size = "lg"),
+])
diff --git a/docs/components_page/components/pagination/size.py b/docs/components_page/components/pagination/size.py
new file mode 100644
index 000000000..9b4b31a40
--- /dev/null
+++ b/docs/components_page/components/pagination/size.py
@@ -0,0 +1,13 @@
+import dash_bootstrap_components as dbc
+from dash import html
+
+pagination = html.Div(
+ [
+ html.Div("Small"),
+ dbc.Pagination(max_value=5, size="sm"),
+ html.Div("Default"),
+ dbc.Pagination(max_value=5),
+ html.Div("Large"),
+ dbc.Pagination(max_value=5, size="lg"),
+ ]
+)
diff --git a/docs/components_page/components/popover.md b/docs/components_page/components/popover.md
index dbd7d0114..503114bba 100644
--- a/docs/components_page/components/popover.md
+++ b/docs/components_page/components/popover.md
@@ -3,7 +3,7 @@ title: Popover
lead: Use the Popover component to add Bootstrap popovers to any component in your app.
---
-## Simple example
+## Examples
To use `Popover`, add it to your layout, and set the `target` argument to the `id` of the component you would like to attach the popover to. The easiest way to trigger the popover is to specify the `trigger` property. This should be a string containing any of the following 4 values (space separated)
diff --git a/docs/components_page/components/popover/direction.R b/docs/components_page/components/popover/direction.R
index 4a008d91d..c8fca6985 100644
--- a/docs/components_page/components/popover/direction.R
+++ b/docs/components_page/components/popover/direction.R
@@ -20,10 +20,10 @@ make_popover <- function(placement) {
make_button <- function(placement) {
return(
dbcButton(
- sprintf("Popover on %s", placement),
- id = sprintf("popover-%s-target", placement),
- className = "mx-2",
- n_clicks = 0
+ sprintf("Popover on %s", placement),
+ id = sprintf("popover-%s-target", placement),
+ className = "mx-2",
+ n_clicks = 0
)
)
}
@@ -39,21 +39,21 @@ popovers <- htmlDiv(
)
-toggle_popover <- function(n, is_open) {
- if (n > 0) {
- return(!is_open)
- }
- return(is_open)
+toggle_popover <- function(n, is_open) {
+ if (n > 0) {
+ return(!is_open)
+ }
+ return(is_open)
}
position <- list("top", "left", "right", "bottom")
for (p in position) {
- app$callback(
- output(sprintf("popover-%s", p), "is_open"),
- list(
- input(sprintf("popover-%s-target", p), "n_clicks"),
- state(sprintf("popover-%s", p), "is_open")
- ),
- toggle_popover
- )
+ app$callback(
+ output(sprintf("popover-%s", p), "is_open"),
+ list(
+ input(sprintf("popover-%s-target", p), "n_clicks"),
+ state(sprintf("popover-%s", p), "is_open")
+ ),
+ toggle_popover
+ )
}
diff --git a/docs/components_page/components/popover/direction.jl b/docs/components_page/components/popover/direction.jl
index 7ee804440..644304d66 100644
--- a/docs/components_page/components/popover/direction.jl
+++ b/docs/components_page/components/popover/direction.jl
@@ -4,19 +4,19 @@ using DashBootstrapComponents, DashHtmlComponents
function make_popover(placement)
return dbc_popover(
[dbc_popoverheader("Header"), dbc_popoverbody("This is a $placement popover")],
- id="popover-$placement",
- target="popover-$placement-target",
- placement=placement,
- is_open=false,
+ id = "popover-$placement",
+ target = "popover-$placement-target",
+ placement = placement,
+ is_open = false,
)
end;
function make_button(placement)
return dbc_button(
"Popover on $placement",
- id="popover-$placement-target",
- className="mx-2",
- n_clicks=0,
+ id = "popover-$placement-target",
+ className = "mx-2",
+ n_clicks = 0,
)
end;
diff --git a/docs/components_page/components/popover/direction.py b/docs/components_page/components/popover/direction.py
index 24c10b3a1..8d3e088b8 100644
--- a/docs/components_page/components/popover/direction.py
+++ b/docs/components_page/components/popover/direction.py
@@ -1,6 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output, State
+from dash import Input, Output, State, html
def make_popover(placement):
diff --git a/docs/components_page/components/popover/popover.R b/docs/components_page/components/popover/popover.R
index c24081bff..c53d90ff8 100644
--- a/docs/components_page/components/popover/popover.R
+++ b/docs/components_page/components/popover/popover.R
@@ -2,15 +2,16 @@ library(dashBootstrapComponents)
library(dashHtmlComponents)
popover_children <- list(
- dbcPopoverHeader("Popover header"),
- dbcPopoverBody("And here's some amazing content. Cool!")
+ dbcPopoverHeader("Popover header"),
+ dbcPopoverBody("And here's some amazing content. Cool!")
)
popovers <- htmlDiv(
list(
dbcButton(
- "Click", id = "click-target", n_clicks = 0,
- color = "danger", className = "mr-1"
+ "Click",
+ id = "click-target", n_clicks = 0,
+ color = "danger", className = "me-1"
),
dbcPopover(
popover_children,
@@ -19,8 +20,9 @@ popovers <- htmlDiv(
trigger = "click"
),
dbcButton(
- "Focus", id = "focus-target", n_clicks = 0,
- color = "danger", className = "mr-1"
+ "Focus",
+ id = "focus-target", n_clicks = 0,
+ color = "danger", className = "me-1"
),
dbcPopover(
popover_children,
@@ -29,8 +31,9 @@ popovers <- htmlDiv(
trigger = "focus"
),
dbcButton(
- "Hover", id = "hover-target", n_clicks = 0,
- color = "danger", className = "mr-1"
+ "Hover",
+ id = "hover-target", n_clicks = 0,
+ color = "danger", className = "me-1"
),
dbcPopover(
popover_children,
@@ -38,13 +41,15 @@ popovers <- htmlDiv(
target = "hover-target",
trigger = "hover",
),
- dbcButton("Legacy", id = "legacy-target", n_clicks = 0,
- color = "danger"),
+ dbcButton("Legacy",
+ id = "legacy-target", n_clicks = 0,
+ color = "danger"
+ ),
dbcPopover(
- popover_children,
- id = "legacy",
- target = "legacy-target",
- trigger = "legacy"
+ popover_children,
+ id = "legacy",
+ target = "legacy-target",
+ trigger = "legacy"
)
)
)
diff --git a/docs/components_page/components/popover/popover.jl b/docs/components_page/components/popover/popover.jl
index 8d2e4c39a..5bfbc541d 100644
--- a/docs/components_page/components/popover/popover.jl
+++ b/docs/components_page/components/popover/popover.jl
@@ -8,33 +8,33 @@ popover_children = [
popovers = html_div([
dbc_button(
"Click",
- id="click-target",
- color="danger",
- className="mr-1",
- n_clicks=0,
+ id = "click-target",
+ color = "danger",
+ className = "me-1",
+ n_clicks = 0,
),
- dbc_popover(popover_children, id="click", target="click-target", trigger="click"),
+ dbc_popover(popover_children, id = "click", target = "click-target", trigger = "click"),
dbc_button(
"Focus",
- id="focus-target",
- color="danger",
- className="mr-1",
- n_clicks=0,
+ id = "focus-target",
+ color = "danger",
+ className = "me-1",
+ n_clicks = 0,
),
- dbc_popover(popover_children, id="focus", target="focus-target", trigger="focus"),
+ dbc_popover(popover_children, id = "focus", target = "focus-target", trigger = "focus"),
dbc_button(
"Hover",
- id="hover-target",
- color="danger",
- className="mr-1",
- n_clicks=0,
+ id = "hover-target",
+ color = "danger",
+ className = "me-1",
+ n_clicks = 0,
),
- dbc_popover(popover_children, id="hover", target="hover-target", trigger="hover"),
- dbc_button("Legacy", id="legacy-target", color="danger", n_clicks=0),
+ dbc_popover(popover_children, id = "hover", target = "hover-target", trigger = "hover"),
+ dbc_button("Legacy", id = "legacy-target", color = "danger", n_clicks = 0),
dbc_popover(
popover_children,
- id="legacy",
- target="legacy-target",
- trigger="legacy",
+ id = "legacy",
+ target = "legacy-target",
+ trigger = "legacy",
),
]);
diff --git a/docs/components_page/components/popover/popover.py b/docs/components_page/components/popover/popover.py
index 02be237fd..7a793dc8d 100644
--- a/docs/components_page/components/popover/popover.py
+++ b/docs/components_page/components/popover/popover.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
popover_children = [
dbc.PopoverHeader("Popover header"),
@@ -12,7 +12,7 @@
"Click",
id="click-target",
color="danger",
- className="mr-1",
+ className="me-1",
n_clicks=0,
),
dbc.Popover(
@@ -25,7 +25,7 @@
"Focus",
id="focus-target",
color="danger",
- className="mr-1",
+ className="me-1",
n_clicks=0,
),
dbc.Popover(
@@ -38,7 +38,7 @@
"Hover",
id="hover-target",
color="danger",
- className="mr-1",
+ className="me-1",
n_clicks=0,
),
dbc.Popover(
diff --git a/docs/components_page/components/popover/popover_callback.R b/docs/components_page/components/popover/popover_callback.R
index 4a1a02536..c701b68e5 100644
--- a/docs/components_page/components/popover/popover_callback.R
+++ b/docs/components_page/components/popover/popover_callback.R
@@ -3,8 +3,10 @@ library(dashHtmlComponents)
popover <- htmlDiv(
list(
- dbcButton("Toggle", id = "toggle", n_clicks = 0,
- color = "success", className = "mr-4"),
+ dbcButton("Toggle",
+ id = "toggle", n_clicks = 0,
+ color = "success", className = "me-4"
+ ),
dbcButton("Target", id = "target", n_clicks = 0, color = "danger"),
dbcPopover(
list(
diff --git a/docs/components_page/components/popover/popover_callback.jl b/docs/components_page/components/popover/popover_callback.jl
index 05a313f8c..6345d86a6 100644
--- a/docs/components_page/components/popover/popover_callback.jl
+++ b/docs/components_page/components/popover/popover_callback.jl
@@ -3,20 +3,20 @@ using DashBootstrapComponents, DashHtmlComponents
popover = html_div([
dbc_button(
"Toggle",
- id="toggle",
- color="success",
- className="mr-4",
- n_clicks=0,
+ id = "toggle",
+ color = "success",
+ className = "me-4",
+ n_clicks = 0,
),
- dbc_button("Target", id="target", color="danger", n_clicks=0),
+ dbc_button("Target", id = "target", color = "danger", n_clicks = 0),
dbc_popover(
[
dbc_popoverheader("Popover header"),
dbc_popoverbody("And here's some amazing content. Cool!"),
],
- id="popover",
- is_open=false,
- target="target",
+ id = "popover",
+ is_open = false,
+ target = "target",
),
]);
@@ -26,5 +26,5 @@ callback!(
Input("toggle", "n_clicks"),
State("popover", "is_open"),
) do n, is_open
- return n > 0 ? is_open == 0 : is_open
+ return n > 0 ? is_open == 0 : is_open == 1
end;
diff --git a/docs/components_page/components/popover/popover_callback.py b/docs/components_page/components/popover/popover_callback.py
index 9b5bbd64d..52a52a731 100644
--- a/docs/components_page/components/popover/popover_callback.py
+++ b/docs/components_page/components/popover/popover_callback.py
@@ -1,6 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output, State
+from dash import Input, Output, State, html
popover = html.Div(
[
@@ -8,7 +7,7 @@
"Toggle",
id="toggle",
color="success",
- className="mr-4",
+ className="me-4",
n_clicks=0,
),
dbc.Button("Target", id="target", color="danger", n_clicks=0),
diff --git a/docs/components_page/components/progress.md b/docs/components_page/components/progress.md
index 1a9a87f46..d41232920 100644
--- a/docs/components_page/components/progress.md
+++ b/docs/components_page/components/progress.md
@@ -3,7 +3,7 @@ title: Progress
lead: Add Bootstrap style progress bars to your app with the `Progress` component, featuring support for stacked bars, animated backgrounds, and text labels.
---
-## Basic example
+## Examples
Use the `value` argument of `Progress` to set progress.
@@ -11,7 +11,7 @@ Use the `value` argument of `Progress` to set progress.
## Labels
-To add a text label to the progress bar, simply add it as a child.
+To add a text label to the progress bar, use the `label` prop.
{{example:components/progress/labels.py:progress}}
@@ -29,7 +29,7 @@ Use the `color` argument along with one of Bootstrap's contextual color names to
## Multiple bars
-You can nest `Progress` components to make a progress bar with multiple bars. Set `multi=True` on the parent `Progress` component, and `bar=True` on each child.
+You can nest `Progress` components to make a progress bar with multiple bars. Make sure you set `bar=True` on each of the children.
{{example:components/progress/multiple.py:progress}}
diff --git a/docs/components_page/components/progress/animated.R b/docs/components_page/components/progress/animated.R
index 010a33eb1..2ded10f1b 100644
--- a/docs/components_page/components/progress/animated.R
+++ b/docs/components_page/components/progress/animated.R
@@ -7,7 +7,8 @@ progress <- htmlDiv(
value = 80, id = "animated-progress", striped = TRUE, animated = FALSE
),
dbcButton(
- "Toggle animation", id = "animation-toggle", n_clicks = 0,
+ "Toggle animation",
+ id = "animation-toggle", n_clicks = 0,
className = "mt-3"
)
)
diff --git a/docs/components_page/components/progress/animated.jl b/docs/components_page/components/progress/animated.jl
index ffaf902d1..ab3807891 100644
--- a/docs/components_page/components/progress/animated.jl
+++ b/docs/components_page/components/progress/animated.jl
@@ -1,12 +1,12 @@
using DashBootstrapComponents, DashHtmlComponents
progress = html_div([
- dbc_progress(value=80, id="animated-progress", animated=false, striped=true),
+ dbc_progress(value = 80, id = "animated-progress", animated = false, striped = true),
dbc_button(
"Toggle animation",
- id="animation-toggle",
- className="mt-3",
- n_clicks=0,
+ id = "animation-toggle",
+ className = "mt-3",
+ n_clicks = 0,
),
]);
diff --git a/docs/components_page/components/progress/animated.py b/docs/components_page/components/progress/animated.py
index c40ce5445..2d0f03be3 100644
--- a/docs/components_page/components/progress/animated.py
+++ b/docs/components_page/components/progress/animated.py
@@ -1,6 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output, State
+from dash import Input, Output, State, html
progress = html.Div(
[
diff --git a/docs/components_page/components/progress/background.jl b/docs/components_page/components/progress/background.jl
index d52bfd1fb..6845d75bb 100644
--- a/docs/components_page/components/progress/background.jl
+++ b/docs/components_page/components/progress/background.jl
@@ -1,8 +1,8 @@
using DashBootstrapComponents, DashHtmlComponents
progress = html_div([
- dbc_progress(value=25, color="success", className="mb-3"),
- dbc_progress(value=50, color="warning", className="mb-3"),
- dbc_progress(value=75, color="danger", className="mb-3"),
- dbc_progress(value=100, color="info"),
+ dbc_progress(value = 25, color = "success", className = "mb-3"),
+ dbc_progress(value = 50, color = "warning", className = "mb-3"),
+ dbc_progress(value = 75, color = "danger", className = "mb-3"),
+ dbc_progress(value = 100, color = "info"),
]);
diff --git a/docs/components_page/components/progress/background.py b/docs/components_page/components/progress/background.py
index c5be67fe1..05e05209d 100644
--- a/docs/components_page/components/progress/background.py
+++ b/docs/components_page/components/progress/background.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
progress = html.Div(
[
diff --git a/docs/components_page/components/progress/height.R b/docs/components_page/components/progress/height.R
index 4fee5097c..b7a347cd7 100644
--- a/docs/components_page/components/progress/height.R
+++ b/docs/components_page/components/progress/height.R
@@ -3,7 +3,7 @@ library(dashHtmlComponents)
progress <- htmlDiv(
list(
- dbcProgress(value = 50, style = list(height = "1px"), className = "mb-3"),
- dbcProgress(value = 50, style = list(height = "30px"))
+ dbcProgress(value = 50, style = list(height = "1px"), className = "mb-3"),
+ dbcProgress(value = 50, style = list(height = "30px"))
)
)
diff --git a/docs/components_page/components/progress/height.jl b/docs/components_page/components/progress/height.jl
index 3f4dd456e..b7414f3a9 100644
--- a/docs/components_page/components/progress/height.jl
+++ b/docs/components_page/components/progress/height.jl
@@ -1,6 +1,6 @@
using DashBootstrapComponents, DashHtmlComponents
progress = html_div([
- dbc_progress(value=50, style=Dict("height" => "1px"), className="mb-3"),
- dbc_progress(value=50, style=Dict("height" => "30px")),
+ dbc_progress(value = 50, style = Dict("height" => "1px"), className = "mb-3"),
+ dbc_progress(value = 50, style = Dict("height" => "30px")),
]);
diff --git a/docs/components_page/components/progress/height.py b/docs/components_page/components/progress/height.py
index 1fbd24955..35ee19ee7 100644
--- a/docs/components_page/components/progress/height.py
+++ b/docs/components_page/components/progress/height.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
progress = html.Div(
[
diff --git a/docs/components_page/components/progress/interval.R b/docs/components_page/components/progress/interval.R
index 43b777e4f..ff2b3354a 100644
--- a/docs/components_page/components/progress/interval.R
+++ b/docs/components_page/components/progress/interval.R
@@ -13,7 +13,7 @@ progress <- htmlDiv(
app$callback(
list(
output("progress", "value"),
- output("progress", "children")
+ output("progress", "label")
),
list(input("progress-interval", "n_intervals")),
function(n) {
diff --git a/docs/components_page/components/progress/interval.jl b/docs/components_page/components/progress/interval.jl
index 8803fe116..40a2d8945 100644
--- a/docs/components_page/components/progress/interval.jl
+++ b/docs/components_page/components/progress/interval.jl
@@ -1,15 +1,15 @@
using DashBootstrapComponents, DashHtmlComponents, DashCoreComponents
progress = html_div([
- dcc_interval(id="progress-interval", n_intervals=0, interval=500),
- dbc_progress(id="progress"),
+ dcc_interval(id = "progress-interval", n_intervals = 0, interval = 500),
+ dbc_progress(id = "progress"),
]);
callback!(
app,
Output("progress", "value"),
- Output("progress", "children"),
+ Output("progress", "label"),
Input("progress-interval", "n_intervals"),
) do n
# check progress of some background process, in this example we'll just
diff --git a/docs/components_page/components/progress/interval.py b/docs/components_page/components/progress/interval.py
index f1d09cecb..3f7c30429 100644
--- a/docs/components_page/components/progress/interval.py
+++ b/docs/components_page/components/progress/interval.py
@@ -1,7 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_core_components as dcc
-import dash_html_components as html
-from dash.dependencies import Input, Output
+from dash import Input, Output, dcc, html
progress = html.Div(
[
@@ -12,7 +10,7 @@
@app.callback(
- [Output("progress", "value"), Output("progress", "children")],
+ [Output("progress", "value"), Output("progress", "label")],
[Input("progress-interval", "n_intervals")],
)
def update_progress(n):
diff --git a/docs/components_page/components/progress/labels.R b/docs/components_page/components/progress/labels.R
index 15737746e..7b30570be 100644
--- a/docs/components_page/components/progress/labels.R
+++ b/docs/components_page/components/progress/labels.R
@@ -1,3 +1,3 @@
library(dashBootstrapComponents)
-progress <- dbcProgress("25%", value = 25)
+progress <- dbcProgress(label = "25%", value = 25)
diff --git a/docs/components_page/components/progress/labels.jl b/docs/components_page/components/progress/labels.jl
index 1db5843d8..dc5c2a0d9 100644
--- a/docs/components_page/components/progress/labels.jl
+++ b/docs/components_page/components/progress/labels.jl
@@ -1,3 +1,3 @@
using DashBootstrapComponents
-progress = dbc_progress("25%", value=25);
+progress = dbc_progress(label = "25%", value = 25);
diff --git a/docs/components_page/components/progress/labels.py b/docs/components_page/components/progress/labels.py
index f5472a67c..d916cd16d 100644
--- a/docs/components_page/components/progress/labels.py
+++ b/docs/components_page/components/progress/labels.py
@@ -1,3 +1,3 @@
import dash_bootstrap_components as dbc
-progress = dbc.Progress("25%", value=25)
+progress = dbc.Progress(label="25%", value=25)
diff --git a/docs/components_page/components/progress/multiple.R b/docs/components_page/components/progress/multiple.R
index 4b3986bfe..26221781c 100644
--- a/docs/components_page/components/progress/multiple.R
+++ b/docs/components_page/components/progress/multiple.R
@@ -5,6 +5,5 @@ progress <- dbcProgress(
dbcProgress(valu = 20, color = "success", bar = TRUE),
dbcProgress(value = 30, color = "warning", bar = TRUE),
dbcProgress(value = 20, color = "danger", bar = TRUE)
- ),
- multi = TRUE
+ )
)
diff --git a/docs/components_page/components/progress/multiple.jl b/docs/components_page/components/progress/multiple.jl
index 67b7052af..ea1045e0b 100644
--- a/docs/components_page/components/progress/multiple.jl
+++ b/docs/components_page/components/progress/multiple.jl
@@ -1,10 +1,7 @@
using DashBootstrapComponents
-progress = dbc_progress(
- [
- dbc_progress(value=20, color="success", bar=true),
- dbc_progress(value=30, color="warning", bar=true),
- dbc_progress(value=20, color="danger", bar=true),
- ],
- multi=true,
-);
+progress = dbc_progress([
+ dbc_progress(value = 20, color = "success", bar = true),
+ dbc_progress(value = 30, color = "warning", bar = true),
+ dbc_progress(value = 20, color = "danger", bar = true),
+],);
diff --git a/docs/components_page/components/progress/multiple.py b/docs/components_page/components/progress/multiple.py
index d5c68efda..81531b552 100644
--- a/docs/components_page/components/progress/multiple.py
+++ b/docs/components_page/components/progress/multiple.py
@@ -5,6 +5,5 @@
dbc.Progress(value=20, color="success", bar=True),
dbc.Progress(value=30, color="warning", bar=True),
dbc.Progress(value=20, color="danger", bar=True),
- ],
- multi=True,
+ ]
)
diff --git a/docs/components_page/components/progress/progress.jl b/docs/components_page/components/progress/progress.jl
index cb1e57fa9..1fdf415f1 100644
--- a/docs/components_page/components/progress/progress.jl
+++ b/docs/components_page/components/progress/progress.jl
@@ -1,3 +1,3 @@
using DashBootstrapComponents
-progress = dbc_progress(value=50);
+progress = dbc_progress(value = 50);
diff --git a/docs/components_page/components/progress/stripes.jl b/docs/components_page/components/progress/stripes.jl
index bebbb20b9..8303ce4e3 100644
--- a/docs/components_page/components/progress/stripes.jl
+++ b/docs/components_page/components/progress/stripes.jl
@@ -1,3 +1,3 @@
using DashBootstrapComponents
-progress = dbc_progress(value=75, striped=true);
+progress = dbc_progress(value = 75, striped = true);
diff --git a/docs/components_page/components/spinner.md b/docs/components_page/components/spinner.md
index a7fe7e414..99ed8b8d9 100644
--- a/docs/components_page/components/spinner.md
+++ b/docs/components_page/components/spinner.md
@@ -5,7 +5,7 @@ lead: Indicate the loading state of a component or page with the `Spinner` compo
The `Spinner` component can be used either to create a standalone spinner, or used in the same way as [dcc.Loading](https://dash.plot.ly/dash-core-components/loading) by passing children.
-## Basic usage
+## Examples
To create a simple spinner, just add `dbc.Spinner()` to your layout. By default, `Spinner` uses the current text color for its border color. Override the color of the `Spinner` using the `color` argument and one of the eight supported contextual color names.
diff --git a/docs/components_page/components/spinner/button.R b/docs/components_page/components/spinner/button.R
index fa8efef92..5132b391e 100644
--- a/docs/components_page/components/spinner/button.R
+++ b/docs/components_page/components/spinner/button.R
@@ -4,10 +4,10 @@ library(dashHtmlComponents)
spinners <- htmlDiv(
list(
dbcButton(
- dbcSpinner(size = "sm"),
- color = "primary",
- disabled = TRUE,
- className = "mr-1"
+ dbcSpinner(size = "sm"),
+ color = "primary",
+ disabled = TRUE,
+ className = "me-1"
),
dbcButton(
list(dbcSpinner(size = "sm"), " Loading..."),
diff --git a/docs/components_page/components/spinner/button.jl b/docs/components_page/components/spinner/button.jl
index 5ca3bd68d..eaeba089b 100644
--- a/docs/components_page/components/spinner/button.jl
+++ b/docs/components_page/components/spinner/button.jl
@@ -2,14 +2,14 @@ using DashBootstrapComponents, DashHtmlComponents
spinners = html_div([
dbc_button(
- dbc_spinner(size="sm"),
- color="primary",
- disabled=true,
- className="mr-1",
+ dbc_spinner(size = "sm"),
+ color = "primary",
+ disabled = true,
+ className = "me-1",
),
dbc_button(
- [dbc_spinner(size="sm"), " Loading..."],
- color="primary",
- disabled=true,
+ [dbc_spinner(size = "sm"), " Loading..."],
+ color = "primary",
+ disabled = true,
),
]);
diff --git a/docs/components_page/components/spinner/button.py b/docs/components_page/components/spinner/button.py
index d2ab61234..11d55d4f7 100644
--- a/docs/components_page/components/spinner/button.py
+++ b/docs/components_page/components/spinner/button.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
spinners = html.Div(
[
@@ -7,7 +7,7 @@
dbc.Spinner(size="sm"),
color="primary",
disabled=True,
- className="mr-1",
+ className="me-1",
),
dbc.Button(
[dbc.Spinner(size="sm"), " Loading..."],
diff --git a/docs/components_page/components/spinner/grow.jl b/docs/components_page/components/spinner/grow.jl
index b80090e0f..d78a9033c 100644
--- a/docs/components_page/components/spinner/grow.jl
+++ b/docs/components_page/components/spinner/grow.jl
@@ -1,12 +1,12 @@
using DashBootstrapComponents, DashHtmlComponents
spinners = html_div([
- dbc_spinner(color="primary", type="grow"),
- dbc_spinner(color="secondary", type="grow"),
- dbc_spinner(color="success", type="grow"),
- dbc_spinner(color="warning", type="grow"),
- dbc_spinner(color="danger", type="grow"),
- dbc_spinner(color="info", type="grow"),
- dbc_spinner(color="light", type="grow"),
- dbc_spinner(color="dark", type="grow"),
+ dbc_spinner(color = "primary", type = "grow"),
+ dbc_spinner(color = "secondary", type = "grow"),
+ dbc_spinner(color = "success", type = "grow"),
+ dbc_spinner(color = "warning", type = "grow"),
+ dbc_spinner(color = "danger", type = "grow"),
+ dbc_spinner(color = "info", type = "grow"),
+ dbc_spinner(color = "light", type = "grow"),
+ dbc_spinner(color = "dark", type = "grow"),
]);
diff --git a/docs/components_page/components/spinner/grow.py b/docs/components_page/components/spinner/grow.py
index a44270a32..07979f16c 100644
--- a/docs/components_page/components/spinner/grow.py
+++ b/docs/components_page/components/spinner/grow.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
spinners = html.Div(
[
diff --git a/docs/components_page/components/spinner/loading.jl b/docs/components_page/components/spinner/loading.jl
index cb806af0e..9ede43d91 100644
--- a/docs/components_page/components/spinner/loading.jl
+++ b/docs/components_page/components/spinner/loading.jl
@@ -1,8 +1,8 @@
using DashBootstrapComponents, DashHtmlComponents
loading_spinner = html_div([
- dbc_button("Load", id="loading-button", n_clicks=0),
- dbc_spinner(html_div(id="loading-output")),
+ dbc_button("Load", id = "loading-button", n_clicks = 0),
+ dbc_spinner(html_div(id = "loading-output")),
]);
callback!(
diff --git a/docs/components_page/components/spinner/loading.py b/docs/components_page/components/spinner/loading.py
index 650c94d33..8a5782321 100644
--- a/docs/components_page/components/spinner/loading.py
+++ b/docs/components_page/components/spinner/loading.py
@@ -1,8 +1,7 @@
import time
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output
+from dash import Input, Output, html
loading_spinner = html.Div(
[
diff --git a/docs/components_page/components/spinner/simple.jl b/docs/components_page/components/spinner/simple.jl
index 99b786ae8..7f11b7f07 100644
--- a/docs/components_page/components/spinner/simple.jl
+++ b/docs/components_page/components/spinner/simple.jl
@@ -1,12 +1,12 @@
using DashBootstrapComponents, DashHtmlComponents
spinners = html_div([
- dbc_spinner(color="primary"),
- dbc_spinner(color="secondary"),
- dbc_spinner(color="success"),
- dbc_spinner(color="warning"),
- dbc_spinner(color="danger"),
- dbc_spinner(color="info"),
- dbc_spinner(color="light"),
- dbc_spinner(color="dark"),
+ dbc_spinner(color = "primary"),
+ dbc_spinner(color = "secondary"),
+ dbc_spinner(color = "success"),
+ dbc_spinner(color = "warning"),
+ dbc_spinner(color = "danger"),
+ dbc_spinner(color = "info"),
+ dbc_spinner(color = "light"),
+ dbc_spinner(color = "dark"),
]);
diff --git a/docs/components_page/components/spinner/simple.py b/docs/components_page/components/spinner/simple.py
index fc8f4c5e9..f7338c79c 100644
--- a/docs/components_page/components/spinner/simple.py
+++ b/docs/components_page/components/spinner/simple.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
spinners = html.Div(
[
diff --git a/docs/components_page/components/spinner/size.jl b/docs/components_page/components/spinner/size.jl
index 31de37ccb..68ce88bcf 100644
--- a/docs/components_page/components/spinner/size.jl
+++ b/docs/components_page/components/spinner/size.jl
@@ -1,7 +1,7 @@
using DashBootstrapComponents, DashHtmlComponents
spinners = html_div([
- dbc_spinner(size="sm"),
+ dbc_spinner(size = "sm"),
html_hr(),
- dbc_spinner(spinner_style=Dict("width" => "3rem", "height" => "3rem")),
+ dbc_spinner(spinner_style = Dict("width" => "3rem", "height" => "3rem")),
]);
diff --git a/docs/components_page/components/spinner/size.py b/docs/components_page/components/spinner/size.py
index 2694a2ecc..1989f061e 100644
--- a/docs/components_page/components/spinner/size.py
+++ b/docs/components_page/components/spinner/size.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
spinners = html.Div(
[
diff --git a/docs/components_page/components/table.md b/docs/components_page/components/table.md
index f19757051..576a94048 100644
--- a/docs/components_page/components/table.md
+++ b/docs/components_page/components/table.md
@@ -3,7 +3,7 @@ title: Table
lead: Add Bootstrap styles HTML tables to your app with the `Table` component.
---
-## Simple example
+## Examples
To add a Bootstrap styled table to your app, use `dbc.Table` as a drop-in replacement for `html.Table`, building up the content with `html.Thead`, `html.Tbody`, `html.Th`, `html.Tr` and `html.Td`.
@@ -15,10 +15,22 @@ The style of the table can be modified through a number of available keyword arg
{{example:components/table/kwargs.py:table}}
+### Table Colors
+
+Alternatively colors can be added with the `color` property.
+
+{{example:components/table/color.py:table}}
+
## Table from DataFrame
Manually constructing a HTML table can be tedious. The `Table` component has a `from_dataframe` method which allows you to easily construct a `Table` from a Pandas DataFrame. You will need to have Pandas installed. Either install it yourself or run `pip install -U dash-bootstrap-components[pandas]`.
{{example:components/table/helper.py:table}}
+## Table from MultiIndex DataFrame
+
+If you have a columnar MultiIndex in your Pandas DataFrame, the `from_dataframe` method will automatically merge the relevant header cells for you.
+
+{{example:components/table/helper_multi.py:table}}
+
{{apidoc:src/components/Table.js}}
diff --git a/docs/components_page/components/table/color.R b/docs/components_page/components/table/color.R
new file mode 100644
index 000000000..36e66dd8f
--- /dev/null
+++ b/docs/components_page/components/table/color.R
@@ -0,0 +1,43 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+color_selector <- htmlDiv(
+ list(
+ htmlDiv("Select a colour theme:"),
+ dbcSelect(
+ id = "change-table-color",
+ options = list(
+ list("label" = "primary", "value" = "primary"),
+ list("label" = "secondary", "value" = "secondary"),
+ list("label" = "success", "value" = "success"),
+ list("label" = "danger", "value" = "danger"),
+ list("label" = "warning", "value" = "warning"),
+ list("label" = "info", "value" = "info"),
+ list("label" = "light", "value" = "light"),
+ list("label" = "dark", "value" = "dark")
+ ),
+ value = "primary"
+ )
+ ),
+ className = "p-3 m-2 border"
+)
+
+table <- htmlDiv(
+ list(
+ color_selector,
+ dbcTable(
+ # using the same table as in the above example
+ table_header + table_body,
+ id = "table-color",
+ color = "primary"
+ )
+ )
+)
+
+app$callback(
+ output("table-color", "color"),
+ list(input("change-table-color", "value")),
+ function(color) {
+ return(color)
+ }
+)
diff --git a/docs/components_page/components/table/color.jl b/docs/components_page/components/table/color.jl
new file mode 100644
index 000000000..f0f26fdc6
--- /dev/null
+++ b/docs/components_page/components/table/color.jl
@@ -0,0 +1,40 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+color_selector = html_div(
+ [
+ html_div("Select a colour theme:"),
+ dbc_select(
+ id = "change-table-color",
+ options = [
+ Dict("label" => "primary", "value" => "primary"),
+ Dict("label" => "secondary", "value" => "secondary"),
+ Dict("label" => "success", "value" => "success"),
+ Dict("label" => "danger", "value" => "danger"),
+ Dict("label" => "warning", "value" => "warning"),
+ Dict("label" => "info", "value" => "info"),
+ Dict("label" => "light", "value" => "light"),
+ Dict("label" => "dark", "value" => "dark"),
+ ],
+ value = "primary",
+ ),
+ ],
+ className = "p-3 m-2 border",
+)
+
+table = html_div([
+ color_selector,
+ dbc_table(
+ # using the same table as in the above example
+ table_header + table_body,
+ id = "table-color",
+ color = "primary",
+ ),
+])
+
+callback!(
+ app,
+ Output("table-color", "color"),
+ Input("change-table-color", "value"),
+) do color
+ return color
+end;
diff --git a/docs/components_page/components/table/color.py b/docs/components_page/components/table/color.py
new file mode 100644
index 000000000..85e086f51
--- /dev/null
+++ b/docs/components_page/components/table/color.py
@@ -0,0 +1,42 @@
+import dash_bootstrap_components as dbc
+from dash import Input, Output, html
+
+color_selector = html.Div(
+ [
+ html.Div("Select a colour theme:"),
+ dbc.Select(
+ id="change-table-color",
+ options=[
+ {"label": "primary", "value": "primary"},
+ {"label": "secondary", "value": "secondary"},
+ {"label": "success", "value": "success"},
+ {"label": "danger", "value": "danger"},
+ {"label": "warning", "value": "warning"},
+ {"label": "info", "value": "info"},
+ {"label": "light", "value": "light"},
+ {"label": "dark", "value": "dark"},
+ ],
+ value="primary",
+ ),
+ ],
+ className="p-3 m-2 border",
+)
+
+table = html.Div(
+ [
+ color_selector,
+ dbc.Table(
+ # using the same table as in the above example
+ table_header + table_body,
+ id="table-color",
+ color="primary",
+ ),
+ ]
+)
+
+
+@app.callback(
+ Output("table-color", "color"), Input("change-table-color", "value")
+)
+def change_table_colour(color):
+ return color
diff --git a/docs/components_page/components/table/helper_multi.py b/docs/components_page/components/table/helper_multi.py
new file mode 100644
index 000000000..852ef2f96
--- /dev/null
+++ b/docs/components_page/components/table/helper_multi.py
@@ -0,0 +1,24 @@
+import dash_bootstrap_components as dbc
+import pandas as pd
+
+df = pd.DataFrame(
+ {
+ ("Score", "Max"): {
+ "Arthur Dent": 6.0,
+ "Ford Prefect": 4.0,
+ "Zaphod Beeblebrox": 1.0,
+ "Trillian Astra": 3.0,
+ },
+ ("Score", "Average"): {
+ "Arthur Dent": 2.0,
+ "Ford Prefect": 2.0,
+ "Zaphod Beeblebrox": 0.7,
+ "Trillian Astra": 1.9,
+ },
+ }
+)
+df.index.set_names("Name", inplace=True)
+
+table = dbc.Table.from_dataframe(
+ df, striped=True, bordered=True, hover=True, index=True
+)
diff --git a/docs/components_page/components/table/kwargs.R b/docs/components_page/components/table/kwargs.R
index 2338816dd..5d8c90abf 100644
--- a/docs/components_page/components/table/kwargs.R
+++ b/docs/components_page/components/table/kwargs.R
@@ -1,9 +1,9 @@
table <- dbcTable(
- # using the same table as in the above example
- c(table_header, table_body),
- bordered = TRUE,
- dark = TRUE,
- hover = TRUE,
- responsive = TRUE,
- striped = TRUE,
+ # using the same table as in the above example
+ c(table_header, table_body),
+ bordered = TRUE,
+ dark = TRUE,
+ hover = TRUE,
+ responsive = TRUE,
+ striped = TRUE,
)
diff --git a/docs/components_page/components/table/kwargs.jl b/docs/components_page/components/table/kwargs.jl
index 71514716d..37d07c316 100644
--- a/docs/components_page/components/table/kwargs.jl
+++ b/docs/components_page/components/table/kwargs.jl
@@ -1,9 +1,9 @@
table = dbc_table(
# using the same table as in the above example
table_header * table_body,
- bordered=true,
- dark=true,
- hover=true,
- responsive=true,
- striped=true,
+ bordered = true,
+ dark = true,
+ hover = true,
+ responsive = true,
+ striped = true,
);
diff --git a/docs/components_page/components/table/simple.R b/docs/components_page/components/table/simple.R
index 47d857006..4dbf190ae 100644
--- a/docs/components_page/components/table/simple.R
+++ b/docs/components_page/components/table/simple.R
@@ -3,7 +3,8 @@ library(dashHtmlComponents)
table_header <- list(
htmlThead(
- htmlTr(list(htmlTh("First Name"), htmlTh("Last Name"))))
+ htmlTr(list(htmlTh("First Name"), htmlTh("Last Name")))
+ )
)
row1 <- htmlTr(list(htmlTd("Arthur"), htmlTd("Dent")))
diff --git a/docs/components_page/components/table/simple.jl b/docs/components_page/components/table/simple.jl
index 3cb7276fb..11b1a3668 100644
--- a/docs/components_page/components/table/simple.jl
+++ b/docs/components_page/components/table/simple.jl
@@ -9,4 +9,4 @@ row4 = html_tr([html_td("Trillian"), html_td("Astra")]);
table_body = [html_tbody([row1, row2, row3, row4])];
-table = dbc_table([table_header ; table_body], bordered=true);
+table = dbc_table([table_header; table_body], bordered = true);
diff --git a/docs/components_page/components/table/simple.py b/docs/components_page/components/table/simple.py
index e21ab869d..f9628668f 100644
--- a/docs/components_page/components/table/simple.py
+++ b/docs/components_page/components/table/simple.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
table_header = [
html.Thead(html.Tr([html.Th("First Name"), html.Th("Last Name")]))
diff --git a/docs/components_page/components/tabs.md b/docs/components_page/components/tabs.md
index 1e38e713c..827c9eee1 100644
--- a/docs/components_page/components/tabs.md
+++ b/docs/components_page/components/tabs.md
@@ -3,7 +3,7 @@ title: Tabs
lead: A self-contained tabs component with Bootstrap styles.
---
-## Tabs as children
+## Examples
The easiest way to use `Tabs` is to pass it one or more `Tab` components as children. Use the `label` argument to specify the label in the tab. `Tabs` will automatically switch between tabs for you by displaying and hiding the content of each `Tab` below the tab pane. You can also use the `disabled` argument to disable individual tabs. This will cause the label to be grayed out and make the tab unresponsive to being clicked.
@@ -17,7 +17,7 @@ You can also use the `active_tab` prop of `Tabs` in a callback to switch between
## Tabs in cards
-Use `card=True` when placing your `Tabs` inside a `CardHeader`. You must use a callback to insert the tab content into the card body rather than relying on the tabs as children approach outlined above.
+You can also place your `Tabs` inside a `CardHeader`. You must use a callback to insert the tab content into the card body rather than relying on the tabs as children approach outlined above.
{{example:components/tabs/card.py:card}}
@@ -25,11 +25,11 @@ Use `card=True` when placing your `Tabs` inside a `CardHeader`. You must use a c
You can modify the style of the tabs and labels using the `tab_style` and `label_style` properties. Use `tab_style` to modify the tab itself, for example to modify placement and spacing. Use `label_style` to modify the label, for example the font, text color, border-radius and so on.
-You can also apply CSS classes to the tab or label using the `tabClassName` or `labelClassName` properties. In the below example we apply the Bootstrap classes `ml-auto`, which sets the left margin to `auto`, and `text-success`, which sets the text color to the theme's 'success' color.
+You can also apply CSS classes to the tab or label using the `tabClassName` or `labelClassName` properties. In the below example we apply the Bootstrap classes `ms-auto`, which sets the left margin to `auto`, and `text-success`, which sets the text color to the theme's 'success' color.
{{example:components/tabs/style.py:tabs}}
-To apply certain styles only to the currently active tab, you can use the `active_tab_style`, `activeTabClassName`, `active_label_style` and `activeLabelClassName` properties.
+To apply certain styles only to the currently active tab, you can use the `active_tab_style`, `activeTabClassName`, `active_label_style` and `active_labelClassName` properties.
{{apidoc:src/components/tabs/Tabs.js}}
diff --git a/docs/components_page/components/tabs/active_tab.jl b/docs/components_page/components/tabs/active_tab.jl
index 395fbe912..ab4127e92 100644
--- a/docs/components_page/components/tabs/active_tab.jl
+++ b/docs/components_page/components/tabs/active_tab.jl
@@ -3,13 +3,13 @@ using DashBootstrapComponents, DashHtmlComponents
tabs = html_div([
dbc_tabs(
[
- dbc_tab(label="Tab 1", tab_id="tab-1"),
- dbc_tab(label="Tab 2", tab_id="tab-2"),
+ dbc_tab(label = "Tab 1", tab_id = "tab-1"),
+ dbc_tab(label = "Tab 2", tab_id = "tab-2"),
],
- id="tabs",
- active_tab="tab-1",
+ id = "tabs",
+ active_tab = "tab-1",
),
- html_div(id="content"),
+ html_div(id = "content"),
]);
callback!(app, Output("content", "children"), Input("tabs", "active_tab")) do at
diff --git a/docs/components_page/components/tabs/active_tab.py b/docs/components_page/components/tabs/active_tab.py
index e4986256f..e0a615f3d 100644
--- a/docs/components_page/components/tabs/active_tab.py
+++ b/docs/components_page/components/tabs/active_tab.py
@@ -1,6 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output
+from dash import Input, Output, html
tabs = html.Div(
[
diff --git a/docs/components_page/components/tabs/card.R b/docs/components_page/components/tabs/card.R
index 649e141cd..665d33060 100644
--- a/docs/components_page/components/tabs/card.R
+++ b/docs/components_page/components/tabs/card.R
@@ -10,7 +10,6 @@ card <- dbcCard(
dbcTab(label = "Tab 2", tab_id = "tab-2")
),
id = "card-tabs",
- card = TRUE,
active_tab = "tab-1"
)
),
diff --git a/docs/components_page/components/tabs/card.jl b/docs/components_page/components/tabs/card.jl
index e210b828c..d81df77b5 100644
--- a/docs/components_page/components/tabs/card.jl
+++ b/docs/components_page/components/tabs/card.jl
@@ -4,15 +4,14 @@ card = dbc_card([
dbc_cardheader(
dbc_tabs(
[
- dbc_tab(label="Tab 1", tab_id="tab-1"),
- dbc_tab(label="Tab 2", tab_id="tab-2"),
+ dbc_tab(label = "Tab 1", tab_id = "tab-1"),
+ dbc_tab(label = "Tab 2", tab_id = "tab-2"),
],
- id="card-tabs",
- card=true,
- active_tab="tab-1",
+ id = "card-tabs",
+ active_tab = "tab-1",
),
),
- dbc_cardbody(html_p(id="card-content", className="card-text")),
+ dbc_cardbody(html_p(id = "card-content", className = "card-text")),
]);
callback!(
diff --git a/docs/components_page/components/tabs/card.py b/docs/components_page/components/tabs/card.py
index e010d1ac2..142493316 100644
--- a/docs/components_page/components/tabs/card.py
+++ b/docs/components_page/components/tabs/card.py
@@ -1,6 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output
+from dash import Input, Output, html
card = dbc.Card(
[
@@ -11,7 +10,6 @@
dbc.Tab(label="Tab 2", tab_id="tab-2"),
],
id="card-tabs",
- card=True,
active_tab="tab-1",
)
),
diff --git a/docs/components_page/components/tabs/simple.R b/docs/components_page/components/tabs/simple.R
index 9eae613ec..0552a9313 100644
--- a/docs/components_page/components/tabs/simple.R
+++ b/docs/components_page/components/tabs/simple.R
@@ -12,13 +12,13 @@ tab1_content <- dbcCard(
)
tab2_content <- dbcCard(
- dbcCardBody(
- list(
- htmlP("This is tab 2!", className = "card-text"),
- dbcButton("Don't click here", color = "danger")
- )
- ),
- className = "mt-3",
+ dbcCardBody(
+ list(
+ htmlP("This is tab 2!", className = "card-text"),
+ dbcButton("Don't click here", color = "danger")
+ )
+ ),
+ className = "mt-3",
)
@@ -27,7 +27,8 @@ tabs <- dbcTabs(
dbcTab(tab1_content, label = "Tab 1"),
dbcTab(tab2_content, label = "Tab 2"),
dbcTab(
- "This tab's content is never seen", label = "Tab 3", disabled = TRUE
+ "This tab's content is never seen",
+ label = "Tab 3", disabled = TRUE
)
)
)
diff --git a/docs/components_page/components/tabs/simple.jl b/docs/components_page/components/tabs/simple.jl
index 7d12aa970..63f3c4db6 100644
--- a/docs/components_page/components/tabs/simple.jl
+++ b/docs/components_page/components/tabs/simple.jl
@@ -2,23 +2,23 @@ using DashBootstrapComponents, DashHtmlComponents
tab1_content = dbc_card(
dbc_cardbody([
- html_p("This is tab 1!", className="card-text"),
- dbc_button("Click here", color="success"),
+ html_p("This is tab 1!", className = "card-text"),
+ dbc_button("Click here", color = "success"),
]),
- className="mt-3",
+ className = "mt-3",
);
tab2_content = dbc_card(
dbc_cardbody([
- html_p("This is tab 2!", className="card-text"),
- dbc_button("Don't click here", color="danger"),
+ html_p("This is tab 2!", className = "card-text"),
+ dbc_button("Don't click here", color = "danger"),
]),
- className="mt-3",
+ className = "mt-3",
);
tabs = dbc_tabs([
- dbc_tab(tab1_content, label="Tab 1"),
- dbc_tab(tab2_content, label="Tab 2"),
- dbc_tab("This tab's content is never seen", label="Tab 3", disabled=true),
+ dbc_tab(tab1_content, label = "Tab 1"),
+ dbc_tab(tab2_content, label = "Tab 2"),
+ dbc_tab("This tab's content is never seen", label = "Tab 3", disabled = true),
]);
diff --git a/docs/components_page/components/tabs/simple.py b/docs/components_page/components/tabs/simple.py
index 60f31065e..09e4854d1 100644
--- a/docs/components_page/components/tabs/simple.py
+++ b/docs/components_page/components/tabs/simple.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
tab1_content = dbc.Card(
dbc.CardBody(
diff --git a/docs/components_page/components/tabs/style.R b/docs/components_page/components/tabs/style.R
index e7cd578b2..bebf372a7 100644
--- a/docs/components_page/components/tabs/style.R
+++ b/docs/components_page/components/tabs/style.R
@@ -12,7 +12,7 @@ tabs <- htmlDiv(
htmlBr(),
dbcTabs(
list(
- dbcTab(label = "Tab 1", tabClassName = "ml-auto"),
+ dbcTab(label = "Tab 1", tabClassName = "ms-auto"),
dbcTab(label = "Tab 2", labelClassName = "text-success")
)
)
diff --git a/docs/components_page/components/tabs/style.jl b/docs/components_page/components/tabs/style.jl
index 1bfd69eca..a4c1daeb8 100644
--- a/docs/components_page/components/tabs/style.jl
+++ b/docs/components_page/components/tabs/style.jl
@@ -2,12 +2,12 @@ using DashBootstrapComponents, DashHtmlComponents
tabs = html_div([
dbc_tabs([
- dbc_tab(label="Tab 1", tab_style=Dict("marginLeft" => "auto")),
- dbc_tab(label="Tab 2", label_style=Dict("color" => "#00AEF9")),
+ dbc_tab(label = "Tab 1", tab_style = Dict("marginLeft" => "auto")),
+ dbc_tab(label = "Tab 2", label_style = Dict("color" => "#00AEF9")),
]),
html_br(),
dbc_tabs([
- dbc_tab(label="Tab 1", tabClassName="ml-auto"),
- dbc_tab(label="Tab 2", labelClassName="text-success"),
+ dbc_tab(label = "Tab 1", tabClassName = "ms-auto"),
+ dbc_tab(label = "Tab 2", labelClassName = "text-success"),
]),
]);
diff --git a/docs/components_page/components/tabs/style.py b/docs/components_page/components/tabs/style.py
index a99acb5e8..c8d17abe9 100644
--- a/docs/components_page/components/tabs/style.py
+++ b/docs/components_page/components/tabs/style.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
tabs = html.Div(
[
@@ -12,7 +12,7 @@
html.Br(),
dbc.Tabs(
[
- dbc.Tab(label="Tab 1", tabClassName="ml-auto"),
+ dbc.Tab(label="Tab 1", tabClassName="ms-auto"),
dbc.Tab(label="Tab 2", labelClassName="text-success"),
]
),
diff --git a/docs/components_page/components/toast.md b/docs/components_page/components/toast.md
index 797b842fe..00e638203 100644
--- a/docs/components_page/components/toast.md
+++ b/docs/components_page/components/toast.md
@@ -5,7 +5,7 @@ lead: Push notifications to your users with a toast, a lightweight and easily cu
Toasts are lightweight notifications designed to mimic the push notifications popularized by mobile and desktop operating systems.
-## Simple example
+## Examples
The `Toast` component automatically creates a header and body, the children of the component populate the body, while the `header` property can be used to set the header text.
diff --git a/docs/components_page/components/toast/auto_dismiss.jl b/docs/components_page/components/toast/auto_dismiss.jl
index 4d1245e7b..03edc195f 100644
--- a/docs/components_page/components/toast/auto_dismiss.jl
+++ b/docs/components_page/components/toast/auto_dismiss.jl
@@ -3,17 +3,17 @@ using DashBootstrapComponents, DashHtmlComponents
toast = html_div([
dbc_button(
"Open toast",
- id="auto-toast-toggle",
- color="primary",
- className="mb-3",
- n_clicks=0,
+ id = "auto-toast-toggle",
+ color = "primary",
+ className = "mb-3",
+ n_clicks = 0,
),
dbc_toast(
- [html_p("This is the content of the toast", className="mb-0")],
- id="auto-toast",
- header="This is the header",
- icon="primary",
- duration=4000,
+ [html_p("This is the content of the toast", className = "mb-0")],
+ id = "auto-toast",
+ header = "This is the header",
+ icon = "primary",
+ duration = 4000,
),
]);
diff --git a/docs/components_page/components/toast/auto_dismiss.py b/docs/components_page/components/toast/auto_dismiss.py
index d5cf65225..4f560acd6 100644
--- a/docs/components_page/components/toast/auto_dismiss.py
+++ b/docs/components_page/components/toast/auto_dismiss.py
@@ -1,6 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output
+from dash import Input, Output, html
toast = html.Div(
[
diff --git a/docs/components_page/components/toast/icon_dismiss.jl b/docs/components_page/components/toast/icon_dismiss.jl
index 3e4c66cf1..8be51879f 100644
--- a/docs/components_page/components/toast/icon_dismiss.jl
+++ b/docs/components_page/components/toast/icon_dismiss.jl
@@ -3,17 +3,17 @@ using DashBootstrapComponents, DashHtmlComponents
toast = html_div([
dbc_button(
"Open toast",
- id="simple-toast-toggle",
- color="primary",
- className="mb-3",
- n_clicks=0,
+ id = "simple-toast-toggle",
+ color = "primary",
+ className = "mb-3",
+ n_clicks = 0,
),
dbc_toast(
- [html_p("This is the content of the toast", className="mb-0")],
- id="simple-toast",
- header="This is the header",
- icon="primary",
- dismissable=true,
+ [html_p("This is the content of the toast", className = "mb-0")],
+ id = "simple-toast",
+ header = "This is the header",
+ icon = "primary",
+ dismissable = true,
),
]);
diff --git a/docs/components_page/components/toast/icon_dismiss.py b/docs/components_page/components/toast/icon_dismiss.py
index be4cdc5cc..db2df7763 100644
--- a/docs/components_page/components/toast/icon_dismiss.py
+++ b/docs/components_page/components/toast/icon_dismiss.py
@@ -1,6 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output
+from dash import Input, Output, html
toast = html.Div(
[
diff --git a/docs/components_page/components/toast/position.R b/docs/components_page/components/toast/position.R
index d1e6ab6e3..7d828bcef 100644
--- a/docs/components_page/components/toast/position.R
+++ b/docs/components_page/components/toast/position.R
@@ -4,18 +4,19 @@ library(dashHtmlComponents)
toast <- htmlDiv(
list(
dbcButton(
- "Open toast", id = "positioned-toast-toggle",
- n_clicks = 0, color = "primary"
+ "Open toast",
+ id = "positioned-toast-toggle",
+ n_clicks = 0, color = "primary"
),
dbcToast(
- "This toast is placed in the top right",
- id = "positioned-toast",
- header = "Positioned toast",
- is_open = FALSE,
- dismissable = TRUE,
- icon = "danger",
- # top: 66 positions the toast below the navbar
- style = list(position = "fixed", top = 66, right = 10, width = 350),
+ "This toast is placed in the top right",
+ id = "positioned-toast",
+ header = "Positioned toast",
+ is_open = FALSE,
+ dismissable = TRUE,
+ icon = "danger",
+ # top: 66 positions the toast below the navbar
+ style = list(position = "fixed", top = 66, right = 10, width = 350),
)
)
)
diff --git a/docs/components_page/components/toast/position.jl b/docs/components_page/components/toast/position.jl
index 38e7a5646..61735eae9 100644
--- a/docs/components_page/components/toast/position.jl
+++ b/docs/components_page/components/toast/position.jl
@@ -3,19 +3,19 @@ using DashBootstrapComponents, DashHtmlComponents
toast = html_div([
dbc_button(
"Open toast",
- id="positioned-toast-toggle",
- color="primary",
- n_clicks=0,
+ id = "positioned-toast-toggle",
+ color = "primary",
+ n_clicks = 0,
),
dbc_toast(
"This toast is placed in the top right",
- id="positioned-toast",
- header="Positioned toast",
- is_open=false,
- dismissable=true,
- icon="danger",
+ id = "positioned-toast",
+ header = "Positioned toast",
+ is_open = false,
+ dismissable = true,
+ icon = "danger",
# top: 66 positions the toast below the navbar
- style=Dict("position" => "fixed", "top" => 66, "right" => 10, "width" => 350),
+ style = Dict("position" => "fixed", "top" => 66, "right" => 10, "width" => 350),
),
]);
diff --git a/docs/components_page/components/toast/position.py b/docs/components_page/components/toast/position.py
index 0d98e69ac..b35eea341 100644
--- a/docs/components_page/components/toast/position.py
+++ b/docs/components_page/components/toast/position.py
@@ -1,6 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
-from dash.dependencies import Input, Output
+from dash import Input, Output, html
toast = html.Div(
[
diff --git a/docs/components_page/components/toast/simple.jl b/docs/components_page/components/toast/simple.jl
index 1b84d4e66..f1969c81c 100644
--- a/docs/components_page/components/toast/simple.jl
+++ b/docs/components_page/components/toast/simple.jl
@@ -1,6 +1,6 @@
using DashBootstrapComponents, DashHtmlComponents
toast = dbc_toast(
- [html_p("This is the content of the toast", className="mb-0")],
- header="This is the header",
+ [html_p("This is the content of the toast", className = "mb-0")],
+ header = "This is the header",
);
diff --git a/docs/components_page/components/toast/simple.py b/docs/components_page/components/toast/simple.py
index 738817a45..79f490b60 100644
--- a/docs/components_page/components/toast/simple.py
+++ b/docs/components_page/components/toast/simple.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
toast = dbc.Toast(
[html.P("This is the content of the toast", className="mb-0")],
diff --git a/docs/components_page/components/tooltip.md b/docs/components_page/components/tooltip.md
index 3aa5ad591..7c0f1468e 100644
--- a/docs/components_page/components/tooltip.md
+++ b/docs/components_page/components/tooltip.md
@@ -3,7 +3,7 @@ title: Tooltip
lead: Use the `Tooltip` component to add Bootstrap style tooltips to your app, with no callbacks required.
---
-## Basic example
+## Examples
To use the `Tooltip` component, simply add it to the layout of your app, and give it the id of a component in your layout that you would like to use as the target. When the user hovers over the target component, the tooltip will display. There is no need to write any callbacks.
diff --git a/docs/components_page/components/tooltip/placement.R b/docs/components_page/components/tooltip/placement.R
index 6d644d60b..0d8113e09 100644
--- a/docs/components_page/components/tooltip/placement.R
+++ b/docs/components_page/components/tooltip/placement.R
@@ -1,7 +1,7 @@
library(dashBootstrapComponents)
library(dashHtmlComponents)
-make_button <- function(placement){
+make_button <- function(placement) {
return(
dbcButton(
sprintf("Tooltip on %s", placement),
@@ -17,7 +17,7 @@ make_tooltip <- function(placement) {
return(
dbcTooltip(
sprintf("Tooltip on %s", placement),
- target=sprintf("tooltip-target-%s", placement),
+ target = sprintf("tooltip-target-%s", placement),
placement = placement
)
)
diff --git a/docs/components_page/components/tooltip/placement.jl b/docs/components_page/components/tooltip/placement.jl
index e25e7c265..45fb627e8 100644
--- a/docs/components_page/components/tooltip/placement.jl
+++ b/docs/components_page/components/tooltip/placement.jl
@@ -4,20 +4,23 @@ using DashBootstrapComponents, DashHtmlComponents
function make_button(placement)
return dbc_button(
"Tooltip on $placement",
- id="tooltip-target-$placement",
- className="mx-2",
- n_clicks=0,
+ id = "tooltip-target-$placement",
+ className = "mx-2",
+ n_clicks = 0,
)
end;
function make_tooltip(placement)
return dbc_tooltip(
"Tooltip on $placement",
- target="tooltip-target-$placement",
- placement=placement,
+ target = "tooltip-target-$placement",
+ placement = placement,
)
end;
tooltips = html_div(
- [[make_button(p) for p in ["top", "left", "right", "bottom"]] ; [make_tooltip(p) for p in ["top", "left", "right", "bottom"]]],
+ [
+ [make_button(p) for p in ["top", "left", "right", "bottom"]]
+ [make_tooltip(p) for p in ["top", "left", "right", "bottom"]]
+ ],
);
diff --git a/docs/components_page/components/tooltip/placement.py b/docs/components_page/components/tooltip/placement.py
index 2edda0161..6a8164601 100644
--- a/docs/components_page/components/tooltip/placement.py
+++ b/docs/components_page/components/tooltip/placement.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
def make_button(placement):
diff --git a/docs/components_page/components/tooltip/tooltip.R b/docs/components_page/components/tooltip/tooltip.R
index a1d9e2fc2..5878cb0fd 100644
--- a/docs/components_page/components/tooltip/tooltip.R
+++ b/docs/components_page/components/tooltip/tooltip.R
@@ -7,9 +7,9 @@ tooltip <- htmlDiv(
list(
"I wonder what ",
htmlSpan(
- "floccinaucinihilipilification",
- id = "tooltip-target",
- style = list(textDecoration = "underline", cursor = "pointer"),
+ "floccinaucinihilipilification",
+ id = "tooltip-target",
+ style = list(textDecoration = "underline", cursor = "pointer"),
),
" means?"
)
diff --git a/docs/components_page/components/tooltip/tooltip.jl b/docs/components_page/components/tooltip/tooltip.jl
index 373d75255..4ebce1189 100644
--- a/docs/components_page/components/tooltip/tooltip.jl
+++ b/docs/components_page/components/tooltip/tooltip.jl
@@ -5,13 +5,13 @@ tooltip = html_div([
"I wonder what ",
html_span(
"floccinaucinihilipilification",
- id="tooltip-target",
- style=Dict("textDecoration" => "underline", "cursor" => "pointer"),
+ id = "tooltip-target",
+ style = Dict("textDecoration" => "underline", "cursor" => "pointer"),
),
" means?",
]),
dbc_tooltip(
"Noun: rare, " * "the action or habit of estimating something as worthless.",
- target="tooltip-target",
+ target = "tooltip-target",
),
]);
diff --git a/docs/components_page/components/tooltip/tooltip.py b/docs/components_page/components/tooltip/tooltip.py
index 26aaef45d..5e58dc7dd 100644
--- a/docs/components_page/components/tooltip/tooltip.py
+++ b/docs/components_page/components/tooltip/tooltip.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
tooltip = html.Div(
[
diff --git a/docs/components_page/helpers.py b/docs/components_page/helpers.py
index 8bdb8e5a3..b67ace311 100644
--- a/docs/components_page/helpers.py
+++ b/docs/components_page/helpers.py
@@ -1,9 +1,8 @@
import dash_bootstrap_components as dbc
-import dash_core_components as dcc
-import dash_html_components as html
+from dash import dcc, html
-def HighlightedSource(py_source, r_source, jl_source):
+def HighlightedSource(py_source, r_source, jl_source, className="px-3"):
return dbc.Tabs(
[
dbc.Tab(
@@ -18,7 +17,7 @@ def HighlightedSource(py_source, r_source, jl_source):
]
if source is not None
],
- className="px-3",
+ className=className,
)
diff --git a/docs/components_page/markdown_parser.py b/docs/components_page/markdown_parser.py
index b05022387..c7036a740 100644
--- a/docs/components_page/markdown_parser.py
+++ b/docs/components_page/markdown_parser.py
@@ -2,11 +2,14 @@
from pathlib import Path
import dash_bootstrap_components as dbc
-import dash_core_components as dcc
-import dash_html_components as html
import markdown
+from dash import dcc, html
-from .helpers import ExampleContainer, load_source_with_environment
+from .helpers import (
+ ExampleContainer,
+ HighlightedSource,
+ load_source_with_environment,
+)
__all__ = ["parse"]
@@ -92,12 +95,17 @@ def _safe_load_source(source_path, ext):
return None
-def _parse_code_example(data):
- source_path, language = data.split(":")
- source = (HERE / source_path).read_text().strip()
+def _parse_code_example(filename):
+ source_path = HERE / filename
+ py_source = (HERE / source_path).read_text().strip()
+ r_source = _safe_load_source(source_path, "R")
+ jl_source = _safe_load_source(source_path, "jl")
+
return html.Div(
- dcc.Markdown(f"```{language}\n{source}\n```"),
- className="source-container",
+ HighlightedSource(
+ py_source, r_source, jl_source, className="pb-0 card-header"
+ ),
+ className="border source-container rounded",
)
diff --git a/docs/content/changelog.md b/docs/content/changelog.md
index 5e211c183..929c01806 100644
--- a/docs/content/changelog.md
+++ b/docs/content/changelog.md
@@ -6,6 +6,23 @@ title: Changelog
This page documents notable changes in dash-bootstrap-components releases.
+## 1.0.0 - 2021/XX/XX
+
+v1 of _dash-bootstrap-components_! This release contains loads of new features, but also breaking changes. Please read the changelog carefully for full details.
+
+### Added
+- Six new components! [Accordion](/docs/components/accordion), [Breadcrumb](/docs/components/breadcrumb), [FormFloating](/docs/components/form), [Offcanvas](/docs/components/offcanvas), [Pagination](/docs/components/pagination), and [Switch](/docs/components/input) ([PR 646](https://github.com/facultyai/dash-bootstrap-components/pull/646)) ([PR 689](https://github.com/facultyai/dash-bootstrap-components/pull/689))
+- New CDN links for icons from Bootstrap Icons and Font Awesome ([PR 661](https://github.com/facultyai/dash-bootstrap-components/pull/661))
+- CDN Links for four new Bootswatch themes: `QUARTZ`, `MORPH`, `VAPOR` and `ZEPHYR`.
+- All components now accept `class_name` as an alternative to `className`. If both are specified then `class_name` will take precedence. `class_name` should be preferred from now on. ([PR 642](https://github.com/facultyai/dash-bootstrap-components/pull/642))
+
+### Fixed
+- The `loading_state` is no longer passed to underlying DOM nodes in any components ([PR 666](https://github.com/facultyai/dash-bootstrap-components/pull/666))
+- `Popover` doesn't error if `is_open` defaults to true. ([PR 646](https://github.com/facultyai/dash-bootstrap-components/pull/646))
+
+### Changed
+- Components are all now built for Bootstrap 5. CDN links have all been updated. There are multiple breaking changes in the component props. Please see the [migration-guide](/migration-guide) for full details on the changes ([PR 646](https://github.com/facultyai/dash-bootstrap-components/pull/646)).
+
## 0.13.0 - 2021/7/31
### Added
@@ -167,7 +184,7 @@ This version marks the first release of dash-bootstrap-components for Julia. The
### Changed
-- Removed `style` and `className` arguments from `Spinner`, replaced with `spinner_style` and `spinnerClassName`. Also added `fullscreen_style` and `fullscreenClassName` for controlling the style of fullscreen spinners. ([PR 344](https://github.com/facultyai/dash-bootstrap-components/pull/366))
+- Removed `style` and `class_name` arguments from `Spinner`, replaced with `spinner_style` and `spinnerClassName`. Also added `fullscreen_style` and `fullscreenClassName` for controlling the style of fullscreen spinners. ([PR 344](https://github.com/facultyai/dash-bootstrap-components/pull/366))
## 0.9.2 - 2020/4/5
diff --git a/docs/content/docs/icons.md b/docs/content/docs/icons.md
new file mode 100644
index 000000000..5621fa034
--- /dev/null
+++ b/docs/content/docs/icons.md
@@ -0,0 +1,231 @@
+---
+title: Icons
+---
+
+# Icons
+
+
Add icons to enhance your application.
+
+As with the [CSS stylesheets](/docs/themes), _dash-bootstrap-components_ doesn't come pre-bundled with icons. This is to give you the freedom to use any icon library of your choice.
+
+There are a number of different icon libraries available, which you can link to via CDN, or serve locally depending on your needs. Details on how to link css can be found in the [themes](/docs/themes) documentation.
+
+## Packaged CDN links
+
+_dash-bootstrap-components_ contains CDN links for [Bootstrap Icons](https://icons.getbootstrap.com/) and [Font Awesome](https://fontawesome.com/), two libraries of icons you can use in your apps. You can use either of them by adding them to `external_stylesheets` when instantiating your app.
+
+Bootstrap Icons was developed by the Bootstrap team specifically for use with Bootstrap. There is excellent documentation on how to use them on the [Bootstrap website](https://icons.getbootstrap.com/#usage), and a small example below.
+
+Font Awesome is perhaps the most widely used icon library and is very commonly used with Bootstrap. Usage is similar to Bootstrap Icons, check [their documentation](https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use) for more details.
+
+~~~bootstrap-tabs
+Python
+
+Links are available in the `dash_bootstrap_components.icons` submodule.
+
+```python
+import dash
+import dash_bootstrap_components as dbc
+
+# For Bootstrap Icons...
+app = dash.Dash(
+ external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.BOOTSTRAP]
+)
+# Or for Font Awesome Icons...
+app = dash.Dash(
+ external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME]
+)
+
+```
+-----
+R
+
+Links are available in the `dbcIcons` list which is added to your namespace when you import `dashBootstrapComponents`.
+
+```r
+library(dash)
+library(dashBootstrapComponents)
+
+# For Bootstrap Icons...
+app <- Dash$new(
+ external_stylesheets = list(dbcThemes$BOOTSTRAP, dbcIcons$BOOTSTRAP)
+)
+# Or for Font Awesome Icons...
+app <- Dash$new(
+ external_stylesheets = list(dbcThemes$BOOTSTRAP, dbcIcons$FONT_AWESOME)
+)
+```
+
+-----
+Julia
+
+Links are available as part of the `dbc_icons` named tuple available in `DashBootstrapComponents`.
+
+```julia
+using Dash, DashBootstrapComponents
+
+# For Bootstrap Icons...
+app = dash(
+ external_stylesheets=[dbc_themes.BOOTSTRAP, dbc_icons.BOOTSTRAP]
+)
+# Or for Font Awesome Icons...
+app = dash(
+ external_stylesheets=[dbc_themes.BOOTSTRAP, dbc_icons.FONT_AWESOME]
+)
+```
+~~~
+
+## Example
+
+This simple example adds Bootstrap Icons to some alerts.
+
+~~~bootstrap-example-tabs
+
+
+
+ An example info alert with an icon
+
+
+
+ An example success alert with an icon
+
+
+
+ An example warning alert with an icon
+
+
+
+ An example danger alert with an icon
+
+
+-----
+Python
+
+```python
+import dash_bootstrap_components as dbc
+import dash_html_components as html
+
+alerts = html.Div(
+ [
+ dbc.Alert(
+ [
+ html.I(class_name="bi bi-info-circle-fill me-2"),
+ "An example info alert with an icon",
+ ],
+ color="info",
+ class_name="d-flex align-items-center",
+ ),
+ dbc.Alert(
+ [
+ html.I(class_name="bi bi-check-circle-fill me-2"),
+ "An example success alert with an icon",
+ ],
+ color="success",
+ class_name="d-flex align-items-center",
+ ),
+ dbc.Alert(
+ [
+ html.I(class_name="bi bi-exclamation-triangle-fill me-2"),
+ "An example warning alert with an icon",
+ ],
+ color="warning",
+ class_name="d-flex align-items-center",
+ ),
+ dbc.Alert(
+ [
+ html.I(class_name="bi bi-x-octagon-fill me-2"),
+ "An example danger alert with an icon",
+ ],
+ color="danger",
+ class_name="d-flex align-items-center",
+ ),
+ ]
+)
+```
+-----
+R
+
+```r
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+alerts <- htmlDiv(
+ list(
+ dbcAlert(
+ list(
+ htmlI(class_name = "bi bi-info-circle-fill me-2"),
+ "An example info alert with an icon"
+ ),
+ color = "info",
+ class_name = "d-flex align-items-center"
+ ),
+ dbcAlert(
+ list(
+ htmlI(class_name = "bi bi-check-circle-fill me-2"),
+ "An example success alert with an icon"
+ ),
+ color = "success",
+ class_name = "d-flex align-items-center"
+ ),
+ dbcAlert(
+ list(
+ htmlI(class_name = "bi bi-exclamation-triangle-fill me-2"),
+ "An example warning alert with an icon"
+ ),
+ color = "warning",
+ class_name = "d-flex align-items-center"
+ ),
+ dbcAlert(
+ list(
+ htmlI(class_name = "bi bi-x-octagon-fill me-2"),
+ "An example danger alert with an icon"
+ ),
+ color = "danger",
+ class_name = "d-flex align-items-center"
+ )
+ )
+)
+```
+
+-----
+Julia
+
+```julia
+using DashBootstrapComponents, DashHtmlComponents
+
+alerts = html_div([
+ dbc_alert(
+ [
+ html_i(class_name = "bi bi-info-circle-fill me-2"),
+ "An example info alert with an icon",
+ ],
+ color = "info",
+ class_name = "d-flex align-items-center",
+ ),
+ dbc_alert(
+ [
+ html_i(class_name = "bi bi-check-circle-fill me-2"),
+ "An example success alert with an icon",
+ ],
+ color = "success",
+ class_name = "d-flex align-items-center",
+ ),
+ dbc_alert(
+ [
+ html_i(class_name = "bi bi-exclamation-triangle-fill me-2"),
+ "An example warning alert with an icon",
+ ],
+ color = "warning",
+ class_name = "d-flex align-items-center",
+ ),
+ dbc_alert(
+ [
+ html_i(class_name = "bi bi-x-octagon-fill me-2"),
+ "An example danger alert with an icon",
+ ],
+ color = "danger",
+ class_name = "d-flex align-items-center",
+ ),
+])
+```
+~~~
diff --git a/docs/content/docs/quickstart.md b/docs/content/docs/quickstart.md
index 95494252c..6854cfeef 100644
--- a/docs/content/docs/quickstart.md
+++ b/docs/content/docs/quickstart.md
@@ -74,7 +74,7 @@ _dash-bootstrap-components_ is a component library for use with Plotly Dash. If
To use _dash-bootstrap-components_ you must do two things:
-- Link a Bootstrap v4 compatible stylesheet
+- Link a Bootstrap v5 compatible stylesheet
- Incorporate _dash-bootstrap-components_ into the layout of your app.
### Linking a stylesheet
@@ -135,7 +135,7 @@ app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(
dbc.Alert("Hello Bootstrap!", color="success"),
- className="p-5",
+ class_name="p-5",
)
if __name__ == "__main__":
@@ -152,7 +152,7 @@ library(dashBootstrapComponents)
app <- Dash$new(external_stylesheets = dbcThemes$BOOTSTRAP)
app$layout(dbcContainer(dbcAlert("Hello Bootstrap!", color = "success"),
- className = "p-5"))
+ class_name = "p-5"))
app$run_server(showcase = TRUE)
```
@@ -167,7 +167,7 @@ app = dash(external_stylesheets=[dbc_themes.BOOTSTRAP])
app.layout = dbc_container(
dbc_alert("Hello Bootstrap!", color="success"),
- className="p-5",
+ class_name="p-5",
)
run_server(app, "0.0.0.0", 8080)
@@ -181,6 +181,7 @@ Check out these [example apps][examples] made with _dash-bootstrap-components_.
[dash-docs]: https://dash.plotly.com
[dash-docs-external]: https://dash.plotly.com/external-resources
[docs-themes]: /docs/themes
+[docs-icons]: /docs/icons
[docs-components]: /docs/components
[bootstrapcdn]: https://www.bootstrapcdn.com/
[examples]: /examples
diff --git a/docs/content/docs/themes.md b/docs/content/docs/themes.md
index a377e708d..0e11d7f26 100644
--- a/docs/content/docs/themes.md
+++ b/docs/content/docs/themes.md
@@ -115,7 +115,7 @@ The easiest way to link a local stylesheet is to place it in a folder named `ass
There are numerous free to use Bootstrap stylesheets available on the web. The `dash_bootstrap_components.themes` module contains CDN links for Bootstrap and all of the [Bootswatch themes][bootswatch-themes]. Bootstrap also maintains its own [themes website][bootstrap-themes] which lists a number of free and premium themes that you could incorporate into your apps.
-To start with, we recommend experimenting with some of the Bootswatch themes available in the `dash_bootstrap_components.themes` module. The full list of available themes is [`CERULEAN`](https://bootswatch.com/cerulean/), [`COSMO`](https://bootswatch.com/cosmo/), [`CYBORG`](https://bootswatch.com/cyborg/), [`DARKLY`](https://bootswatch.com/darkly/), [`FLATLY`](https://bootswatch.com/flatly/), [`JOURNAL`](https://bootswatch.com/journal/), [`LITERA`](https://bootswatch.com/litera/), [`LUMEN`](https://bootswatch.com/lumen/), [`LUX`](https://bootswatch.com/lux/), [`MATERIA`](https://bootswatch.com/materia/), [`MINTY`](https://bootswatch.com/minty/), [`PULSE`](https://bootswatch.com/pulse/), [`SANDSTONE`](https://bootswatch.com/sandstone/), [`SIMPLEX`](https://bootswatch.com/simplex/), [`SKETCHY`](https://bootswatch.com/sketchy/), [`SLATE`](https://bootswatch.com/slate/), [`SOLAR`](https://bootswatch.com/solar/), [`SPACELAB`](https://bootswatch.com/spacelab/), [`SUPERHERO`](https://bootswatch.com/superhero/), [`UNITED`](https://bootswatch.com/united/), [`YETI`](https://bootswatch.com/yeti/).
+To start with, we recommend experimenting with some of the Bootswatch themes available in the `dash_bootstrap_components.themes` module. The full list of available themes is [`CERULEAN`](https://bootswatch.com/cerulean/), [`COSMO`](https://bootswatch.com/cosmo/), [`CYBORG`](https://bootswatch.com/cyborg/), [`DARKLY`](https://bootswatch.com/darkly/), [`FLATLY`](https://bootswatch.com/flatly/), [`JOURNAL`](https://bootswatch.com/journal/), [`LITERA`](https://bootswatch.com/litera/), [`LUMEN`](https://bootswatch.com/lumen/), [`LUX`](https://bootswatch.com/lux/), [`MATERIA`](https://bootswatch.com/materia/), [`MINTY`](https://bootswatch.com/minty/), [`MORPH`](https://bootswatch.com/morph/), [`PULSE`](https://bootswatch.com/pulse/), [`SANDSTONE`](https://bootswatch.com/sandstone/), [`SIMPLEX`](https://bootswatch.com/simplex/), [`SKETCHY`](https://bootswatch.com/sketchy/), [`SLATE`](https://bootswatch.com/slate/), [`SOLAR`](https://bootswatch.com/solar/), [`SPACELAB`](https://bootswatch.com/spacelab/), [`SUPERHERO`](https://bootswatch.com/superhero/), [`UNITED`](https://bootswatch.com/united/), [`VAPOR`](https://bootswatch.com/vapor/), [`YETI`](https://bootswatch.com/yeti/), [`ZEPHYR`](https://bootswatch.com/zephyr/).
Check out the [theme explorer](/docs/themes/explorer/) for a live demo of dash-bootstrap-components using all of the different available themes. You may also like to check out the [dash-bootstrap-css](https://github.com/tcbegley/dash-bootstrap-css) project which contains Bootstrap stylesheets that apply consistent styling to various components from dash-core-components.
diff --git a/docs/content/migration-guide.md b/docs/content/migration-guide.md
new file mode 100644
index 000000000..3f380e4ad
--- /dev/null
+++ b/docs/content/migration-guide.md
@@ -0,0 +1,145 @@
+---
+title: Migration guide
+---
+
+# Migration guide for dash-bootstrap-components v1
+
+_dash-bootstrap-components_ v1 contains loads of new features, but also some breaking changes. This is for two reasons:
+
+- First, now that the library has matured, we have taken the opportunity to clean up the API and make things more consistent across components.
+- Second we have updated all components to support Bootstrap 5 (previously we supported Bootstrap 4). Since Bootstrap 5 also contains a number of breaking changes, we have inherited those in _dash-bootstrap-components_. For more information about the changes in Bootstrap 5, see the upstream [Bootstrap migration guide.](https://v5.getbootstrap.com/docs/5.0/migration) and the [Bootstrap 5 Documentation](https://getbootstrap.com/docs/5.0/layout/grid/).
+
+This guide introduces the new features, and also covers the changes you must make to run your apps with _dash-bootstrap-components_ 1.0.0 rather than 0.13.x (the final v0 releases). If you find any issues not covered here, or bugs in v1 please [raise an issue](https://github.com/facultyai/dash-bootstrap-components/issues/new/choose) on our GitHub repository.
+
+## Dependencies
+
+Breaking _dash-bootstrap-components_ v1 requires Dash 2.0.0 or greater. The primary implication of this is that we have dropped support for Python 2.7 and 3.5. All apps using _dash-bootstrap-components_ v1 should be run with Python 3.6+.
+
+See the [Dash 2.0 migration guide](https://dash.plotly.com/dash-2-0-migration) for more details on changes within Dash itself.
+
+## New Themes
+
+Check out the four new themes: `QUARTZ`, `MORPH`, `VAPOR` and `ZEPHYR` in the [Theme Explorer](/docs/themes/explorer/)
+
+## Icons
+
+Include Bootstrap and Font Awesome icons to your app as easily as adding a Bootstrap Theme using bundled links to CDNs for [Bootstrap Icons](https://icons.getbootstrap.com/) and [Font Awesome](https://fontawesome.com/). See more information in the [Icons](/docs/icons) section of the docs.
+
+## Components
+
+There are six new components in _dash-bootstrap-components_: `Accordion`, `Breadcrumb`, `FormFloating`, `Offcanvas`, `Pagination`, and `Switch`. Additionally many components have changes to their props.
+
+Notably previously there was a mix of `size` and `bs_size` props for controlling the size of some components. All components that allow size to be changed now consistently use `size`. To set the HTML `size` property of the underlying `` in the `Input` component, use `html_size` instead.
+
+### Accordion New
+- Added new accordion component. Check out the documentation [here](/docs/components/accordion)
+
+### Badge
+- Breaking The `color` property now only sets the background color. Use the new `text_color` prop to change the color of the text. You’ll likely need to set a dark text color when using `color="light"`.
+
+### Breadcrumb New
+- Added new Breadcrumb component. Check out the documentation [here](/docs/components/breadcrumb)
+
+### Buttons
+- Breaking The default color for the buttons is now `primary` rather than `secondary`. This change was made to match the Bootstrap convention.
+
+- Breaking The `block` property has been dropped. Instead, wrap the buttons in a `html.Div` and use the Bootstrap utilities classes such as `"d-grid"` and a `"gap-*"` in the `className` to space the buttons as needed. See [the docs](/docs/components/button) for examples.
+
+- Disabled buttons now have `pointer-events: none` as a default.
+
+### ButtonGroup
+- Breaking The default color for the buttons is now `primary` rather than `secondary`. This change was made to match the Bootstrap convention.
+
+### Card
+- Breaking Dropped `CardDeck` component. Use the Bootstrap grid classes to arrange the cards like a card deck. See
+the [Bootstrap grid docs](https://getbootstrap.com/docs/5.0/layout/grid/#row-columns) for more information.
+
+- Breaking Dropped `CardColumns` component. `CardColumns` had many [issues in Bootstrap 4](https://github.com/twbs/bootstrap/pull/28922) and was dropped in Bootstrap 5.
+
+### Carousel
+- Added `dark` property for dark text, controls, and indicators. This is great for lighter backgrounds.
+- Replaced chevron icons for carousel controls with new SVGs from Bootstrap Icons.
+
+### Collapse
+- Breaking Dropped the `tag` property.
+- Removed the Accordion example since we now have a new Accordion component.
+
+### DropdownMenu
+- Breaking The default color for the buttons is now `primary` rather than `secondary`. This change was made to match the Bootstrap convention.
+- Breaking Changed the `direction` prop options from right and left to start and end to match the Bootstrap 5 convention.
+- Breaking Changed the name of the `right` prop to `align_end`.
+- Breaking Changed the name of the `bs_size` property to `size`.
+- Added `menu_variant` prop to make the dropdown menu a dark color scheme.
+
+### Fade
+- Breaking Dropped `base_class` property.
+- Breaking Dropped `base_class_active` property.
+
+### FormGroup
+- Breaking Dropped `FormGroup`. It is no longer necessary to use `FormGroup` to align components in a form. Use `Row` `Col` and gutter modifier classes and spacing utilities instead. See [the documentation](/docs/components/form) for examples
+
+### FormFloating New
+- Added `FormFloating` component to create a label that floats over the form field. See the documentation [here](/docs/components/form)
+
+### Input
+- Breaking Dropped `bs_size` property. Use `size` instead. Use `html_size` to set the HTML size property on the underlying input.
+
+### InputGroup
+- Breaking Dropped `InputGroupAddon` component. It's not necessary to use `InputGroupAddon` because things like `Button` and `InputGroupText` can be added to `InputGroup` as direct children. See the [docs](/docs/components/input_group/) for more examples.
+
+### Jumbotron
+- Breaking Dropped the Jumbotron component. The [docs have an example](/docs/components/jumbotron/) of how to replicate it with Bootstrap utilities.
+
+### Layout
+- Breaking Dropped `no_gutters` prop. Use gutter modifier classes instead. See the [docs](/docs/components/layout/) for examples.
+- Breaking When specifying the `order` of the columns, it accepts the integers 1, ..., 5, only rather than integers 1, ..., 12.
+
+### ListGroup
+- Breaking Dropped the `ListGroupHeading` and `ListGroupItemText` components. Both are unnecessary since you can pass any Dash components to the children of `ListGroupItem`. See the [docs](/docs/components/list_group/) for updated examples.
+
+### Modal
+- Added `fullscreen` property
+- Added `keyboard` property to close modal when escape key is pressed.
+
+### Nav
+- Breaking - Dropped `active` property in `NavItem`. You should only need to set `active` on the child `NavLink` instead.
+- Added `navbar_scroll` property. This enables vertical scrolling within the toggleable contents of the nav when used inside a collapsed `Navbar`.
+
+### Navbar
+- Breaking - Bootstrap navbars now must be constructed with a container. If you're using `NavbarSimple` you don't need to make any changes! If you are using `Navbar` with a custom layout you probably will need to make changes. See the [docs](/docs/components/list_group/) for updated examples.
+
+### Offcanvas New
+- Added the new offcanvas component. See the [docs](/docs/components/offcanvas) for more information.
+
+### Pagination New
+- Added a new Pagination component. See the [docs](/docs/components/pagination) for more information.
+
+### Progress
+- Breaking Dropped `barClassName` property. Use `className`
+- Breaking Dropped `bar_style` property. Use `style`
+- Breaking Dropped `tag` property.
+- Added a `label` property that should be used instead of `children` to render text on the progress bar.
+- Added a `hide_label` property to hide the label.
+
+### Select
+- Breaking Dropped `bs_size` property. Use `size` instead.
+
+### Switch New
+- New `Switch` component. See the documentation [here](/docs/components/input)
+
+### Table
+ - Breaking Dropped `tag` property.
+ - Added `color` property.
+
+### Tabs
+ - Breaking Dropped `card` property. It's no longer necessary to set `card=True` to put tabs in a `Card`.
+
+### TextArea
+- Breaking Dropped `bs_size` property. Use `size` instead.
+
+### Toast
+- Breaking Dropped `fade` property.
+- Added `color` property to set the background color.
+
+### Tooltip
+- Breaking Dropped the following properties: `arrowClassName`, `autohide`, `boundaries_element`, `container`, `hide_arrow`, `innerClassName`, `offset`
diff --git a/docs/demos/__init__.py b/docs/demos/__init__.py
index 73f7533c9..6af6252f0 100644
--- a/docs/demos/__init__.py
+++ b/docs/demos/__init__.py
@@ -21,7 +21,9 @@
("lux", dbc.themes.LUX),
("materia", dbc.themes.MATERIA),
("minty", dbc.themes.MINTY),
+ ("morph", dbc.themes.MORPH),
("pulse", dbc.themes.PULSE),
+ ("quartz", dbc.themes.QUARTZ),
("sandstone", dbc.themes.SANDSTONE),
("simplex", dbc.themes.SIMPLEX),
("sketchy", dbc.themes.SKETCHY),
@@ -30,7 +32,9 @@
("spacelab", dbc.themes.SPACELAB),
("superhero", dbc.themes.SUPERHERO),
("united", dbc.themes.UNITED),
+ ("vapor", dbc.themes.VAPOR),
("yeti", dbc.themes.YETI),
+ ("zephyr", dbc.themes.ZEPHYR),
]
diff --git a/docs/demos/demo_layout.py b/docs/demos/demo_layout.py
index 9e0d773e0..cc60d110c 100644
--- a/docs/demos/demo_layout.py
+++ b/docs/demos/demo_layout.py
@@ -1,7 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_core_components as dcc
-import dash_html_components as html
-from dash import Dash
+from dash import Dash, dcc, html
_navbar = dbc.NavbarSimple(
brand="Demo",
diff --git a/docs/demos/theme_explorer/__init__.py b/docs/demos/theme_explorer/__init__.py
index 69926559a..92d928e19 100644
--- a/docs/demos/theme_explorer/__init__.py
+++ b/docs/demos/theme_explorer/__init__.py
@@ -1,6 +1,6 @@
import dash
import dash_bootstrap_components as dbc
-from dash.dependencies import Input, Output, State
+from dash import Input, Output, State
from .alert import alerts
from .badge import badges
@@ -10,7 +10,6 @@
from .fade import fade
from .form import form
from .input import checklist_items, input_, input_group, radio_items
-from .jumbotron import jumbotron
from .list_group import list_group
from .modal import modal
from .navbar import navbar
@@ -22,8 +21,9 @@
from .toast import toast
from .tooltip import tooltip
-FONT_AWESOME = "https://use.fontawesome.com/releases/v5.10.2/css/all.css"
-app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP, FONT_AWESOME])
+app = dash.Dash(
+ external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME]
+)
app.layout = dbc.Container(
[
@@ -45,7 +45,6 @@
dbc.Col([radio_items], xs=12, md=6),
]
),
- jumbotron,
list_group,
modal,
navbar,
diff --git a/docs/demos/theme_explorer/alert.py b/docs/demos/theme_explorer/alert.py
index 69bd1e33c..f87e4fd43 100644
--- a/docs/demos/theme_explorer/alert.py
+++ b/docs/demos/theme_explorer/alert.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
from .util import make_subheading
diff --git a/docs/demos/theme_explorer/badge.py b/docs/demos/theme_explorer/badge.py
index f14df9b6b..156f87dc8 100644
--- a/docs/demos/theme_explorer/badge.py
+++ b/docs/demos/theme_explorer/badge.py
@@ -1,17 +1,17 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
from .util import make_subheading
badge = html.Div(
[
- dbc.Badge("Primary", color="primary", className="mr-1"),
- dbc.Badge("Secondary", color="secondary", className="mr-1"),
- dbc.Badge("Success", color="success", className="mr-1"),
- dbc.Badge("Warning", color="warning", className="mr-1"),
- dbc.Badge("Danger", color="danger", className="mr-1"),
- dbc.Badge("Info", color="info", className="mr-1"),
- dbc.Badge("Light", color="light", className="mr-1"),
+ dbc.Badge("Primary", color="primary", className="me-1"),
+ dbc.Badge("Secondary", color="secondary", className="me-1"),
+ dbc.Badge("Success", color="success", className="me-1"),
+ dbc.Badge("Warning", color="warning", className="me-1"),
+ dbc.Badge("Danger", color="danger", className="me-1"),
+ dbc.Badge("Info", color="info", className="me-1"),
+ dbc.Badge("Light", color="light", className="me-1"),
dbc.Badge("Dark", color="dark"),
],
className="mb-2",
@@ -19,13 +19,13 @@
badge_pills = html.Div(
[
- dbc.Badge("Primary", color="primary", className="mr-1", pill=True),
- dbc.Badge("Secondary", color="secondary", className="mr-1", pill=True),
- dbc.Badge("Success", color="success", className="mr-1", pill=True),
- dbc.Badge("Warning", color="warning", className="mr-1", pill=True),
- dbc.Badge("Danger", color="danger", className="mr-1", pill=True),
- dbc.Badge("Info", color="info", className="mr-1", pill=True),
- dbc.Badge("Light", color="light", className="mr-1", pill=True),
+ dbc.Badge("Primary", color="primary", className="me-1", pill=True),
+ dbc.Badge("Secondary", color="secondary", className="me-1", pill=True),
+ dbc.Badge("Success", color="success", className="me-1", pill=True),
+ dbc.Badge("Warning", color="warning", className="me-1", pill=True),
+ dbc.Badge("Danger", color="danger", className="me-1", pill=True),
+ dbc.Badge("Info", color="info", className="me-1", pill=True),
+ dbc.Badge("Light", color="light", className="me-1", pill=True),
dbc.Badge("Dark", color="dark", pill=True),
],
)
diff --git a/docs/demos/theme_explorer/button.py b/docs/demos/theme_explorer/button.py
index 9c56a7000..044fe1959 100644
--- a/docs/demos/theme_explorer/button.py
+++ b/docs/demos/theme_explorer/button.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
from .util import make_subheading
@@ -8,14 +8,14 @@
make_subheading("Button", "button"),
html.Div(
[
- dbc.Button("Primary", color="primary", className="mr-1 mt-1"),
+ dbc.Button("Primary", color="primary", className="me-1 mt-1"),
dbc.Button(
- "Secondary", color="secondary", className="mr-1 mt-1"
+ "Secondary", color="secondary", className="me-1 mt-1"
),
- dbc.Button("Success", color="success", className="mr-1 mt-1"),
- dbc.Button("Warning", color="warning", className="mr-1 mt-1"),
- dbc.Button("Danger", color="danger", className="mr-1 mt-1"),
- dbc.Button("Info", color="info", className="mr-1 mt-1"),
+ dbc.Button("Success", color="success", className="me-1 mt-1"),
+ dbc.Button("Warning", color="warning", className="me-1 mt-1"),
+ dbc.Button("Danger", color="danger", className="me-1 mt-1"),
+ dbc.Button("Info", color="info", className="me-1 mt-1"),
],
className="mb-2",
),
@@ -25,61 +25,61 @@
"Primary",
outline=True,
color="primary",
- className="mr-1 mt-1",
+ className="me-1 mt-1",
),
dbc.Button(
"Secondary",
outline=True,
color="secondary",
- className="mr-1 mt-1",
+ className="me-1 mt-1",
),
dbc.Button(
"Success",
outline=True,
color="success",
- className="mr-1 mt-1",
+ className="me-1 mt-1",
),
dbc.Button(
"Warning",
outline=True,
color="warning",
- className="mr-1 mt-1",
+ className="me-1 mt-1",
),
dbc.Button(
"Danger",
outline=True,
color="danger",
- className="mr-1 mt-1",
+ className="me-1 mt-1",
),
dbc.Button(
- "Info", outline=True, color="info", className="mr-1 mt-1"
+ "Info", outline=True, color="info", className="me-1 mt-1"
),
],
className="mb-2",
),
html.Div(
[
- dbc.Button("Regular", color="primary", className="mr-1 mt-1"),
+ dbc.Button("Regular", color="primary", className="me-1 mt-1"),
dbc.Button(
"Active",
color="primary",
active=True,
- className="mr-1 mt-1",
+ className="me-1 mt-1",
),
dbc.Button(
"Disabled",
color="primary",
disabled=True,
- className="mr-1 mt-1",
+ className="me-1 mt-1",
),
],
className="mb-2",
),
html.Div(
[
- dbc.Button("Large button", size="lg", className="mr-1 mt-1"),
- dbc.Button("Regular button", className="mr-1 mt-1"),
- dbc.Button("Small button", size="sm", className="mr-1 mt-1"),
+ dbc.Button("Large button", size="lg", className="me-1 mt-1"),
+ dbc.Button("Regular button", className="me-1 mt-1"),
+ dbc.Button("Small button", size="sm", className="me-1 mt-1"),
],
className="mb-2",
),
diff --git a/docs/demos/theme_explorer/card.py b/docs/demos/theme_explorer/card.py
index ca0a6b1a8..fc3e68461 100644
--- a/docs/demos/theme_explorer/card.py
+++ b/docs/demos/theme_explorer/card.py
@@ -1,12 +1,12 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
from .util import make_subheading
cards = html.Div(
[
make_subheading("Card", "card"),
- dbc.CardDeck(
+ dbc.CardGroup(
[
dbc.Card(
[
diff --git a/docs/demos/theme_explorer/collapse.py b/docs/demos/theme_explorer/collapse.py
index c2d5ae0e3..fbb294980 100644
--- a/docs/demos/theme_explorer/collapse.py
+++ b/docs/demos/theme_explorer/collapse.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
from .util import make_subheading
diff --git a/docs/demos/theme_explorer/fade.py b/docs/demos/theme_explorer/fade.py
index 698c8343e..ab83b49c9 100644
--- a/docs/demos/theme_explorer/fade.py
+++ b/docs/demos/theme_explorer/fade.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
from .util import make_subheading
diff --git a/docs/demos/theme_explorer/form.py b/docs/demos/theme_explorer/form.py
index c2b2c7ec4..5da93b15b 100644
--- a/docs/demos/theme_explorer/form.py
+++ b/docs/demos/theme_explorer/form.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
from .util import make_subheading
@@ -8,7 +8,7 @@
make_subheading("Form", "form"),
dbc.Form(
[
- dbc.FormGroup(
+ html.Div(
[
dbc.Label("Username"),
dbc.Input(
@@ -28,7 +28,7 @@
),
]
),
- dbc.FormGroup(
+ html.Div(
[
dbc.Label("Username"),
dbc.Input(
diff --git a/docs/demos/theme_explorer/input.py b/docs/demos/theme_explorer/input.py
index 58b284a3d..3569d44c0 100644
--- a/docs/demos/theme_explorer/input.py
+++ b/docs/demos/theme_explorer/input.py
@@ -1,23 +1,23 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
from .util import make_subheading
input_ = html.Div(
[
make_subheading("Input", "input"),
- dbc.FormGroup(
+ html.Div(
[
dbc.Label("Valid text input"),
dbc.Input(type="text", valid=True),
- dbc.FormFeedback("That's a valid input!", valid=True),
+ dbc.FormFeedback("That's a valid input!", type="valid"),
]
),
- dbc.FormGroup(
+ html.Div(
[
dbc.Label("Invalid text input"),
dbc.Input(type="text", invalid=True),
- dbc.FormFeedback("That's an invalid input..."),
+ dbc.FormFeedback("That's an invalid input...", type="invalid"),
]
),
]
@@ -97,10 +97,7 @@
make_subheading("InputGroup and addons", "input_group"),
dbc.InputGroup(
[
- dbc.InputGroupAddon(
- dbc.Button("To the left!", color="danger"),
- addon_type="prepend",
- ),
+ dbc.Button("To the left!", color="danger"),
dbc.Input(type="text"),
],
className="my-3",
@@ -108,16 +105,13 @@
dbc.InputGroup(
[
dbc.Input(type="text"),
- dbc.InputGroupAddon(
- dbc.Button("To the right!", color="success"),
- addon_type="append",
- ),
+ dbc.Button("To the right!", color="success"),
],
className="mb-3",
),
dbc.InputGroup(
[
- dbc.InputGroupAddon("@", addon_type="prepend"),
+ dbc.InputGroupText("@"),
dbc.Input(type="text", placeholder="Enter username"),
],
className="mb-3",
diff --git a/docs/demos/theme_explorer/jumbotron.py b/docs/demos/theme_explorer/jumbotron.py
deleted file mode 100644
index 8869c92a7..000000000
--- a/docs/demos/theme_explorer/jumbotron.py
+++ /dev/null
@@ -1,18 +0,0 @@
-import dash_bootstrap_components as dbc
-import dash_html_components as html
-
-from .util import make_subheading
-
-jumbotron = html.Div(
- [
- make_subheading("Jumbotron", "jumbotron"),
- dbc.Jumbotron(
- [
- html.H2("This is a jumbotron"),
- html.P("It makes things big..."),
- dbc.Button("Click here", color="danger"),
- ]
- ),
- ],
- className="mb-4",
-)
diff --git a/docs/demos/theme_explorer/list_group.py b/docs/demos/theme_explorer/list_group.py
index 8c05d7dad..2500f0c4f 100644
--- a/docs/demos/theme_explorer/list_group.py
+++ b/docs/demos/theme_explorer/list_group.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
from .util import make_subheading
@@ -13,8 +13,8 @@
dbc.ListGroupItem("Item 3"),
dbc.ListGroupItem(
[
- dbc.ListGroupItemHeading("Item 4 heading"),
- dbc.ListGroupItemText("Item 4 text"),
+ html.H5("Item 4 heading"),
+ html.P("Item 4 text"),
]
),
]
diff --git a/docs/demos/theme_explorer/modal.py b/docs/demos/theme_explorer/modal.py
index bdf316483..92a61fd82 100644
--- a/docs/demos/theme_explorer/modal.py
+++ b/docs/demos/theme_explorer/modal.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
from .util import make_subheading
diff --git a/docs/demos/theme_explorer/navbar.py b/docs/demos/theme_explorer/navbar.py
index 46584346f..0843fad4e 100644
--- a/docs/demos/theme_explorer/navbar.py
+++ b/docs/demos/theme_explorer/navbar.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
from .util import make_subheading
diff --git a/docs/demos/theme_explorer/popover.py b/docs/demos/theme_explorer/popover.py
index 42ff09878..8c3512ee2 100644
--- a/docs/demos/theme_explorer/popover.py
+++ b/docs/demos/theme_explorer/popover.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
from .util import make_subheading
diff --git a/docs/demos/theme_explorer/progress.py b/docs/demos/theme_explorer/progress.py
index 47ed316fc..7afc873bf 100644
--- a/docs/demos/theme_explorer/progress.py
+++ b/docs/demos/theme_explorer/progress.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
from .util import make_subheading
diff --git a/docs/demos/theme_explorer/spinner.py b/docs/demos/theme_explorer/spinner.py
index 917d3a316..eb743c605 100644
--- a/docs/demos/theme_explorer/spinner.py
+++ b/docs/demos/theme_explorer/spinner.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
from .util import make_subheading
diff --git a/docs/demos/theme_explorer/table.py b/docs/demos/theme_explorer/table.py
index fba4171e8..4f6bb6be3 100644
--- a/docs/demos/theme_explorer/table.py
+++ b/docs/demos/theme_explorer/table.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
from .util import make_subheading
diff --git a/docs/demos/theme_explorer/tabs.py b/docs/demos/theme_explorer/tabs.py
index c2d577e30..9ead7f46a 100644
--- a/docs/demos/theme_explorer/tabs.py
+++ b/docs/demos/theme_explorer/tabs.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
from .util import make_subheading
diff --git a/docs/demos/theme_explorer/toast.py b/docs/demos/theme_explorer/toast.py
index 0113db16b..f9e47e8be 100644
--- a/docs/demos/theme_explorer/toast.py
+++ b/docs/demos/theme_explorer/toast.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
from .util import make_subheading
diff --git a/docs/demos/theme_explorer/tooltip.py b/docs/demos/theme_explorer/tooltip.py
index f5099f9d0..c73511d12 100644
--- a/docs/demos/theme_explorer/tooltip.py
+++ b/docs/demos/theme_explorer/tooltip.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
from .util import make_subheading
diff --git a/docs/demos/theme_explorer/util.py b/docs/demos/theme_explorer/util.py
index e693c2c06..841fad93e 100644
--- a/docs/demos/theme_explorer/util.py
+++ b/docs/demos/theme_explorer/util.py
@@ -1,5 +1,5 @@
import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
DBC_DOCS = (
"https://dash-bootstrap-components.opensource.faculty.ai/docs/components/"
@@ -14,7 +14,7 @@ def make_subheading(label, link):
[
label,
html.A(
- html.I(className="fas fa-book fa-xs ml-2"),
+ html.I(className="fas fa-book fa-xs ms-2"),
href=f"{DBC_DOCS}{link}",
target="_blank",
id=f"tooltip_target_{slug}",
diff --git a/docs/markdown_to_html.py b/docs/markdown_to_html.py
index 03475745c..d65e62410 100644
--- a/docs/markdown_to_html.py
+++ b/docs/markdown_to_html.py
@@ -28,27 +28,36 @@
""" # noqa
+EXAMPLE_TAB_OUTER_TEMPLATE = """