diff --git a/docs/components_page/__init__.py b/docs/components_page/__init__.py index fee3b5095..bc79a66d0 100644 --- a/docs/components_page/__init__.py +++ b/docs/components_page/__init__.py @@ -109,6 +109,7 @@ def register_apps(): "input_group": {"markdown_path": COMPONENTS / "input_group.md"}, "layout": {"markdown_path": COMPONENTS / "layout.md"}, "list_group": {"markdown_path": COMPONENTS / "list_group.md"}, + "main": {"markdown_path": COMPONENTS / "main.md"}, "modal": { "markdown_path": COMPONENTS / "modal.md", "extra_env_vars": {"LOREM": LOREM}, @@ -149,7 +150,6 @@ def register_apps(): }, {"name": "themes", "href": "/docs/themes", "label": "Themes"}, {"name": "faq", "href": "/docs/faq", "label": "FAQ"}, - {"name": "dashr", "href": "/docs/dashr", "label": "Dash for R"}, { "name": "components", "href": "/docs/components", @@ -161,6 +161,7 @@ def register_apps(): "label": _get_label(slug), } for slug in component_bodies + if _get_label(slug) != "Main" ], }, ] diff --git a/docs/components_page/components/__tests__/helpers.py b/docs/components_page/components/__tests__/helpers.py index a085be6b7..ce70945ae 100644 --- a/docs/components_page/components/__tests__/helpers.py +++ b/docs/components_page/components/__tests__/helpers.py @@ -9,7 +9,12 @@ def py_source_to_app(py_source, env): """ env = env or {} # TODO: remove class_name modifiers - exec(py_source.replace("class_name", "className"), env) + exec( + py_source.replace("class_name", "className").replace( + "_className", "_class_name" + ), + env, + ) return env["app"] @@ -52,21 +57,31 @@ def rename_variable(snippet_path, suffix, variable, assign_op="="): return "\n".join(new_lines) -def load_r_app(path, component_name): - return R_WRAPPER.format( - snippet=path.read_text(), - components=component_name, - port=8050, - ).replace( - "class_name", "className" +def load_r_app(path, component_name, extra_args=""): + snippet = path.read_text() + if extra_args: + snippet = f"{extra_args}\n{snippet}" + return ( + R_WRAPPER.format( + snippet=snippet, + components=component_name, + port=8050, + ) + .replace("class_name", "className") + .replace("_className", "_class_name") ) # TODO: remove this in future -def load_jl_app(path, component_name): - return JL_WRAPPER.format( - snippet=path.read_text(), - components=component_name, - port=8050, - ).replace( - "class_name", "className" +def load_jl_app(path, component_name, extra_args=""): + snippet = path.read_text() + if extra_args: + snippet = f"{extra_args}\n{snippet}" + return ( + JL_WRAPPER.format( + snippet=snippet, + components=component_name, + port=8050, + ) + .replace("class_name", "className") + .replace("_className", "_class_name") ) # TODO: remove this in future diff --git a/docs/components_page/components/__tests__/test_accordion.py b/docs/components_page/components/__tests__/test_accordion.py index 5e668dcf3..2c2570166 100644 --- a/docs/components_page/components/__tests__/test_accordion.py +++ b/docs/components_page/components/__tests__/test_accordion.py @@ -10,23 +10,21 @@ HERE = Path(__file__).parent -def test_r_simple(dashr): - r_app = load_r_app((HERE.parent / "accordion" / "simple.R"), "accordion") +def test_r_callback(dashr): + r_app = load_r_app((HERE.parent / "accordion" / "callback.R"), "accordion") dashr.start_server(r_app) - check_simple_callbacks(dashr) + check_callback_callbacks(dashr) -def test_jl_simple(dashjl): +def test_jl_callback(dashjl): jl_app = load_jl_app( - (HERE.parent / "accordion" / "simple.jl"), "accordion" + (HERE.parent / "accordion" / "callback.jl"), "accordion" ) - with open("app.jl", "w") as f: - f.write(jl_app) dashjl.start_server(jl_app) - check_simple_callbacks(dashjl) + check_callback_callbacks(dashjl) -def check_simple_callbacks(runner): +def check_callback_callbacks(runner): # Find the accordion object accordion_comp = runner.find_element("#accordion") accordion_text = runner.find_element("#accordion-contents") diff --git a/docs/components_page/components/__tests__/test_carousel.py b/docs/components_page/components/__tests__/test_carousel.py index 606505f91..64956b274 100644 --- a/docs/components_page/components/__tests__/test_carousel.py +++ b/docs/components_page/components/__tests__/test_carousel.py @@ -27,14 +27,19 @@ def test_jl_carousel(dashjl): def check_carousel_callbacks(runner): - runner.find_element( - "label[for='_dbcprivate_radioitems_slide-number_input_1']" - ).click() + item = "label[for='_dbcprivate_radioitems_slide-number_input_1']" + + runner.find_element(item).click() wait.until( - lambda: runner.find_elements("div.carousel-item")[1].get_attribute( - "class" + lambda: len( + {"carousel-item", "active"} + - set( + runner.find_elements("div.carousel-item")[1].get_attribute( + "class" + ) + ) ) - == "carousel-item active", + == 0, timeout=4, ) diff --git a/docs/components_page/components/__tests__/test_collapse.py b/docs/components_page/components/__tests__/test_collapse.py index 50bb33979..7447cee86 100644 --- a/docs/components_page/components/__tests__/test_collapse.py +++ b/docs/components_page/components/__tests__/test_collapse.py @@ -71,45 +71,3 @@ def check_collapse_multiple_callbacks(runner): == "collapse show", timeout=4, ) - - -# -------------------------------------------- -# accordion - - -def test_r_collapse_accordion(dashr): - r_app = load_r_app((HERE.parent / "collapse" / "accordion.R"), "accordion") - dashr.start_server(r_app) - check_collapse_accordion_callbacks(dashr) - - -def test_jl_collapse_accordion(dashjl): - jl_app = load_jl_app( - (HERE.parent / "collapse" / "accordion.jl"), "accordion" - ) - dashjl.start_server(jl_app) - check_collapse_accordion_callbacks(dashjl) - - -def check_collapse_accordion_callbacks(runner): - - runner.find_element("#group-1-toggle").click() - wait.until( - lambda: runner.find_element("#collapse-1").get_attribute("class") - == "collapse show", - timeout=4, - ) - - runner.find_element("#group-2-toggle").click() - wait.until( - lambda: runner.find_element("#collapse-2").get_attribute("class") - == "collapse show", - timeout=4, - ) - - runner.find_element("#group-3-toggle").click() - wait.until( - lambda: runner.find_element("#collapse-3").get_attribute("class") - == "collapse show", - timeout=4, - ) diff --git a/docs/components_page/components/__tests__/test_navbar.py b/docs/components_page/components/__tests__/test_navbar.py index e06670cc9..ec272d477 100644 --- a/docs/components_page/components/__tests__/test_navbar.py +++ b/docs/components_page/components/__tests__/test_navbar.py @@ -27,14 +27,28 @@ def check_navbar_callbacks(runner): runner.driver.set_window_size(375, 667) wait.until( - lambda: runner.find_element("#navbar-collapse").get_attribute("class") - == "collapse navbar-collapse", + lambda: len( + {"navbar-collapse", "collapse"} + - set( + runner.find_element("#navbar-collapse") + .get_attribute("class") + .split() + ) + ) + == 0, timeout=4, ) runner.find_element("#navbar-toggler").click() wait.until( - lambda: runner.find_element("#navbar-collapse").get_attribute("class") - == "collapse show navbar-collapse", + lambda: len( + {"navbar-collapse", "collapse", "show"} + - set( + runner.find_element("#navbar-collapse") + .get_attribute("class") + .split() + ) + ) + == 0, timeout=4, ) diff --git a/docs/components_page/components/__tests__/test_pagination.py b/docs/components_page/components/__tests__/test_pagination.py index 298e0eb37..37942404f 100644 --- a/docs/components_page/components/__tests__/test_pagination.py +++ b/docs/components_page/components/__tests__/test_pagination.py @@ -10,33 +10,38 @@ HERE = Path(__file__).parent -def test_r_pagination_simple(dashr): - r_app = load_r_app((HERE.parent / "pagination" / "simple.R"), "pagination") +def test_r_pagination_callback(dashr): + r_app = load_r_app( + (HERE.parent / "pagination" / "callback.R"), "pagination" + ) dashr.start_server(r_app) - check_pagination_simple_callbacks(dashr) + check_pagination_callback_callbacks(dashr) -def test_jl_pagination_simple(dashjl): +def test_jl_pagination_callback(dashjl): jl_app = load_jl_app( - (HERE.parent / "pagination" / "simple.jl"), "pagination" + (HERE.parent / "pagination" / "callback.jl"), "pagination" ) dashjl.start_server(jl_app) - check_pagination_simple_callbacks(dashjl) - + check_pagination_callback_callbacks(dashjl) -def check_pagination_simple_callbacks(runner): - # Find the pagination object - pagination_comp = runner.find_element("#pagination") - pagination_text = runner.find_element("#pagination-contents") +def check_pagination_callback_callbacks(runner): # Check it has 10 page-items objects in it - pages = pagination_comp.find_elements(".page-item") + pages = runner.find_elements("#pagination .page-item") wait.until( lambda: len(pages) == 10, timeout=4, ) + # Ensure that all the items have loaded + wait.until( + lambda: runner.find_element("#pagination-contents").text + == "Page selected: 1", + timeout=4, + ) + # Click the link with text 7 wait.until( lambda: pages[6].text == "7", @@ -46,22 +51,26 @@ def check_pagination_simple_callbacks(runner): # Check the text in contents changes to "Page selected: 7" wait.until( - lambda: pagination_text.text == "Page selected: 7", + lambda: runner.find_element("#pagination-contents").text + == "Page selected: 7", timeout=4, ) # Change the slider to value 5 - runner.click_at_coord_fractions( - runner.find_element("#page-change"), 0.5, 0.25 - ) + page_changer = runner.find_element("#page-change") + runner.click_at_coord_fractions(page_changer, 0.5, 0.25) # Check the text in contents changes to "Page selected: 5" wait.until( - lambda: pagination_text.text == "Page selected: 5", + lambda: runner.find_element("#pagination-contents").text + == "Page selected: 5", timeout=4, ) # Check that the
  • object inside pagination with number = 5 # has active as a class - pages = pagination_comp.find_element(".active") - wait.until(lambda: pages[4].text == "5") + 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_popover.py b/docs/components_page/components/__tests__/test_popover.py index c5d31274c..da7e79e6a 100644 --- a/docs/components_page/components/__tests__/test_popover.py +++ b/docs/components_page/components/__tests__/test_popover.py @@ -27,6 +27,7 @@ def test_jl_popover(dashjl): def check_popover_callbacks(runner): + assert len(runner.find_elements("#popover")) == 0 runner.find_element("#toggle").click() wait.until( diff --git a/docs/components_page/components/__tests__/test_snippets.py b/docs/components_page/components/__tests__/test_snippets.py index 20a774070..b39343fcd 100644 --- a/docs/components_page/components/__tests__/test_snippets.py +++ b/docs/components_page/components/__tests__/test_snippets.py @@ -23,7 +23,11 @@ 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() @@ -135,9 +139,9 @@ def assert_layouts_equal( snippet="\n".join(x[1] for x in compare), components=", ".join(x[2] for x in compare), port=port, - ).replace( - "class_name", "className" - ) # TODO: remove + ) + .replace("class_name", "className") + .replace("_className", "_class_name") # TODO: remove ) layout = requests.get(f"{runner.url}/_dash-layout").json() diff --git a/docs/components_page/components/__tests__/test_tabs.py b/docs/components_page/components/__tests__/test_tabs.py index c036a91d7..876cd404f 100644 --- a/docs/components_page/components/__tests__/test_tabs.py +++ b/docs/components_page/components/__tests__/test_tabs.py @@ -24,12 +24,111 @@ def test_jl_tabs_card(dashjl): def check_tabs_card_callbacks(runner): - runner.driver.find_element_by_xpath( - "//ul[@id='card-tabs']/li/a[.='Tab 2']" - ).click() + tab_links = runner.find_elements("#card-tabs > div.nav-item > a.nav-link") + wait.until(lambda: tab_links[1].text == "Tab 2", timeout=4) + + 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!", class_name = "card-text"), + dbcButton("Click here", color = "success") + ) + ), + class_name = "mt-3" +) + +tab2_content <- dbcCard( + dbcCardBody( + list( + htmlP("This is tab 2!", class_name = "card-text"), + dbcButton("Don't click here", color = "danger") + ) + ), + class_name = "mt-3", +) +""" + +active_tab_content_jl = """ +tab1_content = dbc_card( + dbc_cardbody([ + html_p("This is tab 1!", class_name="card-text"), + dbc_button("Click here", color="success"), + ]), + class_name="mt-3", +); + +tab2_content = dbc_card( + dbc_cardbody([ + html_p("This is tab 2!", class_name="card-text"), + dbc_button("Don't click here", color="danger"), + ]), + class_name="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/accordion.md b/docs/components_page/components/accordion.md index d051b57d4..53fede7e9 100644 --- a/docs/components_page/components/accordion.md +++ b/docs/components_page/components/accordion.md @@ -3,7 +3,9 @@ title: Accordion lead: Use the Accordion component to create collapsible lists. --- -You can create an accordion using the `Accordion` and `AccordionItem` components. 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. Each section header is determined by the `title` prop of the `AccordionItem`. +## 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}} @@ -19,4 +21,11 @@ Add flush to change some of the styling, including removing borders, and roundin {{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..d4ca52786 --- /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", class_name = "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..a66c293d8 --- /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", class_name = "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..ee1ec8942 --- /dev/null +++ b/docs/components_page/components/accordion/callback.py @@ -0,0 +1,38 @@ +import dash_bootstrap_components as dbc +import dash_html_components as html +from dash.dependencies import Input, Output + +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", class_name="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.jl b/docs/components_page/components/accordion/collapsed.jl index faca13d56..62a4b9413 100644 --- a/docs/components_page/components/accordion/collapsed.jl +++ b/docs/components_page/components/accordion/collapsed.jl @@ -3,19 +3,13 @@ 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 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", + title = "Item 2", ), + dbc_accordionitem("This is the content of the third section", title = "Item 3"), ], - start_collapsed=true, + start_collapsed = true, ), ) diff --git a/docs/components_page/components/accordion/flush.jl b/docs/components_page/components/accordion/flush.jl index 3b32b9d5c..959754e6b 100644 --- a/docs/components_page/components/accordion/flush.jl +++ b/docs/components_page/components/accordion/flush.jl @@ -3,19 +3,13 @@ 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 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", + title = "Item 2", ), + dbc_accordionitem("This is the content of the third section", title = "Item 3"), ], - flush=true, + flush = true, ), ) diff --git a/docs/components_page/components/accordion/simple.R b/docs/components_page/components/accordion/simple.R index e77b7ca19..02a5a6377 100644 --- a/docs/components_page/components/accordion/simple.R +++ b/docs/components_page/components/accordion/simple.R @@ -3,36 +3,20 @@ 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" - ) + dbcAccordion( + list( + dbcAccordionItem( + "This is the content of the first section", + title = "Item 1" ), - id = "accordion", - active_item = "item-1" - ), - htmlDiv("Select an item", id = "accordion-contents") + dbcAccordionItem( + "This is the content of the second section", + title = "Item 2" + ), + dbcAccordionItem( + "This is the content of the third section", + title = "Item 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/simple.jl b/docs/components_page/components/accordion/simple.jl index 5d1304337..af2258019 100644 --- a/docs/components_page/components/accordion/simple.jl +++ b/docs/components_page/components/accordion/simple.jl @@ -1,36 +1,9 @@ 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", - ), - html_div(id="accordion-contents", class_name="mt-3"), - ] + 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"), + ],), ) - - -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/simple.py b/docs/components_page/components/accordion/simple.py index ee1ec8942..3c9aebf3c 100644 --- a/docs/components_page/components/accordion/simple.py +++ b/docs/components_page/components/accordion/simple.py @@ -1,38 +1,21 @@ import dash_bootstrap_components as dbc import dash_html_components as html -from dash.dependencies import Input, Output 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", class_name="mt-3"), - ] + 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", + ), + ], + ) ) - - -@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/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 81555b8bd..e897925ee 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", class_name = "me-1", - n_clicks = 0), + list( + dbcButton("Toggle", + id = "alert-toggle-auto", class_name = "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 cfb400303..53f72741a 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", class_name="me-1", n_clicks=0), + dbc_button("Toggle", id = "alert-toggle-auto", class_name = "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/content.jl b/docs/components_page/components/alert/content.jl index ed1075acc..4a152b9f1 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!", class_name="alert-heading"), + html_h4("Well done!", class_name = "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", - class_name="mb-0", + class_name = "mb-0", ), ]); diff --git a/docs/components_page/components/alert/dismiss.R b/docs/components_page/components/alert/dismiss.R index 179d4c4d1..2ef0fb109 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, + "Toggle alert with fade", + id = "alert-toggle-fade", n_clicks = 0, class_name = "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 7166332fb..385469ff5 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", - class_name="me-1", - n_clicks=0, + id = "alert-toggle-fade", + class_name = "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/link.jl b/docs/components_page/components/alert/link.jl index b7a3f89b0..e03ae798b 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="#", class_name="alert-link"), + html_a("example link", href = "#", class_name = "alert-link"), ], - color="primary", + color = "primary", ), dbc_alert( [ "This is a danger alert with an ", - html_a("example link", href="#", class_name="alert-link"), + html_a("example link", href = "#", class_name = "alert-link"), ], - color="danger", + color = "danger", ), ]); 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/badge.md b/docs/components_page/components/badge.md index 01d80dc11..7a9e80757 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,7 +15,7 @@ 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. diff --git a/docs/components_page/components/badge/color.jl b/docs/components_page/components/badge/color.jl index df3d863fa..548874d42 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", class_name="me-1"), - dbc_badge("Secondary", color="secondary", class_name="me-1"), - dbc_badge("Success", color="success", class_name="me-1"), - dbc_badge("Warning", color="warning", class_name="me-1"), - dbc_badge("Danger", color="danger", class_name="me-1"), - dbc_badge("Info", color="info", class_name="me-1"), - dbc_badge("Light", color="light", class_name="me-1"), - dbc_badge("Dark", color="dark"), + dbc_badge("Primary", color = "primary", class_name = "me-1"), + dbc_badge("Secondary", color = "secondary", class_name = "me-1"), + dbc_badge("Success", color = "success", class_name = "me-1"), + dbc_badge("Warning", color = "warning", class_name = "me-1"), + dbc_badge("Danger", color = "danger", class_name = "me-1"), + dbc_badge("Info", color = "info", class_name = "me-1"), + dbc_badge("Light", color = "light", class_name = "me-1"), + dbc_badge("Dark", color = "dark"), ]); diff --git a/docs/components_page/components/badge/links.jl b/docs/components_page/components/badge/links.jl index 9b79f1974..0cd26986d 100644 --- a/docs/components_page/components/badge/links.jl +++ b/docs/components_page/components/badge/links.jl @@ -1,12 +1,12 @@ using DashBootstrapComponents, DashHtmlComponents badges = html_span([ - dbc_badge("Primary", href="#", color="primary", class_name="me-1"), - dbc_badge("Secondary", href="#", color="secondary", class_name="me-1"), - dbc_badge("Success", href="#", color="success", class_name="me-1"), - dbc_badge("Warning", href="#", color="warning", class_name="me-1"), - dbc_badge("Danger", href="#", color="danger", class_name="me-1"), - dbc_badge("Info", href="#", color="info", class_name="me-1"), - dbc_badge("Light", href="#", color="light", class_name="me-1"), - dbc_badge("Dark", href="#", color="dark"), + dbc_badge("Primary", href = "#", color = "primary", class_name = "me-1"), + dbc_badge("Secondary", href = "#", color = "secondary", class_name = "me-1"), + dbc_badge("Success", href = "#", color = "success", class_name = "me-1"), + dbc_badge("Warning", href = "#", color = "warning", class_name = "me-1"), + dbc_badge("Danger", href = "#", color = "danger", class_name = "me-1"), + dbc_badge("Info", href = "#", color = "info", class_name = "me-1"), + dbc_badge("Light", href = "#", color = "light", class_name = "me-1"), + dbc_badge("Dark", href = "#", color = "dark"), ]); diff --git a/docs/components_page/components/badge/pills.R b/docs/components_page/components/badge/pills.R index 4470adbec..49f9d20a6 100644 --- a/docs/components_page/components/badge/pills.R +++ b/docs/components_page/components/badge/pills.R @@ -9,7 +9,7 @@ badges <- htmlSpan( dbcBadge("Warning", pill = TRUE, color = "warning", class_name = "me-1"), dbcBadge("Danger", pill = TRUE, color = "danger", class_name = "me-1"), dbcBadge("Info", pill = TRUE, color = "info", class_name = "me-1"), - dbcBadge("Light", pill = TRUE, color = "light", class_name = "me-1"), + dbcBadge("Light", pill = TRUE, color = "light", class_name = "me-1 text-dark"), 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 4c6c87e13..f5c8b531c 100644 --- a/docs/components_page/components/badge/pills.jl +++ b/docs/components_page/components/badge/pills.jl @@ -1,12 +1,12 @@ using DashBootstrapComponents, DashHtmlComponents badges = html_span([ - dbc_badge("Primary", pill=true, color="primary", class_name="me-1"), - dbc_badge("Secondary", pill=true, color="secondary", class_name="me-1"), - dbc_badge("Success", pill=true, color="success", class_name="me-1"), - dbc_badge("Warning", pill=true, color="warning", class_name="me-1"), - dbc_badge("Danger", pill=true, color="danger", class_name="me-1"), - dbc_badge("Info", pill=true, color="info", class_name="me-1"), - dbc_badge("Light", pill=true, color="light", class_name="me-1"), - dbc_badge("Dark", pill=true, color="dark"), + dbc_badge("Primary", pill = true, color = "primary", class_name = "me-1"), + dbc_badge("Secondary", pill = true, color = "secondary", class_name = "me-1"), + dbc_badge("Success", pill = true, color = "success", class_name = "me-1"), + dbc_badge("Warning", pill = true, color = "warning", class_name = "me-1"), + dbc_badge("Danger", pill = true, color = "danger", class_name = "me-1"), + dbc_badge("Info", pill = true, color = "info", class_name = "me-1"), + dbc_badge("Light", pill = true, color = "light", class_name = "me-1 text-dark"), + 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 56278a9e0..10fb67d7e 100644 --- a/docs/components_page/components/badge/pills.py +++ b/docs/components_page/components/badge/pills.py @@ -11,7 +11,9 @@ dbc.Badge("Warning", pill=True, color="warning", class_name="me-1"), dbc.Badge("Danger", pill=True, color="danger", class_name="me-1"), dbc.Badge("Info", pill=True, color="info", class_name="me-1"), - dbc.Badge("Light", pill=True, color="light", class_name="me-1"), + dbc.Badge( + "Light", pill=True, color="light", class_name="me-1 text-dark" + ), dbc.Badge("Dark", pill=True, color="dark"), ] ) diff --git a/docs/components_page/components/badge/simple.R b/docs/components_page/components/badge/simple.R index 74f8822c2..fff301f21 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", class_name = "ms-1") + dbcBadge("4", color = "light", class_name = "ms-1 text-primary") ), color = "primary", ) diff --git a/docs/components_page/components/badge/simple.jl b/docs/components_page/components/badge/simple.jl index 034923606..28704d29f 100644 --- a/docs/components_page/components/badge/simple.jl +++ b/docs/components_page/components/badge/simple.jl @@ -1,6 +1,6 @@ using DashBootstrapComponents badge = dbc_button( - ["Notifications", dbc_badge("4", color="light", class_name="ms-1")], - color="primary", + ["Notifications", dbc_badge("4", color = "light", class_name = "ms-1 text-primary")], + color = "primary", ); diff --git a/docs/components_page/components/badge/simple.py b/docs/components_page/components/badge/simple.py index 782a04e95..ec5da02eb 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", class_name="ms-1")], + [ + "Notifications", + dbc.Badge("4", color="light", class_name="ms-1 text-primary"), + ], color="primary", ) diff --git a/docs/components_page/components/badge/size.jl b/docs/components_page/components/badge/size.jl index 0119ba537..b9785de6b 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", class_name="ms-1")]), - html_h2(["Example heading", dbc_badge("New", class_name="ms-1")]), - html_h3(["Example heading", dbc_badge("New", class_name="ms-1")]), - html_h4(["Example heading", dbc_badge("New", class_name="ms-1")]), - html_h5(["Example heading", dbc_badge("New", class_name="ms-1")]), - html_h6(["Example heading", dbc_badge("New", class_name="ms-1")]), + html_h1(["Example heading", dbc_badge("New", class_name = "ms-1")]), + html_h2(["Example heading", dbc_badge("New", class_name = "ms-1")]), + html_h3(["Example heading", dbc_badge("New", class_name = "ms-1")]), + html_h4(["Example heading", dbc_badge("New", class_name = "ms-1")]), + html_h5(["Example heading", dbc_badge("New", class_name = "ms-1")]), + html_h6(["Example heading", dbc_badge("New", class_name = "ms-1")]), ]); diff --git a/docs/components_page/components/breadcrumb.md b/docs/components_page/components/breadcrumb.md index 4d6954f45..3c31ccccb 100644 --- a/docs/components_page/components/breadcrumb.md +++ b/docs/components_page/components/breadcrumb.md @@ -3,6 +3,8 @@ 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}} diff --git a/docs/components_page/components/breadcrumb/simple.R b/docs/components_page/components/breadcrumb/simple.R index ba5bafd36..f59eb3c17 100644 --- a/docs/components_page/components/breadcrumb/simple.R +++ b/docs/components_page/components/breadcrumb/simple.R @@ -1,9 +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) - ) + 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 index 4499a6dad..103ab5977 100644 --- a/docs/components_page/components/breadcrumb/simple.jl +++ b/docs/components_page/components/breadcrumb/simple.jl @@ -1,9 +1,13 @@ using DashBootstrapComponents breadcrumb = dbc_breadcrumb( - items=[ + items = [ Dict("label" => "Docs", "href" => "/docs", "external_link" => true), - Dict("label" => "Components", "href" => "/docs/components", "external_link" => true), + Dict( + "label" => "Components", + "href" => "/docs/components", + "external_link" => true, + ), Dict("label" => "Breadcrumb", "active" => true), ], ) diff --git a/docs/components_page/components/button.md b/docs/components_page/components/button.md index ac480618c..ea39efcfe 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. diff --git a/docs/components_page/components/button/active_disabled.jl b/docs/components_page/components/button/active_disabled.jl index effe31fa6..c65b77937 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", class_name="me-1"), - dbc_button("Active", color="primary", active=true, class_name="me-1"), - dbc_button("Disabled", color="primary", disabled=true), + dbc_button("Regular", color = "primary", class_name = "me-1"), + dbc_button("Active", color = "primary", active = true, class_name = "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 bc22a607f..2d737291c 100644 --- a/docs/components_page/components/button/block.R +++ b/docs/components_page/components/button/block.R @@ -6,5 +6,5 @@ button <- htmlDiv( dbcButton("Block button", color = "primary"), dbcButton("Block button", color = "secondary") ), - class_name="d-grid gap-2" + class_name = "d-grid gap-2" ) diff --git a/docs/components_page/components/button/block.jl b/docs/components_page/components/button/block.jl index dd6bde11f..ef3ffb710 100644 --- a/docs/components_page/components/button/block.jl +++ b/docs/components_page/components/button/block.jl @@ -3,8 +3,8 @@ using DashHtmlComponents button = html_div( [ - dbc_button("Block button", color="primary"), - dbc_button("Block button", color="secondary"), + dbc_button("Block button", color = "primary"), + dbc_button("Block button", color = "secondary"), ], - class_name="d-grid gap-2", + class_name = "d-grid gap-2", ); diff --git a/docs/components_page/components/button/outline.R b/docs/components_page/components/button/outline.R index c853822cc..94420fd83 100644 --- a/docs/components_page/components/button/outline.R +++ b/docs/components_page/components/button/outline.R @@ -5,7 +5,8 @@ buttons <- htmlDiv( list( dbcButton("Primary", outline = TRUE, color = "primary", class_name = "me-1"), dbcButton( - "Secondary", outline = TRUE, color = "secondary", class_name = "me-1" + "Secondary", + outline = TRUE, color = "secondary", class_name = "me-1" ), dbcButton("Success", outline = TRUE, color = "success", class_name = "me-1"), dbcButton("Warning", outline = TRUE, color = "warning", class_name = "me-1"), diff --git a/docs/components_page/components/button/outline.jl b/docs/components_page/components/button/outline.jl index da200ce40..1fe972957 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", class_name="me-1"), - dbc_button("Secondary", outline=true, color="secondary", class_name="me-1"), - dbc_button("Success", outline=true, color="success", class_name="me-1"), - dbc_button("Warning", outline=true, color="warning", class_name="me-1"), - dbc_button("Danger", outline=true, color="danger", class_name="me-1"), - dbc_button("Info", outline=true, color="info", class_name="me-1"), - dbc_button("Light", outline=true, color="light", class_name="me-1"), - dbc_button("Dark", outline=true, color="dark"), + dbc_button("Primary", outline = true, color = "primary", class_name = "me-1"), + dbc_button("Secondary", outline = true, color = "secondary", class_name = "me-1"), + dbc_button("Success", outline = true, color = "success", class_name = "me-1"), + dbc_button("Warning", outline = true, color = "warning", class_name = "me-1"), + dbc_button("Danger", outline = true, color = "danger", class_name = "me-1"), + dbc_button("Info", outline = true, color = "info", class_name = "me-1"), + dbc_button("Light", outline = true, color = "light", class_name = "me-1"), + dbc_button("Dark", outline = true, color = "dark"), ]); diff --git a/docs/components_page/components/button/simple.jl b/docs/components_page/components/button/simple.jl index 8eab20359..ef415dfbc 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", class_name="me-1"), - dbc_button("Secondary", color="secondary", class_name="me-1"), - dbc_button("Success", color="success", class_name="me-1"), - dbc_button("Warning", color="warning", class_name="me-1"), - dbc_button("Danger", color="danger", class_name="me-1"), - dbc_button("Info", color="info", class_name="me-1"), - dbc_button("Light", color="light", class_name="me-1"), - dbc_button("Dark", color="dark", class_name="me-1"), - dbc_button("Link", color="link"), + dbc_button("Primary", color = "primary", class_name = "me-1"), + dbc_button("Secondary", color = "secondary", class_name = "me-1"), + dbc_button("Success", color = "success", class_name = "me-1"), + dbc_button("Warning", color = "warning", class_name = "me-1"), + dbc_button("Danger", color = "danger", class_name = "me-1"), + dbc_button("Info", color = "info", class_name = "me-1"), + dbc_button("Light", color = "light", class_name = "me-1"), + dbc_button("Dark", color = "dark", class_name = "me-1"), + dbc_button("Link", color = "link"), ]); diff --git a/docs/components_page/components/button/size.jl b/docs/components_page/components/button/size.jl index 2c261952b..f18cfd0fb 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", class_name="me-1"), - dbc_button("Regular button", class_name="me-1"), - dbc_button("Small button", size="sm"), + dbc_button("Large button", size = "lg", class_name = "me-1"), + dbc_button("Regular button", class_name = "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 3acc99939..7cab7e0da 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, - class_name = "me-2"), + dbcButton("Click me", + id = "example-button", n_clicks = 0, + class_name = "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 0c24abf69..f6b38b7b3 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", class_name="me-2", n_clicks=0), - html_span(id="example-output", style=Dict("verticalAlign" => "middle")), + dbc_button("Click me", id = "example-button", class_name = "me-2", n_clicks = 0), + html_span(id = "example-output", style = Dict("verticalAlign" => "middle")), ]); callback!( diff --git a/docs/components_page/components/button_group.md b/docs/components_page/components/button_group.md index f82c6829b..564b277c4 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`. 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/radios.R b/docs/components_page/components/button_group/radios.R index 6b7b6313e..6d4c322f9 100644 --- a/docs/components_page/components/button_group/radios.R +++ b/docs/components_page/components/button_group/radios.R @@ -9,9 +9,9 @@ button_group <- htmlDiv( label_class_name = "btn btn-secondary", label_checked_class_name = "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 b13586b9d..422608151 100644 --- a/docs/components_page/components/button_group/radios.jl +++ b/docs/components_page/components/button_group/radios.jl @@ -3,20 +3,20 @@ using DashBootstrapComponents, DashHtmlComponents button_group = html_div( [ dbc_radioitems( - id="radios", - class_name="btn-group", - label_class_name="btn btn-secondary", - label_checked_class_name="active", - options=[ + id = "radios", + class_name = "btn-group", + label_class_name = "btn btn-secondary", + label_checked_class_name = "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"), ], - class_name="radio-group", + class_name = "radio-group", ); callback!(app, Output("output", "children"), Input("radios", "value")) do value 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.jl b/docs/components_page/components/button_group/size.jl index 6c3d5a905..0d375e7a1 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", - class_name="me-1", + size = "lg", + class_name = "me-1", ), dbc_buttongroup( [dbc_button("Left"), dbc_button("Middle"), dbc_button("Right")], - size="md", - class_name="me-1", + size = "md", + class_name = "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/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 0048040fb..0eca4ae54 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. diff --git a/docs/components_page/components/card/body.jl b/docs/components_page/components/card/body.jl index bb1856eef..5c52d6315 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"), class_name="mb-3"), - dbc_card("This is also within a body", body=true), + dbc_card(dbc_cardbody("This is some text within a card body"), class_name = "mb-3"), + dbc_card("This is also within a body", body = true), ]); diff --git a/docs/components_page/components/card/color.jl b/docs/components_page/components/card/color.jl index e5c392d9c..b82ad2337 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", class_name="card-title"), - html_p("This is some card content that we'll reuse", class_name="card-text"), + html_h5("Card title", class_name = "card-title"), + html_p("This is some card content that we'll reuse", class_name = "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)), ], - class_name="mb-4", + class_name = "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)), ], - class_name="mb-4", + class_name = "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/header_footer.R b/docs/components_page/components/card/header_footer.R index f20eaa93f..50696785f 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", class_name = "card-title"), - htmlP("This is some card text", class_name = "card-text") - ) - ), - dbcCardFooter("This is the footer") + dbcCardHeader("This is the header"), + dbcCardBody( + list( + htmlH4("Card title", class_name = "card-title"), + htmlP("This is some card text", class_name = "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 03bc89e2f..8ecdec36d 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", class_name="card-title"), - html_p("This is some card text", class_name="card-text"), + html_h4("Card title", class_name = "card-title"), + html_p("This is some card text", class_name = "card-text"), ]), dbc_cardfooter("This is the footer"), ], - style=Dict("width" => "18rem"), + style = Dict("width" => "18rem"), ); diff --git a/docs/components_page/components/card/image.R b/docs/components_page/components/card/image.R index aef4436cf..f3c005e4e 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", class_name = "card-text") ) ), - style = list(width = "18rem") + style = list(width = "18rem") ) bottom_card <- dbcCard( list( - dbcCardBody( htmlP("This has a bottom image", class_name = "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 541f61a65..4d152cd66 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", class_name="card-text")), + dbc_cardimg(src = "/static/images/placeholder286x180.png", top = true), + dbc_cardbody(html_p("This card has an image at the top", class_name = "card-text")), ], - style=Dict("width" => "18rem"), + style = Dict("width" => "18rem"), ); bottom_card = dbc_card( [ - dbc_cardbody(html_p("This has a bottom image", class_name="card-text")), - dbc_cardimg(src="/static/images/placeholder286x180.png", bottom=true), + dbc_cardbody(html_p("This has a bottom image", class_name = "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/layout/group.R b/docs/components_page/components/card/layout/group.R index 15bc7001f..323b1978a 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( class_name = "card-text", ), dbcButton( - "Click here", color = "success", class_name = "mt-auto" + "Click here", + color = "success", class_name = "mt-auto" ) ) ) @@ -29,7 +30,8 @@ cards <- dbcCardGroup( class_name = "card-text", ), dbcButton( - "Click here", color = "warning", class_name = "mt-auto" + "Click here", + color = "warning", class_name = "mt-auto" ) ) ) @@ -48,7 +50,8 @@ cards <- dbcCardGroup( class_name = "card-text", ), dbcButton( - "Click here", color = "danger", class_name = "mt-auto" + "Click here", + color = "danger", class_name = "mt-auto" ) ) ) diff --git a/docs/components_page/components/card/layout/group.jl b/docs/components_page/components/card/layout/group.jl index 2f4fae683..b3fcbc1d0 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", class_name="card-title"), + html_h5("Card 1", class_name = "card-title"), html_p( "This card has some text content, which is a little " * "bit longer than the second card.", - class_name="card-text", + class_name = "card-text", ), - dbc_button("Click here", color="success", class_name="mt-auto"), + dbc_button("Click here", color = "success", class_name = "mt-auto"), ]), ), dbc_card( dbc_cardbody([ - html_h5("Card 2", class_name="card-title"), - html_p("This card has some text content.", class_name="card-text"), - dbc_button("Click here", color="warning", class_name="mt-auto"), + html_h5("Card 2", class_name = "card-title"), + html_p("This card has some text content.", class_name = "card-text"), + dbc_button("Click here", color = "warning", class_name = "mt-auto"), ]), ), dbc_card( dbc_cardbody([ - html_h5("Card 3", class_name="card-title"), + html_h5("Card 3", class_name = "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.", - class_name="card-text", + class_name = "card-text", ), - dbc_button("Click here", color="danger", class_name="mt-auto"), + dbc_button("Click here", color = "danger", class_name = "mt-auto"), ]), ), ]); 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 48eb1947d..f2e29247d 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", class_name="card-title"), - html_p("This is some card content that we'll reuse", class_name="card-text"), + html_h5("Card title", class_name = "card-title"), + html_p("This is some card content that we'll reuse", class_name = "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)), ], - class_name="mb-4", + class_name = "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)), ], - class_name="mb-4", + class_name = "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/simple.R b/docs/components_page/components/card/simple.R index b78c2794d..b96c9dbca 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", class_name = "card-title"), htmlP( - paste( - "Some quick example text to build on the card title and", - "make up the bulk of the card's content." - ), - class_name = "card-text" + paste( + "Some quick example text to build on the card title and", + "make up the bulk of the card's content." + ), + class_name = "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 1048cdbe6..0ac3ad594 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", class_name="card-title"), + html_h4("Card title", class_name = "card-title"), html_p( "Some quick example text to build on the card title and " * "make up the bulk of the card's content.", - class_name="card-text", + class_name = "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/sizing/css.jl b/docs/components_page/components/card/sizing/css.jl index 9f2f9cd8f..1e15e0262 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", class_name="card-title"), + html_h5("Custom CSS", class_name = "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/grid.jl b/docs/components_page/components/card/sizing/grid.jl index ea4542aa2..2540bfe21 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", class_name="card-title"), + html_h5("Card title", class_name = "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", class_name="card-title"), + html_h5("Card title", class_name = "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/utility.jl b/docs/components_page/components/card/sizing/utility.jl index e3627e7a7..46852947d 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", class_name="card-title"), + html_h5("75% width card", class_name = "card-title"), html_p( [ "This card uses the ", html_code("w-75"), " class to set the width to 75%", ], - class_name="card-text", + class_name = "card-text", ), ]), - class_name="w-75 mb-3", + class_name = "w-75 mb-3", ), dbc_card( dbc_cardbody([ - html_h5("50% width card", class_name="card-title"), + html_h5("50% width card", class_name = "card-title"), html_p( [ "This card uses the ", html_code("w-50"), " class to set the width to 50%", ], - class_name="card-text", + class_name = "card-text", ), ]), - class_name="w-50", + class_name = "w-50", ), ]); diff --git a/docs/components_page/components/card/ttl.R b/docs/components_page/components/card/ttl.R index d47e7a9fe..aa480b6c0 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", class_name = "card-title"), htmlH6("Card subtitle", class_name = "card-subtitle"), htmlP( - paste( - "Some quick example text to build on the card title and", - "make up the bulk of the card's content." - ), - class_name = "card-text", + paste( + "Some quick example text to build on the card title and", + "make up the bulk of the card's content." + ), + class_name = "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 14764e1ff..ebe1c728d 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", class_name="card-title"), - html_h6("Card subtitle", class_name="card-subtitle"), + html_h4("Title", class_name = "card-title"), + html_h6("Card subtitle", class_name = "card-subtitle"), html_p( "Some quick example text to build on the card title and make " * "up the bulk of the card's content.", - class_name="card-text", + class_name = "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/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/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 55bce81c0..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) - ), - class_name = "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 d11bb2bd9..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)], class_name="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 59ee5b225..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)], class_name="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 30c5f9330..dc1549380 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", - class_name = "me-1", n_clicks = 0 + dbcButton("Toggle left", + color = "primary", id = "left", + class_name = "me-1", n_clicks = 0 ), - dbcButton("Toggle right", color = "primary", id = "right", - class_name = "me-1", n_clicks = 0 + dbcButton("Toggle right", + color = "primary", id = "right", + class_name = "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 441d58e75..75b4ebae0 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", - class_name="me-1", - n_clicks=0, + color = "primary", + id = "left", + class_name = "me-1", + n_clicks = 0, ), dbc_button( "Toggle right", - color="primary", - id="right", - class_name="me-1", - n_clicks=0, + color = "primary", + id = "right", + class_name = "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, ), ), ], - class_name="mt-3", + class_name = "mt-3", ), ]); diff --git a/docs/components_page/components/collapse/simple.jl b/docs/components_page/components/collapse/simple.jl index 29c89947c..6ac4f33c3 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", - class_name="mb-3", - color="primary", - n_clicks=0, + id = "collapse-button", + class_name = "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/dropdown.md b/docs/components_page/components/dropdown.md index b9728b582..be81e79c9 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. diff --git a/docs/components_page/components/dropdown/alignment.jl b/docs/components_page/components/dropdown/alignment.jl index 3296fe8a0..85eecc799 100644 --- a/docs/components_page/components/dropdown/alignment.jl +++ b/docs/components_page/components/dropdown/alignment.jl @@ -4,17 +4,17 @@ 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, + right = false, ), ), - dbc_col(dbc_dropdownmenu(label="Right-aligned menu", children=items, right=true)), + dbc_col(dbc_dropdownmenu(label = "Right-aligned menu", children = items, right = true)), ]); diff --git a/docs/components_page/components/dropdown/content.jl b/docs/components_page/components/dropdown/content.jl index 3a1d864d5..83e9eb56a 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.", - class_name="text-muted px-4 mt-4", + class_name = "text-muted px-4 mt-4", ), ], - label="Menu", + label = "Menu", ); diff --git a/docs/components_page/components/dropdown/direction.R b/docs/components_page/components/dropdown/direction.R index f87275cf7..25e200a4f 100644 --- a/docs/components_page/components/dropdown/direction.R +++ b/docs/components_page/components/dropdown/direction.R @@ -28,8 +28,10 @@ dropdown <- dbcRow( 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..6197d2212 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 = "Dropleft", children = items, direction = "left"), + width = "auto", ), dbc_col( - dbc_dropdownmenu(label="Dropright", children=items, direction="right"), - width="auto", + dbc_dropdownmenu(label = "Dropright", children = items, direction = "right"), + 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/menu_items.R b/docs/components_page/components/dropdown/menu_items.R index d4f899a6b..fad5eb38c 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 dceea1dba..066e3fd26 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", class_name="mt-3"), + html_p(id = "item-clicks", class_name = "mt-3"), ]); callback!(app, Output("item-clicks", "children"), Input("dropdown-button", "n_clicks")) do n 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 db6486959..2ea4bbd47 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", - size = "lg", - children = items_size, - class_name = "mb-3" + label = "large dropdown", + size = "lg", + children = items, + class_name = "mb-3" ), dbcDropdownMenu( - label = "normal dropdown", children = items_size, class_name = "mb-3" + label = "normal dropdown", children = items, class_name = "mb-3" ), - dbcDropdownMenu(label = "small dropdown", 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 d9de74cf6..792ae17c1 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", - size="lg", - children=items, - class_name="mb-3", + label = "large dropdown", + size = "lg", + children = items, + class_name = "mb-3", ), - dbc_dropdownmenu(label="normal dropdown", children=items, class_name="mb-3"), - dbc_dropdownmenu(label="small dropdown", size="sm", children=items), -]) -; + dbc_dropdownmenu(label = "normal dropdown", children = items, class_name = "mb-3"), + 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 0d5e339d2..e1190fc55 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", class_name = "m-1" + items_style, + label = "Primary", color = "primary", class_name = "m-1" ), dbcDropdownMenu( - items_style, label = "Secondary", color = "secondary", class_name = "m-1" + items_style, + label = "Secondary", color = "secondary", class_name = "m-1" ), dbcDropdownMenu( - items_style, label = "Success", color = "success", class_name = "m-1" + items_style, + label = "Success", color = "success", class_name = "m-1" ), dbcDropdownMenu( - items_style, label = "Warning", color = "warning", class_name = "m-1" + items_style, + label = "Warning", color = "warning", class_name = "m-1" ), dbcDropdownMenu( - items_style, label = "Danger", color = "danger", class_name = "m-1" + items_style, + label = "Danger", color = "danger", class_name = "m-1" ), - dbcDropdownMenu(items_style, label = "Info", color = "info", - class_name = "m-1"), - dbcDropdownMenu(items_style, label = "Link", color = "link", - class_name = "m-1") + dbcDropdownMenu(items_style, + label = "Info", color = "info", + class_name = "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 072d5e2af..f78714ac3 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", class_name="m-1"), + dbc_dropdownmenu(items, label = "Primary", color = "primary", class_name = "m-1"), dbc_dropdownmenu( items, - label="Secondary", - color="secondary", - class_name="m-1", + label = "Secondary", + color = "secondary", + class_name = "m-1", ), - dbc_dropdownmenu(items, label="Success", color="success", class_name="m-1"), - dbc_dropdownmenu(items, label="Warning", color="warning", class_name="m-1"), - dbc_dropdownmenu(items, label="Danger", color="danger", class_name="m-1"), - dbc_dropdownmenu(items, label="Info", color="info", class_name="m-1"), - dbc_dropdownmenu(items, label="Link", color="link", class_name="m-1"), + dbc_dropdownmenu(items, label = "Success", color = "success", class_name = "m-1"), + dbc_dropdownmenu(items, label = "Warning", color = "warning", class_name = "m-1"), + dbc_dropdownmenu(items, label = "Danger", color = "danger", class_name = "m-1"), + dbc_dropdownmenu(items, label = "Info", color = "info", class_name = "m-1"), ], - style=Dict("display" => "flex", "flexWrap" => "wrap"), + style = Dict("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 81f7f7322..187113832 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, - class_name = "mb-3"), + dbcButton("Toggle fade", + id = "fade-button", n_clicks = 0, + class_name = "mb-3" + ), dbcFade( dbcCard( dbcCardBody( - htmlP( - "This content fades in and out", class_name = "card-text" - ) + htmlP( + "This content fades in and out", + class_name = "card-text" + ) ) ), id = "fade", diff --git a/docs/components_page/components/fade/fade.jl b/docs/components_page/components/fade/fade.jl index 7a4544d73..3946db713 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", class_name="mb-3", n_clicks=0), + dbc_button("Toggle fade", id = "fade-button", class_name = "mb-3", n_clicks = 0), dbc_fade( dbc_card( - dbc_cardbody(html_p("This content fades in and out", class_name="card-text")), + dbc_cardbody(html_p("This content fades in and out", class_name = "card-text")), ), - id="fade", - is_in=true, - appear=false, + id = "fade", + is_in = true, + appear = false, ), ]); diff --git a/docs/components_page/components/fade/transition.R b/docs/components_page/components/fade/transition.R index c83ae4519..e8296941d 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, - class_name = "mb-3"), + dbcButton("Toggle fade", + id = "fade-transition-button", n_clicks = 0, + class_name = "mb-3" + ), dbcFade( dbcCard( dbcCardBody( - htmlP( - "This content fades in and out", class_name = "card-text" - ) + htmlP( + "This content fades in and out", + class_name = "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 019f15001..320d8059b 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", - class_name="mb-3", - n_clicks=0, + id = "fade-transition-button", + class_name = "mb-3", + n_clicks = 0, ), dbc_fade( dbc_card( - dbc_cardbody(html_p("This content fades in and out", class_name="card-text")), + dbc_cardbody(html_p("This content fades in and out", class_name = "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/form.md b/docs/components_page/components/form.md index 972ab67bf..88980569f 100644 --- a/docs/components_page/components/form.md +++ b/docs/components_page/components/form.md @@ -5,7 +5,7 @@ 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. diff --git a/docs/components_page/components/form/dash_core.R b/docs/components_page/components/form/dash_core.R index 82cba08d7..2007a87ea 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) ) ) - ) + ), + class_name = "mb-3", ) -slider <- dbcFormGroup( +slider <- htmlDiv( list( dbcLabel("Slider", html_for = "slider"), dccSlider(id = "slider", min = 0, max = 10, step = 0.5, value = 3) - ) + ), + class_name = "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)) - ) + ), + class_name = "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..65344a64b 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), + ], + ), + ], + class_name = "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), + ], + class_name = "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]), + ], + class_name = "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 e6bc08c7d..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 :-)", type = "valid" - ), - dbcFormFeedback( - "Sorry, we only accept gmail for some reason...", - type = "invalid" - ) - ) + 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 c0b200fc6..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 :-)", type="valid"), - dbc_formfeedback("Sorry, we only accept gmail for some reason...", type="invalid"), - ]), + 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/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/grid.R b/docs/components_page/components/form/grid.R index 2d0964c26..d2b512ab3 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, ) ), - class_name = "g-3" + class_name = "g-3", ) diff --git a/docs/components_page/components/form/grid.jl b/docs/components_page/components/form/grid.jl index ae2f2a353..aa3484ed8 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, ), ], - class_name="g-3", -); + class_name = "g-3", +) diff --git a/docs/components_page/components/form/inline.R b/docs/components_page/components/form/inline.R index de27dd576..8ba2822b0 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", class_name = "me-2"), - dbcInput( - type = "email", - placeholder = "Enter email" - ) + dbcRow( + list( + dbcLabel("Email", width = "auto"), + dbcCol( + dbcInput(type = "email", placeholder = "Enter email"), + class_name = "me-3", ), - class_name = "me-3" - ), - dbcFormGroup( - list( - dbcLabel("Password", class_name = "me-2"), - dbcInput( - type = "password", - placeholder = "Enter password" - ) + dbcLabel("Password", width = "auto"), + dbcCol( + dbcInput(type = "password", placeholder = "Enter password"), + class_name = "me-3", ), - class_name = "me-3" + dbcCol(dbcButton("Submit", color = "primary"), width = "auto") ), - dbcButton("Submit", color = "primary") - ), - inline = TRUE + class_name = "g-2", + ) ) diff --git a/docs/components_page/components/form/inline.jl b/docs/components_page/components/form/inline.jl index ba8c6e815..c7a739f01 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", class_name="me-2"), - dbc_input(type="email", placeholder="Enter email"), - ], - class_name="me-3", - ), - dbc_formgroup( - [ - dbc_label("Password", class_name="me-2"), - dbc_input(type="password", placeholder="Enter password"), - ], - class_name="me-3", - ), - dbc_button("Submit", color="primary"), - ], - inline=true, -); + dbc_row( + [ + dbc_label("Email", width = "auto"), + dbc_col( + dbc_input(type = "email", placeholder = "Enter email"), + class_name = "me-3", + ), + dbc_label("Password", width = "auto"), + dbc_col( + dbc_input(type = "password", placeholder = "Enter password"), + class_name = "me-3", + ), + dbc_col(dbc_button("Submit", color = "primary"), width = "auto"), + ], + class_name = "g-2", + ), +) diff --git a/docs/components_page/components/form/row.R b/docs/components_page/components/form/row.R index 3beff4090..acb0b1fa6 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 + class_name = "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 + class_name = "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 + class_name = "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..40bbc419c 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, + class_name = "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, + class_name = "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, + class_name = "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..52ca557f0 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", ) - ) + ), + class_name = "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" ) - ) + ), + class_name = "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..340472203 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", + ), + ], + class_name = "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"), + ], + class_name = "mb-3", +); form = dbc_form([email_input, password_input]); diff --git a/docs/components_page/components/input.md b/docs/components_page/components/input.md index 27909b7f6..d72144174 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. 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/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_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_standalone.R b/docs/components_page/components/input/radio_check_standalone.R index 039f2a679..af5d6d98d 100644 --- a/docs/components_page/components/input/radio_check_standalone.R +++ b/docs/components_page/components/input/radio_check_standalone.R @@ -3,7 +3,7 @@ library(dashHtmlComponents) standalone_radio_check <- htmlDiv( list( - dbcFormGroup( + htmlDiv( list( dbcCheckbox( id = "standalone-checkbox", @@ -14,22 +14,20 @@ standalone_radio_check <- htmlDiv( html_for = "standalone-checkbox", class_name = "form-check-label" ) - ), - check = TRUE + ) ), - dbcFormGroup( + htmlDiv( list( dbcRadioButton( - id = "standalone-radio", - class_name = "form-check-input" + id = "standalone-radio", + class_name = "form-check-input" ), dbcLabel( "This is a radio button", html_for = "standalone-radio", class_name = "form-check-label" ) - ), - check = TRUE, + ) ), htmlBr(), htmlP(id = "standalone-radio-check-output") diff --git a/docs/components_page/components/input/radio_check_standalone.jl b/docs/components_page/components/input/radio_check_standalone.jl index 0b3e6749b..dd3cf97e1 100644 --- a/docs/components_page/components/input/radio_check_standalone.jl +++ b/docs/components_page/components/input/radio_check_standalone.jl @@ -1,30 +1,24 @@ using DashBootstrapComponents, DashHtmlComponents standalone_radio_check = html_div([ - dbc_formgroup( - [ - dbc_checkbox(id="standalone-checkbox", class_name="form-check-input"), - dbc_label( - "This is a checkbox", - html_for="standalone-checkbox", - class_name="form-check-label", - ), - ], - check=true, - ), - dbc_formgroup( - [ - dbc_radiobutton(id="standalone-radio", class_name="form-check-input"), - dbc_label( - "This is a radio button", - html_for="standalone-radio", - class_name="form-check-label", - ), - ], - check=true, - ), + html_div([ + dbc_checkbox(id = "standalone-checkbox", class_name = "form-check-input"), + dbc_label( + "This is a checkbox", + html_for = "standalone-checkbox", + class_name = "form-check-label", + ), + ]), + html_div([ + dbc_radiobutton(id = "standalone-radio", class_name = "form-check-input"), + dbc_label( + "This is a radio button", + html_for = "standalone-radio", + class_name = "form-check-label", + ), + ]), html_br(), - html_p(id="standalone-radio-check-output"), + html_p(id = "standalone-radio-check-output"), ]); 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..949bcd1c8 100644 --- a/docs/components_page/components/input/selected_styles.R +++ b/docs/components_page/components/input/selected_styles.R @@ -3,9 +3,9 @@ library(dashBootstrapComponents) 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) + list(label = "Option 1", value = 1), + list(label = "Option 2", value = 2), + list(label = "Option 3", value = 3) ), labelCheckedStyle = list(color = "red") ) diff --git a/docs/components_page/components/input/selected_styles.jl b/docs/components_page/components/input/selected_styles.jl index 6b9c5d7cc..c6752110d 100644 --- a/docs/components_page/components/input/selected_styles.jl +++ b/docs/components_page/components/input/selected_styles.jl @@ -1,11 +1,11 @@ using DashBootstrapComponents checklist = dbc_checklist( - id="checklist-selected-style", - options=[ + 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"), + labelCheckedStyle = Dict("color" => "red"), ); 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/size.jl b/docs/components_page/components/input/size.jl index bf6b89393..144bc1cc1 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...", size="lg", class_name="mb-3"), - dbc_input(placeholder="A medium input...", size="md", class_name="mb-3"), - dbc_input(placeholder="A small input...", size="sm"), + dbc_input(placeholder = "A large input...", size = "lg", class_name = "mb-3"), + dbc_input(placeholder = "A medium input...", size = "md", class_name = "mb-3"), + 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/textarea.R b/docs/components_page/components/input/textarea.R index cd38e103c..9610a7c42 100644 --- a/docs/components_page/components/input/textarea.R +++ b/docs/components_page/components/input/textarea.R @@ -10,8 +10,8 @@ textareas <- htmlDiv( placeholder = "A small, valid Textarea", ), dbcTextarea( - invalid = TRUE, 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 5a7d3f6ad..27b43f9b7 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(class_name="mb-3", placeholder="A Textarea"), + dbc_textarea(class_name = "mb-3", placeholder = "A Textarea"), dbc_textarea( - valid=true, - size="sm", - class_name="mb-3", - placeholder="A small, valid Textarea", + valid = true, + size = "sm", + class_name = "mb-3", + placeholder = "A small, valid Textarea", ), - dbc_textarea(invalid=true, 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/validation.jl b/docs/components_page/components/input/validation.jl index ec62f9eae..9bb4c8d19 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, class_name="mb-3"), - dbc_input(placeholder="Invalid input...", invalid=true), + dbc_input(placeholder = "Valid input...", valid = true, class_name = "mb-3"), + dbc_input(placeholder = "Invalid input...", invalid = true), ]); diff --git a/docs/components_page/components/input_group.md b/docs/components_page/components/input_group.md index 1cec581fe..0b6c62639 100644 --- a/docs/components_page/components/input_group.md +++ b/docs/components_page/components/input_group.md @@ -3,7 +3,7 @@ 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 either a `Button` or `InputGroupText` in an `InputGroup`. 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/check_radio.R b/docs/components_page/components/input_group/check_radio.R index ada2a2da7..217828532 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() ), class_name = "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 4cd8d7752..53b89dd40 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()], - class_name="mb-3", + [dbc_inputgrouptext(dbc_radiobutton()), dbc_input()], + class_name = "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/simple.R b/docs/components_page/components/input_group/simple.R index 9875a8fce..5d98e478e 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") ), class_name = "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") ), class_name = "mb-3" ), dbcInputGroup( list( - dbcInputGroupAddon("$", addon_type = "prepend"), + dbcInputGroupText("$"), dbcInput(placeholder = "Amount", type = "number"), - dbcInputGroupAddon(".00", addon_type = "append") + dbcInputGroupText(".00") ), class_name = "mb-3" ), dbcInputGroup( list( - dbcInputGroupAddon("With textarea", addon_type = "prepend"), + dbcInputGroupText("Total:"), + dbcInputGroupText("$"), + dbcInput(placeholder = "Amount", type = "number"), + dbcInputGroupText(".00"), + dbcInputGroupText("only") + ), + class_name = "mb-3" + ), + dbcInputGroup( + list( + dbcInputGroupText("With textarea"), dbcTextarea() ), class_name = "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 2ea2dbe8b..d108c8d24 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")], + class_name = "mb-3", + ), dbc_inputgroup( [ - dbc_inputgroupaddon("@", addon_type="prepend"), - dbc_input(placeholder="Username"), + dbc_input(placeholder = "Recipient's username"), + dbc_inputgrouptext("@example.com"), ], - class_name="mb-3", + class_name = "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"), ], - class_name="mb-3", + class_name = "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"), ], - class_name="mb-3", + class_name = "mb-3", ), dbc_inputgroup( - [dbc_inputgroupaddon("With textarea", addon_type="prepend"), dbc_textarea()], - class_name="mb-3", + [dbc_inputgrouptext("With textarea"), dbc_textarea()], + class_name = "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 7d37a178e..51713e9b5 100644 --- a/docs/components_page/components/input_group/simple.py +++ b/docs/components_page/components/input_group/simple.py @@ -22,6 +22,16 @@ ], class_name="mb-3", ), + dbc.InputGroup( + [ + dbc.InputGroupText("Total:"), + dbc.InputGroupText("$"), + dbc.Input(placeholder="Amount", type="number"), + dbc.InputGroupText(".00"), + dbc.InputGroupText("only"), + ], + class_name="mb-3", + ), dbc.InputGroup( [ dbc.InputGroupText("With textarea"), 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/layout.md b/docs/components_page/components/layout.md index 25377b6f9..0b7c99b24 100644 --- a/docs/components_page/components/layout.md +++ b/docs/components_page/components/layout.md @@ -3,6 +3,8 @@ 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`. 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/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/no_gutters.jl b/docs/components_page/components/layout/no_gutters.jl index 750f2678a..752dc02d4 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")), ], - class_name="g-0", + class_name = "g-0", ); diff --git a/docs/components_page/components/layout/order_offset.R b/docs/components_page/components/layout/order_offset.R index ce59b6dd5..80295355d 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( diff --git a/docs/components_page/components/layout/order_offset.jl b/docs/components_page/components/layout/order_offset.jl index 7c7eb950f..4400454c1 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" => 12), ), ]), ]); 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/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/list_group.md b/docs/components_page/components/list_group.md index 4199a2bce..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,6 +27,12 @@ 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`. 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/content.R b/docs/components_page/components/list_group/content.R index d536d2343..4cf2de266 100644 --- a/docs/components_page/components/list_group/content.R +++ b/docs/components_page/components/list_group/content.R @@ -5,31 +5,33 @@ list_group <- dbcListGroup( dbcListGroupItem( list( htmlDiv( - list( - htmlH5("This item has a heading", class_name="mb-1"), - htmlSmall("Yay!", class_name="text-success"), - ), - class_name="d-flex w-100 justify-content-between", + list( + htmlH5("This item has a heading", class_name = "mb-1"), + htmlSmall("Yay!", class_name = "text-success") + ), + class_name = "d-flex w-100 justify-content-between" ), - htmlP("And some text underneath", class_name="mb-1"), - htmlSmall("Plus some small print.", class_name="text-muted"), + htmlP("And some text underneath", class_name = "mb-1"), + htmlSmall("Plus some small print.", class_name = "text-muted") ) ), dbcListGroupItem( list( htmlDiv( - list( - htmlH5( - "This item also has a heading", class_name="mb-1" - ), - htmlSmall("Ok!", class_name="text-warning"), - ), - class_name="d-flex w-100 justify-content-between", - ), - htmlP("And some more text underneath too", class_name="mb-1"), - htmlSmall( - "Plus even more small print.", class_name="text-muted" + list( + htmlH5( + "This item also has a heading", + class_name = "mb-1" + ), + htmlSmall("Ok!", class_name = "text-warning") ), + class_name = "d-flex w-100 justify-content-between" + ), + htmlP("And some more text underneath too", class_name = "mb-1"), + htmlSmall( + "Plus even more small print.", + class_name = "text-muted" + ) ) ) ) diff --git a/docs/components_page/components/list_group/content.jl b/docs/components_page/components/list_group/content.jl index 07a587cd3..94c9f86f9 100644 --- a/docs/components_page/components/list_group/content.jl +++ b/docs/components_page/components/list_group/content.jl @@ -4,27 +4,23 @@ list_group = dbc_listgroup([ dbc_listgroupitem([ html_div( [ - html_h5("This item has a heading", class_name="mb-1"), - html_small("Yay!", class_name="text-success"), + html_h5("This item has a heading", class_name = "mb-1"), + html_small("Yay!", class_name = "text-success"), ], - class_name="d-flex w-100 justify-content-between", + class_name = "d-flex w-100 justify-content-between", ), - html_p("And some text underneath", class_name="mb-1"), - html_small("Plus some small print.", class_name="text-muted"), + html_p("And some text underneath", class_name = "mb-1"), + html_small("Plus some small print.", class_name = "text-muted"), ]), dbc_listgroupitem([ html_div( [ - html_h5( - "This item also has a heading", class_name="mb-1" - ), - html_small("Ok!", class_name="text-warning"), + html_h5("This item also has a heading", class_name = "mb-1"), + html_small("Ok!", class_name = "text-warning"), ], - class_name="d-flex w-100 justify-content-between", - ), - html_p("And some more text underneath too", class_name="mb-1"), - html_small( - "Plus even more small print.", class_name="text-muted" + class_name = "d-flex w-100 justify-content-between", ), + html_p("And some more text underneath too", class_name = "mb-1"), + html_small("Plus even more small print.", class_name = "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 db4ec3c47..5802b2430 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, - class_name = "mb-2", + class_name = "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 7d8ca4c08..45bf76d86 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, - class_name="mb-2", + horizontal = true, + class_name = "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/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/main.md b/docs/components_page/components/main.md new file mode 100644 index 000000000..f9f980152 --- /dev/null +++ b/docs/components_page/components/main.md @@ -0,0 +1,17 @@ +--- +title: Components +lead: Understand how to use the component pages +--- + +Each component page includes examples of basic usage, as well as demos where interesting or useful features are brought to the fore. + +The first item on the page will always demonstrate a simple use case. If a callback is required for basic functionality, it will be included here too. If not, an example on how to use callbacks (if appropriate to the component) is included below. + +{{example:components/main/simple.py:layout}} + + +Each example demonstrates the component in use within an app at the top, then below, the corresponding python code. If it's available, code to create the same component in R or Julia can be seen by clicking the appropriate tabs. + +It's important to note that this example is not a fully functioning app, and will only work within a dash app. *You will not be able to run the example as is*. + +If you are unsure how to get the examples to work, please take a look at the [Quickstart](/docs/quickstart/) instructions for creating a basic app. diff --git a/docs/components_page/components/main/simple.R b/docs/components_page/components/main/simple.R new file mode 100644 index 000000000..9d6ce3f66 --- /dev/null +++ b/docs/components_page/components/main/simple.R @@ -0,0 +1,18 @@ +library(dashBootstrapComponents) +library(dashHtmlComponents) + +layout <- htmlDiv( + list( + dbcCard( + dbcCardBody( + paste( + "This is an example of a component being used in the wild.", + "Below me, you can find the code used to create me.", + sep = "\n" + ) + ), + class_name = "mb-3", + ), + dbcButton("I am a button!", color = "primary") + ) +) diff --git a/docs/components_page/components/main/simple.jl b/docs/components_page/components/main/simple.jl new file mode 100644 index 000000000..81ac4e1a0 --- /dev/null +++ b/docs/components_page/components/main/simple.jl @@ -0,0 +1,12 @@ +using DashBootstrapComponents, DashHtmlComponents + +layout = html_div([ + dbc_card( + dbc_cardbody( + "This is an example of a component being used in the wild.\n" * + "Below me, you can find the code used to create me.", + ), + class_name = "mb-3", + ), + dbc_button("I am a button!", color = "primary"), +],) diff --git a/docs/components_page/components/main/simple.py b/docs/components_page/components/main/simple.py new file mode 100644 index 000000000..d8e11e90e --- /dev/null +++ b/docs/components_page/components/main/simple.py @@ -0,0 +1,15 @@ +import dash_bootstrap_components as dbc +import dash_html_components as html + +layout = html.Div( + [ + dbc.Card( + dbc.CardBody( + "This is an example of a component being used in the wild.\n" + "Below me, you can find the code used to create me." + ), + class_name="mb-3", + ), + dbc.Button("I am a button!", color="primary"), + ], +) diff --git a/docs/components_page/components/modal.md b/docs/components_page/components/modal.md index eaa3a98e7..65fdc4778 100644 --- a/docs/components_page/components/modal.md +++ b/docs/components_page/components/modal.md @@ -3,6 +3,8 @@ title: Modal lead: Use the `Modal` component to add dialogs to your app for lightboxes, user notifications, or completely custom content. --- +## 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}} diff --git a/docs/components_page/components/modal/backdrop.R b/docs/components_page/components/modal/backdrop.R index a75447ace..c96cb4223 100644 --- a/docs/components_page/components/modal/backdrop.R +++ b/docs/components_page/components/modal/backdrop.R @@ -3,33 +3,35 @@ 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, ) ) ), 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, - class_name = "ms-auto" - ) + dbcButton( + "Close", + id = "close-backdrop", + class_name = "ms-auto", + n_clicks = 0 + ) ) ), id = "modal-backdrop", @@ -38,7 +40,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 537d057b6..4de259ea8 100644 --- a/docs/components_page/components/modal/backdrop.jl +++ b/docs/components_page/components/modal/backdrop.jl @@ -1,37 +1,37 @@ using DashBootstrapComponents, DashHtmlComponents modal = html_div([ - dbc_formgroup([ + html_div([ dbc_label("Backdrop:"), dbc_radioitems( - id="backdrop-selector", - options=[ + id = "backdrop-selector", + options = [ Dict("label" => "True (default)", "value" => true), Dict("label" => "False", "value" => false), Dict("label" => "'static'", "value" => "static"), ], - inline=true, - value=true, + inline = true, + value = true, ), ]), - dbc_button("Open modal", id="open-backdrop", n_clicks=0), + 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", - class_name="ms-auto", - n_clicks=0, + id = "close-backdrop", + class_name = "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/centered.R b/docs/components_page/components/modal/centered.R index a929199d9..072f3b85d 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", class_name = "ms-auto", n_clicks=0 + "Close", + id = "close-centered", class_name = "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 727631141..8cf181b29 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", - class_name="ms-auto", - n_clicks=0, + id = "close-centered", + class_name = "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/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/fullscreen.R b/docs/components_page/components/modal/fullscreen.R new file mode 100644 index 000000000..b678e9e94 --- /dev/null +++ b/docs/components_page/components/modal/fullscreen.R @@ -0,0 +1,30 @@ +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" + ) + ) +) + + +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..b0c91935b --- /dev/null +++ b/docs/components_page/components/modal/fullscreen.jl @@ -0,0 +1,22 @@ +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", + ), +]) + + +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/scrollable.R b/docs/components_page/components/modal/scrollable.R index b1b353ca2..915410364 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, class_name = "me-1" + "Scrolling modal", + id = "open-scroll", n_clicks = 0, class_name = "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, - class_name = "ms-auto") + dbcButton("Close", + id = "close-scroll", n_clicks = 0, + class_name = "ms-auto" + ) ) ), id = "modal-scroll", @@ -29,11 +34,12 @@ modal <- htmlDiv( ), dbcModal( list( - dbcModalHeader("Header"), + dbcModalHeader(dbcModalTitle("Modal with scrollable body")), dbcModalBody(LOREM), dbcModalFooter( dbcButton( - "Close", id = "close-body-scroll", n_clicks = 0, + "Close", + id = "close-body-scroll", n_clicks = 0, class_name = "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 95dbf7144..d356d9823 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", class_name="me-1", n_clicks=0), - dbc_button("Modal with scrollable body", id="open-body-scroll", n_clicks=0), + dbc_button("Scrolling modal", id = "open-scroll", class_name = "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", - class_name="ms-auto", - n_clicks=0, + id = "close-scroll", + class_name = "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", - class_name="ms-auto", - n_clicks=0, + id = "close-body-scroll", + class_name = "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 180caa25f..2aafb1ad0 100644 --- a/docs/components_page/components/modal/scrollable.py +++ b/docs/components_page/components/modal/scrollable.py @@ -28,7 +28,7 @@ ), dbc.Modal( [ - dbc.ModalHeader("Modal with scrollable body"), + dbc.ModalHeader(dbc.ModalTitle("Modal with scrollable body")), dbc.ModalBody(LOREM), dbc.ModalFooter( dbc.Button( diff --git a/docs/components_page/components/modal/simple.R b/docs/components_page/components/modal/simple.R index c630a98e7..3ca74f7be 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, class_name = "ms-auto" - ) + dbcButton( + "Close", + id = "close", n_clicks = 0, class_name = "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 f2a2d087f..627a14e53 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", class_name="ms-auto", n_clicks=0), + dbc_button("Close", id = "close", class_name = "ms-auto", n_clicks = 0), ), ], - id="modal", - is_open=false, + id = "modal", + is_open = false, ), ]); diff --git a/docs/components_page/components/modal/size.R b/docs/components_page/components/modal/size.R index 361eb6c8a..487a515e9 100644 --- a/docs/components_page/components/modal/size.R +++ b/docs/components_page/components/modal/size.R @@ -8,13 +8,8 @@ modal <- htmlDiv( 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, class_name = "ms-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, class_name = "ms-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, class_name = "ms-auto" - ) - ) + dbcModalHeader(dbcModalTitle("Header")), + dbcModalBody("An extra large modal.") ), id = "modal-xl", is_open = FALSE, @@ -53,10 +38,10 @@ modal <- htmlDiv( toggle_modal <- function(n1, n2, is_open) { - if (n1 > 0 | n2 > 0) { - return(!is_open) - } - return(is_open) + if (n1 > 0 | n2 > 0) { + return(!is_open) + } + return(is_open) } app$callback( diff --git a/docs/components_page/components/modal/size.jl b/docs/components_page/components/modal/size.jl index cacc1d08b..a3aa8916e 100644 --- a/docs/components_page/components/modal/size.jl +++ b/docs/components_page/components/modal/size.jl @@ -1,44 +1,26 @@ using DashBootstrapComponents, DashHtmlComponents modal = html_div([ - dbc_button("Small modal", id="open-sm", class_name="me-1", n_clicks=0), - dbc_button("Large modal", id="open-lg", class_name="me-1", n_clicks=0), - dbc_button("Extra large modal", id="open-xl", n_clicks=0), + dbc_button("Small modal", id = "open-sm", class_name = "me-1", n_clicks = 0), + dbc_button("Large modal", id = "open-lg", class_name = "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", class_name="ms-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", class_name="ms-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", class_name="ms-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, ), ]); diff --git a/docs/components_page/components/nav.md b/docs/components_page/components/nav.md index c03446298..3782fdd9f 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`. 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/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/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 dd29d7185..2f3f89981 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 diff --git a/docs/components_page/components/navbar/navbar.R b/docs/components_page/components/navbar/navbar.R index ae8846e4d..ef0615f20 100644 --- a/docs/components_page/components/navbar/navbar.R +++ b/docs/components_page/components/navbar/navbar.R @@ -8,7 +8,8 @@ search_bar <- dbcRow( dbcCol(dbcInput(type = "search", placeholder = "Search")), dbcCol( dbcButton( - "Search", color = "primary", n_clicks = 0, class_name = "ms-2" + "Search", + color = "primary", n_clicks = 0, class_name = "ms-2" ), width = "auto" ) @@ -27,13 +28,14 @@ navbar <- dbcNavbar( dbcCol(dbcNavbarBrand("Navbar", class_name = "ms-2")) ), align = "center", - class_name="g-0" + class_name = "g-0" ), href = "https://plotly.com" ), dbcNavbarToggler(id = "navbar-toggler", n_clicks = 0), dbcCollapse( - search_bar, id = "navbar-collapse", is_open = FALSE, navbar = TRUE + 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 399f47945..c4b893713 100644 --- a/docs/components_page/components/navbar/navbar.jl +++ b/docs/components_page/components/navbar/navbar.jl @@ -4,14 +4,14 @@ 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", class_name="ms-2", n_clicks=0), - width="auto", + dbc_button("Search", color = "primary", class_name = "ms-2", n_clicks = 0), + width = "auto", ), ], - class_name="ms-auto flex-nowrap mt-3 mt-md-0 g-0", - align="center", + class_name = "ms-auto flex-nowrap mt-3 mt-md-0 g-0", + align = "center", ); navbar = dbc_navbar( @@ -20,19 +20,19 @@ navbar = dbc_navbar( # 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", class_name="ms-2")), + dbc_col(html_img(src = PLOTLY_LOGO, height = "30px")), + dbc_col(dbc_navbarbrand("Navbar", class_name = "ms-2")), ], - align="center", - class_name="g-0", + align = "center", + class_name = "g-0", ), - href="https://plotly.com", + href = "https://plotly.com", ), - dbc_navbartoggler(id="navbar-toggler", n_clicks=0), - dbc_collapse(search_bar, id="navbar-collapse", is_open=false, navbar=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, + 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 index bdd12ab4c..f24b9ebd8 100644 --- a/docs/components_page/components/offcanvas.md +++ b/docs/components_page/components/offcanvas.md @@ -3,6 +3,8 @@ 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}} diff --git a/docs/components_page/components/offcanvas/backdrop.R b/docs/components_page/components/offcanvas/backdrop.R index 970d60e42..d34370d16 100644 --- a/docs/components_page/components/offcanvas/backdrop.R +++ b/docs/components_page/components/offcanvas/backdrop.R @@ -1,68 +1,71 @@ library(dashBootstrapComponents) library(dashHtmlComponents) +backdrop_selector <- htmlDiv( + list( + 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 + ) + ), + class_name = "p-3 m-2 border", +) + offcanvas <- htmlDiv( - list( - dbcButton("Open backdrop offcanvas", id="open-offcanvas-backdrop", n_clicks=0), - dbcOffcanvas( - list( - htmlDiv( - "Change the backdrop of this offcanvas with the " - "radio buttons" - ), - dbcFormGroup( - list( - dbcRadioItems( - id="offcanvas-backdrop-selector", - options=list( - list( - label="True (default)", value=TRUE, - ), - list(label="False", value=TRUE), - list( - label="Static (no dismiss)", value="static" - ), - ), - inline=TRUE, - value=TRUE, - ), - ), - class_name="p-3 m-2 border", - ), - dbcButton( - "Close", - id="close-offcanvas-backdrop", - class_name="ms-auto", - n_clicks=0, - ), - ), - id="offcanvas-backdrop", - title="Offcanvas with/without backdrop" + list( + dbcButton( + "Open backdrop offcanvas", + id = "open-offcanvas-backdrop", n_clicks = 0 + ), + dbcOffcanvas( + list( + htmlDiv( + paste( + "Change the backdrop of this offcanvas with the", + "radio buttons" + ) ), + backdrop_selector, + dbcButton( + "Close", + id = "close-offcanvas-backdrop", + class_name = "ms-auto", + n_clicks = 0, + ) + ), + id = "offcanvas-backdrop", + title = "Offcanvas with/without backdrop" ) + ) ) app$callback( - output("offcanvas-backdrop", "backdrop"), - list(input("offcanvas-backdrop-selector", "value")), - function(backdrop) { - return(backdrop) - } + 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"), - input("close-offcanvas-backdrop", "n_clicks"), - state("offcanvas-backdrop", "is_open") - ), - function(n1, n2, is_open) { - if (n1 > 0 | n2 > 0) { - return(!is_open) - } - return(is_open) + output("offcanvas-backdrop", "is_open"), + list( + input("open-offcanvas-backdrop", "n_clicks"), + input("close-offcanvas-backdrop", "n_clicks"), + state("offcanvas-backdrop", "is_open") + ), + function(n1, n2, is_open) { + if (n1 > 0 | n2 > 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 index 13aceb4fa..7c738ce89 100644 --- a/docs/components_page/components/offcanvas/backdrop.jl +++ b/docs/components_page/components/offcanvas/backdrop.jl @@ -1,53 +1,39 @@ using DashBootstrapComponents, DashHtmlComponents -offcanvas = html_div( +backdrop_selector = html_div( [ - dbc_button( - "Open backdrop offcanvas", id="open-offcanvas-backdrop", n_clicks=0 - ), - dbc_offcanvas( - [ - html_div( - "Change the backdrop of this offcanvas with the " - "radio buttons" - ), - dbc_formgroup( - [ - 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, - ), - ], - class_name="p-3 m-2 border", - ), - dbc_button( - "Close", - id="close-offcanvas-backdrop", - class_name="ms-auto", - n_clicks=0, - ), + 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"), ], - id="offcanvas-backdrop", - title="Offcanvas with/without backdrop" + inline = true, + value = true, ), - ] + ], + class_name = "p-3 m-2 border", ) +offcanvas = html_div([ + dbc_button("Open backdrop offcanvas", id = "open-offcanvas-backdrop", n_clicks = 0), + dbc_offcanvas( + [ + html_div("Change the backdrop of this offcanvas with the " * "radio buttons"), + backdrop_selector, + dbc_button( + "Close", + id = "close-offcanvas-backdrop", + class_name = "ms-auto", + n_clicks = 0, + ), + ], + id = "offcanvas-backdrop", + title = "Offcanvas with/without backdrop", + ), +]) + callback!( app, diff --git a/docs/components_page/components/offcanvas/placement.R b/docs/components_page/components/offcanvas/placement.R index cd6e8b4e7..262214524 100644 --- a/docs/components_page/components/offcanvas/placement.R +++ b/docs/components_page/components/offcanvas/placement.R @@ -1,86 +1,69 @@ library(dashBootstrapComponents) library(dashHtmlComponents) +placement_selector <- htmlDiv( + list( + dbcInputGroupText("Placement"), + dbcSelect( + 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" + ) + ), + class_name = "p-3 m-2 border" +) + offcanvas <- htmlDiv( - list( - dbcButton( - "Open Offcanvas", - id="open-offcanvas-placement", - n_clicks=0, - class_name="m-2", - ), - dbcOffcanvas( - list( - dbcOffcanvasHeader(title="Placement"), - dbcOffcanvasBody( - list( - htmlDiv( - paste( - "Change the placement of this offcanvas ", - "with the options below" - ) - ), - dbcFormGroup( - # FIXME: Fix styling here - list( - dbcInputGroupAddon( - "Placement", addon_type="prepend" - ), - dbcSelect( - 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", - ), - ), - class_name="p-3 m-2 border", - ), - ) - ), - ), - id="offcanvas-placement", + list( + dbcButton( + "Open Offcanvas", + id = "open-offcanvas-placement", + n_clicks = 0, + class_name = "m-2" + ), + dbcOffcanvas( + list( + htmlDiv( + paste( + "Change the placement of this offcanvas with the", + "options below" + ) ), + placement_selector + ), + id = "offcanvas-placement", + title = "Placement" ) + ) ) app$callback( - output("offcanvas-placement", "is_open"), - list( - input("open-offcanvas-placement", "n_clicks"), - state("offcanvas-placement", "is_open") - ), - function(n1, is_open) { + 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) } return(is_open) - } + } ) app$callback( - output("offcanvas-placement", "placement"), - list( - input("offcanvas-placement-selector", "value") - ), - function(placement) { - return(placement) - } -) \ No newline at end of file + 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 index 68b8a35a7..2327f648c 100644 --- a/docs/components_page/components/offcanvas/placement.jl +++ b/docs/components_page/components/offcanvas/placement.jl @@ -1,57 +1,39 @@ using DashBootstrapComponents, DashHtmlComponents -offcanvas = html_div( +placement_selector = html_div( [ - dbc_button( - "Open Offcanvas", - id="open-offcanvas-placement", - n_clicks=0, - class_name="m-2", - ), - dbc_offcanvas( - [ - html_div( - "Change the placement of this offcanvas with the " * - "options below" - ), - dbc_formgroup( - # FIXME: Fix styling here - [ - dbc_inputgroupaddon( - "Placement", addon_type="prepend" - ), - dbc_select( - 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", - ), - ], - class_name="p-3 m-2 border", - ), + dbc_inputgrouptext("Placement"), + dbc_select( + 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"), ], - id="offcanvas-placement", - title="Placement" + value = "start", ), - ] + ], + class_name = "p-3 m-2 border", ) +offcanvas = html_div([ + dbc_button( + "Open Offcanvas", + id = "open-offcanvas-placement", + n_clicks = 0, + class_name = "m-2", + ), + dbc_offcanvas( + [ + html_div("Change the placement of this offcanvas with the " * "options below"), + placement_selector, + ], + id = "offcanvas-placement", + title = "Placement", + ), +]) + callback!( app, diff --git a/docs/components_page/components/offcanvas/placement.py b/docs/components_page/components/offcanvas/placement.py index d73a40d9b..a28a43ec8 100644 --- a/docs/components_page/components/offcanvas/placement.py +++ b/docs/components_page/components/offcanvas/placement.py @@ -3,7 +3,6 @@ from dash.dependencies import Input, Output, State placement_selector = html.Div( - # FIXME: Fix styling here [ dbc.InputGroupText("Placement"), dbc.Select( diff --git a/docs/components_page/components/offcanvas/scrollable.R b/docs/components_page/components/offcanvas/scrollable.R index b1c7d7fc2..9dfcec4fc 100644 --- a/docs/components_page/components/offcanvas/scrollable.R +++ b/docs/components_page/components/offcanvas/scrollable.R @@ -2,43 +2,43 @@ library(dashBootstrapComponents) library(dashHtmlComponents) offcanvas <- htmlDiv( - list( - dbcButton( - "Open scrollable offcanvas", - id="open-offcanvas-scrollable", - n_clicks=0, - ), - dbcOffcanvas( - list( - htmlDiv( - "The contents on the main page are now scrollable." - ), - dbcButton( - "Close", - id="close-offcanvas-scrollable", - class_name="ms-auto", - n_clicks=0, - ), - ) - id="offcanvas-scrollable", - scrollable=TRUE, - title="Scrollable Offcanvas" + list( + dbcButton( + "Open scrollable offcanvas", + id = "open-offcanvas-scrollable", + n_clicks = 0, + ), + dbcOffcanvas( + list( + htmlDiv( + "The contents on the main page are now scrollable." ), + dbcButton( + "Close", + id = "close-offcanvas-scrollable", + class_name = "ms-auto", + n_clicks = 0, + ) + ), + id = "offcanvas-scrollable", + scrollable = TRUE, + title = "Scrollable Offcanvas" ) + ) ) app$callback( - output("offcanvas-scrollable", "is_open"), - list( - input("open-offcanvas-scrollable", "n_clicks"), - input("close-offcanvas-scrollable", "n_clicks"), - state("offcanvas-scrollable", "is_open") - ), - function(n1, n2, is_open) { - if (n1 > 0 | n2 > 0) { - return(!is_open) - } - return(is_open) + output("offcanvas-scrollable", "is_open"), + list( + input("open-offcanvas-scrollable", "n_clicks"), + input("close-offcanvas-scrollable", "n_clicks"), + state("offcanvas-scrollable", "is_open") + ), + function(n1, n2, is_open) { + if (n1 > 0 | n2 > 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 index e17854d8f..cfd533286 100644 --- a/docs/components_page/components/offcanvas/scrollable.jl +++ b/docs/components_page/components/offcanvas/scrollable.jl @@ -1,30 +1,22 @@ using DashBootstrapComponents, DashHtmlComponents -offcanvas = html_div( - [ - dbc_button( - "Open scrollable offcanvas", - id="open-offcanvas-scrollable", - n_clicks=0, - ), - dbc_offcanvas( - [ - html_div( - "The contents on the main page are now scrollable." - ), - dbc_button( - "Close", - id="close-offcanvas-scrollable", - class_name="ms-auto", - n_clicks=0, - ) - ], - id="offcanvas-scrollable", - scrollable=true, - title="Scrollable Offcanvas" - ), - ] -) +offcanvas = html_div([ + dbc_button("Open scrollable offcanvas", id = "open-offcanvas-scrollable", n_clicks = 0), + dbc_offcanvas( + [ + html_div("The contents on the main page are now scrollable."), + dbc_button( + "Close", + id = "close-offcanvas-scrollable", + class_name = "ms-auto", + n_clicks = 0, + ), + ], + id = "offcanvas-scrollable", + scrollable = true, + title = "Scrollable Offcanvas", + ), +]) callback!( diff --git a/docs/components_page/components/offcanvas/simple.R b/docs/components_page/components/offcanvas/simple.R index b8c3b1e44..3ddc3e130 100644 --- a/docs/components_page/components/offcanvas/simple.R +++ b/docs/components_page/components/offcanvas/simple.R @@ -2,33 +2,33 @@ 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" - ), + 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" ) + ) ) app$callback( - output("offcanvas", "is_open"), - list( - input("open-offcanvas", "n_clicks"), - state("offcanvas", "is_open") - ), - function(n1, is_open) { + 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) } return(is_open) - } -) \ No newline at end of file + } +) diff --git a/docs/components_page/components/offcanvas/simple.jl b/docs/components_page/components/offcanvas/simple.jl index a75ba8359..2d0f904f6 100644 --- a/docs/components_page/components/offcanvas/simple.jl +++ b/docs/components_page/components/offcanvas/simple.jl @@ -1,19 +1,17 @@ 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" +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", + ), +]); callback!( diff --git a/docs/components_page/components/pagination.md b/docs/components_page/components/pagination.md index 27330f657..f3594382c 100644 --- a/docs/components_page/components/pagination.md +++ b/docs/components_page/components/pagination.md @@ -3,9 +3,9 @@ title: Pagination lead: Use the pagination component to create a pagination UI. --- -`Pagination` components allow you to quickly create an easy-to-use pagination display. 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. +## Examples -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`. +`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}} @@ -27,4 +27,10 @@ If there are too many numbers, the pagination object can become unwieldy. Instea {{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..4dc6b1d5b --- /dev/null +++ b/docs/components_page/components/pagination/callback.py @@ -0,0 +1,37 @@ +import dash_bootstrap_components as dbc +import dash_core_components as dcc +import dash_html_components as html +from dash.dependencies import Input, Output + +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 index c9c17591e..2fb7eeefe 100644 --- a/docs/components_page/components/pagination/collapse.R +++ b/docs/components_page/components/pagination/collapse.R @@ -1,11 +1,11 @@ library(dashBootstrapComponents) library(dashCoreComponents) -pagination <- html.Div( - 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), - ) +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 index 3cc5f4ff7..9c8ea0d3a 100644 --- a/docs/components_page/components/pagination/collapse.jl +++ b/docs/components_page/components/pagination/collapse.jl @@ -1,10 +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), - ] -) +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 index 35707e782..eb65b023d 100644 --- a/docs/components_page/components/pagination/navigation.R +++ b/docs/components_page/components/pagination/navigation.R @@ -2,9 +2,9 @@ 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), - ) + 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 index 917b9558c..002c6682c 100644 --- a/docs/components_page/components/pagination/navigation.jl +++ b/docs/components_page/components/pagination/navigation.jl @@ -1,9 +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), - ] -) +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 index b284add5d..6a4323926 100644 --- a/docs/components_page/components/pagination/simple.R +++ b/docs/components_page/components/pagination/simple.R @@ -1,53 +1,9 @@ library(dashBootstrapComponents) -library(dashCoreComponents) library(dashHtmlComponents) -pagination <- html.Div( - 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) - } +pagination <- htmlDiv( + dbcPagination( + max_value = 10 + ) ) diff --git a/docs/components_page/components/pagination/simple.jl b/docs/components_page/components/pagination/simple.jl index 2f13a7a95..4b46da0ef 100644 --- a/docs/components_page/components/pagination/simple.jl +++ b/docs/components_page/components/pagination/simple.jl @@ -1,51 +1,4 @@ -using DashBootstrapComponents, DashCoreComponents, DashHtmlComponents +using DashBootstrapComponents, 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; +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 index 4dc6b1d5b..a0eef84b0 100644 --- a/docs/components_page/components/pagination/simple.py +++ b/docs/components_page/components/pagination/simple.py @@ -1,37 +1,6 @@ import dash_bootstrap_components as dbc -import dash_core_components as dcc import dash_html_components as html -from dash.dependencies import Input, Output 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)}, - ), - ] + dbc.Pagination(max_value=10), ) - - -@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/size.R b/docs/components_page/components/pagination/size.R index fa9eed1ef..a745aa398 100644 --- a/docs/components_page/components/pagination/size.R +++ b/docs/components_page/components/pagination/size.R @@ -2,20 +2,20 @@ 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", - ), + 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 index 3b4936cde..8fe5bb952 100644 --- a/docs/components_page/components/pagination/size.jl +++ b/docs/components_page/components/pagination/size.jl @@ -1,20 +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", - ), - ] -) +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 abf75ddb2..752baf59a 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), - class_name = "mx-2", - n_clicks = 0 + sprintf("Popover on %s", placement), + id = sprintf("popover-%s-target", placement), + class_name = "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 139b01ba9..7b162b5af 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", - class_name="mx-2", - n_clicks=0, + id = "popover-$placement-target", + class_name = "mx-2", + n_clicks = 0, ) end; diff --git a/docs/components_page/components/popover/popover.R b/docs/components_page/components/popover/popover.R index 59e676cf5..e89bf03e5 100644 --- a/docs/components_page/components/popover/popover.R +++ b/docs/components_page/components/popover/popover.R @@ -2,14 +2,15 @@ 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, + "Click", + id = "click-target", n_clicks = 0, color = "danger", class_name = "me-1" ), dbcPopover( @@ -19,7 +20,8 @@ popovers <- htmlDiv( trigger = "click" ), dbcButton( - "Focus", id = "focus-target", n_clicks = 0, + "Focus", + id = "focus-target", n_clicks = 0, color = "danger", class_name = "me-1" ), dbcPopover( @@ -29,7 +31,8 @@ popovers <- htmlDiv( trigger = "focus" ), dbcButton( - "Hover", id = "hover-target", n_clicks = 0, + "Hover", + id = "hover-target", n_clicks = 0, color = "danger", class_name = "me-1" ), dbcPopover( @@ -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 e11cdca49..7f3774853 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", - class_name="me-1", - n_clicks=0, + id = "click-target", + color = "danger", + class_name = "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", - class_name="me-1", - n_clicks=0, + id = "focus-target", + color = "danger", + class_name = "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", - class_name="me-1", - n_clicks=0, + id = "hover-target", + color = "danger", + class_name = "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_callback.R b/docs/components_page/components/popover/popover_callback.R index 54159e3e5..1bb8df667 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", class_name = "me-4"), + dbcButton("Toggle", + id = "toggle", n_clicks = 0, + color = "success", class_name = "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 040820ae0..83b98243d 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", - class_name="me-4", - n_clicks=0, + id = "toggle", + color = "success", + class_name = "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/progress.md b/docs/components_page/components/progress.md index dc3cbb85f..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. diff --git a/docs/components_page/components/progress/animated.R b/docs/components_page/components/progress/animated.R index 1a3c3cf05..caa856aa0 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, class_name = "mt-3" ) ) diff --git a/docs/components_page/components/progress/animated.jl b/docs/components_page/components/progress/animated.jl index 0e24275f3..d99263872 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", - class_name="mt-3", - n_clicks=0, + id = "animation-toggle", + class_name = "mt-3", + n_clicks = 0, ), ]); diff --git a/docs/components_page/components/progress/background.jl b/docs/components_page/components/progress/background.jl index 9c315b428..3ee9a74b3 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", class_name="mb-3"), - dbc_progress(value=50, color="warning", class_name="mb-3"), - dbc_progress(value=75, color="danger", class_name="mb-3"), - dbc_progress(value=100, color="info"), + dbc_progress(value = 25, color = "success", class_name = "mb-3"), + dbc_progress(value = 50, color = "warning", class_name = "mb-3"), + dbc_progress(value = 75, color = "danger", class_name = "mb-3"), + dbc_progress(value = 100, color = "info"), ]); diff --git a/docs/components_page/components/progress/height.R b/docs/components_page/components/progress/height.R index 0eaa87b08..78ee91d34 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"), class_name = "mb-3"), - dbcProgress(value = 50, style = list(height = "30px")) + dbcProgress(value = 50, style = list(height = "1px"), class_name = "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 65f6d2631..b693ef9ff 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"), class_name="mb-3"), - dbc_progress(value=50, style=Dict("height" => "30px")), + dbc_progress(value = 50, style = Dict("height" => "1px"), class_name = "mb-3"), + dbc_progress(value = 50, style = Dict("height" => "30px")), ]); diff --git a/docs/components_page/components/progress/interval.jl b/docs/components_page/components/progress/interval.jl index 8803fe116..26d629005 100644 --- a/docs/components_page/components/progress/interval.jl +++ b/docs/components_page/components/progress/interval.jl @@ -1,8 +1,8 @@ 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"), ]); diff --git a/docs/components_page/components/progress/labels.jl b/docs/components_page/components/progress/labels.jl index 7d28d16d8..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(label="25%", value=25); +progress = dbc_progress(label = "25%", value = 25); diff --git a/docs/components_page/components/progress/multiple.jl b/docs/components_page/components/progress/multiple.jl index 287cb0616..ea1045e0b 100644 --- a/docs/components_page/components/progress/multiple.jl +++ b/docs/components_page/components/progress/multiple.jl @@ -1,9 +1,7 @@ using DashBootstrapComponents -progress = dbc_progress( - [ - dbc_progress(value=20, color="success"), - dbc_progress(value=30, color="warning"), - dbc_progress(value=20, color="danger"), - ], -); +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/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 f4146da8a..516572e4d 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 48a36a695..aef91abb8 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, - class_name = "me-1" + dbcSpinner(size = "sm"), + color = "primary", + disabled = TRUE, + class_name = "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 123ba897c..86d5eb829 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, - class_name="me-1", + dbc_spinner(size = "sm"), + color = "primary", + disabled = true, + class_name = "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/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/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/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/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/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..99fc0bbcd --- /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" + ) + ), + class_name = "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..20a39d6e5 --- /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", + ), + ], + class_name = "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..1774ea2f0 --- /dev/null +++ b/docs/components_page/components/table/color.py @@ -0,0 +1,43 @@ +import dash_bootstrap_components as dbc +import dash_html_components as html +from dash.dependencies import Input, Output + +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", + ), + ], + class_name="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/tabs.md b/docs/components_page/components/tabs.md index 42d5ca053..1905a4657 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. 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/card.jl b/docs/components_page/components/tabs/card.jl index f7e7e8773..5f30d8cfa 100644 --- a/docs/components_page/components/tabs/card.jl +++ b/docs/components_page/components/tabs/card.jl @@ -4,14 +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", - active_tab="tab-1", + id = "card-tabs", + active_tab = "tab-1", ), ), - dbc_cardbody(html_p(id="card-content", class_name="card-text")), + dbc_cardbody(html_p(id = "card-content", class_name = "card-text")), ]); callback!( diff --git a/docs/components_page/components/tabs/simple.R b/docs/components_page/components/tabs/simple.R index 89f147dfe..4c4565438 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!", class_name = "card-text"), - dbcButton("Don't click here", color = "danger") - ) - ), - class_name = "mt-3", + dbcCardBody( + list( + htmlP("This is tab 2!", class_name = "card-text"), + dbcButton("Don't click here", color = "danger") + ) + ), + class_name = "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 2c45df81e..c640897e5 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!", class_name="card-text"), - dbc_button("Click here", color="success"), + html_p("This is tab 1!", class_name = "card-text"), + dbc_button("Click here", color = "success"), ]), - class_name="mt-3", + class_name = "mt-3", ); tab2_content = dbc_card( dbc_cardbody([ - html_p("This is tab 2!", class_name="card-text"), - dbc_button("Don't click here", color="danger"), + html_p("This is tab 2!", class_name = "card-text"), + dbc_button("Don't click here", color = "danger"), ]), - class_name="mt-3", + class_name = "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/style.jl b/docs/components_page/components/tabs/style.jl index 95160f152..e03fc4e17 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", tab_class_name="ms-auto"), - dbc_tab(label="Tab 2", label_class_name="text-success"), + dbc_tab(label = "Tab 1", tab_class_name = "ms-auto"), + dbc_tab(label = "Tab 2", label_class_name = "text-success"), ]), ]); diff --git a/docs/components_page/components/toast.md b/docs/components_page/components/toast.md index 73700e594..98972776f 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 8dcc08dcb..c141b641d 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", - class_name="mb-3", - n_clicks=0, + id = "auto-toast-toggle", + color = "primary", + class_name = "mb-3", + n_clicks = 0, ), dbc_toast( - [html_p("This is the content of the toast", class_name="mb-0")], - id="auto-toast", - header="This is the header", - icon="primary", - duration=4000, + [html_p("This is the content of the toast", class_name = "mb-0")], + id = "auto-toast", + header = "This is the header", + icon = "primary", + duration = 4000, ), ]); diff --git a/docs/components_page/components/toast/icon_dismiss.jl b/docs/components_page/components/toast/icon_dismiss.jl index eeec36e2d..ba62557c4 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", - class_name="mb-3", - n_clicks=0, + id = "simple-toast-toggle", + color = "primary", + class_name = "mb-3", + n_clicks = 0, ), dbc_toast( - [html_p("This is the content of the toast", class_name="mb-0")], - id="simple-toast", - header="This is the header", - icon="primary", - dismissable=true, + [html_p("This is the content of the toast", class_name = "mb-0")], + id = "simple-toast", + header = "This is the header", + icon = "primary", + dismissable = true, ), ]); 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/simple.jl b/docs/components_page/components/toast/simple.jl index d74417ab2..d950c36b2 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", class_name="mb-0")], - header="This is the header", + [html_p("This is the content of the toast", class_name = "mb-0")], + header = "This is the header", ); 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 0455f8e50..ac1e1140c 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 59ae4ac5c..1fc760c31 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", - class_name="mx-2", - n_clicks=0, + id = "tooltip-target-$placement", + class_name = "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/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/server.py b/docs/server.py index 483098912..cba4f350b 100644 --- a/docs/server.py +++ b/docs/server.py @@ -80,15 +80,11 @@ def faq(): except TemplateNotFound: abort(404) - @server.route("/docs/dashr/") - def dashr(): - return redirect("/docs/quickstart", 302) - @server.route("/docs/components/") def components_index(): - return redirect("/docs/components/accordion", 302) + return redirect("/docs/components/main", 302) - @server.route("/l/components/", defaults={"slug": "accordion"}) + @server.route("/l/components/", defaults={"slug": "main"}) @server.route("/l/components//") def components_redirect(slug): return redirect(f"/docs/components/{slug}", 302) diff --git a/setup.cfg b/setup.cfg index 39b6f67b9..c46a1fab3 100644 --- a/setup.cfg +++ b/setup.cfg @@ -2,7 +2,7 @@ exclude = node_modules, dash_bootstrap_components/_components, - docs/components_page/components/accordion/simple.py, + docs/components_page/components/accordion/callback.py, docs/components_page/components/alert/auto_dismiss.py, docs/components_page/components/alert/dismiss.py, docs/components_page/components/button/usage.py, @@ -36,12 +36,13 @@ exclude = docs/components_page/components/offcanvas/placement.py, docs/components_page/components/offcanvas/scrollable.py, docs/components_page/components/offcanvas/simple.py, - docs/components_page/components/pagination/simple.py, + docs/components_page/components/pagination/callback.py docs/components_page/components/popover/direction.py, docs/components_page/components/popover/popover_callback.py, docs/components_page/components/progress/animated.py, docs/components_page/components/progress/interval.py, docs/components_page/components/spinner/loading.py, + docs/components_page/components/table/color.py, docs/components_page/components/table/kwargs.py, docs/components_page/components/tabs/active_tab.py, docs/components_page/components/tabs/card.py, diff --git a/src/components/Alert.js b/src/components/alert/Alert.js similarity index 98% rename from src/components/Alert.js rename to src/components/alert/Alert.js index aa986fc40..2f43bc965 100644 --- a/src/components/Alert.js +++ b/src/components/alert/Alert.js @@ -2,7 +2,7 @@ import React, {useEffect, useRef} from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; import RBAlert from 'react-bootstrap/Alert'; -import {bootstrapColors} from '../private/BootstrapColors'; +import {bootstrapColors} from '../../private/BootstrapColors'; /** * Alert allows you to create contextual feedback messages on user actions. diff --git a/src/components/__tests__/Alert.test.js b/src/components/alert/__tests__/Alert.test.js similarity index 100% rename from src/components/__tests__/Alert.test.js rename to src/components/alert/__tests__/Alert.test.js diff --git a/src/components/Badge.js b/src/components/badge/Badge.js similarity index 97% rename from src/components/Badge.js rename to src/components/badge/Badge.js index 6a41f5611..ee0ac9366 100644 --- a/src/components/Badge.js +++ b/src/components/badge/Badge.js @@ -2,8 +2,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; import RBBadge from 'react-bootstrap/Badge'; -import Link from '../private/Link'; -import {bootstrapColors} from '../private/BootstrapColors'; +import Link from '../../private/Link'; +import {bootstrapColors} from '../../private/BootstrapColors'; /** * Badges can be used to add counts or labels to other components. diff --git a/src/components/__tests__/Badge.test.js b/src/components/badge/__tests__/Badge.test.js similarity index 100% rename from src/components/__tests__/Badge.test.js rename to src/components/badge/__tests__/Badge.test.js diff --git a/src/components/Breadcrumb.js b/src/components/breadcrumb/Breadcrumb.js similarity index 98% rename from src/components/Breadcrumb.js rename to src/components/breadcrumb/Breadcrumb.js index 59c1c8d09..ecd037b6f 100644 --- a/src/components/Breadcrumb.js +++ b/src/components/breadcrumb/Breadcrumb.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import RBBreadcrumb from 'react-bootstrap/Breadcrumb'; -import Link from '../private/Link'; +import Link from '../../private/Link'; /** * Use breadcrumbs to create a navigation breadcrumb in your app. diff --git a/src/components/__tests__/Breadcrumb.test.js b/src/components/breadcrumb/__tests__/Breadcrumb.test.js similarity index 99% rename from src/components/__tests__/Breadcrumb.test.js rename to src/components/breadcrumb/__tests__/Breadcrumb.test.js index b66aef793..798ebc07d 100644 --- a/src/components/__tests__/Breadcrumb.test.js +++ b/src/components/breadcrumb/__tests__/Breadcrumb.test.js @@ -44,7 +44,7 @@ describe('Breadcrumb', () => { '/item/subitem' ); // last item has no href as it is active. - expect(breadcrumbItems.children[2].querySelector('a')).toBe(null) + expect(breadcrumbItems.children[2].querySelector('a')).toBe(null); }); test('correctly applies the active class', () => { diff --git a/src/components/Button.js b/src/components/button/Button.js similarity index 99% rename from src/components/Button.js rename to src/components/button/Button.js index 73a4a6127..2180d6e51 100644 --- a/src/components/Button.js +++ b/src/components/button/Button.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; import RBButton from 'react-bootstrap/Button'; -import Link from '../private/Link'; +import Link from '../../private/Link'; /** * A component for creating Bootstrap buttons with different style options. The diff --git a/src/components/__tests__/Button.test.js b/src/components/button/__tests__/Button.test.js similarity index 100% rename from src/components/__tests__/Button.test.js rename to src/components/button/__tests__/Button.test.js diff --git a/src/components/ButtonGroup.js b/src/components/buttongroup/ButtonGroup.js similarity index 100% rename from src/components/ButtonGroup.js rename to src/components/buttongroup/ButtonGroup.js diff --git a/src/components/__tests__/ButtonGroup.test.js b/src/components/buttongroup/__tests__/ButtonGroup.test.js similarity index 96% rename from src/components/__tests__/ButtonGroup.test.js rename to src/components/buttongroup/__tests__/ButtonGroup.test.js index 6d0a7512d..d228844ca 100644 --- a/src/components/__tests__/ButtonGroup.test.js +++ b/src/components/buttongroup/__tests__/ButtonGroup.test.js @@ -1,6 +1,6 @@ import React from 'react'; import {render} from '@testing-library/react'; -import Button from '../Button'; +import Button from '../../button/Button'; import ButtonGroup from '../ButtonGroup'; describe('ButtonGroup', () => { diff --git a/src/components/Carousel.js b/src/components/carousel/Carousel.js similarity index 97% rename from src/components/Carousel.js rename to src/components/carousel/Carousel.js index d1f35c846..8b13eae02 100644 --- a/src/components/Carousel.js +++ b/src/components/carousel/Carousel.js @@ -170,6 +170,12 @@ Carousel.propTypes = { */ slide: PropTypes.bool, + /** + * Add `variant="dark"` to the Carousel for darker controls, indicators, and + * captions. + */ + variant: PropTypes.oneOf(['dark']), + /** *the interval at which the carousel automatically cycles (default: 5000) * If set to None, carousel will not Autoplay (i.e. will not automatically cycle). diff --git a/src/components/__tests__/Carousel.test.js b/src/components/carousel/__tests__/Carousel.test.js similarity index 100% rename from src/components/__tests__/Carousel.test.js rename to src/components/carousel/__tests__/Carousel.test.js diff --git a/src/components/Collapse.js b/src/components/collapse/Collapse.js similarity index 100% rename from src/components/Collapse.js rename to src/components/collapse/Collapse.js diff --git a/src/components/__tests__/Collapse.test.js b/src/components/collapse/__tests__/Collapse.test.js similarity index 100% rename from src/components/__tests__/Collapse.test.js rename to src/components/collapse/__tests__/Collapse.test.js diff --git a/src/components/dropdownmenu/__tests__/DropdownMenu.test.js b/src/components/dropdownmenu/__tests__/DropdownMenu.test.js index 09c580c26..290e79611 100644 --- a/src/components/dropdownmenu/__tests__/DropdownMenu.test.js +++ b/src/components/dropdownmenu/__tests__/DropdownMenu.test.js @@ -5,6 +5,22 @@ import DropdownMenu from '../DropdownMenu'; import DropdownMenuItem from '../DropdownMenuItem'; describe('DropdownMenu', () => { + // this is just a little hack to silence a warning that we'll get until we + // upgrade to 16.9. See also: https://github.com/facebook/react/pull/14853 + const originalError = console.error; + beforeAll(() => { + console.error = (...args) => { + if (/Warning.*not wrapped in act/.test(args[0])) { + return; + } + originalError.call(console, ...args); + }; + }); + + afterAll(() => { + console.error = originalError; + }); + test('renders a button with class "dropdown-toggle"', () => { const dropdownMenu = render( diff --git a/src/components/dropdownmenu/__tests__/DropdownMenuItem.test.js b/src/components/dropdownmenu/__tests__/DropdownMenuItem.test.js index 1b47e1893..254b5aee1 100644 --- a/src/components/dropdownmenu/__tests__/DropdownMenuItem.test.js +++ b/src/components/dropdownmenu/__tests__/DropdownMenuItem.test.js @@ -5,6 +5,22 @@ import DropdownMenu from '../DropdownMenu'; import DropdownMenuItem from '../DropdownMenuItem'; describe('DropdownMenuItem', () => { + // this is just a little hack to silence a warning that we'll get until we + // upgrade to 16.9. See also: https://github.com/facebook/react/pull/14853 + const originalError = console.error; + beforeAll(() => { + console.error = (...args) => { + if (/Warning.*not wrapped in act/.test(args[0])) { + return; + } + originalError.call(console, ...args); + }; + }); + + afterAll(() => { + console.error = originalError; + }); + test('renders a button with class "dropdown-menu-item"', () => { const dropdownMenuItem = render(); diff --git a/src/components/Fade.js b/src/components/fade/Fade.js similarity index 100% rename from src/components/Fade.js rename to src/components/fade/Fade.js diff --git a/src/components/__tests__/Fade.test.js b/src/components/fade/__tests__/Fade.test.js similarity index 100% rename from src/components/__tests__/Fade.test.js rename to src/components/fade/__tests__/Fade.test.js diff --git a/src/components/__tests__/Label.test.js b/src/components/form/__tests__/Label.test.js similarity index 97% rename from src/components/__tests__/Label.test.js rename to src/components/form/__tests__/Label.test.js index e59a3797c..8ae886938 100644 --- a/src/components/__tests__/Label.test.js +++ b/src/components/form/__tests__/Label.test.js @@ -1,6 +1,6 @@ import React from 'react'; import {render} from '@testing-library/react'; -import Label from '../form/Label'; +import Label from '../Label'; describe('Label', () => { test('renders a label', () => { diff --git a/src/components/Offcanvas.js b/src/components/offcanvas/Offcanvas.js similarity index 100% rename from src/components/Offcanvas.js rename to src/components/offcanvas/Offcanvas.js diff --git a/src/components/__tests__/Offcanvas.test.js b/src/components/offcanvas/__tests__/Offcanvas.test.js similarity index 100% rename from src/components/__tests__/Offcanvas.test.js rename to src/components/offcanvas/__tests__/Offcanvas.test.js diff --git a/src/components/Pagination.js b/src/components/pagination/Pagination.js similarity index 100% rename from src/components/Pagination.js rename to src/components/pagination/Pagination.js diff --git a/src/components/__tests__/Pagination.test.js b/src/components/pagination/__tests__/Pagination.test.js similarity index 100% rename from src/components/__tests__/Pagination.test.js rename to src/components/pagination/__tests__/Pagination.test.js diff --git a/src/components/popover/__tests__/Popover.test.js b/src/components/popover/__tests__/Popover.test.js index 958e645f1..72a399c5b 100644 --- a/src/components/popover/__tests__/Popover.test.js +++ b/src/components/popover/__tests__/Popover.test.js @@ -3,11 +3,28 @@ import {render} from '@testing-library/react'; import Popover from '../Popover'; describe('Popover', () => { + // this is just a little hack to silence a warning that we'll get until we + // upgrade to 16.9. See also: https://github.com/facebook/react/pull/14853 + const originalError = console.error; + let div; beforeAll(() => { div = document.createElement('div'); div.setAttribute('id', 'test-target'); + + // HACK - See above + console.error = (...args) => { + if (/Warning.*not wrapped in act/.test(args[0])) { + return; + } + originalError.call(console, ...args); + }; + }); + + // HACK - See above + afterAll(() => { + console.error = originalError; }); test('renders a div with class "popover"', () => { diff --git a/src/components/Progress.js b/src/components/progress/Progress.js similarity index 98% rename from src/components/Progress.js rename to src/components/progress/Progress.js index 77fcc6fa3..965b6afe7 100644 --- a/src/components/Progress.js +++ b/src/components/progress/Progress.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; import RBProgressBar from 'react-bootstrap/ProgressBar'; -import {bootstrapColors} from '../private/BootstrapColors'; +import {bootstrapColors} from '../../private/BootstrapColors'; /** * A component for creating progress bars just with CSS. Control the current diff --git a/src/components/__tests__/Progress.test.js b/src/components/progress/__tests__/Progress.test.js similarity index 100% rename from src/components/__tests__/Progress.test.js rename to src/components/progress/__tests__/Progress.test.js diff --git a/src/components/Spinner.js b/src/components/spinner/Spinner.js similarity index 98% rename from src/components/Spinner.js rename to src/components/spinner/Spinner.js index e7011adc8..b0848997f 100644 --- a/src/components/Spinner.js +++ b/src/components/spinner/Spinner.js @@ -2,7 +2,7 @@ import React, {useEffect, useRef, useState} from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; import RBSpinner from 'react-bootstrap/Spinner'; -import {bootstrapColors} from '../private/BootstrapColors'; +import {bootstrapColors} from '../../private/BootstrapColors'; /** * Render Bootstrap style loading spinners using only CSS. diff --git a/src/components/__tests__/Spinner.test.js b/src/components/spinner/__tests__/Spinner.test.js similarity index 100% rename from src/components/__tests__/Spinner.test.js rename to src/components/spinner/__tests__/Spinner.test.js diff --git a/src/components/Table.js b/src/components/table/Table.js similarity index 100% rename from src/components/Table.js rename to src/components/table/Table.js diff --git a/src/components/__tests__/Table.test.js b/src/components/table/__tests__/Table.test.js similarity index 100% rename from src/components/__tests__/Table.test.js rename to src/components/table/__tests__/Table.test.js diff --git a/src/components/Toast.js b/src/components/toast/Toast.js similarity index 100% rename from src/components/Toast.js rename to src/components/toast/Toast.js diff --git a/src/components/__tests__/Toast.test.js b/src/components/toast/__tests__/Toast.test.js similarity index 100% rename from src/components/__tests__/Toast.test.js rename to src/components/toast/__tests__/Toast.test.js diff --git a/src/components/Tooltip.js b/src/components/tooltip/Tooltip.js similarity index 97% rename from src/components/Tooltip.js rename to src/components/tooltip/Tooltip.js index 9c86ff9c6..29f09644d 100644 --- a/src/components/Tooltip.js +++ b/src/components/tooltip/Tooltip.js @@ -1,9 +1,9 @@ -import React, {useRef} from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; import RBTooltip from 'react-bootstrap/Tooltip'; -import Overlay from '../private/Overlay'; +import Overlay from '../../private/Overlay'; /** * A component for adding tooltips to any element, no callbacks required! diff --git a/src/components/__tests__/Tooltip.test.js b/src/components/tooltip/__tests__/Tooltip.test.js similarity index 67% rename from src/components/__tests__/Tooltip.test.js rename to src/components/tooltip/__tests__/Tooltip.test.js index f8abf785a..38ad9371c 100644 --- a/src/components/__tests__/Tooltip.test.js +++ b/src/components/tooltip/__tests__/Tooltip.test.js @@ -1,12 +1,28 @@ import React from 'react'; import {act, fireEvent, render} from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import Tooltip from '../Tooltip'; jest.useFakeTimers(); describe('Tooltip', () => { - let div; + // this is just a little hack to silence a warning that we'll get until we + // upgrade to 16.9. See also: https://github.com/facebook/react/pull/14853 + const originalError = console.error; + beforeAll(() => { + console.error = (...args) => { + if (/Warning.*not wrapped in act/.test(args[0])) { + return; + } + originalError.call(console, ...args); + }; + }); + afterAll(() => { + console.error = originalError; + }); + + let div; beforeAll(() => { div = document.createElement('div'); div.setAttribute('id', 'test-target'); @@ -25,32 +41,12 @@ describe('Tooltip', () => { container: document.body.appendChild(div) }); - act(() => { - fireEvent.mouseOver(div); - jest.runAllTimers(); - }); - - expect(document.body.querySelector('div.tooltip')).not.toBe(null); - - fireEvent.mouseLeave(div); - act(() => jest.runAllTimers()); - - expect(document.body.querySelector('.tooltip')).toBe(null); - }); - - test('renders a div with class "tooltip"', () => { - render(, { - container: document.body.appendChild(div) - }); - - fireEvent.focusIn(div); + fireEvent.mouseOver(div); act(() => jest.runAllTimers()); + expect(document.body.querySelector('.tooltip')).not.toBe(null); - expect(document.body.querySelector('div.tooltip')).not.toBe(null); - - fireEvent.focusOut(div); + fireEvent.mouseLeave(div); act(() => jest.runAllTimers()); - expect(document.body.querySelector('.tooltip')).toBe(null); }); @@ -61,7 +57,6 @@ describe('Tooltip', () => { fireEvent.mouseOver(div); act(() => jest.runAllTimers()); - expect(document.body.querySelector('.tooltip')).toHaveTextContent( 'Tooltip content' ); diff --git a/src/index.js b/src/index.js index bd65358c7..3d852eec3 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,10 @@ export {default as Accordion} from './components/accordion/Accordion'; export {default as AccordionItem} from './components/accordion/AccordionItem'; -export {default as Alert} from './components/Alert'; -export {default as Badge} from './components/Badge'; -export {default as Breadcrumb} from './components/Breadcrumb'; -export {default as Button} from './components/Button'; -export {default as ButtonGroup} from './components/ButtonGroup'; +export {default as Alert} from './components/alert/Alert'; +export {default as Badge} from './components/badge/Badge'; +export {default as Breadcrumb} from './components/breadcrumb/Breadcrumb'; +export {default as Button} from './components/button/Button'; +export {default as ButtonGroup} from './components/buttongroup/ButtonGroup'; export {default as Card} from './components/card/Card'; export {default as CardBody} from './components/card/CardBody'; export {default as CardFooter} from './components/card/CardFooter'; @@ -13,15 +13,15 @@ export {default as CardHeader} from './components/card/CardHeader'; export {default as CardImg} from './components/card/CardImg'; export {default as CardImgOverlay} from './components/card/CardImgOverlay'; export {default as CardLink} from './components/card/CardLink'; -export {default as Carousel} from './components/Carousel'; +export {default as Carousel} from './components/carousel/Carousel'; export {default as Checkbox} from './components/input/Checkbox'; export {default as Checklist} from './components/input/Checklist'; export {default as Col} from './components/layout/Col'; -export {default as Collapse} from './components/Collapse'; +export {default as Collapse} from './components/collapse/Collapse'; export {default as Container} from './components/layout/Container'; export {default as DropdownMenu} from './components/dropdownmenu/DropdownMenu'; export {default as DropdownMenuItem} from './components/dropdownmenu/DropdownMenuItem'; -export {default as Fade} from './components/Fade'; +export {default as Fade} from './components/fade/Fade'; export {default as Form} from './components/form/Form'; export {default as FormFeedback} from './components/form/FormFeedback'; export {default as FormFloating} from './components/form/FormFloating'; @@ -44,20 +44,20 @@ export {default as NavbarSimple} from './components/nav/NavbarSimple'; export {default as NavbarToggler} from './components/nav/NavbarToggler'; export {default as NavItem} from './components/nav/NavItem'; export {default as NavLink} from './components/nav/NavLink'; -export {default as Offcanvas} from './components/Offcanvas'; -export {default as Pagination} from './components/Pagination'; +export {default as Offcanvas} from './components/offcanvas/Offcanvas'; +export {default as Pagination} from './components/pagination/Pagination'; export {default as Popover} from './components/popover/Popover'; export {default as PopoverBody} from './components/popover/PopoverBody'; export {default as PopoverHeader} from './components/popover/PopoverHeader'; -export {default as Progress} from './components/Progress'; +export {default as Progress} from './components/progress/Progress'; export {default as RadioItems} from './components/input/RadioItems'; export {default as RadioButton} from './components/input/RadioButton'; export {default as Row} from './components/layout/Row'; export {default as Select} from './components/input/Select'; -export {default as Spinner} from './components/Spinner'; +export {default as Spinner} from './components/spinner/Spinner'; export {default as Tab} from './components/tabs/Tab'; export {default as Tabs} from './components/tabs/Tabs'; -export {default as Table} from './components/Table'; +export {default as Table} from './components/table/Table'; export {default as Textarea} from './components/input/Textarea'; -export {default as Toast} from './components/Toast'; -export {default as Tooltip} from './components/Tooltip'; +export {default as Toast} from './components/toast/Toast'; +export {default as Tooltip} from './components/tooltip/Tooltip';