From 8532982b6fa00febe187ffff85bd6b4be8a35345 Mon Sep 17 00:00:00 2001 From: Tom Begley Date: Tue, 24 Aug 2021 07:49:01 +0100 Subject: [PATCH] Bootstrap 5 support (#646) * Alert * Badge * Button * ButtonGroup * Carousel * Collapse * Fade * Add shim for html components that don't have class_name defined yet * Update block button docs * Update docs for Bootstrap 5 * RIP Jumbotron * Add react-bootstrap beta * Layout * Docs fix * Label * Clean up example * Monkeypatch doc tests * New components - Offcanvas and pagination (#643) * Added offcanvas components * Offcanvas doc snippets * Added offcanvas documentation * Fixed long text issue * Added react-bootstrap * Added offcanvas * Added offcanvas tests * Added js tests for offcanvas * Addition of new pagination component * Combined offcanvas into single component * Formatting * ABetter handling of pagination component * Updated pagination docs * Removed invalid code * Updated npm demo to Bootstrap 5 * Updated pagination docs to include R and jl * Updated pagination tests * Fixed callbacks * Reverted to 5.0.2 to avoid issues with offcanvas backdrop until resolved * Fixed offcanvas tests * Tidy up * Progress * Format tests * Spinner * Table * Toast * New component Accordion (#645) * Accordion component and js test * Added documentation for accordion * R and Julia examples * Fixed h2 formatting issues * Added accordion folder for flake8 * Update demo/Demo.js Co-authored-by: glsdown <52132406+glsdown@users.noreply.github.com> Co-authored-by: Tom Begley * flake8 config * List group updated to Bootstrap 5 (#647) * Updated list-group component * Updated list-group docs * Bug fixes * Tabs * Form * Form updates + examples * Checklist / RadioItems * Select * themes * BS5 updates for docs * Fix doc tests * InputGroup * Fix JS tests * Checkbox/Radio * format js * Modal * Modal docs * Fix format command * Card, Nav and Navbar (#648) * Monkeypatch doc tests * Card * Nav and NavBar Update to Collapse to remove navbar prop * fixed Card.test.js for Card body test * updated docs for Navbar example. Also updated julia and R snippets * updates to Navbar and Collapse after review * updated index for deleted NavbarCollapse * lint and black Co-authored-by: tcbegley * DropdownMenu * NavbarToggler * Tooltip+Popover * Consistent imports * Fix accordion tests * Initial breadcrumb component * Set accordion to first component * Format code * Update Breadcrumb * Snippet test fixes for breadcrumb * Popover - minor prop updates (#652) * Use size prop consistently Co-authored-by: glsdown <52132406+glsdown@users.noreply.github.com> Co-authored-by: AnnMarieW <72614349+AnnMarieW@users.noreply.github.com> --- R/themes.R | 12 +- dash_bootstrap_components/themes.py | 10 +- demo/Demo.js | 32 +- demo/index.html | 3 +- docs/components_page/__init__.py | 47 +- .../components/__tests__/helpers.py | 11 +- .../components/__tests__/test_accordion.py | 55 ++ .../components/__tests__/test_offcanvas.py | 197 +++++ .../components/__tests__/test_pagination.py | 67 ++ .../components/__tests__/test_snippets.py | 7 +- .../components/__tests__/wrappers.py | 1 + docs/components_page/components/accordion.md | 22 + .../components/accordion/collapsed.R | 22 + .../components/accordion/collapsed.jl | 21 + .../components/accordion/collapsed.py | 19 + .../components/accordion/flush.R | 22 + .../components/accordion/flush.jl | 21 + .../components/accordion/flush.py | 19 + .../components/accordion/simple.R | 38 + .../components/accordion/simple.jl | 36 + .../components/accordion/simple.py | 38 + .../components/alert/auto_dismiss.R | 2 +- .../components/alert/auto_dismiss.jl | 2 +- .../components/alert/auto_dismiss.py | 2 +- .../components/alert/dismiss.R | 2 +- .../components/alert/dismiss.jl | 2 +- .../components/alert/dismiss.py | 2 +- docs/components_page/components/badge/color.R | 14 +- .../components_page/components/badge/color.jl | 14 +- .../components_page/components/badge/color.py | 14 +- docs/components_page/components/badge/links.R | 14 +- .../components_page/components/badge/links.jl | 14 +- .../components_page/components/badge/links.py | 14 +- docs/components_page/components/badge/pills.R | 14 +- .../components_page/components/badge/pills.jl | 14 +- .../components_page/components/badge/pills.py | 14 +- .../components_page/components/badge/simple.R | 2 +- .../components/badge/simple.jl | 2 +- .../components/badge/simple.py | 2 +- docs/components_page/components/badge/size.R | 12 +- docs/components_page/components/badge/size.jl | 12 +- docs/components_page/components/badge/size.py | 12 +- docs/components_page/components/breadcrumb.md | 10 + .../components/breadcrumb/simple.R | 9 + .../components/breadcrumb/simple.jl | 9 + .../components/breadcrumb/simple.py | 13 + docs/components_page/components/button.md | 3 +- .../components/button/active_disabled.R | 4 +- .../components/button/active_disabled.jl | 4 +- .../components/button/active_disabled.py | 4 +- .../components_page/components/button/block.R | 9 +- .../components/button/block.jl | 9 +- .../components/button/block.py | 9 +- .../components/button/outline.R | 14 +- .../components/button/outline.jl | 14 +- .../components/button/outline.py | 14 +- .../components/button/simple.R | 16 +- .../components/button/simple.jl | 16 +- .../components/button/simple.py | 16 +- docs/components_page/components/button/size.R | 4 +- .../components_page/components/button/size.jl | 4 +- .../components_page/components/button/size.py | 4 +- .../components_page/components/button/usage.R | 2 +- .../components/button/usage.jl | 2 +- .../components/button/usage.py | 2 +- .../components/button_group/size.R | 4 +- .../components/button_group/size.jl | 4 +- .../components/button_group/size.py | 4 +- docs/components_page/components/card.md | 16 - .../components/card/layout/columns.R | 61 -- .../components/card/layout/columns.jl | 47 -- .../components/card/layout/columns.py | 61 -- .../components/card/layout/deck.R | 57 -- .../components/card/layout/deck.jl | 35 - .../components/card/layout/deck.py | 53 -- .../components/carousel/callback.py | 2 +- .../components/collapse/multiple.R | 4 +- .../components/collapse/multiple.jl | 4 +- .../components/collapse/multiple.py | 4 +- .../components/dropdown/size.R | 4 +- .../components/dropdown/size.jl | 4 +- .../components/dropdown/size.py | 4 +- .../components/dropdown/style.py | 1 - docs/components_page/components/form.md | 16 +- .../components/form/dash_core.py | 16 +- .../components/form/feedback.R | 4 +- .../components/form/feedback.jl | 4 +- .../components/form/feedback.py | 22 +- .../components/form/floating.py | 8 + docs/components_page/components/form/grid.R | 2 +- docs/components_page/components/form/grid.jl | 2 +- docs/components_page/components/form/grid.py | 38 +- docs/components_page/components/form/inline.R | 8 +- .../components_page/components/form/inline.jl | 8 +- .../components_page/components/form/inline.py | 30 +- docs/components_page/components/form/row.py | 12 +- .../components_page/components/form/simple.py | 11 +- docs/components_page/components/input.md | 6 +- .../components/input/colorpicker.py | 4 +- .../components/input/radio_check.py | 6 +- .../components/input/radio_check_inline.py | 7 +- .../input/radio_check_standalone.py | 6 +- docs/components_page/components/input/size.R | 6 +- docs/components_page/components/input/size.jl | 6 +- docs/components_page/components/input/size.py | 6 +- .../components/input/text_label.py | 3 +- .../components/input/textarea.R | 4 +- .../components/input/textarea.jl | 4 +- .../components/input/textarea.py | 4 +- .../components_page/components/input_group.md | 12 +- .../components/input_group/button.py | 5 +- .../components/input_group/check_radio.py | 12 +- .../components/input_group/dropdown.py | 6 +- .../components/input_group/simple.py | 15 +- .../components/input_group/size.py | 14 +- docs/components_page/components/jumbotron.md | 16 - .../components/jumbotron/fluid.R | 28 - .../components/jumbotron/fluid.jl | 22 - .../components/jumbotron/fluid.py | 24 - .../components/jumbotron/simple.R | 23 - .../components/jumbotron/simple.jl | 15 - .../components/jumbotron/simple.py | 19 - docs/components_page/components/layout.md | 6 +- .../components/layout/no_gutters.R | 2 +- .../components/layout/no_gutters.jl | 2 +- .../components/layout/no_gutters.py | 2 +- docs/components_page/components/list_group.md | 6 +- .../components/list_group/colors.py | 3 + .../components/list_group/content.R | 26 +- .../components/list_group/content.jl | 28 +- .../components/list_group/content.py | 27 +- docs/components_page/components/modal.md | 16 +- .../components/modal/backdrop.R | 2 +- .../components/modal/backdrop.jl | 2 +- .../components/modal/backdrop.py | 6 +- .../components/modal/centered.R | 2 +- .../components/modal/centered.jl | 2 +- .../components/modal/centered.py | 4 +- .../components/modal/dismiss.py | 36 + .../components/modal/fullscreen.py | 27 + .../components/modal/scrollable.R | 6 +- .../components/modal/scrollable.jl | 6 +- .../components/modal/scrollable.py | 10 +- .../components_page/components/modal/simple.R | 2 +- .../components/modal/simple.jl | 2 +- .../components/modal/simple.py | 4 +- docs/components_page/components/modal/size.R | 10 +- docs/components_page/components/modal/size.jl | 10 +- docs/components_page/components/modal/size.py | 50 +- docs/components_page/components/navbar.md | 1 + .../components/navbar/navbar.R | 9 +- .../components/navbar/navbar.jl | 11 +- .../components/navbar/navbar.py | 11 +- docs/components_page/components/offcanvas.md | 28 + .../components/offcanvas/backdrop.R | 68 ++ .../components/offcanvas/backdrop.jl | 69 ++ .../components/offcanvas/backdrop.py | 66 ++ .../components/offcanvas/placement.R | 86 +++ .../components/offcanvas/placement.jl | 72 ++ .../components/offcanvas/placement.py | 62 ++ .../components/offcanvas/scrollable.R | 44 ++ .../components/offcanvas/scrollable.jl | 38 + .../components/offcanvas/scrollable.py | 41 + .../components/offcanvas/simple.R | 34 + .../components/offcanvas/simple.jl | 26 + .../components/offcanvas/simple.py | 29 + docs/components_page/components/pagination.md | 30 + .../components/pagination/collapse.R | 11 + .../components/pagination/collapse.jl | 10 + .../components/pagination/collapse.py | 11 + .../components/pagination/navigation.R | 10 + .../components/pagination/navigation.jl | 9 + .../components/pagination/navigation.py | 10 + .../components/pagination/simple.R | 53 ++ .../components/pagination/simple.jl | 51 ++ .../components/pagination/simple.py | 37 + .../components/pagination/size.R | 21 + .../components/pagination/size.jl | 20 + .../components/pagination/size.py | 13 + .../components/popover/popover.R | 6 +- .../components/popover/popover.jl | 6 +- .../components/popover/popover.py | 6 +- .../components/popover/popover_callback.R | 2 +- .../components/popover/popover_callback.jl | 2 +- .../components/popover/popover_callback.py | 2 +- docs/components_page/components/progress.md | 4 +- .../components/progress/labels.R | 2 +- .../components/progress/labels.jl | 2 +- .../components/progress/labels.py | 2 +- .../components/progress/multiple.R | 3 +- .../components/progress/multiple.jl | 7 +- .../components/progress/multiple.py | 3 +- .../components/spinner/button.R | 2 +- .../components/spinner/button.jl | 2 +- .../components/spinner/button.py | 2 +- docs/components_page/components/tabs.md | 2 +- docs/components_page/components/tabs/card.R | 1 - docs/components_page/components/tabs/card.jl | 1 - docs/components_page/components/tabs/card.py | 1 - docs/components_page/components/tabs/style.R | 2 +- docs/components_page/components/tabs/style.jl | 2 +- docs/components_page/components/tabs/style.py | 2 +- docs/demos/__init__.py | 4 + docs/demos/theme_explorer/__init__.py | 2 - docs/demos/theme_explorer/badge.py | 28 +- docs/demos/theme_explorer/button.py | 36 +- docs/demos/theme_explorer/card.py | 2 +- docs/demos/theme_explorer/form.py | 4 +- docs/demos/theme_explorer/input.py | 20 +- docs/demos/theme_explorer/jumbotron.py | 18 - docs/demos/theme_explorer/list_group.py | 4 +- docs/demos/theme_explorer/util.py | 2 +- docs/run.py | 45 +- docs/server.py | 4 +- docs/static/docs.css | 8 +- docs/templates/macros/example-navbar.html | 4 +- docs/templates/macros/navbar.html | 6 +- docs/templates/macros/sidenav.html | 2 +- docs/templates/macros/theme-demo.html | 2 +- .../macros/theme-explorer-navbar.html | 4 +- docs/templates/partials/head.html | 5 +- docs/templates/partials/scripts.html | 14 +- docs/templates/theme-explorer.html | 6 +- examples/R-components/alert.R | 164 ---- examples/components.py | 672 ----------------- .../graphs_in_tabs.py | 1 - examples/python/gallery/faithful/app.py | 4 +- examples/python/gallery/iris-kmeans/app.py | 6 +- .../gallery/telephones-by-region/app.py | 2 +- examples/python/gallery/wordcloud/app.py | 8 +- jl/themes.jl | 12 +- package-lock.json | 553 ++++++++++---- package.json | 8 +- setup.cfg | 8 + src/components/Alert.js | 13 +- src/components/Badge.js | 20 +- src/components/Breadcrumb.js | 154 ++++ src/components/Button.js | 17 +- src/components/ButtonGroup.js | 6 +- src/components/Carousel.js | 126 +--- src/components/Collapse.js | 22 +- src/components/Fade.js | 25 +- src/components/Jumbotron.js | 84 --- src/components/Offcanvas.js | 141 ++++ src/components/Pagination.js | 214 ++++++ src/components/Progress.js | 72 +- src/components/Spinner.js | 11 +- src/components/Table.js | 30 +- src/components/Toast.js | 53 +- src/components/Tooltip.js | 98 +-- src/components/__tests__/Alert.test.js | 16 +- src/components/__tests__/Badge.test.js | 22 +- src/components/__tests__/Breadcrumb.test.js | 59 ++ src/components/__tests__/Button.test.js | 27 +- src/components/__tests__/ButtonGroup.test.js | 6 +- src/components/__tests__/Carousel.test.js | 34 +- src/components/__tests__/Collapse.test.js | 24 +- src/components/__tests__/Fade.test.js | 24 +- src/components/__tests__/Jumbotron.test.js | 25 - src/components/__tests__/Label.test.js | 16 +- src/components/__tests__/Offcanvas.test.js | 129 ++++ src/components/__tests__/Pagination.test.js | 188 +++++ src/components/__tests__/Progress.test.js | 37 +- src/components/__tests__/Spinner.test.js | 26 +- src/components/__tests__/Table.test.js | 26 +- src/components/__tests__/Toast.test.js | 18 +- src/components/__tests__/Tooltip.test.js | 42 +- src/components/accordion/Accordion.js | 210 ++++++ src/components/accordion/AccordionItem.js | 66 ++ .../accordion/__tests__/Accordion.test.js | 128 ++++ src/components/card/Card.js | 18 +- src/components/card/CardBody.js | 12 +- src/components/card/CardDeck.js | 85 --- src/components/card/CardFooter.js | 12 +- src/components/card/CardGroup.js | 12 +- src/components/card/CardHeader.js | 12 +- src/components/card/CardImg.js | 12 +- src/components/card/CardImgOverlay.js | 12 +- src/components/card/CardLink.js | 18 +- src/components/card/__tests__/Card.test.js | 18 +- .../card/__tests__/CardColumns.test.js | 23 - .../card/__tests__/CardDeck.test.js | 17 - src/components/dropdownmenu/DropdownMenu.js | 48 +- .../dropdownmenu/DropdownMenuItem.js | 38 +- .../__tests__/DropdownMenu.test.js | 56 +- .../__tests__/DropdownMenuItem.test.js | 17 +- src/components/form/Form.js | 25 +- src/components/form/FormFeedback.js | 17 +- .../CardColumns.js => form/FormFloating.js} | 37 +- src/components/form/FormGroup.js | 102 --- src/components/form/FormText.js | 20 +- src/components/{ => form}/Label.js | 36 +- src/components/form/__tests__/Form.test.js | 8 +- .../form/__tests__/FormFeedback.test.js | 12 +- .../form/__tests__/FormGroup.test.js | 25 - .../form/__tests__/FormText.test.js | 6 +- src/components/input/Checkbox.js | 26 +- src/components/input/Checklist.js | 158 ++-- src/components/input/Input.js | 11 +- src/components/input/InputGroup.js | 12 +- src/components/input/InputGroupAddon.js | 133 ---- src/components/input/InputGroupText.js | 12 +- src/components/input/RadioButton.js | 28 +- src/components/input/RadioItems.js | 139 ++-- src/components/input/Select.js | 40 +- src/components/input/Textarea.js | 40 +- .../input/__tests__/Checkbox.test.js | 15 +- .../input/__tests__/Checklist.test.js | 708 ++++++------------ src/components/input/__tests__/Input.test.js | 2 +- .../input/__tests__/InputGroup.test.js | 8 +- .../input/__tests__/InputGroupAddon.test.js | 69 -- .../input/__tests__/InputGroupText.test.js | 2 +- .../input/__tests__/RadioButton.test.js | 10 +- .../input/__tests__/RadioItems.test.js | 708 ++++++------------ src/components/input/__tests__/Select.test.js | 37 +- .../input/__tests__/Textarea.test.js | 21 +- src/components/layout/Col.js | 49 +- src/components/layout/Container.js | 29 +- src/components/layout/Row.js | 30 +- src/components/layout/__tests__/Col.test.js | 26 +- .../layout/__tests__/Container.test.js | 8 +- src/components/layout/__tests__/Row.test.js | 18 +- src/components/listgroup/ListGroup.js | 28 +- src/components/listgroup/ListGroupItem.js | 20 +- .../listgroup/ListGroupItemHeading.js | 85 --- src/components/listgroup/ListGroupItemText.js | 107 --- .../listgroup/__tests__/ListGroup.test.js | 4 +- .../listgroup/__tests__/ListGroupItem.test.js | 6 +- .../__tests__/ListGroupItemHeading.test.js | 45 -- .../__tests__/ListGroupItemText.test.js | 37 - src/components/modal/Modal.js | 47 +- src/components/modal/ModalBody.js | 13 +- src/components/modal/ModalFooter.js | 13 +- src/components/modal/ModalHeader.js | 30 +- src/components/modal/ModalTitle.js | 57 ++ .../modal/__tests__/ModalTitle.test.js | 21 + src/components/nav/Nav.js | 58 +- src/components/nav/NavItem.js | 17 +- src/components/nav/NavLink.js | 16 +- src/components/nav/Navbar.js | 29 +- src/components/nav/NavbarBrand.js | 14 +- src/components/nav/NavbarSimple.js | 31 +- src/components/nav/NavbarToggler.js | 16 +- src/components/nav/__tests__/Nav.test.js | 26 +- src/components/nav/__tests__/NavItem.test.js | 12 +- src/components/nav/__tests__/NavLink.test.js | 4 +- src/components/nav/__tests__/Navbar.test.js | 34 +- .../nav/__tests__/NavbarBrand.test.js | 2 +- .../nav/__tests__/NavbarSimple.test.js | 38 +- src/components/popover/Popover.js | 65 +- src/components/popover/PopoverBody.js | 12 +- src/components/popover/PopoverHeader.js | 12 +- .../popover/__tests__/Popover.test.js | 27 +- src/components/tabs/Tab.js | 8 +- src/components/tabs/Tabs.js | 61 +- src/components/tabs/__tests__/Tabs.test.js | 7 +- src/index.js | 19 +- src/private/CustomInput.js | 110 --- src/private/Overlay.js | 148 ++++ tasks.py | 2 +- 360 files changed, 6044 insertions(+), 5379 deletions(-) create mode 100644 docs/components_page/components/__tests__/test_accordion.py create mode 100644 docs/components_page/components/__tests__/test_offcanvas.py create mode 100644 docs/components_page/components/__tests__/test_pagination.py create mode 100644 docs/components_page/components/accordion.md create mode 100644 docs/components_page/components/accordion/collapsed.R create mode 100644 docs/components_page/components/accordion/collapsed.jl create mode 100644 docs/components_page/components/accordion/collapsed.py create mode 100644 docs/components_page/components/accordion/flush.R create mode 100644 docs/components_page/components/accordion/flush.jl create mode 100644 docs/components_page/components/accordion/flush.py create mode 100644 docs/components_page/components/accordion/simple.R create mode 100644 docs/components_page/components/accordion/simple.jl create mode 100644 docs/components_page/components/accordion/simple.py create mode 100644 docs/components_page/components/breadcrumb.md create mode 100644 docs/components_page/components/breadcrumb/simple.R create mode 100644 docs/components_page/components/breadcrumb/simple.jl create mode 100644 docs/components_page/components/breadcrumb/simple.py delete mode 100644 docs/components_page/components/card/layout/columns.R delete mode 100644 docs/components_page/components/card/layout/columns.jl delete mode 100644 docs/components_page/components/card/layout/columns.py delete mode 100644 docs/components_page/components/card/layout/deck.R delete mode 100644 docs/components_page/components/card/layout/deck.jl delete mode 100644 docs/components_page/components/card/layout/deck.py create mode 100644 docs/components_page/components/form/floating.py delete mode 100644 docs/components_page/components/jumbotron.md delete mode 100644 docs/components_page/components/jumbotron/fluid.R delete mode 100644 docs/components_page/components/jumbotron/fluid.jl delete mode 100644 docs/components_page/components/jumbotron/fluid.py delete mode 100644 docs/components_page/components/jumbotron/simple.R delete mode 100644 docs/components_page/components/jumbotron/simple.jl delete mode 100644 docs/components_page/components/jumbotron/simple.py create mode 100644 docs/components_page/components/modal/dismiss.py create mode 100644 docs/components_page/components/modal/fullscreen.py create mode 100644 docs/components_page/components/offcanvas.md create mode 100644 docs/components_page/components/offcanvas/backdrop.R create mode 100644 docs/components_page/components/offcanvas/backdrop.jl create mode 100644 docs/components_page/components/offcanvas/backdrop.py create mode 100644 docs/components_page/components/offcanvas/placement.R create mode 100644 docs/components_page/components/offcanvas/placement.jl create mode 100644 docs/components_page/components/offcanvas/placement.py create mode 100644 docs/components_page/components/offcanvas/scrollable.R create mode 100644 docs/components_page/components/offcanvas/scrollable.jl create mode 100644 docs/components_page/components/offcanvas/scrollable.py create mode 100644 docs/components_page/components/offcanvas/simple.R create mode 100644 docs/components_page/components/offcanvas/simple.jl create mode 100644 docs/components_page/components/offcanvas/simple.py create mode 100644 docs/components_page/components/pagination.md create mode 100644 docs/components_page/components/pagination/collapse.R create mode 100644 docs/components_page/components/pagination/collapse.jl create mode 100644 docs/components_page/components/pagination/collapse.py create mode 100644 docs/components_page/components/pagination/navigation.R create mode 100644 docs/components_page/components/pagination/navigation.jl create mode 100644 docs/components_page/components/pagination/navigation.py create mode 100644 docs/components_page/components/pagination/simple.R create mode 100644 docs/components_page/components/pagination/simple.jl create mode 100644 docs/components_page/components/pagination/simple.py create mode 100644 docs/components_page/components/pagination/size.R create mode 100644 docs/components_page/components/pagination/size.jl create mode 100644 docs/components_page/components/pagination/size.py delete mode 100644 docs/demos/theme_explorer/jumbotron.py delete mode 100644 examples/R-components/alert.R delete mode 100644 examples/components.py create mode 100644 src/components/Breadcrumb.js delete mode 100644 src/components/Jumbotron.js create mode 100644 src/components/Offcanvas.js create mode 100644 src/components/Pagination.js create mode 100644 src/components/__tests__/Breadcrumb.test.js delete mode 100644 src/components/__tests__/Jumbotron.test.js create mode 100644 src/components/__tests__/Offcanvas.test.js create mode 100644 src/components/__tests__/Pagination.test.js create mode 100644 src/components/accordion/Accordion.js create mode 100644 src/components/accordion/AccordionItem.js create mode 100644 src/components/accordion/__tests__/Accordion.test.js delete mode 100644 src/components/card/CardDeck.js delete mode 100644 src/components/card/__tests__/CardColumns.test.js delete mode 100644 src/components/card/__tests__/CardDeck.test.js rename src/components/{card/CardColumns.js => form/FormFloating.js} (74%) delete mode 100644 src/components/form/FormGroup.js rename src/components/{ => form}/Label.js (88%) delete mode 100644 src/components/form/__tests__/FormGroup.test.js delete mode 100644 src/components/input/InputGroupAddon.js delete mode 100644 src/components/input/__tests__/InputGroupAddon.test.js delete mode 100644 src/components/listgroup/ListGroupItemHeading.js delete mode 100644 src/components/listgroup/ListGroupItemText.js delete mode 100644 src/components/listgroup/__tests__/ListGroupItemHeading.test.js delete mode 100644 src/components/listgroup/__tests__/ListGroupItemText.test.js create mode 100644 src/components/modal/ModalTitle.js create mode 100644 src/components/modal/__tests__/ModalTitle.test.js delete mode 100644 src/private/CustomInput.js create mode 100644 src/private/Overlay.js diff --git a/R/themes.R b/R/themes.R index 779d5cb4..ff647ccf 100644 --- a/R/themes.R +++ b/R/themes.R @@ -1,12 +1,12 @@ .prependBootswatch <- function(suffix) { - BOOTSWATCH_BASE <- "https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/" + BOOTSWATCH_BASE <- "https://cdn.jsdelivr.net/npm/bootswatch@5.1.0/dist/" return(paste(BOOTSWATCH_BASE, suffix, sep="")) } #' @export' dbcThemes <- list( - BOOTSTRAP = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css", - GRID = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap-grid.min.css", + BOOTSTRAP = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css", + GRID = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap-grid.min.css", CERULEAN = .prependBootswatch("cerulean/bootstrap.min.css"), COSMO = .prependBootswatch("cosmo/bootstrap.min.css"), CYBORG = .prependBootswatch("cyborg/bootstrap.min.css"), @@ -18,7 +18,9 @@ dbcThemes <- list( LUX = .prependBootswatch("lux/bootstrap.min.css"), MATERIA = .prependBootswatch("materia/bootstrap.min.css"), MINTY = .prependBootswatch("minty/bootstrap.min.css"), + MORPH = .prependBootswatch("morph/bootstrap.min.css"), PULSE = .prependBootswatch("pulse/bootstrap.min.css"), + QUARTZ = .prependBootswatch("quartz/bootstrap.min.css"), SANDSTONE = .prependBootswatch("sandstone/bootstrap.min.css"), SIMPLEX = .prependBootswatch("simplex/bootstrap.min.css"), SKETCHY = .prependBootswatch("sketchy/bootstrap.min.css"), @@ -27,5 +29,7 @@ dbcThemes <- list( SPACELAB = .prependBootswatch("spacelab/bootstrap.min.css"), SUPERHERO = .prependBootswatch("superhero/bootstrap.min.css"), UNITED = .prependBootswatch("united/bootstrap.min.css"), - YETI = .prependBootswatch("yeti/bootstrap.min.css") + VAPOR = .prependBootswatch("vapor/bootstrap.min.css"), + YETI = .prependBootswatch("yeti/bootstrap.min.css"), + ZEPHYR = .prependBootswatch("zephyr/bootstrap.min.css") ) diff --git a/dash_bootstrap_components/themes.py b/dash_bootstrap_components/themes.py index ddd280f3..fcfacc46 100644 --- a/dash_bootstrap_components/themes.py +++ b/dash_bootstrap_components/themes.py @@ -1,10 +1,10 @@ BOOTSTRAP = ( - "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" + "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" ) -GRID = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap-grid.min.css" # noqa +GRID = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap-grid.min.css" # noqa -_BOOTSWATCH_BASE = "https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/" +_BOOTSWATCH_BASE = "https://cdn.jsdelivr.net/npm/bootswatch@5.1.0/dist/" CERULEAN = _BOOTSWATCH_BASE + "cerulean/bootstrap.min.css" COSMO = _BOOTSWATCH_BASE + "cosmo/bootstrap.min.css" @@ -17,7 +17,9 @@ LUX = _BOOTSWATCH_BASE + "lux/bootstrap.min.css" MATERIA = _BOOTSWATCH_BASE + "materia/bootstrap.min.css" MINTY = _BOOTSWATCH_BASE + "minty/bootstrap.min.css" +MORPH = _BOOTSWATCH_BASE + "morph/bootstrap.min.css" PULSE = _BOOTSWATCH_BASE + "pulse/bootstrap.min.css" +QUARTZ = _BOOTSWATCH_BASE + "quartz/bootstrap.min.css" SANDSTONE = _BOOTSWATCH_BASE + "sandstone/bootstrap.min.css" SIMPLEX = _BOOTSWATCH_BASE + "simplex/bootstrap.min.css" SKETCHY = _BOOTSWATCH_BASE + "sketchy/bootstrap.min.css" @@ -26,4 +28,6 @@ SPACELAB = _BOOTSWATCH_BASE + "spacelab/bootstrap.min.css" SUPERHERO = _BOOTSWATCH_BASE + "superhero/bootstrap.min.css" UNITED = _BOOTSWATCH_BASE + "united/bootstrap.min.css" +VAPOR = _BOOTSWATCH_BASE + "vapor/bootstrap.min.css" YETI = _BOOTSWATCH_BASE + "yeti/bootstrap.min.css" +ZEPHYR = _BOOTSWATCH_BASE + "zephyr/bootstrap.min.css" diff --git a/demo/Demo.js b/demo/Demo.js index f0a108ed..1f104446 100644 --- a/demo/Demo.js +++ b/demo/Demo.js @@ -202,8 +202,8 @@ const Demo = () => ( Header -
This card has a header
-

And some text in the body

+
This card has a header
+

And some text in the body

 Footer @@ -215,16 +215,16 @@ const Demo = () => ( src="https://images.pexels.com/photos/457882/pexels-photo-457882.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350" /> -
Card with image
-

This card has an image

+
Card with image
+

This card has an image

 -
Here's another card
-

With some text, and a button

+
Here's another card
+

With some text, and a button

 @@ -232,8 +232,8 @@ const Demo = () => ( -
Here's yet another card
-

With some text, and some links

+
Here's yet another card
+

With some text, and some links

External @@ -247,8 +247,8 @@ const Demo = () => ( -
The first card
-

+

The first card
+

This is a card with some text on it, it's the first one in the deck.

@@ -256,8 +256,8 @@ const Demo = () => ( -
The second card
-

+

The second card
+

This is a card with some text on it, it's the second one in the deck. It has a bit more text in it so that we can see how the vertical spacing will work. @@ -266,9 +266,9 @@ const Demo = () => ( -

The third card
-
...and the last :(
-

This card doesn't have much text...

+
The third card
+
...and the last :(
+

This card doesn't have much text...

 @@ -365,7 +365,7 @@ const Demo = () => ( -

This content fades in and out

+

This content fades in and out

 diff --git a/demo/index.html b/demo/index.html index e5aba3d1..d43bd52c 100644 --- a/demo/index.html +++ b/demo/index.html @@ -6,8 +6,7 @@ diff --git a/docs/components_page/__init__.py b/docs/components_page/__init__.py index ce5bc8f2..2adc2721 100644 --- a/docs/components_page/__init__.py +++ b/docs/components_page/__init__.py @@ -3,12 +3,46 @@ import dash import dash_bootstrap_components as dbc +import dash_core_components as dcc import dash_html_components as html from jinja2 import Environment, FileSystemLoader -from .components.table.simple import table_body, table_header -from .components.tabs.simple import tab1_content, tab2_content -from .markdown_parser import parse + +# TODO: delete once Dash 2.0 is released +def class_name_shim(fn): + def new_init(self, *args, **kwargs): + kwargs["className"] = kwargs.get("class_name", kwargs.get("className")) + return fn( + self, + *args, + **{k: v for k, v in kwargs.items() if k != "class_name"}, + ) + + return new_init + + +for component in [ + dcc.Markdown, + html.A, + html.Blockquote, + html.Div, + html.H1, + html.H2, + html.H3, + html.H4, + html.H5, + html.H6, + html.Hr, + html.I, + html.P, + html.Small, +]: + component.__init__ = class_name_shim(component.__init__) + + +from .components.table.simple import table_body, table_header # noqa +from .components.tabs.simple import tab1_content, tab2_content # noqa +from .markdown_parser import parse # noqa SERVE_LOCALLY = os.getenv("DBC_DOCS_MODE", "production") == "dev" @@ -59,8 +93,10 @@ def _get_label(slug): def register_apps(): component_bodies = { + "accordion": {"markdown_path": COMPONENTS / "accordion.md"}, "alert": {"markdown_path": COMPONENTS / "alert.md"}, "badge": {"markdown_path": COMPONENTS / "badge.md"}, + "breadcrumb": {"markdown_path": COMPONENTS / "breadcrumb.md"}, "button": {"markdown_path": COMPONENTS / "button.md"}, "button_group": {"markdown_path": COMPONENTS / "button_group.md"}, "card": {"markdown_path": COMPONENTS / "card.md"}, @@ -71,7 +107,6 @@ def register_apps(): "form": {"markdown_path": COMPONENTS / "form.md"}, "input": {"markdown_path": COMPONENTS / "input.md"}, "input_group": {"markdown_path": COMPONENTS / "input_group.md"}, - "jumbotron": {"markdown_path": COMPONENTS / "jumbotron.md"}, "layout": {"markdown_path": COMPONENTS / "layout.md"}, "list_group": {"markdown_path": COMPONENTS / "list_group.md"}, "modal": { @@ -80,6 +115,10 @@ def register_apps(): }, "nav": {"markdown_path": COMPONENTS / "nav.md"}, "navbar": {"markdown_path": COMPONENTS / "navbar.md"}, + "offcanvas": { + "markdown_path": COMPONENTS / "offcanvas.md", + }, + "pagination": {"markdown_path": COMPONENTS / "pagination.md"}, "popover": {"markdown_path": COMPONENTS / "popover.md"}, "progress": {"markdown_path": COMPONENTS / "progress.md"}, "spinner": {"markdown_path": COMPONENTS / "spinner.md"}, diff --git a/docs/components_page/components/__tests__/helpers.py b/docs/components_page/components/__tests__/helpers.py index 20296cb1..a085be6b 100644 --- a/docs/components_page/components/__tests__/helpers.py +++ b/docs/components_page/components/__tests__/helpers.py @@ -8,7 +8,8 @@ def py_source_to_app(py_source, env): Create a Dash app from a string defining the app. """ env = env or {} - exec(py_source, env) + # TODO: remove class_name modifiers + exec(py_source.replace("class_name", "className"), env) return env["app"] @@ -56,7 +57,9 @@ def load_r_app(path, component_name): snippet=path.read_text(), components=component_name, port=8050, - ) + ).replace( + "class_name", "className" + ) # TODO: remove this in future def load_jl_app(path, component_name): @@ -64,4 +67,6 @@ def load_jl_app(path, component_name): snippet=path.read_text(), components=component_name, port=8050, - ) + ).replace( + "class_name", "className" + ) # 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 new file mode 100644 index 00000000..5e668dcf --- /dev/null +++ b/docs/components_page/components/__tests__/test_accordion.py @@ -0,0 +1,55 @@ +""" +Testing of callbacks in non-Python Accordion snippets. +""" +from pathlib import Path + +import dash.testing.wait as wait + +from .helpers import load_jl_app, load_r_app + +HERE = Path(__file__).parent + + +def test_r_simple(dashr): + r_app = load_r_app((HERE.parent / "accordion" / "simple.R"), "accordion") + dashr.start_server(r_app) + check_simple_callbacks(dashr) + + +def test_jl_simple(dashjl): + jl_app = load_jl_app( + (HERE.parent / "accordion" / "simple.jl"), "accordion" + ) + with open("app.jl", "w") as f: + f.write(jl_app) + dashjl.start_server(jl_app) + check_simple_callbacks(dashjl) + + +def check_simple_callbacks(runner): + # Find the accordion object + accordion_comp = runner.find_element("#accordion") + accordion_text = runner.find_element("#accordion-contents") + + # Check it has 3 accordion-items in it + items = accordion_comp.find_elements_by_class_name("accordion-item") + wait.until( + lambda: len(items) == 3, + timeout=4, + ) + + # Click the third section + items[2].find_element_by_class_name("accordion-button").click() + + # Check the text in contents changes to "Item selected: item-3" + wait.until( + lambda: accordion_text.text == "Item selected: item-3", + timeout=4, + ) + + # Check that the right section is showing + item = accordion_comp.find_element_by_class_name("show") + wait.until( + lambda: item.text == "This is the content of the third section", + timeout=4, + ) diff --git a/docs/components_page/components/__tests__/test_offcanvas.py b/docs/components_page/components/__tests__/test_offcanvas.py new file mode 100644 index 00000000..eed09c1b --- /dev/null +++ b/docs/components_page/components/__tests__/test_offcanvas.py @@ -0,0 +1,197 @@ +""" +Testing of callbacks in non-Python Offcanvas snippets. +""" +from pathlib import Path + +import dash.testing.wait as wait + +from .helpers import load_jl_app, load_r_app + +HERE = Path(__file__).parent + + +def test_r_offcanvas_simple(dashr): + r_app = load_r_app((HERE.parent / "offcanvas" / "simple.R"), "offcanvas") + dashr.start_server(r_app) + check_offcanvas_simple_callbacks(dashr) + + +def test_jl_offcanvas_simple(dashjl): + jl_app = load_jl_app( + (HERE.parent / "offcanvas" / "simple.jl"), "offcanvas" + ) + dashjl.start_server(jl_app) + check_offcanvas_simple_callbacks(dashjl) + + +def check_offcanvas_simple_callbacks(runner): + runner.find_element("#open-offcanvas").click() + wait.until( + lambda: len(runner.find_elements(".offcanvas")) != 0, + timeout=4, + ) + + # When offcanvas-header.btn-close is clicked, the offcanvas disappears + runner.find_element(".offcanvas-header .btn-close").click() + wait.until( + lambda: len(runner.find_elements(".offcanvas")) == 0, + timeout=4, + ) + + runner.find_element("#open-offcanvas").click() + wait.until( + lambda: len(runner.find_elements(".offcanvas")) != 0, + timeout=4, + ) + + # When modal-backdrop (to change to offcanvas-backdrop) is clicked, + # the offcanvas disappears + # TODO: Once react-bootstrap has fixed this, need to change to + # offcanvas-backdrop + runner.find_element(".modal-backdrop").click() + wait.until( + lambda: len(runner.find_elements(".offcanvas")) == 0, + timeout=4, + ) + + +# ------------------------------ + + +def test_r_offcanvas_backdrop(dashr): + r_app = load_r_app((HERE.parent / "offcanvas" / "backdrop.R"), "offcanvas") + dashr.start_server(r_app) + check_offcanvas_backdrop_callbacks(dashr) + + +def test_jl_offcanvas_backdrop(dashjl): + jl_app = load_jl_app( + (HERE.parent / "offcanvas" / "backdrop.jl"), "offcanvas" + ) + dashjl.start_server(jl_app) + check_offcanvas_backdrop_callbacks(dashjl) + + +def check_offcanvas_backdrop_callbacks(runner): + runner.find_element("#open-offcanvas-backdrop").click() + wait.until( + lambda: len(runner.find_elements(".offcanvas")) != 0, + timeout=4, + ) + + runner.find_element("#offcanvas-backdrop-selector").selectByValue(False) + wait.until( + # TODO: Once react-bootstrap has fixed this, need to change to + # offcanvas-backdrop + lambda: len(runner.find_elements(".modal-backdrop")) == 0, + timeout=4, + ) + + runner.find_element("#offcanvas-backdrop-selector").selectByValue(True) + wait.until( + # TODO: Once react-bootstrap has fixed this, need to change to + # offcanvas-backdrop + lambda: len(runner.find_elements(".modal-backdrop")) != 0, + timeout=4, + ) + + runner.find_element("#offcanvas-backdrop-selector").selectByValue(False) + wait.until( + # TODO: Once react-bootstrap has fixed this, need to change to + # offcanvas-backdrop + lambda: len(runner.find_elements(".modal-backdrop")) == 0, + timeout=4, + ) + + runner.find_element("#offcanvas-backdrop-selector").selectByValue("static") + wait.until( + # TODO: Once react-bootstrap has fixed this, need to change to + # offcanvas-backdrop + lambda: len(runner.find_elements(".modal-backdrop")) != 0, + timeout=4, + ) + + runner.find_element("#close-offcanvas-backdrop").click() + wait.until( + lambda: len(runner.find_elements(".offcanvas")) == 0, + timeout=4, + ) + + +# ------------------------------ + + +def test_r_offcanvas_scrollable(dashr): + r_app = load_r_app( + (HERE.parent / "offcanvas" / "scrollable.R"), "offcanvas" + ) + dashr.start_server(r_app) + check_offcanvas_scrollable_callbacks(dashr) + + +def test_jl_offcanvas_scrollable(dashjl): + jl_app = load_jl_app( + (HERE.parent / "offcanvas" / "scrollable.jl"), "offcanvas" + ) + dashjl.start_server(jl_app) + check_offcanvas_scrollable_callbacks(dashjl) + + +def check_offcanvas_scrollable_callbacks(runner): + import time + + time.sleep(3) + runner.find_element("#open-offcanvas-scrollable").click() + wait.until( + lambda: len(runner.find_elements(".offcanvas")) != 0, + timeout=4, + ) + + runner.find_element("#close-offcanvas-scrollable").click() + wait.until( + lambda: len(runner.find_elements(".offcanvas")) == 0, + timeout=4, + ) + + +# ------------------------------ + + +def test_r_offcanvas_placement(dashr): + r_app = load_r_app( + (HERE.parent / "offcanvas" / "placement.R"), "offcanvas" + ) + dashr.start_server(r_app) + check_offcanvas_placement_callbacks(dashr) + + +def test_jl_offcanvas_placement(dashjl): + jl_app = load_jl_app( + (HERE.parent / "offcanvas" / "placement.jl"), "offcanvas" + ) + dashjl.start_server(jl_app) + check_offcanvas_placement_callbacks(dashjl) + + +def check_offcanvas_placement_callbacks(runner): + runner.find_element("#open-offcanvas-placement").click() + wait.until( + lambda: len(runner.find_elements(".offcanvas")) != 0, + timeout=4, + ) + + # Changing placement + for option in ["end", "top", "bottom", "start"]: + runner.find_element("#offcanvas-placement-selector").selectByValue( + option + ) + wait.until( + lambda: len(runner.find_elements(f".offcanvas-{option}")) != 0, + timeout=4, + ) + + runner.find_element("#close-offcanvas-placement").click() + wait.until( + lambda: len(runner.find_elements(".offcanvas")) == 0, + timeout=4, + ) diff --git a/docs/components_page/components/__tests__/test_pagination.py b/docs/components_page/components/__tests__/test_pagination.py new file mode 100644 index 00000000..298e0eb3 --- /dev/null +++ b/docs/components_page/components/__tests__/test_pagination.py @@ -0,0 +1,67 @@ +""" +Testing of callbacks in non-Python Pagination snippets. +""" +from pathlib import Path + +import dash.testing.wait as wait + +from .helpers import load_jl_app, load_r_app + +HERE = Path(__file__).parent + + +def test_r_pagination_simple(dashr): + r_app = load_r_app((HERE.parent / "pagination" / "simple.R"), "pagination") + dashr.start_server(r_app) + check_pagination_simple_callbacks(dashr) + + +def test_jl_pagination_simple(dashjl): + jl_app = load_jl_app( + (HERE.parent / "pagination" / "simple.jl"), "pagination" + ) + dashjl.start_server(jl_app) + check_pagination_simple_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") + + # Check it has 10 page-items objects in it + pages = pagination_comp.find_elements(".page-item") + wait.until( + lambda: len(pages) == 10, + timeout=4, + ) + + # Click the link with text 7 + wait.until( + lambda: pages[6].text == "7", + timeout=4, + ) + pages[6].click() + + # Check the text in contents changes to "Page selected: 7" + wait.until( + lambda: pagination_text.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 + ) + + # Check the text in contents changes to "Page selected: 5" + wait.until( + lambda: pagination_text.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") diff --git a/docs/components_page/components/__tests__/test_snippets.py b/docs/components_page/components/__tests__/test_snippets.py index 63ec1863..20a77407 100644 --- a/docs/components_page/components/__tests__/test_snippets.py +++ b/docs/components_page/components/__tests__/test_snippets.py @@ -27,7 +27,7 @@ ENVS = { "modal.md": { "LOREM": (HERE.parent / "modal" / "lorem.txt").read_text().strip() - } + }, } R_PORT = 8051 @@ -130,13 +130,14 @@ def assert_layouts_equal( py_runner.start(app, port=py_port) py_layout = requests.get(f"{py_runner.url}/_dash-layout").json() - # Get other language snippet layout runner.start( wrapper.format( snippet="\n".join(x[1] for x in compare), components=", ".join(x[2] for x in compare), port=port, - ) + ).replace( + "class_name", "className" + ) # TODO: remove ) layout = requests.get(f"{runner.url}/_dash-layout").json() diff --git a/docs/components_page/components/__tests__/wrappers.py b/docs/components_page/components/__tests__/wrappers.py index 1def1a34..ebf738d9 100644 --- a/docs/components_page/components/__tests__/wrappers.py +++ b/docs/components_page/components/__tests__/wrappers.py @@ -1,6 +1,7 @@ PY_WRAPPER = """ import dash import dash_bootstrap_components as dbc +import dash_html_components as html app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP]) diff --git a/docs/components_page/components/accordion.md b/docs/components_page/components/accordion.md new file mode 100644 index 00000000..d051b57d --- /dev/null +++ b/docs/components_page/components/accordion.md @@ -0,0 +1,22 @@ +--- +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`. + +{{example:components/accordion/simple.py:accordion}} + +## Start Collapsed + +You can set which item is opened when it is first started using the `active_item` property. If this is not defined, the first item will be open by default. If you want no items to be open on start up, you can specify `start_collapsed=True`. + +{{example:components/accordion/collapsed.py:accordion}} + +## Flush + +Add flush to change some of the styling, including removing borders, and rounding some of the edges to fit in line with the parent container. + +{{example:components/accordion/flush.py:accordion}} + +{{apidoc:src/components/accordion/Accordion.js}} diff --git a/docs/components_page/components/accordion/collapsed.R b/docs/components_page/components/accordion/collapsed.R new file mode 100644 index 00000000..f8043b39 --- /dev/null +++ b/docs/components_page/components/accordion/collapsed.R @@ -0,0 +1,22 @@ +library(dashBootstrapComponents) +library(dashHtmlComponents) + +accordion <- htmlDiv( + dbcAccordion( + list( + dbcAccordionItem( + "This is the content of the first section", + title = "Item 1" + ), + dbcAccordionItem( + "This is the content of the second section", + title = "Item 2" + ), + dbcAccordionItem( + "This is the content of the third section", + title = "Item 3" + ) + ), + start_collapsed = TRUE + ) +) diff --git a/docs/components_page/components/accordion/collapsed.jl b/docs/components_page/components/accordion/collapsed.jl new file mode 100644 index 00000000..faca13d5 --- /dev/null +++ b/docs/components_page/components/accordion/collapsed.jl @@ -0,0 +1,21 @@ +using DashBootstrapComponents, DashHtmlComponents + +accordion = html_div( + dbc_accordion( + [ + dbc_accordionitem( + "This is the content of the first section", + title="Item 1", + ), + dbc_accordionitem( + "This is the content of the second section", + title="Item 2", + ), + dbc_accordionitem( + "This is the content of the third section", + title="Item 3", + ), + ], + start_collapsed=true, + ), +) diff --git a/docs/components_page/components/accordion/collapsed.py b/docs/components_page/components/accordion/collapsed.py new file mode 100644 index 00000000..d5ed5803 --- /dev/null +++ b/docs/components_page/components/accordion/collapsed.py @@ -0,0 +1,19 @@ +import dash_bootstrap_components as dbc +import dash_html_components as html + +accordion = html.Div( + dbc.Accordion( + [ + dbc.AccordionItem( + "This is the content of the first section", title="Item 1" + ), + dbc.AccordionItem( + "This is the content of the second section", title="Item 2" + ), + dbc.AccordionItem( + "This is the content of the third section", title="Item 3" + ), + ], + start_collapsed=True, + ), +) diff --git a/docs/components_page/components/accordion/flush.R b/docs/components_page/components/accordion/flush.R new file mode 100644 index 00000000..7e44f403 --- /dev/null +++ b/docs/components_page/components/accordion/flush.R @@ -0,0 +1,22 @@ +library(dashBootstrapComponents) +library(dashHtmlComponents) + +accordion <- htmlDiv( + dbcAccordion( + list( + dbcAccordionItem( + "This is the content of the first section", + title = "Item 1" + ), + dbcAccordionItem( + "This is the content of the second section", + title = "Item 2" + ), + dbcAccordionItem( + "This is the content of the third section", + title = "Item 3" + ) + ), + flush = TRUE + ) +) diff --git a/docs/components_page/components/accordion/flush.jl b/docs/components_page/components/accordion/flush.jl new file mode 100644 index 00000000..3b32b9d5 --- /dev/null +++ b/docs/components_page/components/accordion/flush.jl @@ -0,0 +1,21 @@ +using DashBootstrapComponents, DashHtmlComponents + +accordion = html_div( + dbc_accordion( + [ + dbc_accordionitem( + "This is the content of the first section", + title="Item 1", + ), + dbc_accordionitem( + "This is the content of the second section", + title="Item 2", + ), + dbc_accordionitem( + "This is the content of the third section", + title="Item 3", + ), + ], + flush=true, + ), +) diff --git a/docs/components_page/components/accordion/flush.py b/docs/components_page/components/accordion/flush.py new file mode 100644 index 00000000..716e0334 --- /dev/null +++ b/docs/components_page/components/accordion/flush.py @@ -0,0 +1,19 @@ +import dash_bootstrap_components as dbc +import dash_html_components as html + +accordion = html.Div( + dbc.Accordion( + [ + dbc.AccordionItem( + "This is the content of the first section", title="Item 1" + ), + dbc.AccordionItem( + "This is the content of the second section", title="Item 2" + ), + dbc.AccordionItem( + "This is the content of the third section", title="Item 3" + ), + ], + flush=True, + ), +) diff --git a/docs/components_page/components/accordion/simple.R b/docs/components_page/components/accordion/simple.R new file mode 100644 index 00000000..e77b7ca1 --- /dev/null +++ b/docs/components_page/components/accordion/simple.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("Select an item", id = "accordion-contents") + ) +) + +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 new file mode 100644 index 00000000..5d130433 --- /dev/null +++ b/docs/components_page/components/accordion/simple.jl @@ -0,0 +1,36 @@ +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"), + ] +) + + +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 new file mode 100644 index 00000000..ee1ec894 --- /dev/null +++ b/docs/components_page/components/accordion/simple.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/alert/auto_dismiss.R b/docs/components_page/components/alert/auto_dismiss.R index 2b9669c6..81555b8b 100644 --- a/docs/components_page/components/alert/auto_dismiss.R +++ b/docs/components_page/components/alert/auto_dismiss.R @@ -3,7 +3,7 @@ library(dashHtmlComponents) alert <- htmlDiv( list( - dbcButton("Toggle", id = "alert-toggle-auto", class_name = "mr-1", + dbcButton("Toggle", id = "alert-toggle-auto", class_name = "me-1", n_clicks = 0), htmlHr(), dbcAlert( diff --git a/docs/components_page/components/alert/auto_dismiss.jl b/docs/components_page/components/alert/auto_dismiss.jl index 86293883..cfb40030 100644 --- a/docs/components_page/components/alert/auto_dismiss.jl +++ b/docs/components_page/components/alert/auto_dismiss.jl @@ -1,7 +1,7 @@ using DashBootstrapComponents, DashHtmlComponents alert = html_div([ - dbc_button("Toggle", id="alert-toggle-auto", class_name="mr-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!", diff --git a/docs/components_page/components/alert/auto_dismiss.py b/docs/components_page/components/alert/auto_dismiss.py index f41dc0a4..6565ed54 100644 --- a/docs/components_page/components/alert/auto_dismiss.py +++ b/docs/components_page/components/alert/auto_dismiss.py @@ -5,7 +5,7 @@ alert = html.Div( [ dbc.Button( - "Toggle", id="alert-toggle-auto", class_name="mr-1", n_clicks=0 + "Toggle", id="alert-toggle-auto", class_name="me-1", n_clicks=0 ), html.Hr(), dbc.Alert( diff --git a/docs/components_page/components/alert/dismiss.R b/docs/components_page/components/alert/dismiss.R index 91a42d96..179d4c4d 100644 --- a/docs/components_page/components/alert/dismiss.R +++ b/docs/components_page/components/alert/dismiss.R @@ -5,7 +5,7 @@ alert <- htmlDiv( list( dbcButton( "Toggle alert with fade", id = "alert-toggle-fade", n_clicks = 0, - class_name = "mr-1" + class_name = "me-1" ), dbcButton("Toggle alert without fade", id = "alert-toggle-no-fade", n_clicks = 0), diff --git a/docs/components_page/components/alert/dismiss.jl b/docs/components_page/components/alert/dismiss.jl index 86cb58a2..7166332f 100644 --- a/docs/components_page/components/alert/dismiss.jl +++ b/docs/components_page/components/alert/dismiss.jl @@ -4,7 +4,7 @@ alert = html_div([ dbc_button( "Toggle alert with fade", id="alert-toggle-fade", - class_name="mr-1", + class_name="me-1", n_clicks=0, ), dbc_button("Toggle alert without fade", id="alert-toggle-no-fade", n_clicks=0), diff --git a/docs/components_page/components/alert/dismiss.py b/docs/components_page/components/alert/dismiss.py index f4c325ac..e2e998dd 100644 --- a/docs/components_page/components/alert/dismiss.py +++ b/docs/components_page/components/alert/dismiss.py @@ -7,7 +7,7 @@ dbc.Button( "Toggle alert with fade", id="alert-toggle-fade", - class_name="mr-1", + class_name="me-1", n_clicks=0, ), dbc.Button( diff --git a/docs/components_page/components/badge/color.R b/docs/components_page/components/badge/color.R index 7e69eacc..b1b7af87 100644 --- a/docs/components_page/components/badge/color.R +++ b/docs/components_page/components/badge/color.R @@ -3,13 +3,13 @@ library(dashHtmlComponents) badges <- htmlSpan( list( - dbcBadge("Primary", color = "primary", class_name = "mr-1"), - dbcBadge("Secondary", color = "secondary", class_name = "mr-1"), - dbcBadge("Success", color = "success", class_name = "mr-1"), - dbcBadge("Warning", color = "warning", class_name = "mr-1"), - dbcBadge("Danger", color = "danger", class_name = "mr-1"), - dbcBadge("Info", color = "info", class_name = "mr-1"), - dbcBadge("Light", color = "light", class_name = "mr-1"), + dbcBadge("Primary", color = "primary", class_name = "me-1"), + dbcBadge("Secondary", color = "secondary", class_name = "me-1"), + dbcBadge("Success", color = "success", class_name = "me-1"), + dbcBadge("Warning", color = "warning", class_name = "me-1"), + dbcBadge("Danger", color = "danger", class_name = "me-1"), + dbcBadge("Info", color = "info", class_name = "me-1"), + dbcBadge("Light", color = "light", class_name = "me-1"), dbcBadge("Dark", color = "dark") ) ) diff --git a/docs/components_page/components/badge/color.jl b/docs/components_page/components/badge/color.jl index 348d0c73..df3d863f 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="mr-1"), - dbc_badge("Secondary", color="secondary", class_name="mr-1"), - dbc_badge("Success", color="success", class_name="mr-1"), - dbc_badge("Warning", color="warning", class_name="mr-1"), - dbc_badge("Danger", color="danger", class_name="mr-1"), - dbc_badge("Info", color="info", class_name="mr-1"), - dbc_badge("Light", color="light", class_name="mr-1"), + 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/color.py b/docs/components_page/components/badge/color.py index 88d223f5..e0a692c7 100644 --- a/docs/components_page/components/badge/color.py +++ b/docs/components_page/components/badge/color.py @@ -3,13 +3,13 @@ badges = html.Span( [ - dbc.Badge("Primary", color="primary", class_name="mr-1"), - dbc.Badge("Secondary", color="secondary", class_name="mr-1"), - dbc.Badge("Success", color="success", class_name="mr-1"), - dbc.Badge("Warning", color="warning", class_name="mr-1"), - dbc.Badge("Danger", color="danger", class_name="mr-1"), - dbc.Badge("Info", color="info", class_name="mr-1"), - dbc.Badge("Light", color="light", class_name="mr-1"), + 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.R b/docs/components_page/components/badge/links.R index 63bd5f7d..1c1faf16 100644 --- a/docs/components_page/components/badge/links.R +++ b/docs/components_page/components/badge/links.R @@ -3,13 +3,13 @@ library(dashHtmlComponents) badges <- htmlSpan( list( - dbcBadge("Primary", href = "#", color = "primary", class_name = "mr-1"), - dbcBadge("Secondary", href = "#", color = "secondary", class_name = "mr-1"), - dbcBadge("Success", href = "#", color = "success", class_name = "mr-1"), - dbcBadge("Warning", href = "#", color = "warning", class_name = "mr-1"), - dbcBadge("Danger", href = "#", color = "danger", class_name = "mr-1"), - dbcBadge("Info", href = "#", color = "info", class_name = "mr-1"), - dbcBadge("Light", href = "#", color = "light", class_name = "mr-1"), + dbcBadge("Primary", href = "#", color = "primary", class_name = "me-1"), + dbcBadge("Secondary", href = "#", color = "secondary", class_name = "me-1"), + dbcBadge("Success", href = "#", color = "success", class_name = "me-1"), + dbcBadge("Warning", href = "#", color = "warning", class_name = "me-1"), + dbcBadge("Danger", href = "#", color = "danger", class_name = "me-1"), + dbcBadge("Info", href = "#", color = "info", class_name = "me-1"), + dbcBadge("Light", href = "#", color = "light", class_name = "me-1"), dbcBadge("Dark", href = "#", color = "dark") ) ) diff --git a/docs/components_page/components/badge/links.jl b/docs/components_page/components/badge/links.jl index 8a716bf6..9b79f197 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="mr-1"), - dbc_badge("Secondary", href="#", color="secondary", class_name="mr-1"), - dbc_badge("Success", href="#", color="success", class_name="mr-1"), - dbc_badge("Warning", href="#", color="warning", class_name="mr-1"), - dbc_badge("Danger", href="#", color="danger", class_name="mr-1"), - dbc_badge("Info", href="#", color="info", class_name="mr-1"), - dbc_badge("Light", href="#", color="light", class_name="mr-1"), + 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/links.py b/docs/components_page/components/badge/links.py index b53fe50d..d1015740 100644 --- a/docs/components_page/components/badge/links.py +++ b/docs/components_page/components/badge/links.py @@ -3,13 +3,13 @@ badges = html.Span( [ - dbc.Badge("Primary", href="#", color="primary", class_name="mr-1"), - dbc.Badge("Secondary", href="#", color="secondary", class_name="mr-1"), - dbc.Badge("Success", href="#", color="success", class_name="mr-1"), - dbc.Badge("Warning", href="#", color="warning", class_name="mr-1"), - dbc.Badge("Danger", href="#", color="danger", class_name="mr-1"), - dbc.Badge("Info", href="#", color="info", class_name="mr-1"), - dbc.Badge("Light", href="#", color="light", class_name="mr-1"), + 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 a426666b..4470adbe 100644 --- a/docs/components_page/components/badge/pills.R +++ b/docs/components_page/components/badge/pills.R @@ -3,13 +3,13 @@ library(dashHtmlComponents) badges <- htmlSpan( list( - dbcBadge("Primary", pill = TRUE, color = "primary", class_name = "mr-1"), - dbcBadge("Secondary", pill = TRUE, color = "secondary", class_name = "mr-1"), - dbcBadge("Success", pill = TRUE, color = "success", class_name = "mr-1"), - dbcBadge("Warning", pill = TRUE, color = "warning", class_name = "mr-1"), - dbcBadge("Danger", pill = TRUE, color = "danger", class_name = "mr-1"), - dbcBadge("Info", pill = TRUE, color = "info", class_name = "mr-1"), - dbcBadge("Light", pill = TRUE, color = "light", class_name = "mr-1"), + dbcBadge("Primary", pill = TRUE, color = "primary", class_name = "me-1"), + dbcBadge("Secondary", pill = TRUE, color = "secondary", class_name = "me-1"), + dbcBadge("Success", pill = TRUE, color = "success", class_name = "me-1"), + 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("Dark", pill = TRUE, color = "dark") ) ) diff --git a/docs/components_page/components/badge/pills.jl b/docs/components_page/components/badge/pills.jl index 92938e43..4c6c87e1 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="mr-1"), - dbc_badge("Secondary", pill=true, color="secondary", class_name="mr-1"), - dbc_badge("Success", pill=true, color="success", class_name="mr-1"), - dbc_badge("Warning", pill=true, color="warning", class_name="mr-1"), - dbc_badge("Danger", pill=true, color="danger", class_name="mr-1"), - dbc_badge("Info", pill=true, color="info", class_name="mr-1"), - dbc_badge("Light", pill=true, color="light", class_name="mr-1"), + 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"), ]); diff --git a/docs/components_page/components/badge/pills.py b/docs/components_page/components/badge/pills.py index 4a5d4c88..56278a9e 100644 --- a/docs/components_page/components/badge/pills.py +++ b/docs/components_page/components/badge/pills.py @@ -3,15 +3,15 @@ badges = html.Span( [ - dbc.Badge("Primary", pill=True, color="primary", class_name="mr-1"), + dbc.Badge("Primary", pill=True, color="primary", class_name="me-1"), dbc.Badge( - "Secondary", pill=True, color="secondary", class_name="mr-1" + "Secondary", pill=True, color="secondary", class_name="me-1" ), - dbc.Badge("Success", pill=True, color="success", class_name="mr-1"), - dbc.Badge("Warning", pill=True, color="warning", class_name="mr-1"), - dbc.Badge("Danger", pill=True, color="danger", class_name="mr-1"), - dbc.Badge("Info", pill=True, color="info", class_name="mr-1"), - dbc.Badge("Light", pill=True, color="light", class_name="mr-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"), ] ) diff --git a/docs/components_page/components/badge/simple.R b/docs/components_page/components/badge/simple.R index fc4199ad..74f8822c 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 = "ml-1") + dbcBadge("4", color = "light", class_name = "ms-1") ), color = "primary", ) diff --git a/docs/components_page/components/badge/simple.jl b/docs/components_page/components/badge/simple.jl index 5165f7ec..03492360 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="ml-1")], + ["Notifications", dbc_badge("4", color="light", class_name="ms-1")], color="primary", ); diff --git a/docs/components_page/components/badge/simple.py b/docs/components_page/components/badge/simple.py index 35211d33..782a04e9 100644 --- a/docs/components_page/components/badge/simple.py +++ b/docs/components_page/components/badge/simple.py @@ -1,6 +1,6 @@ import dash_bootstrap_components as dbc badge = dbc.Button( - ["Notifications", dbc.Badge("4", color="light", class_name="ml-1")], + ["Notifications", dbc.Badge("4", color="light", class_name="ms-1")], color="primary", ) diff --git a/docs/components_page/components/badge/size.R b/docs/components_page/components/badge/size.R index fc43d8d6..d3a41dba 100644 --- a/docs/components_page/components/badge/size.R +++ b/docs/components_page/components/badge/size.R @@ -3,11 +3,11 @@ library(dashHtmlComponents) badges <- htmlDiv( list( - htmlH1(list("Example heading", dbcBadge("New", class_name = "ml-1"))), - htmlH2(list("Example heading", dbcBadge("New", class_name = "ml-1"))), - htmlH3(list("Example heading", dbcBadge("New", class_name = "ml-1"))), - htmlH4(list("Example heading", dbcBadge("New", class_name = "ml-1"))), - htmlH5(list("Example heading", dbcBadge("New", class_name = "ml-1"))), - htmlH6(list("Example heading", dbcBadge("New", class_name = "ml-1"))) + htmlH1(list("Example heading", dbcBadge("New", class_name = "ms-1"))), + htmlH2(list("Example heading", dbcBadge("New", class_name = "ms-1"))), + htmlH3(list("Example heading", dbcBadge("New", class_name = "ms-1"))), + htmlH4(list("Example heading", dbcBadge("New", class_name = "ms-1"))), + htmlH5(list("Example heading", dbcBadge("New", class_name = "ms-1"))), + htmlH6(list("Example heading", dbcBadge("New", class_name = "ms-1"))) ) ) diff --git a/docs/components_page/components/badge/size.jl b/docs/components_page/components/badge/size.jl index 0eb93114..0119ba53 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="ml-1")]), - html_h2(["Example heading", dbc_badge("New", class_name="ml-1")]), - html_h3(["Example heading", dbc_badge("New", class_name="ml-1")]), - html_h4(["Example heading", dbc_badge("New", class_name="ml-1")]), - html_h5(["Example heading", dbc_badge("New", class_name="ml-1")]), - html_h6(["Example heading", dbc_badge("New", class_name="ml-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/badge/size.py b/docs/components_page/components/badge/size.py index adb0d14e..eddb6db1 100644 --- a/docs/components_page/components/badge/size.py +++ b/docs/components_page/components/badge/size.py @@ -3,11 +3,11 @@ badges = html.Div( [ - html.H1(["Example heading", dbc.Badge("New", class_name="ml-1")]), - html.H2(["Example heading", dbc.Badge("New", class_name="ml-1")]), - html.H3(["Example heading", dbc.Badge("New", class_name="ml-1")]), - html.H4(["Example heading", dbc.Badge("New", class_name="ml-1")]), - html.H5(["Example heading", dbc.Badge("New", class_name="ml-1")]), - html.H6(["Example heading", dbc.Badge("New", class_name="ml-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 new file mode 100644 index 00000000..4d6954f4 --- /dev/null +++ b/docs/components_page/components/breadcrumb.md @@ -0,0 +1,10 @@ +--- +title: Breadcrumb +lead: Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. +--- + +You can create breadcrumbs using the `Breadcrumb` component. Items are specified with the `items` prop. You must specify a `label` for each item, and can optionally specify `href` to add a link, `external_link` to determine whether the link should be treated as a Dash style link or whether it should reload the page, and finally `active` to determine whether the item has the "active" style applied to indicate that it corresponds to the current location. + +{{example:components/breadcrumb/simple.py:breadcrumb}} + +{{apidoc:src/components/breadcrumb/Breadcrumb.js}} diff --git a/docs/components_page/components/breadcrumb/simple.R b/docs/components_page/components/breadcrumb/simple.R new file mode 100644 index 00000000..ba5bafd3 --- /dev/null +++ b/docs/components_page/components/breadcrumb/simple.R @@ -0,0 +1,9 @@ +library(dashBootstrapComponents) + +breadcrumb <- dbcBreadcrumb( + items = list( + list("label" = "Docs", "href" = "/docs", "external_link" = TRUE), + list("label" = "Components", "href" = "/docs/components", "external_link" = TRUE), + list("label" = "Breadcrumb", "active" = TRUE) + ) +) diff --git a/docs/components_page/components/breadcrumb/simple.jl b/docs/components_page/components/breadcrumb/simple.jl new file mode 100644 index 00000000..4499a6da --- /dev/null +++ b/docs/components_page/components/breadcrumb/simple.jl @@ -0,0 +1,9 @@ +using DashBootstrapComponents + +breadcrumb = dbc_breadcrumb( + items=[ + Dict("label" => "Docs", "href" => "/docs", "external_link" => true), + Dict("label" => "Components", "href" => "/docs/components", "external_link" => true), + Dict("label" => "Breadcrumb", "active" => true), + ], +) diff --git a/docs/components_page/components/breadcrumb/simple.py b/docs/components_page/components/breadcrumb/simple.py new file mode 100644 index 00000000..d5abcbe8 --- /dev/null +++ b/docs/components_page/components/breadcrumb/simple.py @@ -0,0 +1,13 @@ +import dash_bootstrap_components as dbc + +breadcrumb = dbc.Breadcrumb( + items=[ + {"label": "Docs", "href": "/docs", "external_link": True}, + { + "label": "Components", + "href": "/docs/components", + "external_link": True, + }, + {"label": "Breadcrumb", "active": True}, + ], +) diff --git a/docs/components_page/components/button.md b/docs/components_page/components/button.md index cf144bac..ac480618 100644 --- a/docs/components_page/components/button.md +++ b/docs/components_page/components/button.md @@ -29,7 +29,8 @@ Modify the size of the button by setting `size` to either `"sm"` or `"lg"` for a ## Block button -Create a block level button (one which spans the full width of the parent) by seeing `block=True`. +Create a Bootstrap 4 style block level button (one which spans the full width +of the parent) by using Bootstrap's grid spacing utilities. {{example:components/button/block.py:button}} diff --git a/docs/components_page/components/button/active_disabled.R b/docs/components_page/components/button/active_disabled.R index 02ae987d..4629ef0d 100644 --- a/docs/components_page/components/button/active_disabled.R +++ b/docs/components_page/components/button/active_disabled.R @@ -3,8 +3,8 @@ library(dashHtmlComponents) buttons <- htmlDiv( list( - dbcButton("Regular", color = "primary", class_name = "mr-1"), - dbcButton("Active", color = "primary", active = TRUE, class_name = "mr-1"), + dbcButton("Regular", color = "primary", class_name = "me-1"), + dbcButton("Active", color = "primary", active = TRUE, class_name = "me-1"), dbcButton("Disabled", color = "primary", disabled = TRUE) ) ) diff --git a/docs/components_page/components/button/active_disabled.jl b/docs/components_page/components/button/active_disabled.jl index e726f924..effe31fa 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="mr-1"), - dbc_button("Active", color="primary", active=true, class_name="mr-1"), + 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/active_disabled.py b/docs/components_page/components/button/active_disabled.py index b892fe71..581addb7 100644 --- a/docs/components_page/components/button/active_disabled.py +++ b/docs/components_page/components/button/active_disabled.py @@ -3,8 +3,8 @@ buttons = html.Div( [ - dbc.Button("Regular", color="primary", class_name="mr-1"), - dbc.Button("Active", color="primary", active=True, class_name="mr-1"), + 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 faced91b..bc22a607 100644 --- a/docs/components_page/components/button/block.R +++ b/docs/components_page/components/button/block.R @@ -1,3 +1,10 @@ library(dashBootstrapComponents) +library(dashHtmlComponents) -button <- dbcButton("Block button", color = "primary", block = TRUE) +button <- htmlDiv( + list( + dbcButton("Block button", color = "primary"), + dbcButton("Block button", color = "secondary") + ), + 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 62350131..dd6bde11 100644 --- a/docs/components_page/components/button/block.jl +++ b/docs/components_page/components/button/block.jl @@ -1,3 +1,10 @@ using DashBootstrapComponents +using DashHtmlComponents -button = dbc_button("Block button", color="primary", block=true); +button = html_div( + [ + dbc_button("Block button", color="primary"), + dbc_button("Block button", color="secondary"), + ], + class_name="d-grid gap-2", +); diff --git a/docs/components_page/components/button/block.py b/docs/components_page/components/button/block.py index d07fad3b..0da83603 100644 --- a/docs/components_page/components/button/block.py +++ b/docs/components_page/components/button/block.py @@ -1,3 +1,10 @@ import dash_bootstrap_components as dbc +import dash_html_components as html -button = dbc.Button("Block button", color="primary", block=True) +button = html.Div( + [ + dbc.Button("Block button", color="primary"), + dbc.Button("Block button", color="secondary"), + ], + 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 40f2f54e..c853822c 100644 --- a/docs/components_page/components/button/outline.R +++ b/docs/components_page/components/button/outline.R @@ -3,15 +3,15 @@ library(dashHtmlComponents) buttons <- htmlDiv( list( - dbcButton("Primary", outline = TRUE, color = "primary", class_name = "mr-1"), + dbcButton("Primary", outline = TRUE, color = "primary", class_name = "me-1"), dbcButton( - "Secondary", outline = TRUE, color = "secondary", class_name = "mr-1" + "Secondary", outline = TRUE, color = "secondary", class_name = "me-1" ), - dbcButton("Success", outline = TRUE, color = "success", class_name = "mr-1"), - dbcButton("Warning", outline = TRUE, color = "warning", class_name = "mr-1"), - dbcButton("Danger", outline = TRUE, color = "danger", class_name = "mr-1"), - dbcButton("Info", outline = TRUE, color = "info", class_name = "mr-1"), - dbcButton("Light", outline = TRUE, color = "light", class_name = "mr-1"), + dbcButton("Success", outline = TRUE, color = "success", class_name = "me-1"), + dbcButton("Warning", outline = TRUE, color = "warning", class_name = "me-1"), + dbcButton("Danger", outline = TRUE, color = "danger", class_name = "me-1"), + dbcButton("Info", outline = TRUE, color = "info", class_name = "me-1"), + dbcButton("Light", outline = TRUE, color = "light", class_name = "me-1"), dbcButton("Dark", outline = TRUE, color = "dark") ) ) diff --git a/docs/components_page/components/button/outline.jl b/docs/components_page/components/button/outline.jl index 500048fa..da200ce4 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="mr-1"), - dbc_button("Secondary", outline=true, color="secondary", class_name="mr-1"), - dbc_button("Success", outline=true, color="success", class_name="mr-1"), - dbc_button("Warning", outline=true, color="warning", class_name="mr-1"), - dbc_button("Danger", outline=true, color="danger", class_name="mr-1"), - dbc_button("Info", outline=true, color="info", class_name="mr-1"), - dbc_button("Light", outline=true, color="light", class_name="mr-1"), + 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/outline.py b/docs/components_page/components/button/outline.py index 0befa739..36cc7e58 100644 --- a/docs/components_page/components/button/outline.py +++ b/docs/components_page/components/button/outline.py @@ -4,20 +4,20 @@ buttons = html.Div( [ dbc.Button( - "Primary", outline=True, color="primary", class_name="mr-1" + "Primary", outline=True, color="primary", class_name="me-1" ), dbc.Button( - "Secondary", outline=True, color="secondary", class_name="mr-1" + "Secondary", outline=True, color="secondary", class_name="me-1" ), dbc.Button( - "Success", outline=True, color="success", class_name="mr-1" + "Success", outline=True, color="success", class_name="me-1" ), dbc.Button( - "Warning", outline=True, color="warning", class_name="mr-1" + "Warning", outline=True, color="warning", class_name="me-1" ), - dbc.Button("Danger", outline=True, color="danger", class_name="mr-1"), - dbc.Button("Info", outline=True, color="info", class_name="mr-1"), - dbc.Button("Light", outline=True, color="light", class_name="mr-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.R b/docs/components_page/components/button/simple.R index e6311b61..30199425 100644 --- a/docs/components_page/components/button/simple.R +++ b/docs/components_page/components/button/simple.R @@ -3,14 +3,14 @@ library(dashHtmlComponents) buttons <- htmlDiv( list( - dbcButton("Primary", color = "primary", class_name = "mr-1"), - dbcButton("Secondary", color = "secondary", class_name = "mr-1"), - dbcButton("Success", color = "success", class_name = "mr-1"), - dbcButton("Warning", color = "warning", class_name = "mr-1"), - dbcButton("Danger", color = "danger", class_name = "mr-1"), - dbcButton("Info", color = "info", class_name = "mr-1"), - dbcButton("Light", color = "light", class_name = "mr-1"), - dbcButton("Dark", color = "dark", class_name = "mr-1"), + dbcButton("Primary", color = "primary", class_name = "me-1"), + dbcButton("Secondary", color = "secondary", class_name = "me-1"), + dbcButton("Success", color = "success", class_name = "me-1"), + dbcButton("Warning", color = "warning", class_name = "me-1"), + dbcButton("Danger", color = "danger", class_name = "me-1"), + dbcButton("Info", color = "info", class_name = "me-1"), + dbcButton("Light", color = "light", class_name = "me-1"), + dbcButton("Dark", color = "dark", class_name = "me-1"), dbcButton("Link", color = "link") ) ) diff --git a/docs/components_page/components/button/simple.jl b/docs/components_page/components/button/simple.jl index 351dd976..8eab2035 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_namee="mr-1"), - dbc_button("Secondary", color="secondary", class_namee="mr-1"), - dbc_button("Success", color="success", class_namee="mr-1"), - dbc_button("Warning", color="warning", class_namee="mr-1"), - dbc_button("Danger", color="danger", class_namee="mr-1"), - dbc_button("Info", color="info", class_namee="mr-1"), - dbc_button("Light", color="light", class_namee="mr-1"), - dbc_button("Dark", color="dark", class_namee="mr-1"), + 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/simple.py b/docs/components_page/components/button/simple.py index 20b0ffd2..ca96acfe 100644 --- a/docs/components_page/components/button/simple.py +++ b/docs/components_page/components/button/simple.py @@ -3,14 +3,14 @@ buttons = html.Div( [ - dbc.Button("Primary", color="primary", class_name="mr-1"), - dbc.Button("Secondary", color="secondary", class_name="mr-1"), - dbc.Button("Success", color="success", class_name="mr-1"), - dbc.Button("Warning", color="warning", class_name="mr-1"), - dbc.Button("Danger", color="danger", class_name="mr-1"), - dbc.Button("Info", color="info", class_name="mr-1"), - dbc.Button("Light", color="light", class_name="mr-1"), - dbc.Button("Dark", color="dark", class_name="mr-1"), + 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.R b/docs/components_page/components/button/size.R index 75eb2ff0..1e178004 100644 --- a/docs/components_page/components/button/size.R +++ b/docs/components_page/components/button/size.R @@ -3,8 +3,8 @@ library(dashHtmlComponents) buttons <- htmlDiv( list( - dbcButton("Large button", size = "lg", class_name = "mr-1"), - dbcButton("Regular button", class_name = "mr-1"), + dbcButton("Large button", size = "lg", class_name = "me-1"), + dbcButton("Regular button", class_name = "me-1"), dbcButton("Small button", size = "sm") ) ) diff --git a/docs/components_page/components/button/size.jl b/docs/components_page/components/button/size.jl index 60dbaf2b..2c261952 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="mr-1"), - dbc_button("Regular button", class_name="mr-1"), + 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/size.py b/docs/components_page/components/button/size.py index e00256d6..7ea530d1 100644 --- a/docs/components_page/components/button/size.py +++ b/docs/components_page/components/button/size.py @@ -3,8 +3,8 @@ buttons = html.Div( [ - dbc.Button("Large button", size="lg", class_name="mr-1"), - dbc.Button("Regular button", class_name="mr-1"), + 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 30350de9..3acc9993 100644 --- a/docs/components_page/components/button/usage.R +++ b/docs/components_page/components/button/usage.R @@ -4,7 +4,7 @@ library(dashHtmlComponents) button <- htmlDiv( list( dbcButton("Click me", id = "example-button", n_clicks = 0, - class_name = "mr-2"), + class_name = "me-2"), htmlSpan(id = "example-output", style = list(verticalAlign = "middle")) ) ) diff --git a/docs/components_page/components/button/usage.jl b/docs/components_page/components/button/usage.jl index b2167a62..0c24abf6 100644 --- a/docs/components_page/components/button/usage.jl +++ b/docs/components_page/components/button/usage.jl @@ -1,7 +1,7 @@ using DashBootstrapComponents, DashHtmlComponents button = html_div([ - dbc_button("Click me", id="example-button", class_name="mr-2", n_clicks=0), + dbc_button("Click me", id="example-button", class_name="me-2", n_clicks=0), html_span(id="example-output", style=Dict("verticalAlign" => "middle")), ]); diff --git a/docs/components_page/components/button/usage.py b/docs/components_page/components/button/usage.py index cbb612f1..9fec63fb 100644 --- a/docs/components_page/components/button/usage.py +++ b/docs/components_page/components/button/usage.py @@ -5,7 +5,7 @@ button = html.Div( [ dbc.Button( - "Click me", id="example-button", class_name="mr-2", n_clicks=0 + "Click me", id="example-button", class_name="me-2", n_clicks=0 ), html.Span(id="example-output", style={"verticalAlign": "middle"}), ] diff --git a/docs/components_page/components/button_group/size.R b/docs/components_page/components/button_group/size.R index 6fda1607..4a2b1e62 100644 --- a/docs/components_page/components/button_group/size.R +++ b/docs/components_page/components/button_group/size.R @@ -10,7 +10,7 @@ button_groups <- htmlDiv( dbcButton("Right") ), size = "lg", - class_name = "mr-1", + class_name = "me-1", ), dbcButtonGroup( list( @@ -18,7 +18,7 @@ button_groups <- htmlDiv( dbcButton("Right") ), size = "md", - class_name = "mr-1", + class_name = "me-1", ), dbcButtonGroup( list( diff --git a/docs/components_page/components/button_group/size.jl b/docs/components_page/components/button_group/size.jl index 4c941212..6c3d5a90 100644 --- a/docs/components_page/components/button_group/size.jl +++ b/docs/components_page/components/button_group/size.jl @@ -4,12 +4,12 @@ button_groups = html_div([ dbc_buttongroup( [dbc_button("Left"), dbc_button("Middle"), dbc_button("Right")], size="lg", - class_name="mr-1", + class_name="me-1", ), dbc_buttongroup( [dbc_button("Left"), dbc_button("Middle"), dbc_button("Right")], size="md", - class_name="mr-1", + class_name="me-1", ), dbc_buttongroup( [dbc_button("Left"), dbc_button("Middle"), dbc_button("Right")], diff --git a/docs/components_page/components/button_group/size.py b/docs/components_page/components/button_group/size.py index 3bba6d3a..ddf24e3c 100644 --- a/docs/components_page/components/button_group/size.py +++ b/docs/components_page/components/button_group/size.py @@ -6,12 +6,12 @@ dbc.ButtonGroup( [dbc.Button("Left"), dbc.Button("Middle"), dbc.Button("Right")], size="lg", - class_name="mr-1", + class_name="me-1", ), dbc.ButtonGroup( [dbc.Button("Left"), dbc.Button("Middle"), dbc.Button("Right")], size="md", - class_name="mr-1", + class_name="me-1", ), dbc.ButtonGroup( [dbc.Button("Left"), dbc.Button("Middle"), dbc.Button("Right")], diff --git a/docs/components_page/components/card.md b/docs/components_page/components/card.md index e8041c47..0048040f 100644 --- a/docs/components_page/components/card.md +++ b/docs/components_page/components/card.md @@ -91,24 +91,8 @@ Use the `CardGroup` component to render cards as a single attached element with {{example:components/card/layout/group.py:cards}} -### Card deck - -The `CardDeck` component will lay cards out with equal width and height, without attaching them to one another like the `CardGroup` component. - -{{example:components/card/layout/deck.py:cards}} - -### Card columns - -Cards can be organised into [Masonry](https://masonry.desandro.com/)-like columns using the `CardColumns` component. Cards are ordered top to bottom and left to right. - -{{example:components/card/layout/columns.py:cards}} - -{{apidoc:src/components/card/CardDeck.js}} - {{apidoc:src/components/card/CardGroup.js}} -{{apidoc:src/components/card/CardColumns.js}} - {{apidoc:src/components/card/Card.js}} {{apidoc:src/components/card/CardHeader.js}} diff --git a/docs/components_page/components/card/layout/columns.R b/docs/components_page/components/card/layout/columns.R deleted file mode 100644 index dce16e70..00000000 --- a/docs/components_page/components/card/layout/columns.R +++ /dev/null @@ -1,61 +0,0 @@ -library(dashBootstrapComponents) -library(dashHtmlComponents) - -card_content_1 <- list( - dbcCardHeader("Card header"), - dbcCardBody( - list( - htmlH5("Card title", class_name = "card-title"), - htmlP( - "This is some card content that we'll reuse", - class_name = "card-text" - ) - ) - ) -) - -card_content_2 <- dbcCardBody( - list( - htmlBlockquote( - list( - htmlP( - paste( - "A learning experience is one of those things that says,", - "'You know that thing you just did? Don't do that.'" - ) - ), - htmlFooter( - htmlSmall("Douglas Adams", class_name = "text-muted") - ) - ), - class_name = "blockquote" - ) - ) -) - -card_content_3 <- list( - dbcCardImg(src = "/static/images/placeholder286x180.png", top = TRUE), - dbcCardBody( - list( - htmlH5("Card with image", class_name = "card-title"), - htmlP("This card has an image on top, and a button below", - class_name = "card-text", - ), - dbcButton("Click me!", color = "primary") - ) - ) -) - -cards <- dbcCardColumns( - list( - dbcCard(card_content_1, color = "primary", inverse = TRUE), - dbcCard(card_content_2, body = TRUE), - dbcCard(card_content_1, color = "secondary", inverse = TRUE), - dbcCard(card_content_3, color = "info", inverse = TRUE), - dbcCard(card_content_1, color = "success", inverse = TRUE), - dbcCard(card_content_1, color = "warning", inverse = TRUE), - dbcCard(card_content_1, color = "danger", inverse = TRUE), - dbcCard(card_content_3, color = "light"), - dbcCard(card_content_1, color = "dark", inverse = TRUE) - ) -) diff --git a/docs/components_page/components/card/layout/columns.jl b/docs/components_page/components/card/layout/columns.jl deleted file mode 100644 index 61d3c213..00000000 --- a/docs/components_page/components/card/layout/columns.jl +++ /dev/null @@ -1,47 +0,0 @@ -using DashBootstrapComponents, DashHtmlComponents - -card_content_1 = [ - dbc_cardheader("Card header"), - dbc_cardbody([ - html_h5("Card title", class_name="card-title"), - html_p("This is some card content that we'll reuse", class_name="card-text"), - ]), -]; - -card_content_2 = dbc_cardbody([ - html_blockquote( - [ - html_p( - "A learning experience is one of those things that says, " * - "'You know that thing you just did? Don't do that.'", - ), - html_footer(html_small("Douglas Adams", class_name="text-muted")), - ], - class_name="blockquote", - ), -]); - -card_content_3 = [ - dbc_cardimg(src="/static/images/placeholder286x180.png", top=true), - dbc_cardbody([ - html_h5("Card with image", class_name="card-title"), - html_p( - "This card has an image on top, and a button below", - class_name="card-text", - ), - dbc_button("Click me!", color="primary"), - ]), -]; - - -cards = dbc_cardcolumns([ - dbc_card(card_content_1, color="primary", inverse=true), - dbc_card(card_content_2, body=true), - dbc_card(card_content_1, color="secondary", inverse=true), - dbc_card(card_content_3, color="info", inverse=true), - dbc_card(card_content_1, color="success", inverse=true), - dbc_card(card_content_1, color="warning", inverse=true), - dbc_card(card_content_1, color="danger", inverse=true), - dbc_card(card_content_3, color="light"), - dbc_card(card_content_1, color="dark", inverse=true), -]); diff --git a/docs/components_page/components/card/layout/columns.py b/docs/components_page/components/card/layout/columns.py deleted file mode 100644 index 7cf78bf7..00000000 --- a/docs/components_page/components/card/layout/columns.py +++ /dev/null @@ -1,61 +0,0 @@ -import dash_bootstrap_components as dbc -import dash_html_components as html - -card_content_1 = [ - dbc.CardHeader("Card header"), - dbc.CardBody( - [ - html.H5("Card title", class_name="card-title"), - html.P( - "This is some card content that we'll reuse", - class_name="card-text", - ), - ] - ), -] - -card_content_2 = dbc.CardBody( - [ - html.Blockquote( - [ - html.P( - "A learning experience is one of those things that says, " - "'You know that thing you just did? Don't do that.'" - ), - html.Footer( - html.Small("Douglas Adams", class_name="text-muted") - ), - ], - class_name="blockquote", - ) - ] -) - -card_content_3 = [ - dbc.CardImg(src="/static/images/placeholder286x180.png", top=True), - dbc.CardBody( - [ - html.H5("Card with image", class_name="card-title"), - html.P( - "This card has an image on top, and a button below", - class_name="card-text", - ), - dbc.Button("Click me!", color="primary"), - ] - ), -] - - -cards = dbc.CardColumns( - [ - dbc.Card(card_content_1, color="primary", inverse=True), - dbc.Card(card_content_2, body=True), - dbc.Card(card_content_1, color="secondary", inverse=True), - dbc.Card(card_content_3, color="info", inverse=True), - dbc.Card(card_content_1, color="success", inverse=True), - dbc.Card(card_content_1, color="warning", inverse=True), - dbc.Card(card_content_1, color="danger", inverse=True), - dbc.Card(card_content_3, color="light"), - dbc.Card(card_content_1, color="dark", inverse=True), - ] -) diff --git a/docs/components_page/components/card/layout/deck.R b/docs/components_page/components/card/layout/deck.R deleted file mode 100644 index 450da951..00000000 --- a/docs/components_page/components/card/layout/deck.R +++ /dev/null @@ -1,57 +0,0 @@ -library(dashBootstrapComponents) -library(dashHtmlComponents) - -cards <- dbcCardDeck( - list( - dbcCard( - dbcCardBody( - list( - htmlH5("Card 1", class_name = "card-title"), - htmlP( - paste( - "This card has some text content, which is a little", - "bit longer than the second card." - ), - class_name = "card-text" - ), - dbcButton( - "Click here", color = "success", class_name = "mt-auto" - ) - ) - ) - ), - dbcCard( - dbcCardBody( - list( - htmlH5("Card 2", class_name = "card-title"), - htmlP( - "This card has some text content.", - class_name = "card-text", - ), - dbcButton( - "Click here", color = "warning", class_name = "mt-auto" - ) - ) - ) - ), - dbcCard( - dbcCardBody( - list( - htmlH5("Card 3", class_name = "card-title"), - htmlP( - paste( - "This card has some text content, which is longer", - "than both of the other two cards, in order to", - "demonstrate the equal height property of cards in a", - "card group." - ), - class_name = "card-text", - ), - dbcButton( - "Click here", color = "danger", class_name = "mt-auto" - ) - ) - ) - ) - ) -) diff --git a/docs/components_page/components/card/layout/deck.jl b/docs/components_page/components/card/layout/deck.jl deleted file mode 100644 index d3b59016..00000000 --- a/docs/components_page/components/card/layout/deck.jl +++ /dev/null @@ -1,35 +0,0 @@ -using DashBootstrapComponents, DashHtmlComponents - -cards = dbc_carddeck([ - dbc_card( - dbc_cardbody([ - html_h5("Card 1", 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", - ), - 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"), - ]), - ), - dbc_card( - dbc_cardbody([ - 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", - ), - dbc_button("Click here", color="danger", class_name="mt-auto"), - ]), - ), -]); diff --git a/docs/components_page/components/card/layout/deck.py b/docs/components_page/components/card/layout/deck.py deleted file mode 100644 index a6e475b6..00000000 --- a/docs/components_page/components/card/layout/deck.py +++ /dev/null @@ -1,53 +0,0 @@ -import dash_bootstrap_components as dbc -import dash_html_components as html - -cards = dbc.CardDeck( - [ - dbc.Card( - dbc.CardBody( - [ - html.H5("Card 1", 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", - ), - 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" - ), - ] - ) - ), - dbc.Card( - dbc.CardBody( - [ - 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", - ), - dbc.Button( - "Click here", color="danger", class_name="mt-auto" - ), - ] - ) - ), - ] -) diff --git a/docs/components_page/components/carousel/callback.py b/docs/components_page/components/carousel/callback.py index 4c8c803d..7ed3eea6 100644 --- a/docs/components_page/components/carousel/callback.py +++ b/docs/components_page/components/carousel/callback.py @@ -13,7 +13,7 @@ ], controls=False, indicators=False, - interval=False, + interval=None, ), dbc.RadioItems( id="slide-number", diff --git a/docs/components_page/components/collapse/multiple.R b/docs/components_page/components/collapse/multiple.R index bc8a713c..30c5f933 100644 --- a/docs/components_page/components/collapse/multiple.R +++ b/docs/components_page/components/collapse/multiple.R @@ -4,10 +4,10 @@ library(dashHtmlComponents) collapses <- htmlDiv( list( dbcButton("Toggle left", color = "primary", id = "left", - class_name = "mr-1", n_clicks = 0 + class_name = "me-1", n_clicks = 0 ), dbcButton("Toggle right", color = "primary", id = "right", - class_name = "mr-1", n_clicks = 0 + 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 97700181..441d58e7 100644 --- a/docs/components_page/components/collapse/multiple.jl +++ b/docs/components_page/components/collapse/multiple.jl @@ -5,14 +5,14 @@ collapses = html_div([ "Toggle left", color="primary", id="left", - class_name="mr-1", + class_name="me-1", n_clicks=0, ), dbc_button( "Toggle right", color="primary", id="right", - class_name="mr-1", + class_name="me-1", n_clicks=0, ), dbc_button("Toggle both", color="primary", id="both", n_clicks=0), diff --git a/docs/components_page/components/collapse/multiple.py b/docs/components_page/components/collapse/multiple.py index 20551d6d..a99ccdb8 100644 --- a/docs/components_page/components/collapse/multiple.py +++ b/docs/components_page/components/collapse/multiple.py @@ -8,14 +8,14 @@ "Toggle left", color="primary", id="left", - class_name="mr-1", + class_name="me-1", n_clicks=0, ), dbc.Button( "Toggle right", color="primary", id="right", - class_name="mr-1", + class_name="me-1", n_clicks=0, ), dbc.Button("Toggle both", color="primary", id="both", n_clicks=0), diff --git a/docs/components_page/components/dropdown/size.R b/docs/components_page/components/dropdown/size.R index c38fcf43..db648695 100644 --- a/docs/components_page/components/dropdown/size.R +++ b/docs/components_page/components/dropdown/size.R @@ -11,14 +11,14 @@ dropdown <- htmlDiv( list( dbcDropdownMenu( label = "large dropdown", - bs_size = "lg", + size = "lg", children = items_size, class_name = "mb-3" ), dbcDropdownMenu( label = "normal dropdown", children = items_size, class_name = "mb-3" ), - dbcDropdownMenu(label = "small dropdown", bs_size = "sm", + dbcDropdownMenu(label = "small dropdown", size = "sm", children = items_size) ) ) diff --git a/docs/components_page/components/dropdown/size.jl b/docs/components_page/components/dropdown/size.jl index 7c3c180d..d9de74cf 100644 --- a/docs/components_page/components/dropdown/size.jl +++ b/docs/components_page/components/dropdown/size.jl @@ -9,11 +9,11 @@ items = [ dropdown = html_div([ dbc_dropdownmenu( label="large dropdown", - bs_size="lg", + size="lg", children=items, class_name="mb-3", ), dbc_dropdownmenu(label="normal dropdown", children=items, class_name="mb-3"), - dbc_dropdownmenu(label="small dropdown", bs_size="sm", children=items), + dbc_dropdownmenu(label="small dropdown", size="sm", children=items), ]) ; diff --git a/docs/components_page/components/dropdown/size.py b/docs/components_page/components/dropdown/size.py index 502801c8..c2287a66 100644 --- a/docs/components_page/components/dropdown/size.py +++ b/docs/components_page/components/dropdown/size.py @@ -11,13 +11,13 @@ [ dbc.DropdownMenu( label="large dropdown", - bs_size="lg", + size="lg", children=items, class_name="mb-3", ), dbc.DropdownMenu( label="normal dropdown", children=items, class_name="mb-3" ), - dbc.DropdownMenu(label="small dropdown", bs_size="sm", children=items), + dbc.DropdownMenu(label="small dropdown", size="sm", children=items), ] ) diff --git a/docs/components_page/components/dropdown/style.py b/docs/components_page/components/dropdown/style.py index f74e3287..7ada2226 100644 --- a/docs/components_page/components/dropdown/style.py +++ b/docs/components_page/components/dropdown/style.py @@ -25,7 +25,6 @@ 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"), ], style={"display": "flex", "flexWrap": "wrap"}, ) diff --git a/docs/components_page/components/form.md b/docs/components_page/components/form.md index cb97aeaf..972ab67b 100644 --- a/docs/components_page/components/form.md +++ b/docs/components_page/components/form.md @@ -11,21 +11,27 @@ The `FormGroup` is the easiest way to add structure to forms. It encourages prop {{example:components/form/simple.py:form}} + +## Floating labels + +Wrap an `Input` and `Label` with `FormFloating` to create a label that floats over the form field. Note that you _must_ set a placeholder on the `Input` in order for the floating label to display properly. + +{{example:components/form/floating.py:form}} ## Horizontal form -Create a horizontal form by setting `row=True` on the `FormGroup` component. Be sure to specify `width` on the `Label` component, and wrap your inputs in `Col` components. +Create a horizontal form by using the `Row` component. Be sure to specify `width` on the `Label` component, and wrap your inputs in `Col` components. {{example:components/form/row.py:form}} ## Using grid layout with forms -You can also use the grid components `Row` and `Col` to build more complex layouts. You can set `form=True` in the `Row` component to reduce the size of the column gutters for tighter, more compact layouts. +You can also use the grid components `Row` and `Col` to build more complex layouts. You can use Bootstrap's [gutter modifier classes](https://getbootstrap.com/docs/5.1/layout/gutters/) to adjust the spacing between the form components. {{example:components/form/grid.py:form}} ## Inline form -You can use the `Form` component with `inline=True` to display a series of labels, controls and buttons on a single horizontal row. Use [Bootstrap's spacing utilities](https://getbootstrap.com/docs/4.3/utilities/spacing/) as we have below to control the spacing between components in the inline form. +Similarly using `Row` and `Col` you can create a fully inline form. Set `width="auto"` on the `Label` components to make sure they resize to take up only the width of the label text. Use Bootstrap's [gutter modifier classes](https://getbootstrap.com/docs/5.1/layout/gutters/) and [spacing utilities](https://getbootstrap.com/docs/5.0/utilities/spacing/) as we have below to control the spacing between components in the inline form. {{example:components/form/inline.py:form}} @@ -35,7 +41,7 @@ Use the `valid` and `invalid` properties of `Input`, alongside the `FormFeedback The `Input` component has two properties, `valid` and `invalid`, that can be set in callbacks. They can be used to indicate whether the input value is valid or invalid. When `valid=True`, the `Input` will be styled with a green colored border, similarly when `invalid=True` the input will be styled with a red colored border. -The `FormFeedback` component should be added to the `FormGroup` containing the `Input` it is associated with. Use the `valid` property to indicate whether the feedback should display for valid or invalid inputs. The feedback automatically display when the validity of the `Input` in the `FormGroup` matches that of the `FormFeedback`. This is perhaps easiest to see with an example such as the below. +The `FormFeedback` component should be added to a `html.Div` containing the `Input` it is associated with. Use the `type` property to indicate whether the feedback should display for valid or invalid inputs, it accepts the strings `"valid"` or `"invalid"`. The feedback automatically displays when the validity of the `Input` in the `html.Div` matches that of the `FormFeedback`. This is perhaps easiest to see with an example such as the below. {{example:components/form/feedback.py:email_input}} @@ -47,7 +53,7 @@ The `Form` and `FormGroup` components can also be used with _dash-core-component {{apidoc:src/components/form/Form.js}} -{{apidoc:src/components/form/FormGroup.js}} +{{apidoc:src/components/form/FormFloating.js}} {{apidoc:src/components/form/FormText.js}} diff --git a/docs/components_page/components/form/dash_core.py b/docs/components_page/components/form/dash_core.py index 3052f8d2..1cc1aeab 100644 --- a/docs/components_page/components/form/dash_core.py +++ b/docs/components_page/components/form/dash_core.py @@ -1,7 +1,8 @@ import dash_bootstrap_components as dbc import dash_core_components as dcc +import dash_html_components as html -dropdown = dbc.FormGroup( +dropdown = html.Div( [ dbc.Label("Dropdown", html_for="dropdown"), dcc.Dropdown( @@ -11,21 +12,24 @@ {"label": "Option 2", "value": 2}, ], ), - ] + ], + class_name="mb-3", ) -slider = dbc.FormGroup( +slider = html.Div( [ dbc.Label("Slider", html_for="slider"), dcc.Slider(id="slider", min=0, max=10, step=0.5, value=3), - ] + ], + class_name="mb-3", ) -range_slider = dbc.FormGroup( +range_slider = html.Div( [ dbc.Label("RangeSlider", html_for="range-slider"), dcc.RangeSlider(id="range-slider", min=0, max=10, value=[3, 7]), - ] + ], + 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 3eaf39ef..e6bc08c7 100644 --- a/docs/components_page/components/form/feedback.R +++ b/docs/components_page/components/form/feedback.R @@ -9,11 +9,11 @@ email_input <- htmlDiv( dbcInput(id = "email-input", type = "email", value = ""), dbcFormText("We only accept gmail..."), dbcFormFeedback( - "That looks like a gmail address :-)", valid = TRUE + "That looks like a gmail address :-)", type = "valid" ), dbcFormFeedback( "Sorry, we only accept gmail for some reason...", - valid = FALSE + type = "invalid" ) ) ) diff --git a/docs/components_page/components/form/feedback.jl b/docs/components_page/components/form/feedback.jl index ca6ff329..c0b200fc 100644 --- a/docs/components_page/components/form/feedback.jl +++ b/docs/components_page/components/form/feedback.jl @@ -5,8 +5,8 @@ email_input = html_div([ dbc_label("Email"), dbc_input(id="email-input", type="email", value=""), dbc_formtext("We only accept gmail..."), - dbc_formfeedback("That looks like a gmail address :-)", valid=true), - dbc_formfeedback("Sorry, we only accept gmail for some reason...", valid=false), + dbc_formfeedback("That looks like a gmail address :-)", type="valid"), + dbc_formfeedback("Sorry, we only accept gmail for some reason...", type="invalid"), ]), ]); diff --git a/docs/components_page/components/form/feedback.py b/docs/components_page/components/form/feedback.py index 71a49823..61fdd1a3 100644 --- a/docs/components_page/components/form/feedback.py +++ b/docs/components_page/components/form/feedback.py @@ -4,20 +4,14 @@ email_input = html.Div( [ - dbc.FormGroup( - [ - dbc.Label("Email"), - dbc.Input(id="email-input", type="email", value=""), - dbc.FormText("We only accept gmail..."), - dbc.FormFeedback( - "That looks like a gmail address :-)", valid=True - ), - dbc.FormFeedback( - "Sorry, we only accept gmail for some reason...", - valid=False, - ), - ] - ) + dbc.Label("Email"), + dbc.Input(id="email-input", type="email", value=""), + dbc.FormText("We only accept gmail..."), + dbc.FormFeedback("That looks like a gmail address :-)", type="valid"), + dbc.FormFeedback( + "Sorry, we only accept gmail for some reason...", + type="invalid", + ), ] ) diff --git a/docs/components_page/components/form/floating.py b/docs/components_page/components/form/floating.py new file mode 100644 index 00000000..d40e2964 --- /dev/null +++ b/docs/components_page/components/form/floating.py @@ -0,0 +1,8 @@ +import dash_bootstrap_components as dbc + +form = dbc.FormFloating( + [ + dbc.Input(type="email", placeholder="example@internet.com"), + dbc.Label("Email address"), + ] +) diff --git a/docs/components_page/components/form/grid.R b/docs/components_page/components/form/grid.R index 5868773d..2d0964c2 100644 --- a/docs/components_page/components/form/grid.R +++ b/docs/components_page/components/form/grid.R @@ -29,5 +29,5 @@ form <- dbcRow( width = 6 ) ), - form = TRUE + class_name = "g-3" ) diff --git a/docs/components_page/components/form/grid.jl b/docs/components_page/components/form/grid.jl index 007632a9..ae2f2a35 100644 --- a/docs/components_page/components/form/grid.jl +++ b/docs/components_page/components/form/grid.jl @@ -25,5 +25,5 @@ form = dbc_row( width=6, ), ], - form=true, + class_name="g-3", ); diff --git a/docs/components_page/components/form/grid.py b/docs/components_page/components/form/grid.py index 278b84cd..3d49552e 100644 --- a/docs/components_page/components/form/grid.py +++ b/docs/components_page/components/form/grid.py @@ -3,31 +3,27 @@ form = dbc.Row( [ dbc.Col( - dbc.FormGroup( - [ - dbc.Label("Email", html_for="example-email-grid"), - dbc.Input( - type="email", - id="example-email-grid", - placeholder="Enter email", - ), - ] - ), + [ + dbc.Label("Email", html_for="example-email-grid"), + dbc.Input( + type="email", + id="example-email-grid", + placeholder="Enter email", + ), + ], width=6, ), dbc.Col( - dbc.FormGroup( - [ - dbc.Label("Password", html_for="example-password-grid"), - dbc.Input( - type="password", - id="example-password-grid", - placeholder="Enter password", - ), - ] - ), + [ + dbc.Label("Password", html_for="example-password-grid"), + dbc.Input( + type="password", + id="example-password-grid", + placeholder="Enter password", + ), + ], width=6, ), ], - form=True, + class_name="g-3", ) diff --git a/docs/components_page/components/form/inline.R b/docs/components_page/components/form/inline.R index ba5a5658..de27dd57 100644 --- a/docs/components_page/components/form/inline.R +++ b/docs/components_page/components/form/inline.R @@ -4,23 +4,23 @@ form <- dbcForm( list( dbcFormGroup( list( - dbcLabel("Email", class_name = "mr-2"), + dbcLabel("Email", class_name = "me-2"), dbcInput( type = "email", placeholder = "Enter email" ) ), - class_name = "mr-3" + class_name = "me-3" ), dbcFormGroup( list( - dbcLabel("Password", class_name = "mr-2"), + dbcLabel("Password", class_name = "me-2"), dbcInput( type = "password", placeholder = "Enter password" ) ), - class_name = "mr-3" + class_name = "me-3" ), dbcButton("Submit", color = "primary") ), diff --git a/docs/components_page/components/form/inline.jl b/docs/components_page/components/form/inline.jl index 9cf29ebb..ba8c6e81 100644 --- a/docs/components_page/components/form/inline.jl +++ b/docs/components_page/components/form/inline.jl @@ -4,17 +4,17 @@ form = dbc_form( [ dbc_formgroup( [ - dbc_label("Email", class_name="mr-2"), + dbc_label("Email", class_name="me-2"), dbc_input(type="email", placeholder="Enter email"), ], - class_name="mr-3", + class_name="me-3", ), dbc_formgroup( [ - dbc_label("Password", class_name="mr-2"), + dbc_label("Password", class_name="me-2"), dbc_input(type="password", placeholder="Enter password"), ], - class_name="mr-3", + class_name="me-3", ), dbc_button("Submit", color="primary"), ], diff --git a/docs/components_page/components/form/inline.py b/docs/components_page/components/form/inline.py index 9d1bb687..60690c16 100644 --- a/docs/components_page/components/form/inline.py +++ b/docs/components_page/components/form/inline.py @@ -1,22 +1,20 @@ import dash_bootstrap_components as dbc form = dbc.Form( - [ - dbc.FormGroup( - [ - dbc.Label("Email", class_name="mr-2"), + dbc.Row( + [ + dbc.Label("Email", width="auto"), + dbc.Col( dbc.Input(type="email", placeholder="Enter email"), - ], - class_name="mr-3", - ), - dbc.FormGroup( - [ - dbc.Label("Password", class_name="mr-2"), + class_name="me-3", + ), + dbc.Label("Password", width="auto"), + dbc.Col( dbc.Input(type="password", placeholder="Enter password"), - ], - class_name="mr-3", - ), - dbc.Button("Submit", color="primary"), - ], - inline=True, + 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.py b/docs/components_page/components/form/row.py index 2bc76e4d..0e205ced 100644 --- a/docs/components_page/components/form/row.py +++ b/docs/components_page/components/form/row.py @@ -1,6 +1,6 @@ import dash_bootstrap_components as dbc -email_input = dbc.FormGroup( +email_input = dbc.Row( [ dbc.Label("Email", html_for="example-email-row", width=2), dbc.Col( @@ -10,10 +10,10 @@ width=10, ), ], - row=True, + class_name="mb-3", ) -password_input = dbc.FormGroup( +password_input = dbc.Row( [ dbc.Label("Password", html_for="example-password-row", width=2), dbc.Col( @@ -25,10 +25,10 @@ width=10, ), ], - row=True, + class_name="mb-3", ) -radios_input = dbc.FormGroup( +radios_input = dbc.Row( [ dbc.Label("Radios", html_for="example-radios-row", width=2), dbc.Col( @@ -47,7 +47,7 @@ width=10, ), ], - row=True, + class_name="mb-3", ) form = dbc.Form([email_input, password_input, radios_input]) diff --git a/docs/components_page/components/form/simple.py b/docs/components_page/components/form/simple.py index 76a3cf0d..e6c7b62c 100644 --- a/docs/components_page/components/form/simple.py +++ b/docs/components_page/components/form/simple.py @@ -1,6 +1,7 @@ import dash_bootstrap_components as dbc +import dash_html_components as html -email_input = dbc.FormGroup( +email_input = html.Div( [ dbc.Label("Email", html_for="example-email"), dbc.Input(type="email", id="example-email", placeholder="Enter email"), @@ -8,10 +9,11 @@ "Are you on email? You simply have to be these days", color="secondary", ), - ] + ], + class_name="mb-3", ) -password_input = dbc.FormGroup( +password_input = html.Div( [ dbc.Label("Password", html_for="example-password"), dbc.Input( @@ -22,7 +24,8 @@ dbc.FormText( "A password stops mean people taking your stuff", color="secondary" ), - ] + ], + 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 14d278ea..27909b7f 100644 --- a/docs/components_page/components/input.md +++ b/docs/components_page/components/input.md @@ -37,7 +37,7 @@ Use the `FormGroup` component along with `Label` and `FormText` to control the l ## Input size -You can control the size of the `Input` using the `bs_size` keyword argument. It accepts the values `sm`, `md` or `lg` for small, medium or large sizes respectively. +You can control the size of the `Input` using the `size` keyword argument. It accepts the values `sm`, `md` or `lg` for small, medium or large sizes respectively. If you want to set the HTML size attribute of the underlying `` use the `html_size` keyword argument. {{example:components/input/size.py:inputs}} @@ -49,13 +49,13 @@ Add valid / invalid styles to your `Input` components using the `valid` and `inv ## Textarea -The `Textarea` component works like the _dash-core-components_ analogue, but accepts the additional arguments `valid`, `invalid`, and `bs_size` much like `Input`. +The `Textarea` component works like the _dash-core-components_ analogue, but accepts the additional arguments `valid`, `invalid`, and `size` much like `Input`. {{example:components/input/textarea.py:textareas}} ## Select -The `Select` component can be used to render a Bootstrap themed select input. The options are specified with a list of dictionaries much like the `Dropdown` component in _dash-core-components_, i.e. with keys `'label'`, `'value'` and optional key `'disabled'`. Like `Input` it also accepts keyword arguments such as `bs_size`, `valid`, `invalid`, all of which can be targeted with callbacks. +The `Select` component can be used to render a Bootstrap themed select input. The options are specified with a list of dictionaries much like the `Dropdown` component in _dash-core-components_, i.e. with keys `'label'`, `'value'` and optional key `'disabled'`. Like `Input` it also accepts keyword arguments such as `size`, `valid`, `invalid`, all of which can be targeted with callbacks. {{example:components/input/select.py:select}} diff --git a/docs/components_page/components/input/colorpicker.py b/docs/components_page/components/input/colorpicker.py index d911b4f8..86a12286 100644 --- a/docs/components_page/components/input/colorpicker.py +++ b/docs/components_page/components/input/colorpicker.py @@ -2,7 +2,7 @@ import dash_html_components as html from dash.dependencies import Input, Output -colorpicker = dbc.FormGroup( +colorpicker = html.Div( [ dbc.Label(["Select a ", html.Span("color", id="color")]), dbc.Input( @@ -16,7 +16,7 @@ app.clientside_callback( """ - function(color) { + function(color) { return {"color": color} } """, diff --git a/docs/components_page/components/input/radio_check.py b/docs/components_page/components/input/radio_check.py index edda8b3a..40b1c08b 100644 --- a/docs/components_page/components/input/radio_check.py +++ b/docs/components_page/components/input/radio_check.py @@ -2,7 +2,7 @@ import dash_html_components as html from dash.dependencies import Input, Output -radioitems = dbc.FormGroup( +radioitems = html.Div( [ dbc.Label("Choose one"), dbc.RadioItems( @@ -17,7 +17,7 @@ ] ) -checklist = dbc.FormGroup( +checklist = html.Div( [ dbc.Label("Choose a bunch"), dbc.Checklist( @@ -32,7 +32,7 @@ ] ) -switches = dbc.FormGroup( +switches = html.Div( [ dbc.Label("Toggle a bunch"), dbc.Checklist( diff --git a/docs/components_page/components/input/radio_check_inline.py b/docs/components_page/components/input/radio_check_inline.py index fa0f10cc..d0f1738e 100644 --- a/docs/components_page/components/input/radio_check_inline.py +++ b/docs/components_page/components/input/radio_check_inline.py @@ -1,6 +1,7 @@ import dash_bootstrap_components as dbc +import dash_html_components as html -inline_radioitems = dbc.FormGroup( +inline_radioitems = html.Div( [ dbc.Label("Choose one"), dbc.RadioItems( @@ -15,7 +16,7 @@ ] ) -inline_checklist = dbc.FormGroup( +inline_checklist = html.Div( [ dbc.Label("Choose a bunch"), dbc.Checklist( @@ -30,7 +31,7 @@ ] ) -inline_switches = dbc.FormGroup( +inline_switches = html.Div( [ dbc.Label("Toggle a bunch"), dbc.Checklist( diff --git a/docs/components_page/components/input/radio_check_standalone.py b/docs/components_page/components/input/radio_check_standalone.py index a73376cd..0d100077 100644 --- a/docs/components_page/components/input/radio_check_standalone.py +++ b/docs/components_page/components/input/radio_check_standalone.py @@ -4,7 +4,7 @@ standalone_radio_check = html.Div( [ - dbc.FormGroup( + html.Div( [ dbc.Checkbox( id="standalone-checkbox", class_name="form-check-input" @@ -15,9 +15,8 @@ class_name="form-check-label", ), ], - check=True, ), - dbc.FormGroup( + html.Div( [ dbc.RadioButton( id="standalone-radio", class_name="form-check-input" @@ -28,7 +27,6 @@ class_name="form-check-label", ), ], - check=True, ), html.Br(), html.P(id="standalone-radio-check-output"), diff --git a/docs/components_page/components/input/size.R b/docs/components_page/components/input/size.R index c57bcf1d..9ed5f5ae 100644 --- a/docs/components_page/components/input/size.R +++ b/docs/components_page/components/input/size.R @@ -4,11 +4,11 @@ library(dashHtmlComponents) inputs <- htmlDiv( list( dbcInput( - placeholder = "A large input...", bs_size = "lg", class_name = "mb-3" + placeholder = "A large input...", size = "lg", class_name = "mb-3" ), dbcInput( - placeholder = "A medium input...", bs_size = "md", class_name = "mb-3" + placeholder = "A medium input...", size = "md", class_name = "mb-3" ), - dbcInput(placeholder = "A small input...", bs_size = "sm") + dbcInput(placeholder = "A small input...", size = "sm") ) ) diff --git a/docs/components_page/components/input/size.jl b/docs/components_page/components/input/size.jl index 90605388..bf6b8939 100644 --- a/docs/components_page/components/input/size.jl +++ b/docs/components_page/components/input/size.jl @@ -1,7 +1,7 @@ using DashBootstrapComponents, DashHtmlComponents inputs = html_div([ - dbc_input(placeholder="A large input...", bs_size="lg", class_name="mb-3"), - dbc_input(placeholder="A medium input...", bs_size="md", class_name="mb-3"), - dbc_input(placeholder="A small input...", bs_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/size.py b/docs/components_page/components/input/size.py index 33a96b1f..ca46be8d 100644 --- a/docs/components_page/components/input/size.py +++ b/docs/components_page/components/input/size.py @@ -4,11 +4,11 @@ inputs = html.Div( [ dbc.Input( - placeholder="A large input...", bs_size="lg", class_name="mb-3" + placeholder="A large input...", size="lg", class_name="mb-3" ), dbc.Input( - placeholder="A medium input...", bs_size="md", class_name="mb-3" + placeholder="A medium input...", size="md", class_name="mb-3" ), - dbc.Input(placeholder="A small input...", bs_size="sm"), + dbc.Input(placeholder="A small input...", size="sm"), ] ) diff --git a/docs/components_page/components/input/text_label.py b/docs/components_page/components/input/text_label.py index a615d3ca..d6e21a15 100644 --- a/docs/components_page/components/input/text_label.py +++ b/docs/components_page/components/input/text_label.py @@ -1,6 +1,7 @@ import dash_bootstrap_components as dbc +import dash_html_components as html -text_input = dbc.FormGroup( +text_input = html.Div( [ dbc.Label("Text"), dbc.Input(placeholder="Input goes here...", type="text"), diff --git a/docs/components_page/components/input/textarea.R b/docs/components_page/components/input/textarea.R index 751161fe..cd38e103 100644 --- a/docs/components_page/components/input/textarea.R +++ b/docs/components_page/components/input/textarea.R @@ -5,12 +5,12 @@ textareas <- htmlDiv( dbcTextarea(class_name = "mb-3", placeholder = "A Textarea"), dbcTextarea( valid = TRUE, - bs_size = "sm", + size = "sm", class_name = "mb-3", placeholder = "A small, valid Textarea", ), dbcTextarea( - invalid = TRUE, bs_size = "lg", + 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 1b6db212..5a7d3f6a 100644 --- a/docs/components_page/components/input/textarea.jl +++ b/docs/components_page/components/input/textarea.jl @@ -4,9 +4,9 @@ textareas = html_div([ dbc_textarea(class_name="mb-3", placeholder="A Textarea"), dbc_textarea( valid=true, - bs_size="sm", + size="sm", class_name="mb-3", placeholder="A small, valid Textarea", ), - dbc_textarea(invalid=true, bs_size="lg", placeholder="A large, invalid Textarea"), + dbc_textarea(invalid=true, size="lg", placeholder="A large, invalid Textarea"), ]); diff --git a/docs/components_page/components/input/textarea.py b/docs/components_page/components/input/textarea.py index 53860a65..549ef23d 100644 --- a/docs/components_page/components/input/textarea.py +++ b/docs/components_page/components/input/textarea.py @@ -6,12 +6,12 @@ dbc.Textarea(class_name="mb-3", placeholder="A Textarea"), dbc.Textarea( valid=True, - bs_size="sm", + size="sm", class_name="mb-3", placeholder="A small, valid Textarea", ), dbc.Textarea( - invalid=True, bs_size="lg", placeholder="A large, invalid Textarea" + invalid=True, size="lg", placeholder="A large, invalid Textarea" ), ] ) diff --git a/docs/components_page/components/input_group.md b/docs/components_page/components/input_group.md index df2f90a8..1cec581f 100644 --- a/docs/components_page/components/input_group.md +++ b/docs/components_page/components/input_group.md @@ -5,32 +5,34 @@ lead: Easily extend form controls by adding text, buttons or button groups on ei ## Basic example -Wrap a compatible input component and an `InputGroupAddon` in an `InputGroup`. Use the `addon_type` keyword argument of `InputGroupAddon` to ensure the correct styling. +Wrap a compatible input component and either a `Button` or `InputGroupText` in an `InputGroup`. {{example:components/input_group/simple.py:input_groups}} ## Sizing -Use the `size` argument of `InputGroup` to set the size of all the contents, including inputs and addons. Possible options are `'lg'`, `'md'`, and `'sm'` for large, medium and small respectively. +Use the `size` argument of `InputGroup` to set the size of all the contents, including inputs and addons. Possible options are `'lg'`, `'md'` (the default), and `'sm'` for large, medium and small respectively. {{example:components/input_group/size.py:input_group}} ## Checkboxes and radios -You can place a `Checkbox` or `RadioButton` inside the `InputGroup` instead of just text. +You can place a `Checkbox` or `RadioButton` inside the `InputGroupText` instead of just text. {{example:components/input_group/check_radio.py:input_groups}} ## Button addons +Buttons can be placed inside an `InputGroup` + {{example:components/input_group/button.py:input_group}} ## DropdownMenu addons +And so can `DropdownMenu` components. + {{example:components/input_group/dropdown.py:input_group}} {{apidoc:src/components/input/InputGroup.js}} -{{apidoc:src/components/input/InputGroupAddon.js}} - {{apidoc:src/components/input/InputGroupText.js}} diff --git a/docs/components_page/components/input_group/button.py b/docs/components_page/components/input_group/button.py index 389813f9..8f08ffee 100644 --- a/docs/components_page/components/input_group/button.py +++ b/docs/components_page/components/input_group/button.py @@ -3,10 +3,7 @@ input_group = dbc.InputGroup( [ - dbc.InputGroupAddon( - dbc.Button("Random name", id="input-group-button", n_clicks=0), - addon_type="prepend", - ), + dbc.Button("Random name", id="input-group-button", n_clicks=0), dbc.Input(id="input-group-button-input", placeholder="name"), ] ) diff --git a/docs/components_page/components/input_group/check_radio.py b/docs/components_page/components/input_group/check_radio.py index ede22664..4ff47589 100644 --- a/docs/components_page/components/input_group/check_radio.py +++ b/docs/components_page/components/input_group/check_radio.py @@ -4,17 +4,9 @@ input_groups = html.Div( [ dbc.InputGroup( - [ - dbc.InputGroupAddon(dbc.RadioButton(), addon_type="prepend"), - dbc.Input(), - ], + [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.py b/docs/components_page/components/input_group/dropdown.py index f3664cfb..fdbd984b 100644 --- a/docs/components_page/components/input_group/dropdown.py +++ b/docs/components_page/components/input_group/dropdown.py @@ -9,12 +9,10 @@ dbc.DropdownMenuItem("Clear", id="dropdown-menu-item-clear"), ] - +# TODO: check this renders properly once DropdownMenu is updated input_group = dbc.InputGroup( [ - dbc.DropdownMenu( - dropdown_menu_items, label="Generate", addon_type="prepend" - ), + dbc.DropdownMenu(dropdown_menu_items, label="Generate"), dbc.Input(id="input-group-dropdown-input", placeholder="name"), ] ) diff --git a/docs/components_page/components/input_group/simple.py b/docs/components_page/components/input_group/simple.py index 6612135f..7d37a178 100644 --- a/docs/components_page/components/input_group/simple.py +++ b/docs/components_page/components/input_group/simple.py @@ -4,30 +4,27 @@ input_groups = html.Div( [ dbc.InputGroup( - [ - dbc.InputGroupAddon("@", addon_type="prepend"), - dbc.Input(placeholder="Username"), - ], + [dbc.InputGroupText("@"), dbc.Input(placeholder="Username")], class_name="mb-3", ), dbc.InputGroup( [ dbc.Input(placeholder="Recipient's username"), - dbc.InputGroupAddon("@example.com", addon_type="append"), + dbc.InputGroupText("@example.com"), ], class_name="mb-3", ), dbc.InputGroup( [ - dbc.InputGroupAddon("$", addon_type="prepend"), + dbc.InputGroupText("$"), dbc.Input(placeholder="Amount", type="number"), - dbc.InputGroupAddon(".00", addon_type="append"), + dbc.InputGroupText(".00"), ], class_name="mb-3", ), dbc.InputGroup( [ - dbc.InputGroupAddon("With textarea", addon_type="prepend"), + dbc.InputGroupText("With textarea"), dbc.Textarea(), ], class_name="mb-3", @@ -40,7 +37,7 @@ {"label": "Option 2", "value": 2}, ] ), - dbc.InputGroupAddon("With select", addon_type="append"), + dbc.InputGroupText("With select"), ] ), ] diff --git a/docs/components_page/components/input_group/size.py b/docs/components_page/components/input_group/size.py index 6b63a252..21a295a7 100644 --- a/docs/components_page/components/input_group/size.py +++ b/docs/components_page/components/input_group/size.py @@ -3,18 +3,10 @@ input_group = html.Div( [ - dbc.InputGroup( - [dbc.InputGroupAddon("Large", addon_type="prepend"), dbc.Input()], - size="lg", - ), + dbc.InputGroup([dbc.InputGroupText("Large"), dbc.Input()], size="lg"), html.Br(), - dbc.InputGroup( - [dbc.InputGroupAddon("Default", addon_type="prepend"), dbc.Input()] - ), + dbc.InputGroup([dbc.InputGroupText("Default"), dbc.Input()]), html.Br(), - dbc.InputGroup( - [dbc.InputGroupAddon("Small", addon_type="prepend"), dbc.Input()], - size="sm", - ), + dbc.InputGroup([dbc.InputGroupText("Small"), dbc.Input()], size="sm"), ] ) diff --git a/docs/components_page/components/jumbotron.md b/docs/components_page/components/jumbotron.md deleted file mode 100644 index b81f3b59..00000000 --- a/docs/components_page/components/jumbotron.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Jumbotron -lead: Lightweight component for showcasing key content and messages. ---- - -## Simple example - -{{example:components/jumbotron/simple.py:simple_jumbotron}} - -## Fluid jumbotron - -To make the jumbotron full width, and without rounded corners, set `fluid=True`. - -{{example:components/jumbotron/fluid.py:fluid_jumbotron}} - -{{apidoc:src/components/Jumbotron.js}} diff --git a/docs/components_page/components/jumbotron/fluid.R b/docs/components_page/components/jumbotron/fluid.R deleted file mode 100644 index 61d98066..00000000 --- a/docs/components_page/components/jumbotron/fluid.R +++ /dev/null @@ -1,28 +0,0 @@ -library(dashBootstrapComponents) -library(dashHtmlComponents) - -fluid_jumbotron <- dbcJumbotron( - list( - dbcContainer( - list( - htmlH1("Fluid jumbotron", class_name = "display-3"), - htmlP( - paste( - "This jumbotron occupies the entire horizontal", - "space of its parent." - ), - class_name = "lead", - ), - htmlP( - paste( - "You will need to embed a fluid container in", - "the jumbotron." - ), - class_name = "lead" - ) - ), - fluid = TRUE - ) - ), - fluid = TRUE -) diff --git a/docs/components_page/components/jumbotron/fluid.jl b/docs/components_page/components/jumbotron/fluid.jl deleted file mode 100644 index 01236aca..00000000 --- a/docs/components_page/components/jumbotron/fluid.jl +++ /dev/null @@ -1,22 +0,0 @@ -using DashBootstrapComponents, DashHtmlComponents - -fluid_jumbotron = dbc_jumbotron( - [ - dbc_container( - [ - html_h1("Fluid jumbotron", class_name="display-3"), - html_p( - "This jumbotron occupies the entire horizontal " * - "space of its parent.", - class_name="lead", - ), - html_p( - "You will need to embed a fluid container in " * "the jumbotron.", - class_name="lead", - ), - ], - fluid=true, - ), - ], - fluid=true, -); diff --git a/docs/components_page/components/jumbotron/fluid.py b/docs/components_page/components/jumbotron/fluid.py deleted file mode 100644 index 73251d5b..00000000 --- a/docs/components_page/components/jumbotron/fluid.py +++ /dev/null @@ -1,24 +0,0 @@ -import dash_bootstrap_components as dbc -import dash_html_components as html - -fluid_jumbotron = dbc.Jumbotron( - [ - dbc.Container( - [ - html.H1("Fluid jumbotron", class_name="display-3"), - html.P( - "This jumbotron occupies the entire horizontal " - "space of its parent.", - class_name="lead", - ), - html.P( - "You will need to embed a fluid container in " - "the jumbotron.", - class_name="lead", - ), - ], - fluid=True, - ) - ], - fluid=True, -) diff --git a/docs/components_page/components/jumbotron/simple.R b/docs/components_page/components/jumbotron/simple.R deleted file mode 100644 index 9d7b1854..00000000 --- a/docs/components_page/components/jumbotron/simple.R +++ /dev/null @@ -1,23 +0,0 @@ -library(dashBootstrapComponents) -library(dashHtmlComponents) - -simple_jumbotron <- dbcJumbotron( - list( - htmlH1("Jumbotron", class_name = "display-3"), - htmlP( - paste( - "Use a jumbotron to call attention to", - "featured content or information." - ), - class_name = "lead", - ), - htmlHr(class_name = "my-2"), - htmlP( - paste( - "Jumbotrons use utility classes for typography and", - "spacing to suit the larger container." - ) - ), - htmlP(dbcButton("Learn more", color = "primary"), class_name = "lead") - ) -) diff --git a/docs/components_page/components/jumbotron/simple.jl b/docs/components_page/components/jumbotron/simple.jl deleted file mode 100644 index d5f34101..00000000 --- a/docs/components_page/components/jumbotron/simple.jl +++ /dev/null @@ -1,15 +0,0 @@ -using DashBootstrapComponents, DashHtmlComponents - -simple_jumbotron = dbc_jumbotron([ - html_h1("Jumbotron", class_name="display-3"), - html_p( - "Use a jumbotron to call attention to " * "featured content or information.", - class_name="lead", - ), - html_hr(class_name="my-2"), - html_p( - "Jumbotrons use utility classes for typography and " * - "spacing to suit the larger container.", - ), - html_p(dbc_button("Learn more", color="primary"), class_name="lead"), -]); diff --git a/docs/components_page/components/jumbotron/simple.py b/docs/components_page/components/jumbotron/simple.py deleted file mode 100644 index b1d05294..00000000 --- a/docs/components_page/components/jumbotron/simple.py +++ /dev/null @@ -1,19 +0,0 @@ -import dash_bootstrap_components as dbc -import dash_html_components as html - -simple_jumbotron = dbc.Jumbotron( - [ - html.H1("Jumbotron", class_name="display-3"), - html.P( - "Use a jumbotron to call attention to " - "featured content or information.", - class_name="lead", - ), - html.Hr(class_name="my-2"), - html.P( - "Jumbotrons use utility classes for typography and " - "spacing to suit the larger container." - ), - html.P(dbc.Button("Learn more", color="primary"), class_name="lead"), - ] -) diff --git a/docs/components_page/components/layout.md b/docs/components_page/components/layout.md index b11f2d6a..25377b6f 100644 --- a/docs/components_page/components/layout.md +++ b/docs/components_page/components/layout.md @@ -5,9 +5,9 @@ lead: Components for laying out your Dash app, including wrapping containers, an Layout in Bootstrap is controlled using the grid system. The Bootstrap grid has twelve columns, and five responsive tiers (allowing you to specify different behaviours on different screen sizes, see below). The width of your columns can be specified in terms of how many of the twelve grid columns it should span, or you can allow the columns to expand or shrink to fit either their content or the available space in the row. -There are three main layout components in *dash-bootstrap-components*: `Container`, `Row`, and `Col`. +There are three main layout components in _dash-bootstrap-components_: `Container`, `Row`, and `Col`. -The `Container` component can be used to center and horizontally pad your app's content. The docs you are currently reading are themselves a Dash app built with *dash-bootstrap-components*. The content on this page has been centered by wrapping it in a `Container` component. By default the container has a responsive pixel width. Use the keyword argument `fluid=True` if you want your `Container` to fill available horizontal space and resize fluidly. +The `Container` component can be used to center and horizontally pad your app's content. The docs you are currently reading are themselves a Dash app built with _dash-bootstrap-components_. The content on this page has been centered by wrapping it in a `Container` component. By default the container has a responsive pixel width. Use the keyword argument `fluid=True` if you want your `Container` to fill available horizontal space and resize fluidly. The `Row` component is a wrapper for columns. The layout of your app should be built as a series of rows of columns. @@ -60,7 +60,7 @@ By setting different sizes, orders and offsets for the different responsive tier ## Row without 'gutters' -By default, horizontal spacing is added between the columns. Use `no_gutters=True` to disable this. +By default, horizontal spacing is added between the columns. Use Bootstrap's [gutter modifier classes](https://getbootstrap.com/docs/5.1/layout/gutters/) to adjust this. {{example:components/layout/no_gutters.py:row}} diff --git a/docs/components_page/components/layout/no_gutters.R b/docs/components_page/components/layout/no_gutters.R index 6e2469dd..d982e42d 100644 --- a/docs/components_page/components/layout/no_gutters.R +++ b/docs/components_page/components/layout/no_gutters.R @@ -7,5 +7,5 @@ row <- dbcRow( dbcCol(htmlDiv("One of three columns")), dbcCol(htmlDiv("One of three columns")) ), - no_gutters = TRUE, + class_name = "g-0" ) diff --git a/docs/components_page/components/layout/no_gutters.jl b/docs/components_page/components/layout/no_gutters.jl index e4c6a509..750f2678 100644 --- a/docs/components_page/components/layout/no_gutters.jl +++ b/docs/components_page/components/layout/no_gutters.jl @@ -6,5 +6,5 @@ row = dbc_row( dbc_col(html_div("One of three columns")), dbc_col(html_div("One of three columns")), ], - no_gutters=true, + class_name="g-0", ); diff --git a/docs/components_page/components/layout/no_gutters.py b/docs/components_page/components/layout/no_gutters.py index 06cae0dd..4690d183 100644 --- a/docs/components_page/components/layout/no_gutters.py +++ b/docs/components_page/components/layout/no_gutters.py @@ -7,5 +7,5 @@ dbc.Col(html.Div("One of three columns")), dbc.Col(html.Div("One of three columns")), ], - no_gutters=True, + class_name="g-0", ) diff --git a/docs/components_page/components/list_group.md b/docs/components_page/components/list_group.md index 11b9f701..4199a2bc 100644 --- a/docs/components_page/components/list_group.md +++ b/docs/components_page/components/list_group.md @@ -29,7 +29,7 @@ Pass one of Bootstrap's contextual colors to the `color` argument of `ListGroupI ## Custom content -You can pass any Dash components to the children of `ListGroupItem`. The components `ListGroupItemHeading` and `ListGroupItemText` automatically apply the relevant CSS classes for styling text content in list groups. +You can pass any Dash components to the children of `ListGroupItem`. {{example:components/list_group/content.py:list_group}} @@ -44,7 +44,3 @@ In the below example, the first list group is always horizontal, the second is h {{apidoc:src/components/listgroup/ListGroup.js}} {{apidoc:src/components/listgroup/ListGroupItem.js}} - -{{apidoc:src/components/listgroup/ListGroupItemHeading.js}} - -{{apidoc:src/components/listgroup/ListGroupItemText.js}} diff --git a/docs/components_page/components/list_group/colors.py b/docs/components_page/components/list_group/colors.py index 5fb47975..5acee6b2 100644 --- a/docs/components_page/components/list_group/colors.py +++ b/docs/components_page/components/list_group/colors.py @@ -2,11 +2,14 @@ list_group = dbc.ListGroup( [ + dbc.ListGroupItem("No color applied"), dbc.ListGroupItem("The primary item", color="primary"), dbc.ListGroupItem("A secondary item", color="secondary"), dbc.ListGroupItem("A successful item", color="success"), dbc.ListGroupItem("A warning item", color="warning"), dbc.ListGroupItem("A dangerous item", color="danger"), dbc.ListGroupItem("An informative item", color="info"), + dbc.ListGroupItem("A light item", color="light"), + dbc.ListGroupItem("A dark item", color="dark"), ] ) diff --git a/docs/components_page/components/list_group/content.R b/docs/components_page/components/list_group/content.R index 9d5970e0..d536d234 100644 --- a/docs/components_page/components/list_group/content.R +++ b/docs/components_page/components/list_group/content.R @@ -4,14 +4,32 @@ list_group <- dbcListGroup( list( dbcListGroupItem( list( - dbcListGroupItemHeading("This item has a heading"), - dbcListGroupItemText("And some text underneath") + htmlDiv( + list( + htmlH5("This item has a heading", 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"), ) ), dbcListGroupItem( list( - dbcListGroupItemHeading("This item also has a heading"), - dbcListGroupItemText("And some more text underneath too") + htmlDiv( + list( + htmlH5( + "This item also has a heading", 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 d1cfbf77..07a587cd 100644 --- a/docs/components_page/components/list_group/content.jl +++ b/docs/components_page/components/list_group/content.jl @@ -1,12 +1,30 @@ -using DashBootstrapComponents +using DashBootstrapComponents, DashHtmlComponents list_group = dbc_listgroup([ dbc_listgroupitem([ - dbc_listgroupitemheading("This item has a heading"), - dbc_listgroupitemtext("And some text underneath"), + html_div( + [ + html_h5("This item has a heading", class_name="mb-1"), + html_small("Yay!", class_name="text-success"), + ], + 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"), ]), dbc_listgroupitem([ - dbc_listgroupitemheading("This item also has a heading"), - dbc_listgroupitemtext("And some more text underneath too"), + html_div( + [ + html_h5( + "This item also has a heading", 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" + ), ]), ]); diff --git a/docs/components_page/components/list_group/content.py b/docs/components_page/components/list_group/content.py index df70cb62..8df89515 100644 --- a/docs/components_page/components/list_group/content.py +++ b/docs/components_page/components/list_group/content.py @@ -1,17 +1,36 @@ import dash_bootstrap_components as dbc +import dash_html_components as html list_group = dbc.ListGroup( [ dbc.ListGroupItem( [ - dbc.ListGroupItemHeading("This item has a heading"), - dbc.ListGroupItemText("And some text underneath"), + html.Div( + [ + html.H5("This item has a heading", class_name="mb-1"), + html.Small("Yay!", class_name="text-success"), + ], + 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"), ] ), dbc.ListGroupItem( [ - dbc.ListGroupItemHeading("This item also has a heading"), - dbc.ListGroupItemText("And some more text underneath too"), + html.Div( + [ + html.H5( + "This item also has a heading", 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" + ), ] ), ] diff --git a/docs/components_page/components/modal.md b/docs/components_page/components/modal.md index c8ae1527..eaa3a98e 100644 --- a/docs/components_page/components/modal.md +++ b/docs/components_page/components/modal.md @@ -3,7 +3,7 @@ title: Modal lead: Use the `Modal` component to add dialogs to your app for lightboxes, user notifications, or completely custom content. --- -Modals are built up using the `Modal`, `ModalHeader`, `ModalBody` and `ModalFooter` components. Set the `is_open` prop of the `Modal` to `True` to open the modal. By default, the modal can be dismissed by clicking outside the modal or by pressing the escape key (these behaviours can both be overridden, see below), though you can also write your own callbacks that set `is_open` to `False`. +Modals are built up using the `Modal`, `ModalHeader`, `ModalTitle`, `ModalBody` and `ModalFooter` components. Set the `is_open` prop of the `Modal` to `True` to open the modal. By default, the modal can be dismissed by clicking outside the modal, clicking the close button in the header, or by pressing the escape key (these behaviours can all be overridden, see below), though you can also write your own callbacks that set `is_open` to `False`. {{example:components/modal/simple.py:modal}} @@ -19,6 +19,20 @@ By default the modal will render with a backdrop that dismisses the modal on cli {{example:components/modal/backdrop.py:modal}} +## Controlling closing behaviour + +You can hide the close button in the header by setting `close_button=False` in `ModalHeader`. + +If `backdrop="static"` you can prevent the user from dismissing the modal with the escape key by setting `keyboard=False`. + +{{example:components/modal/dismiss.py:modal}} + +## Fullscreen Modal + +You can create a fullscreen modal by setting `fullscreen=True`. Alternatively for a modal which is fullscreen on smaller screens but renders as a regular modal on larger screens, set `fullscreen="-down"` where `` is one of `sm`, `md`, `lg`, `xl`, or `xxl`. + +{{example:components/modal/fullscreen.py:modal}} + ## Scrolling long content When modals become too long for the user’s viewport or device, they scroll independently of the page itself. By default, the entire modal (including its header and footer) scrolls. If you prefer you can specify `scrollable=True` to scroll only the body of the modal. diff --git a/docs/components_page/components/modal/backdrop.R b/docs/components_page/components/modal/backdrop.R index 1e5487ed..a75447ac 100644 --- a/docs/components_page/components/modal/backdrop.R +++ b/docs/components_page/components/modal/backdrop.R @@ -28,7 +28,7 @@ modal <- htmlDiv( dbcModalFooter( dbcButton( "Close", id = "close-backdrop", n_clicks = 0, - class_name = "ml-auto" + class_name = "ms-auto" ) ) ), diff --git a/docs/components_page/components/modal/backdrop.jl b/docs/components_page/components/modal/backdrop.jl index 45cdae26..537d057b 100644 --- a/docs/components_page/components/modal/backdrop.jl +++ b/docs/components_page/components/modal/backdrop.jl @@ -23,7 +23,7 @@ modal = html_div([ dbc_button( "Close", id="close-backdrop", - class_name="ml-auto", + class_name="ms-auto", n_clicks=0, ), ), diff --git a/docs/components_page/components/modal/backdrop.py b/docs/components_page/components/modal/backdrop.py index d4dca2cb..ecfd5b79 100644 --- a/docs/components_page/components/modal/backdrop.py +++ b/docs/components_page/components/modal/backdrop.py @@ -4,7 +4,7 @@ modal = html.Div( [ - dbc.FormGroup( + html.Div( [ dbc.Label("Backdrop:"), dbc.RadioItems( @@ -22,7 +22,7 @@ dbc.Button("Open modal", id="open-backdrop", n_clicks=0), dbc.Modal( [ - dbc.ModalHeader("Header"), + dbc.ModalHeader(dbc.ModalTitle("Header"), close_button=True), dbc.ModalBody( "Change the backdrop of this modal with the radio buttons" ), @@ -30,7 +30,7 @@ dbc.Button( "Close", id="close-backdrop", - class_name="ml-auto", + class_name="ms-auto", n_clicks=0, ) ), diff --git a/docs/components_page/components/modal/centered.R b/docs/components_page/components/modal/centered.R index f9d0e23a..a929199d 100644 --- a/docs/components_page/components/modal/centered.R +++ b/docs/components_page/components/modal/centered.R @@ -10,7 +10,7 @@ modal <- htmlDiv( dbcModalBody("This modal is vertically centered"), dbcModalFooter( dbcButton( - "Close", id = "close-centered", class_name = "ml-auto", n_clicks=0 + "Close", id = "close-centered", class_name = "ms-auto", n_clicks=0 ) ) ), diff --git a/docs/components_page/components/modal/centered.jl b/docs/components_page/components/modal/centered.jl index a95bba87..72763114 100644 --- a/docs/components_page/components/modal/centered.jl +++ b/docs/components_page/components/modal/centered.jl @@ -10,7 +10,7 @@ modal = html_div([ dbc_button( "Close", id="close-centered", - class_name="ml-auto", + class_name="ms-auto", n_clicks=0, ), ), diff --git a/docs/components_page/components/modal/centered.py b/docs/components_page/components/modal/centered.py index 04365e28..527254aa 100644 --- a/docs/components_page/components/modal/centered.py +++ b/docs/components_page/components/modal/centered.py @@ -7,13 +7,13 @@ 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="ml-auto", + class_name="ms-auto", n_clicks=0, ) ), diff --git a/docs/components_page/components/modal/dismiss.py b/docs/components_page/components/modal/dismiss.py new file mode 100644 index 00000000..8de38979 --- /dev/null +++ b/docs/components_page/components/modal/dismiss.py @@ -0,0 +1,36 @@ +import dash_bootstrap_components as dbc +import dash_html_components as html +from dash.dependencies import Input, Output, State + +modal = html.Div( + [ + dbc.Button("Open modal", id="open-dismiss"), + dbc.Modal( + [ + dbc.ModalHeader( + dbc.ModalTitle("Dismissing"), close_button=False + ), + dbc.ModalBody( + "This modal has no close button and can't be dismissed by " + "pressing ESC. Try clicking on the backdrop or the below " + "close button." + ), + dbc.ModalFooter(dbc.Button("Close", id="close-dismiss")), + ], + id="modal-dismiss", + keyboard=False, + backdrop="static", + ), + ], +) + + +@app.callback( + Output("modal-dismiss", "is_open"), + [Input("open-dismiss", "n_clicks"), Input("close-dismiss", "n_clicks")], + [State("modal-dismiss", "is_open")], +) +def toggle_modal(n_open, n_close, is_open): + if n_open or n_close: + return not is_open + return is_open diff --git a/docs/components_page/components/modal/fullscreen.py b/docs/components_page/components/modal/fullscreen.py new file mode 100644 index 00000000..2879bfca --- /dev/null +++ b/docs/components_page/components/modal/fullscreen.py @@ -0,0 +1,27 @@ +import dash_bootstrap_components as dbc +import dash_html_components as html +from dash.dependencies import Input, Output, State + +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", + ), + ] +) + + +@app.callback( + Output("modal-fs", "is_open"), + Input("open-fs", "n_clicks"), + State("modal-fs", "is_open"), +) +def toggle_modal(n, is_open): + if n: + return not is_open + return is_open diff --git a/docs/components_page/components/modal/scrollable.R b/docs/components_page/components/modal/scrollable.R index 3b340141..b1b353ca 100644 --- a/docs/components_page/components/modal/scrollable.R +++ b/docs/components_page/components/modal/scrollable.R @@ -11,7 +11,7 @@ LOREM <- paste( modal <- htmlDiv( list( dbcButton( - "Scrolling modal", id = "open-scroll", n_clicks = 0, class_name = "mr-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), @@ -21,7 +21,7 @@ modal <- htmlDiv( dbcModalBody(LOREM), dbcModalFooter( dbcButton("Close", id = "close-scroll", n_clicks = 0, - class_name = "ml-auto") + class_name = "ms-auto") ) ), id = "modal-scroll", @@ -34,7 +34,7 @@ modal <- htmlDiv( dbcModalFooter( dbcButton( "Close", id = "close-body-scroll", n_clicks = 0, - class_name = "ml-auto" + class_name = "ms-auto" ) ) ), diff --git a/docs/components_page/components/modal/scrollable.jl b/docs/components_page/components/modal/scrollable.jl index 1e07ad26..95dbf714 100644 --- a/docs/components_page/components/modal/scrollable.jl +++ b/docs/components_page/components/modal/scrollable.jl @@ -4,7 +4,7 @@ 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']) modal = html_div([ - dbc_button("Scrolling modal", id="open-scroll", class_name="mr-1", 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( [ @@ -14,7 +14,7 @@ modal = html_div([ dbc_button( "Close", id="close-scroll", - class_name="ml-auto", + class_name="ms-auto", n_clicks=0, ), ), @@ -30,7 +30,7 @@ modal = html_div([ dbc_button( "Close", id="close-body-scroll", - class_name="ml-auto", + class_name="ms-auto", n_clicks=0, ), ), diff --git a/docs/components_page/components/modal/scrollable.py b/docs/components_page/components/modal/scrollable.py index c973fc9b..180caa25 100644 --- a/docs/components_page/components/modal/scrollable.py +++ b/docs/components_page/components/modal/scrollable.py @@ -5,20 +5,20 @@ modal = html.Div( [ dbc.Button( - "Scrolling modal", id="open-scroll", class_name="mr-1", n_clicks=0 + "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="ml-auto", + class_name="ms-auto", n_clicks=0, ) ), @@ -28,13 +28,13 @@ ), dbc.Modal( [ - dbc.ModalHeader("Header"), + dbc.ModalHeader("Modal with scrollable body"), dbc.ModalBody(LOREM), dbc.ModalFooter( dbc.Button( "Close", id="close-body-scroll", - class_name="ml-auto", + class_name="ms-auto", n_clicks=0, ) ), diff --git a/docs/components_page/components/modal/simple.R b/docs/components_page/components/modal/simple.R index 15205e36..c630a98e 100644 --- a/docs/components_page/components/modal/simple.R +++ b/docs/components_page/components/modal/simple.R @@ -10,7 +10,7 @@ modal <- htmlDiv( dbcModalBody("This is the content of the modal"), dbcModalFooter( dbcButton( - "Close", id = "close", n_clicks = 0, class_name = "ml-auto" + "Close", id = "close", n_clicks = 0, class_name = "ms-auto" ) ) ), diff --git a/docs/components_page/components/modal/simple.jl b/docs/components_page/components/modal/simple.jl index 3ceb0b52..f2a2d087 100644 --- a/docs/components_page/components/modal/simple.jl +++ b/docs/components_page/components/modal/simple.jl @@ -7,7 +7,7 @@ modal = html_div([ dbc_modalheader("Header"), dbc_modalbody("This is the content of the modal"), dbc_modalfooter( - dbc_button("Close", id="close", class_name="ml-auto", n_clicks=0), + dbc_button("Close", id="close", class_name="ms-auto", n_clicks=0), ), ], id="modal", diff --git a/docs/components_page/components/modal/simple.py b/docs/components_page/components/modal/simple.py index a9079ea2..3ddf93b1 100644 --- a/docs/components_page/components/modal/simple.py +++ b/docs/components_page/components/modal/simple.py @@ -7,11 +7,11 @@ 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="ml-auto", n_clicks=0 + "Close", id="close", class_name="ms-auto", n_clicks=0 ) ), ], diff --git a/docs/components_page/components/modal/size.R b/docs/components_page/components/modal/size.R index bf269f61..361eb6c8 100644 --- a/docs/components_page/components/modal/size.R +++ b/docs/components_page/components/modal/size.R @@ -3,8 +3,8 @@ library(dashHtmlComponents) modal <- htmlDiv( list( - dbcButton("Small modal", id = "open-sm", n_clicks = 0, class_name = "mr-1"), - dbcButton("Large modal", id = "open-lg", n_clicks = 0, class_name = "mr-1"), + dbcButton("Small modal", id = "open-sm", n_clicks = 0, class_name = "me-1"), + dbcButton("Large modal", id = "open-lg", n_clicks = 0, class_name = "me-1"), dbcButton("Extra large modal", n_clicks = 0, id = "open-xl"), dbcModal( list( @@ -12,7 +12,7 @@ modal <- htmlDiv( dbcModalBody("A small modal."), dbcModalFooter( dbcButton( - "Close", id = "close-sm", n_clicks = 0, class_name = "ml-auto" + "Close", id = "close-sm", n_clicks = 0, class_name = "ms-auto" ) ) ), @@ -26,7 +26,7 @@ modal <- htmlDiv( dbcModalBody("A large modal."), dbcModalFooter( dbcButton( - "Close", id = "close-lg", n_clicks = 0, class_name = "ml-auto" + "Close", id = "close-lg", n_clicks = 0, class_name = "ms-auto" ) ) ), @@ -40,7 +40,7 @@ modal <- htmlDiv( dbcModalBody("An extra large modal."), dbcModalFooter( dbcButton( - "Close", id = "close-xl", n_clicks = 0, class_name = "ml-auto" + "Close", id = "close-xl", n_clicks = 0, class_name = "ms-auto" ) ) ), diff --git a/docs/components_page/components/modal/size.jl b/docs/components_page/components/modal/size.jl index 48ed7525..cacc1d08 100644 --- a/docs/components_page/components/modal/size.jl +++ b/docs/components_page/components/modal/size.jl @@ -1,15 +1,15 @@ using DashBootstrapComponents, DashHtmlComponents modal = html_div([ - dbc_button("Small modal", id="open-sm", class_name="mr-1", n_clicks=0), - dbc_button("Large modal", id="open-lg", class_name="mr-1", 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="ml-auto", n_clicks=0), + dbc_button("Close", id="close-sm", class_name="ms-auto", n_clicks=0), ), ], id="modal-sm", @@ -21,7 +21,7 @@ modal = html_div([ dbc_modalheader("Header"), dbc_modalbody("A large modal."), dbc_modalfooter( - dbc_button("Close", id="close-lg", class_name="ml-auto", n_clicks=0), + dbc_button("Close", id="close-lg", class_name="ms-auto", n_clicks=0), ), ], id="modal-lg", @@ -33,7 +33,7 @@ modal = html_div([ dbc_modalheader("Header"), dbc_modalbody("An extra large modal."), dbc_modalfooter( - dbc_button("Close", id="close-xl", class_name="ml-auto", n_clicks=0), + dbc_button("Close", id="close-xl", class_name="ms-auto", n_clicks=0), ), ], id="modal-xl", diff --git a/docs/components_page/components/modal/size.py b/docs/components_page/components/modal/size.py index 3bd5195c..ac02103a 100644 --- a/docs/components_page/components/modal/size.py +++ b/docs/components_page/components/modal/size.py @@ -4,21 +4,13 @@ modal = html.Div( [ - dbc.Button("Small modal", id="open-sm", class_name="mr-1", n_clicks=0), - dbc.Button("Large modal", id="open-lg", class_name="mr-1", 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.ModalHeader(dbc.ModalTitle("Header")), dbc.ModalBody("A small modal."), - dbc.ModalFooter( - dbc.Button( - "Close", - id="close-sm", - class_name="ml-auto", - n_clicks=0, - ) - ), ], id="modal-sm", size="sm", @@ -26,16 +18,8 @@ ), dbc.Modal( [ - dbc.ModalHeader("Header"), + dbc.ModalHeader(dbc.ModalTitle("Header")), dbc.ModalBody("A large modal."), - dbc.ModalFooter( - dbc.Button( - "Close", - id="close-lg", - class_name="ml-auto", - n_clicks=0, - ) - ), ], id="modal-lg", size="lg", @@ -43,16 +27,8 @@ ), dbc.Modal( [ - dbc.ModalHeader("Header"), + dbc.ModalHeader(dbc.ModalTitle("Header")), dbc.ModalBody("An extra large modal."), - dbc.ModalFooter( - dbc.Button( - "Close", - id="close-xl", - class_name="ml-auto", - n_clicks=0, - ) - ), ], id="modal-xl", size="xl", @@ -62,26 +38,26 @@ ) -def toggle_modal(n1, n2, is_open): - if n1 or n2: +def toggle_modal(n1, is_open): + if n1: return not is_open return is_open app.callback( Output("modal-sm", "is_open"), - [Input("open-sm", "n_clicks"), Input("close-sm", "n_clicks")], - [State("modal-sm", "is_open")], + Input("open-sm", "n_clicks"), + State("modal-sm", "is_open"), )(toggle_modal) app.callback( Output("modal-lg", "is_open"), - [Input("open-lg", "n_clicks"), Input("close-lg", "n_clicks")], - [State("modal-lg", "is_open")], + Input("open-lg", "n_clicks"), + State("modal-lg", "is_open"), )(toggle_modal) app.callback( Output("modal-xl", "is_open"), - [Input("open-xl", "n_clicks"), Input("close-xl", "n_clicks")], - [State("modal-xl", "is_open")], + Input("open-xl", "n_clicks"), + State("modal-xl", "is_open"), )(toggle_modal) diff --git a/docs/components_page/components/navbar.md b/docs/components_page/components/navbar.md index 52fd3f0c..dd29d718 100644 --- a/docs/components_page/components/navbar.md +++ b/docs/components_page/components/navbar.md @@ -28,3 +28,4 @@ Here is an example of a custom navbar, see the `examples/` folder in the [GitHub {{apidoc:src/components/nav/NavbarBrand.js}} {{apidoc:src/components/nav/NavbarToggler.js}} + diff --git a/docs/components_page/components/navbar/navbar.R b/docs/components_page/components/navbar/navbar.R index a3fe0dff..ae8846e4 100644 --- a/docs/components_page/components/navbar/navbar.R +++ b/docs/components_page/components/navbar/navbar.R @@ -8,13 +8,12 @@ search_bar <- dbcRow( dbcCol(dbcInput(type = "search", placeholder = "Search")), dbcCol( dbcButton( - "Search", color = "primary", n_clicks = 0, class_name = "ml-2" + "Search", color = "primary", n_clicks = 0, class_name = "ms-2" ), width = "auto" ) ), - no_gutters = TRUE, - class_name = "ml-auto flex-nowrap mt-3 mt-md-0", + class_name = "ms-auto flex-nowrap mt-3 mt-md-0 g-0", align = "center", ) @@ -25,10 +24,10 @@ navbar <- dbcNavbar( dbcRow( list( dbcCol(htmlImg(src = PLOTLY_LOGO, height = "30px")), - dbcCol(dbcNavbarBrand("Navbar", class_name = "ml-2")) + dbcCol(dbcNavbarBrand("Navbar", class_name = "ms-2")) ), align = "center", - no_gutters = TRUE + class_name="g-0" ), href = "https://plotly.com" ), diff --git a/docs/components_page/components/navbar/navbar.jl b/docs/components_page/components/navbar/navbar.jl index 4c31682f..399f4794 100644 --- a/docs/components_page/components/navbar/navbar.jl +++ b/docs/components_page/components/navbar/navbar.jl @@ -6,12 +6,11 @@ search_bar = dbc_row( [ dbc_col(dbc_input(type="search", placeholder="Search")), dbc_col( - dbc_button("Search", color="primary", class_name="ml-2", n_clicks=0), + dbc_button("Search", color="primary", class_name="ms-2", n_clicks=0), width="auto", ), ], - no_gutters=true, - class_name="ml-auto flex-nowrap mt-3 mt-md-0", + class_name="ms-auto flex-nowrap mt-3 mt-md-0 g-0", align="center", ); @@ -22,15 +21,15 @@ navbar = dbc_navbar( dbc_row( [ dbc_col(html_img(src=PLOTLY_LOGO, height="30px")), - dbc_col(dbc_navbarbrand("Navbar", class_name="ml-2")), + dbc_col(dbc_navbarbrand("Navbar", class_name="ms-2")), ], align="center", - no_gutters=true, + class_name="g-0", ), href="https://plotly.com", ), dbc_navbartoggler(id="navbar-toggler", n_clicks=0), - dbc_collapse(search_bar, id="navbar-collapse", navbar=true, is_open=false), + dbc_collapse(search_bar, id="navbar-collapse", is_open=false, navbar=true), ], color="dark", dark=true, diff --git a/docs/components_page/components/navbar/navbar.py b/docs/components_page/components/navbar/navbar.py index 59b7ce08..8886b253 100644 --- a/docs/components_page/components/navbar/navbar.py +++ b/docs/components_page/components/navbar/navbar.py @@ -9,13 +9,12 @@ dbc.Col(dbc.Input(type="search", placeholder="Search")), dbc.Col( dbc.Button( - "Search", color="primary", class_name="ml-2", n_clicks=0 + "Search", color="primary", class_name="ms-2", n_clicks=0 ), width="auto", ), ], - no_gutters=True, - class_name="ml-auto flex-nowrap mt-3 mt-md-0", + class_name="ms-auto flex-nowrap mt-3 mt-md-0 g-0", align="center", ) @@ -26,16 +25,16 @@ dbc.Row( [ dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")), - dbc.Col(dbc.NavbarBrand("Navbar", class_name="ml-2")), + dbc.Col(dbc.NavbarBrand("Navbar", class_name="ms-2")), ], align="center", - no_gutters=True, + class_name="g-0", ), href="https://plotly.com", ), dbc.NavbarToggler(id="navbar-toggler", n_clicks=0), dbc.Collapse( - search_bar, id="navbar-collapse", navbar=True, is_open=False + search_bar, id="navbar-collapse", is_open=False, navbar=True ), ], color="dark", diff --git a/docs/components_page/components/offcanvas.md b/docs/components_page/components/offcanvas.md new file mode 100644 index 00000000..bdd12ab4 --- /dev/null +++ b/docs/components_page/components/offcanvas.md @@ -0,0 +1,28 @@ +--- +title: Offcanvas +lead: Use the `Offcanvas` component to add a customisable sidebar to your apps. +--- + +`Offcanvas` components work in a similar fashion to a simplified `Modal`. Set the `is_open` prop of the `Offcanvas` to `True` to open the offcanvas. By default, the offcanvas can be dismissed by clicking the close button in the header, outside the offcanvas or by pressing the escape key (these behaviours can all be overridden, using `close_button=False`, `backdrop="static"` and `keyboard=False` respectively - see below), though you can also write your own callbacks that set `is_open` to `False`. + +{{example:components/offcanvas/simple.py:offcanvas}} + +## Placement + +By default the offcanvas will appear to the left of the screen (`start`). You can change where it appears though by using the `placement` property. + +{{example:components/offcanvas/placement.py:offcanvas}} + +## Backdrop + +By default the offcanvas will render with a backdrop that dismisses the offcanvas on click. Set `backdrop=False` to render the offcanvas without a backdrop, or `backdrop="static"` to render a backdrop that doesn't dismiss the offcanvas when clicked. + +{{example:components/offcanvas/backdrop.py:offcanvas}} + +## Scrolling main page contents + +By default, when an offcanvas is displaying, the user is unable to scroll content on the main page. If you prefer you can specify `scrollable=True` to allow the user to still scroll the content whilst the offcanvas is showing. + +{{example:components/offcanvas/scrollable.py:offcanvas}} + +{{apidoc:src/components/offcanvas/Offcanvas.js}} diff --git a/docs/components_page/components/offcanvas/backdrop.R b/docs/components_page/components/offcanvas/backdrop.R new file mode 100644 index 00000000..970d60e4 --- /dev/null +++ b/docs/components_page/components/offcanvas/backdrop.R @@ -0,0 +1,68 @@ +library(dashBootstrapComponents) +library(dashHtmlComponents) + +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" + ), + ) +) + + +app$callback( + output("offcanvas-backdrop", "backdrop"), + list(input("offcanvas-backdrop-selector", "value")), + function(backdrop) { + return(backdrop) + } +) + + +app$callback( + output("offcanvas-backdrop", "is_open"), + list( + input("open-offcanvas-backdrop", "n_clicks"), + 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 new file mode 100644 index 00000000..13aceb4f --- /dev/null +++ b/docs/components_page/components/offcanvas/backdrop.jl @@ -0,0 +1,69 @@ +using DashBootstrapComponents, DashHtmlComponents + +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" + ), + 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, + ), + ], + id="offcanvas-backdrop", + title="Offcanvas with/without backdrop" + ), + ] +) + + +callback!( + app, + Output("offcanvas-backdrop", "backdrop"), + Input("offcanvas-backdrop-selector", "value"), +) do backdrop + return backdrop +end; + + +callback!( + app, + Output("offcanvas-backdrop", "is_open"), + Input("open-offcanvas-backdrop", "n_clicks"), + Input("close-offcanvas-backdrop", "n_clicks"), + State("offcanvas-backdrop", "is_open"), +) do n1, n2, is_open + return n1 > 0 || n2 > 0 ? is_open == 0 : is_open +end; diff --git a/docs/components_page/components/offcanvas/backdrop.py b/docs/components_page/components/offcanvas/backdrop.py new file mode 100644 index 00000000..83382e4e --- /dev/null +++ b/docs/components_page/components/offcanvas/backdrop.py @@ -0,0 +1,66 @@ +import dash_bootstrap_components as dbc +import dash_html_components as html +from dash.dependencies import Input, Output, State + +backdrop_selector = html.Div( + [ + dbc.RadioItems( + id="offcanvas-backdrop-selector", + options=[ + {"label": "True (default)", "value": True}, + {"label": "False", "value": False}, + {"label": "Static (no dismiss)", "value": "static"}, + ], + inline=True, + value=True, + ), + ], + 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", + ), + ] +) + + +@app.callback( + Output("offcanvas-backdrop", "backdrop"), + [Input("offcanvas-backdrop-selector", "value")], +) +def select_backdrop(backdrop): + return backdrop + + +@app.callback( + Output("offcanvas-backdrop", "is_open"), + [ + Input("open-offcanvas-backdrop", "n_clicks"), + Input("close-offcanvas-backdrop", "n_clicks"), + ], + [State("offcanvas-backdrop", "is_open")], +) +def toggle_offcanvas(n1, n2, is_open): + if n1 or n2: + return not is_open + return is_open diff --git a/docs/components_page/components/offcanvas/placement.R b/docs/components_page/components/offcanvas/placement.R new file mode 100644 index 00000000..cd6e8b4e --- /dev/null +++ b/docs/components_page/components/offcanvas/placement.R @@ -0,0 +1,86 @@ +library(dashBootstrapComponents) +library(dashHtmlComponents) + +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", + ), + ) +) + + +app$callback( + output("offcanvas-placement", "is_open"), + list( + input("open-offcanvas-placement", "n_clicks"), + state("offcanvas-placement", "is_open") + ), + function(n1, is_open) { + if (n1 > 0) { + return(!is_open) + } + return(is_open) + } +) + + +app$callback( + output("offcanvas-placement", "placement"), + list( + input("offcanvas-placement-selector", "value") + ), + function(placement) { + return(placement) + } +) \ No newline at end of file diff --git a/docs/components_page/components/offcanvas/placement.jl b/docs/components_page/components/offcanvas/placement.jl new file mode 100644 index 00000000..68b8a35a --- /dev/null +++ b/docs/components_page/components/offcanvas/placement.jl @@ -0,0 +1,72 @@ +using DashBootstrapComponents, DashHtmlComponents + +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" + ), + 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", + ), + ], + id="offcanvas-placement", + title="Placement" + ), + ] +) + + +callback!( + app, + Output("offcanvas-placement", "is_open"), + Input("open-offcanvas-placement", "n_clicks"), + State("offcanvas-placement", "is_open"), +) do n1, is_open + return n1 > 0 ? is_open == 0 : is_open +end; + + +callback!( + app, + Output("offcanvas-placement", "placement"), + Input("offcanvas-placement-selector", "value"), +) do placement + return placement +end; diff --git a/docs/components_page/components/offcanvas/placement.py b/docs/components_page/components/offcanvas/placement.py new file mode 100644 index 00000000..d73a40d9 --- /dev/null +++ b/docs/components_page/components/offcanvas/placement.py @@ -0,0 +1,62 @@ +import dash_bootstrap_components as dbc +import dash_html_components as html +from dash.dependencies import Input, Output, State + +placement_selector = html.Div( + # FIXME: Fix styling here + [ + dbc.InputGroupText("Placement"), + dbc.Select( + id="offcanvas-placement-selector", + options=[ + {"label": "start (Default)", "value": "start"}, + {"label": "end", "value": "end"}, + {"label": "top", "value": "top"}, + {"label": "bottom", "value": "bottom"}, + ], + 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", + ), + ] +) + + +@app.callback( + Output("offcanvas-placement", "is_open"), + Input("open-offcanvas-placement", "n_clicks"), + [State("offcanvas-placement", "is_open")], +) +def toggle_offcanvas(n1, is_open): + if n1: + return not is_open + return is_open + + +@app.callback( + Output("offcanvas-placement", "placement"), + Input("offcanvas-placement-selector", "value"), +) +def toggle_placement(placement): + return placement diff --git a/docs/components_page/components/offcanvas/scrollable.R b/docs/components_page/components/offcanvas/scrollable.R new file mode 100644 index 00000000..b1c7d7fc --- /dev/null +++ b/docs/components_page/components/offcanvas/scrollable.R @@ -0,0 +1,44 @@ +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" + ), + ) +) + + +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) + } +) diff --git a/docs/components_page/components/offcanvas/scrollable.jl b/docs/components_page/components/offcanvas/scrollable.jl new file mode 100644 index 00000000..e17854d8 --- /dev/null +++ b/docs/components_page/components/offcanvas/scrollable.jl @@ -0,0 +1,38 @@ +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" + ), + ] +) + + +callback!( + app, + Output("offcanvas-scrollable", "is_open"), + Input("open-offcanvas-scrollable", "n_clicks"), + Input("close-offcanvas-scrollable", "n_clicks"), + State("offcanvas-scrollable", "is_open"), +) do n1, n2, is_open + return n1 > 0 || n2 > 0 ? is_open == 0 : is_open +end; diff --git a/docs/components_page/components/offcanvas/scrollable.py b/docs/components_page/components/offcanvas/scrollable.py new file mode 100644 index 00000000..962dcd0f --- /dev/null +++ b/docs/components_page/components/offcanvas/scrollable.py @@ -0,0 +1,41 @@ +import dash_bootstrap_components as dbc +import dash_html_components as html +from dash.dependencies import Input, Output, State + +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", + ), + ] +) + + +@app.callback( + Output("offcanvas-scrollable", "is_open"), + [ + Input("open-offcanvas-scrollable", "n_clicks"), + Input("close-offcanvas-scrollable", "n_clicks"), + ], + [State("offcanvas-scrollable", "is_open")], +) +def toggle_offcanvas_scrollable(n1, n2, is_open): + if n1 or n2: + return not is_open + return is_open diff --git a/docs/components_page/components/offcanvas/simple.R b/docs/components_page/components/offcanvas/simple.R new file mode 100644 index 00000000..b8c3b1e4 --- /dev/null +++ b/docs/components_page/components/offcanvas/simple.R @@ -0,0 +1,34 @@ +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" + ), + ) +) + + +app$callback( + output("offcanvas", "is_open"), + list( + input("open-offcanvas", "n_clicks"), + state("offcanvas", "is_open") + ), + function(n1, is_open) { + if (n1 > 0) { + return(!is_open) + } + return(is_open) + } +) \ No newline at end of file diff --git a/docs/components_page/components/offcanvas/simple.jl b/docs/components_page/components/offcanvas/simple.jl new file mode 100644 index 00000000..a75ba835 --- /dev/null +++ b/docs/components_page/components/offcanvas/simple.jl @@ -0,0 +1,26 @@ +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" + ), + ] +); + + +callback!( + app, + Output("offcanvas", "is_open"), + Input("open-offcanvas", "n_clicks"), + State("offcanvas", "is_open"), +) do n1, is_open + return n1 > 0 ? is_open == 0 : is_open +end; diff --git a/docs/components_page/components/offcanvas/simple.py b/docs/components_page/components/offcanvas/simple.py new file mode 100644 index 00000000..bf08034e --- /dev/null +++ b/docs/components_page/components/offcanvas/simple.py @@ -0,0 +1,29 @@ +import dash_bootstrap_components as dbc +import dash_html_components as html +from dash.dependencies import Input, Output, State + +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", + ), + ] +) + + +@app.callback( + Output("offcanvas", "is_open"), + Input("open-offcanvas", "n_clicks"), + [State("offcanvas", "is_open")], +) +def toggle_offcanvas(n1, is_open): + if n1: + return not is_open + return is_open diff --git a/docs/components_page/components/pagination.md b/docs/components_page/components/pagination.md new file mode 100644 index 00000000..27330f65 --- /dev/null +++ b/docs/components_page/components/pagination.md @@ -0,0 +1,30 @@ +--- +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. + +The number of values displayed is controlled using the `max_value` property, and this must be defined. See below for details about changing the `min_value` and `step`. + +{{example:components/pagination/simple.py:pagination}} + +## Pagination item size + +Set the size of the pagination items using the `size` prop. The options are `"sm"` or `"lg"` for small or large items. If you don't specify anything, you will get the default pagination size. + +{{example:components/pagination/size.py:pagination}} + +## First, Previous, Next and Last icons + +You can choose to include the First and Last icons to navigate to the first and last page respectively, by making use of the `first_last` property. Previous and Next icons can be added with the `previous_next` property. + +{{example:components/pagination/navigation.py:pagination}} + +## Collapse + +If there are too many numbers, the pagination object can become unwieldy. Instead, set `fully_expanded=False` to replace some of the numbers with ellipsis. If the `max_value` is too small for this to make a difference, a standard pagination component showing all numbers is rendered instead, even when `fully_expanded=False`. + +{{example:components/pagination/collapse.py:pagination}} + +{{apidoc:src/components/pagination/Pagination.js}} diff --git a/docs/components_page/components/pagination/collapse.R b/docs/components_page/components/pagination/collapse.R new file mode 100644 index 00000000..c9c17591 --- /dev/null +++ b/docs/components_page/components/pagination/collapse.R @@ -0,0 +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), + ) +) diff --git a/docs/components_page/components/pagination/collapse.jl b/docs/components_page/components/pagination/collapse.jl new file mode 100644 index 00000000..3cc5f4ff --- /dev/null +++ b/docs/components_page/components/pagination/collapse.jl @@ -0,0 +1,10 @@ +using DashBootstrapComponents, DashHtmlComponents + +pagination = html_div( + [ + html_div("Collapse long pagination objects using ellipsis"), + dbc_pagination(max_value=10, fully_expanded=false), + html_div("If space won't be saved, it won't be collapsed"), + dbc_pagination(max_value=5, fully_expanded=false), + ] +) diff --git a/docs/components_page/components/pagination/collapse.py b/docs/components_page/components/pagination/collapse.py new file mode 100644 index 00000000..ee32f848 --- /dev/null +++ b/docs/components_page/components/pagination/collapse.py @@ -0,0 +1,11 @@ +import dash_bootstrap_components as dbc +import dash_html_components as html + +pagination = html.Div( + [ + html.Div("Collapse long pagination objects using ellipsis"), + dbc.Pagination(max_value=10, fully_expanded=False), + html.Div("If space won't be saved, it won't be collapsed"), + dbc.Pagination(max_value=5, fully_expanded=False), + ] +) diff --git a/docs/components_page/components/pagination/navigation.R b/docs/components_page/components/pagination/navigation.R new file mode 100644 index 00000000..35707e78 --- /dev/null +++ b/docs/components_page/components/pagination/navigation.R @@ -0,0 +1,10 @@ +library(dashBootstrapComponents) +library(dashCoreComponents) + +pagination <- htmlDiv( + list( + dbcPagination(max_value=5, first_last=TRUE), + dbcPagination(max_value=5, previous_next=TRUE), + dbcPagination(max_value=5, first_last=TRUE, previous_next=TRUE), + ) +) diff --git a/docs/components_page/components/pagination/navigation.jl b/docs/components_page/components/pagination/navigation.jl new file mode 100644 index 00000000..917b9558 --- /dev/null +++ b/docs/components_page/components/pagination/navigation.jl @@ -0,0 +1,9 @@ +using DashBootstrapComponents, DashHtmlComponents + +pagination = html_div( + [ + dbc_pagination(max_value=5, first_last=true), + dbc_pagination(max_value=5, previous_next=true), + dbc_pagination(max_value=5, first_last=true, previous_next=true), + ] +) diff --git a/docs/components_page/components/pagination/navigation.py b/docs/components_page/components/pagination/navigation.py new file mode 100644 index 00000000..20b3c353 --- /dev/null +++ b/docs/components_page/components/pagination/navigation.py @@ -0,0 +1,10 @@ +import dash_bootstrap_components as dbc +import dash_html_components as html + +pagination = html.Div( + [ + dbc.Pagination(max_value=5, first_last=True), + dbc.Pagination(max_value=5, previous_next=True), + dbc.Pagination(max_value=5, first_last=True, previous_next=True), + ] +) diff --git a/docs/components_page/components/pagination/simple.R b/docs/components_page/components/pagination/simple.R new file mode 100644 index 00000000..b284add5 --- /dev/null +++ b/docs/components_page/components/pagination/simple.R @@ -0,0 +1,53 @@ +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) + } +) diff --git a/docs/components_page/components/pagination/simple.jl b/docs/components_page/components/pagination/simple.jl new file mode 100644 index 00000000..2f13a7a9 --- /dev/null +++ b/docs/components_page/components/pagination/simple.jl @@ -0,0 +1,51 @@ +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/simple.py b/docs/components_page/components/pagination/simple.py new file mode 100644 index 00000000..4dc6b1d5 --- /dev/null +++ b/docs/components_page/components/pagination/simple.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/size.R b/docs/components_page/components/pagination/size.R new file mode 100644 index 00000000..fa9eed1e --- /dev/null +++ b/docs/components_page/components/pagination/size.R @@ -0,0 +1,21 @@ +library(dashBootstrapComponents) +library(dashHtmlComponents) + +pagination <- htmlDiv( + list( + htmlDiv("Small"), + dbcPagination( + max_value=5, + size="sm", + ), + htmlDiv("Default"), + dbcPagination( + max_value=5, + ), + htmlDiv("Large"), + dbcPagination( + max_value=5, + size="lg", + ), + ) +) diff --git a/docs/components_page/components/pagination/size.jl b/docs/components_page/components/pagination/size.jl new file mode 100644 index 00000000..3b4936cd --- /dev/null +++ b/docs/components_page/components/pagination/size.jl @@ -0,0 +1,20 @@ +using DashBootstrapComponents, DashHtmlComponents + +pagination = html_div( + [ + html_div("Small"), + dbc_pagination( + max_value=5, + size="sm", + ), + html_div("Default"), + dbc_pagination( + max_value=5, + ), + html_div("Large"), + dbc_pagination( + max_value=5, + size="lg", + ), + ] +) diff --git a/docs/components_page/components/pagination/size.py b/docs/components_page/components/pagination/size.py new file mode 100644 index 00000000..2257ec63 --- /dev/null +++ b/docs/components_page/components/pagination/size.py @@ -0,0 +1,13 @@ +import dash_bootstrap_components as dbc +import dash_html_components as html + +pagination = html.Div( + [ + html.Div("Small"), + dbc.Pagination(max_value=5, size="sm"), + html.Div("Default"), + dbc.Pagination(max_value=5), + html.Div("Large"), + dbc.Pagination(max_value=5, size="lg"), + ] +) diff --git a/docs/components_page/components/popover/popover.R b/docs/components_page/components/popover/popover.R index 4a3060b5..59e676cf 100644 --- a/docs/components_page/components/popover/popover.R +++ b/docs/components_page/components/popover/popover.R @@ -10,7 +10,7 @@ popovers <- htmlDiv( list( dbcButton( "Click", id = "click-target", n_clicks = 0, - color = "danger", class_name = "mr-1" + color = "danger", class_name = "me-1" ), dbcPopover( popover_children, @@ -20,7 +20,7 @@ popovers <- htmlDiv( ), dbcButton( "Focus", id = "focus-target", n_clicks = 0, - color = "danger", class_name = "mr-1" + color = "danger", class_name = "me-1" ), dbcPopover( popover_children, @@ -30,7 +30,7 @@ popovers <- htmlDiv( ), dbcButton( "Hover", id = "hover-target", n_clicks = 0, - color = "danger", class_name = "mr-1" + color = "danger", class_name = "me-1" ), dbcPopover( popover_children, diff --git a/docs/components_page/components/popover/popover.jl b/docs/components_page/components/popover/popover.jl index 5c859963..e11cdca4 100644 --- a/docs/components_page/components/popover/popover.jl +++ b/docs/components_page/components/popover/popover.jl @@ -10,7 +10,7 @@ popovers = html_div([ "Click", id="click-target", color="danger", - class_name="mr-1", + class_name="me-1", n_clicks=0, ), dbc_popover(popover_children, id="click", target="click-target", trigger="click"), @@ -18,7 +18,7 @@ popovers = html_div([ "Focus", id="focus-target", color="danger", - class_name="mr-1", + class_name="me-1", n_clicks=0, ), dbc_popover(popover_children, id="focus", target="focus-target", trigger="focus"), @@ -26,7 +26,7 @@ popovers = html_div([ "Hover", id="hover-target", color="danger", - class_name="mr-1", + class_name="me-1", n_clicks=0, ), dbc_popover(popover_children, id="hover", target="hover-target", trigger="hover"), diff --git a/docs/components_page/components/popover/popover.py b/docs/components_page/components/popover/popover.py index 5846f7ba..aa88ef26 100644 --- a/docs/components_page/components/popover/popover.py +++ b/docs/components_page/components/popover/popover.py @@ -12,7 +12,7 @@ "Click", id="click-target", color="danger", - class_name="mr-1", + class_name="me-1", n_clicks=0, ), dbc.Popover( @@ -25,7 +25,7 @@ "Focus", id="focus-target", color="danger", - class_name="mr-1", + class_name="me-1", n_clicks=0, ), dbc.Popover( @@ -38,7 +38,7 @@ "Hover", id="hover-target", color="danger", - class_name="mr-1", + class_name="me-1", n_clicks=0, ), dbc.Popover( diff --git a/docs/components_page/components/popover/popover_callback.R b/docs/components_page/components/popover/popover_callback.R index 5862cd70..54159e3e 100644 --- a/docs/components_page/components/popover/popover_callback.R +++ b/docs/components_page/components/popover/popover_callback.R @@ -4,7 +4,7 @@ library(dashHtmlComponents) popover <- htmlDiv( list( dbcButton("Toggle", id = "toggle", n_clicks = 0, - color = "success", class_name = "mr-4"), + 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 c9c7ee22..040820ae 100644 --- a/docs/components_page/components/popover/popover_callback.jl +++ b/docs/components_page/components/popover/popover_callback.jl @@ -5,7 +5,7 @@ popover = html_div([ "Toggle", id="toggle", color="success", - class_name="mr-4", + class_name="me-4", n_clicks=0, ), dbc_button("Target", id="target", color="danger", n_clicks=0), diff --git a/docs/components_page/components/popover/popover_callback.py b/docs/components_page/components/popover/popover_callback.py index 555aef3c..9069735c 100644 --- a/docs/components_page/components/popover/popover_callback.py +++ b/docs/components_page/components/popover/popover_callback.py @@ -8,7 +8,7 @@ "Toggle", id="toggle", color="success", - class_name="mr-4", + class_name="me-4", n_clicks=0, ), dbc.Button("Target", id="target", color="danger", n_clicks=0), diff --git a/docs/components_page/components/progress.md b/docs/components_page/components/progress.md index 1a9a87f4..dc3cbb85 100644 --- a/docs/components_page/components/progress.md +++ b/docs/components_page/components/progress.md @@ -11,7 +11,7 @@ Use the `value` argument of `Progress` to set progress. ## Labels -To add a text label to the progress bar, simply add it as a child. +To add a text label to the progress bar, use the `label` prop. {{example:components/progress/labels.py:progress}} @@ -29,7 +29,7 @@ Use the `color` argument along with one of Bootstrap's contextual color names to ## Multiple bars -You can nest `Progress` components to make a progress bar with multiple bars. Set `multi=True` on the parent `Progress` component, and `bar=True` on each child. +You can nest `Progress` components to make a progress bar with multiple bars. Make sure you set `bar=True` on each of the children. {{example:components/progress/multiple.py:progress}} diff --git a/docs/components_page/components/progress/labels.R b/docs/components_page/components/progress/labels.R index 15737746..7b30570b 100644 --- a/docs/components_page/components/progress/labels.R +++ b/docs/components_page/components/progress/labels.R @@ -1,3 +1,3 @@ library(dashBootstrapComponents) -progress <- dbcProgress("25%", value = 25) +progress <- dbcProgress(label = "25%", value = 25) diff --git a/docs/components_page/components/progress/labels.jl b/docs/components_page/components/progress/labels.jl index 1db5843d..7d28d16d 100644 --- a/docs/components_page/components/progress/labels.jl +++ b/docs/components_page/components/progress/labels.jl @@ -1,3 +1,3 @@ using DashBootstrapComponents -progress = dbc_progress("25%", value=25); +progress = dbc_progress(label="25%", value=25); diff --git a/docs/components_page/components/progress/labels.py b/docs/components_page/components/progress/labels.py index f5472a67..d916cd16 100644 --- a/docs/components_page/components/progress/labels.py +++ b/docs/components_page/components/progress/labels.py @@ -1,3 +1,3 @@ import dash_bootstrap_components as dbc -progress = dbc.Progress("25%", value=25) +progress = dbc.Progress(label="25%", value=25) diff --git a/docs/components_page/components/progress/multiple.R b/docs/components_page/components/progress/multiple.R index 4b3986bf..26221781 100644 --- a/docs/components_page/components/progress/multiple.R +++ b/docs/components_page/components/progress/multiple.R @@ -5,6 +5,5 @@ progress <- dbcProgress( dbcProgress(valu = 20, color = "success", bar = TRUE), dbcProgress(value = 30, color = "warning", bar = TRUE), dbcProgress(value = 20, color = "danger", bar = TRUE) - ), - multi = TRUE + ) ) diff --git a/docs/components_page/components/progress/multiple.jl b/docs/components_page/components/progress/multiple.jl index 67b7052a..287cb061 100644 --- a/docs/components_page/components/progress/multiple.jl +++ b/docs/components_page/components/progress/multiple.jl @@ -2,9 +2,8 @@ using DashBootstrapComponents progress = dbc_progress( [ - dbc_progress(value=20, color="success", bar=true), - dbc_progress(value=30, color="warning", bar=true), - dbc_progress(value=20, color="danger", bar=true), + dbc_progress(value=20, color="success"), + dbc_progress(value=30, color="warning"), + dbc_progress(value=20, color="danger"), ], - multi=true, ); diff --git a/docs/components_page/components/progress/multiple.py b/docs/components_page/components/progress/multiple.py index d5c68efd..81531b55 100644 --- a/docs/components_page/components/progress/multiple.py +++ b/docs/components_page/components/progress/multiple.py @@ -5,6 +5,5 @@ dbc.Progress(value=20, color="success", bar=True), dbc.Progress(value=30, color="warning", bar=True), dbc.Progress(value=20, color="danger", bar=True), - ], - multi=True, + ] ) diff --git a/docs/components_page/components/spinner/button.R b/docs/components_page/components/spinner/button.R index 769abd4a..48a36a69 100644 --- a/docs/components_page/components/spinner/button.R +++ b/docs/components_page/components/spinner/button.R @@ -7,7 +7,7 @@ spinners <- htmlDiv( dbcSpinner(size = "sm"), color = "primary", disabled = TRUE, - class_name = "mr-1" + 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 7193923a..123ba897 100644 --- a/docs/components_page/components/spinner/button.jl +++ b/docs/components_page/components/spinner/button.jl @@ -5,7 +5,7 @@ spinners = html_div([ dbc_spinner(size="sm"), color="primary", disabled=true, - class_name="mr-1", + class_name="me-1", ), dbc_button( [dbc_spinner(size="sm"), " Loading..."], diff --git a/docs/components_page/components/spinner/button.py b/docs/components_page/components/spinner/button.py index c3d0b157..8bc1093b 100644 --- a/docs/components_page/components/spinner/button.py +++ b/docs/components_page/components/spinner/button.py @@ -7,7 +7,7 @@ dbc.Spinner(size="sm"), color="primary", disabled=True, - class_name="mr-1", + class_name="me-1", ), dbc.Button( [dbc.Spinner(size="sm"), " Loading..."], diff --git a/docs/components_page/components/tabs.md b/docs/components_page/components/tabs.md index df40aca9..42d5ca05 100644 --- a/docs/components_page/components/tabs.md +++ b/docs/components_page/components/tabs.md @@ -25,7 +25,7 @@ Use `card=True` when placing your `Tabs` inside a `CardHeader`. You must use a c You can modify the style of the tabs and labels using the `tab_style` and `label_style` properties. Use `tab_style` to modify the tab itself, for example to modify placement and spacing. Use `label_style` to modify the label, for example the font, text color, border-radius and so on. -You can also apply CSS classes to the tab or label using the `tab_class_name` or `label_class_name` properties. In the below example we apply the Bootstrap classes `ml-auto`, which sets the left margin to `auto`, and `text-success`, which sets the text color to the theme's 'success' color. +You can also apply CSS classes to the tab or label using the `tab_class_name` or `label_class_name` properties. In the below example we apply the Bootstrap classes `ms-auto`, which sets the left margin to `auto`, and `text-success`, which sets the text color to the theme's 'success' color. {{example:components/tabs/style.py:tabs}} diff --git a/docs/components_page/components/tabs/card.R b/docs/components_page/components/tabs/card.R index 7cb8f536..020bee6d 100644 --- a/docs/components_page/components/tabs/card.R +++ b/docs/components_page/components/tabs/card.R @@ -10,7 +10,6 @@ card <- dbcCard( dbcTab(label = "Tab 2", tab_id = "tab-2") ), id = "card-tabs", - card = TRUE, active_tab = "tab-1" ) ), diff --git a/docs/components_page/components/tabs/card.jl b/docs/components_page/components/tabs/card.jl index 3f6bd872..f7e7e877 100644 --- a/docs/components_page/components/tabs/card.jl +++ b/docs/components_page/components/tabs/card.jl @@ -8,7 +8,6 @@ card = dbc_card([ dbc_tab(label="Tab 2", tab_id="tab-2"), ], id="card-tabs", - card=true, active_tab="tab-1", ), ), diff --git a/docs/components_page/components/tabs/card.py b/docs/components_page/components/tabs/card.py index 2de77550..8cb0024f 100644 --- a/docs/components_page/components/tabs/card.py +++ b/docs/components_page/components/tabs/card.py @@ -11,7 +11,6 @@ dbc.Tab(label="Tab 2", tab_id="tab-2"), ], id="card-tabs", - card=True, active_tab="tab-1", ) ), diff --git a/docs/components_page/components/tabs/style.R b/docs/components_page/components/tabs/style.R index 79f6e1bc..2ccaf353 100644 --- a/docs/components_page/components/tabs/style.R +++ b/docs/components_page/components/tabs/style.R @@ -12,7 +12,7 @@ tabs <- htmlDiv( htmlBr(), dbcTabs( list( - dbcTab(label = "Tab 1", tab_class_name = "ml-auto"), + dbcTab(label = "Tab 1", tab_class_name = "ms-auto"), dbcTab(label = "Tab 2", label_class_name = "text-success") ) ) diff --git a/docs/components_page/components/tabs/style.jl b/docs/components_page/components/tabs/style.jl index 4e7be6bf..95160f15 100644 --- a/docs/components_page/components/tabs/style.jl +++ b/docs/components_page/components/tabs/style.jl @@ -7,7 +7,7 @@ tabs = html_div([ ]), html_br(), dbc_tabs([ - dbc_tab(label="Tab 1", tab_class_name="ml-auto"), + 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/tabs/style.py b/docs/components_page/components/tabs/style.py index 4f74fde9..51a60172 100644 --- a/docs/components_page/components/tabs/style.py +++ b/docs/components_page/components/tabs/style.py @@ -12,7 +12,7 @@ html.Br(), dbc.Tabs( [ - dbc.Tab(label="Tab 1", tab_class_name="ml-auto"), + dbc.Tab(label="Tab 1", tab_class_name="ms-auto"), dbc.Tab(label="Tab 2", label_class_name="text-success"), ] ), diff --git a/docs/demos/__init__.py b/docs/demos/__init__.py index 73f7533c..6af6252f 100644 --- a/docs/demos/__init__.py +++ b/docs/demos/__init__.py @@ -21,7 +21,9 @@ ("lux", dbc.themes.LUX), ("materia", dbc.themes.MATERIA), ("minty", dbc.themes.MINTY), + ("morph", dbc.themes.MORPH), ("pulse", dbc.themes.PULSE), + ("quartz", dbc.themes.QUARTZ), ("sandstone", dbc.themes.SANDSTONE), ("simplex", dbc.themes.SIMPLEX), ("sketchy", dbc.themes.SKETCHY), @@ -30,7 +32,9 @@ ("spacelab", dbc.themes.SPACELAB), ("superhero", dbc.themes.SUPERHERO), ("united", dbc.themes.UNITED), + ("vapor", dbc.themes.VAPOR), ("yeti", dbc.themes.YETI), + ("zephyr", dbc.themes.ZEPHYR), ] diff --git a/docs/demos/theme_explorer/__init__.py b/docs/demos/theme_explorer/__init__.py index 0133dc71..2d2be261 100644 --- a/docs/demos/theme_explorer/__init__.py +++ b/docs/demos/theme_explorer/__init__.py @@ -10,7 +10,6 @@ from .fade import fade from .form import form from .input import checklist_items, input_, input_group, radio_items -from .jumbotron import jumbotron from .list_group import list_group from .modal import modal from .navbar import navbar @@ -45,7 +44,6 @@ dbc.Col([radio_items], xs=12, md=6), ] ), - jumbotron, list_group, modal, navbar, diff --git a/docs/demos/theme_explorer/badge.py b/docs/demos/theme_explorer/badge.py index 3ca8980d..af456a8c 100644 --- a/docs/demos/theme_explorer/badge.py +++ b/docs/demos/theme_explorer/badge.py @@ -5,13 +5,13 @@ badge = html.Div( [ - dbc.Badge("Primary", color="primary", class_name="mr-1"), - dbc.Badge("Secondary", color="secondary", class_name="mr-1"), - dbc.Badge("Success", color="success", class_name="mr-1"), - dbc.Badge("Warning", color="warning", class_name="mr-1"), - dbc.Badge("Danger", color="danger", class_name="mr-1"), - dbc.Badge("Info", color="info", class_name="mr-1"), - dbc.Badge("Light", color="light", class_name="mr-1"), + 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"), ], class_name="mb-2", @@ -19,15 +19,15 @@ badge_pills = html.Div( [ - dbc.Badge("Primary", color="primary", class_name="mr-1", pill=True), + dbc.Badge("Primary", color="primary", class_name="me-1", pill=True), dbc.Badge( - "Secondary", color="secondary", class_name="mr-1", pill=True + "Secondary", color="secondary", class_name="me-1", pill=True ), - dbc.Badge("Success", color="success", class_name="mr-1", pill=True), - dbc.Badge("Warning", color="warning", class_name="mr-1", pill=True), - dbc.Badge("Danger", color="danger", class_name="mr-1", pill=True), - dbc.Badge("Info", color="info", class_name="mr-1", pill=True), - dbc.Badge("Light", color="light", class_name="mr-1", pill=True), + dbc.Badge("Success", color="success", class_name="me-1", pill=True), + dbc.Badge("Warning", color="warning", class_name="me-1", pill=True), + dbc.Badge("Danger", color="danger", class_name="me-1", pill=True), + dbc.Badge("Info", color="info", class_name="me-1", pill=True), + dbc.Badge("Light", color="light", class_name="me-1", pill=True), dbc.Badge("Dark", color="dark", pill=True), ], ) diff --git a/docs/demos/theme_explorer/button.py b/docs/demos/theme_explorer/button.py index d7736f93..f864c8fa 100644 --- a/docs/demos/theme_explorer/button.py +++ b/docs/demos/theme_explorer/button.py @@ -8,14 +8,14 @@ make_subheading("Button", "button"), html.Div( [ - dbc.Button("Primary", color="primary", class_name="mr-1 mt-1"), + dbc.Button("Primary", color="primary", class_name="me-1 mt-1"), dbc.Button( - "Secondary", color="secondary", class_name="mr-1 mt-1" + "Secondary", color="secondary", class_name="me-1 mt-1" ), - dbc.Button("Success", color="success", class_name="mr-1 mt-1"), - dbc.Button("Warning", color="warning", class_name="mr-1 mt-1"), - dbc.Button("Danger", color="danger", class_name="mr-1 mt-1"), - dbc.Button("Info", color="info", class_name="mr-1 mt-1"), + dbc.Button("Success", color="success", class_name="me-1 mt-1"), + dbc.Button("Warning", color="warning", class_name="me-1 mt-1"), + dbc.Button("Danger", color="danger", class_name="me-1 mt-1"), + dbc.Button("Info", color="info", class_name="me-1 mt-1"), ], class_name="mb-2", ), @@ -25,61 +25,61 @@ "Primary", outline=True, color="primary", - class_name="mr-1 mt-1", + class_name="me-1 mt-1", ), dbc.Button( "Secondary", outline=True, color="secondary", - class_name="mr-1 mt-1", + class_name="me-1 mt-1", ), dbc.Button( "Success", outline=True, color="success", - class_name="mr-1 mt-1", + class_name="me-1 mt-1", ), dbc.Button( "Warning", outline=True, color="warning", - class_name="mr-1 mt-1", + class_name="me-1 mt-1", ), dbc.Button( "Danger", outline=True, color="danger", - class_name="mr-1 mt-1", + class_name="me-1 mt-1", ), dbc.Button( - "Info", outline=True, color="info", class_name="mr-1 mt-1" + "Info", outline=True, color="info", class_name="me-1 mt-1" ), ], class_name="mb-2", ), html.Div( [ - dbc.Button("Regular", color="primary", class_name="mr-1 mt-1"), + dbc.Button("Regular", color="primary", class_name="me-1 mt-1"), dbc.Button( "Active", color="primary", active=True, - class_name="mr-1 mt-1", + class_name="me-1 mt-1", ), dbc.Button( "Disabled", color="primary", disabled=True, - class_name="mr-1 mt-1", + class_name="me-1 mt-1", ), ], class_name="mb-2", ), html.Div( [ - dbc.Button("Large button", size="lg", class_name="mr-1 mt-1"), - dbc.Button("Regular button", class_name="mr-1 mt-1"), - dbc.Button("Small button", size="sm", class_name="mr-1 mt-1"), + dbc.Button("Large button", size="lg", class_name="me-1 mt-1"), + dbc.Button("Regular button", class_name="me-1 mt-1"), + dbc.Button("Small button", size="sm", class_name="me-1 mt-1"), ], class_name="mb-2", ), diff --git a/docs/demos/theme_explorer/card.py b/docs/demos/theme_explorer/card.py index 510ac0fd..e75beacf 100644 --- a/docs/demos/theme_explorer/card.py +++ b/docs/demos/theme_explorer/card.py @@ -6,7 +6,7 @@ cards = html.Div( [ make_subheading("Card", "card"), - dbc.CardDeck( + dbc.CardGroup( [ dbc.Card( [ diff --git a/docs/demos/theme_explorer/form.py b/docs/demos/theme_explorer/form.py index 1755fe9e..e2d47cb5 100644 --- a/docs/demos/theme_explorer/form.py +++ b/docs/demos/theme_explorer/form.py @@ -8,7 +8,7 @@ make_subheading("Form", "form"), dbc.Form( [ - dbc.FormGroup( + html.Div( [ dbc.Label("Username"), dbc.Input( @@ -28,7 +28,7 @@ ), ] ), - dbc.FormGroup( + html.Div( [ dbc.Label("Username"), dbc.Input( diff --git a/docs/demos/theme_explorer/input.py b/docs/demos/theme_explorer/input.py index 37b09b73..47fb2d81 100644 --- a/docs/demos/theme_explorer/input.py +++ b/docs/demos/theme_explorer/input.py @@ -6,18 +6,18 @@ input_ = html.Div( [ make_subheading("Input", "input"), - dbc.FormGroup( + html.Div( [ dbc.Label("Valid text input"), dbc.Input(type="text", valid=True), - dbc.FormFeedback("That's a valid input!", valid=True), + dbc.FormFeedback("That's a valid input!", type="valid"), ] ), - dbc.FormGroup( + html.Div( [ dbc.Label("Invalid text input"), dbc.Input(type="text", invalid=True), - dbc.FormFeedback("That's an invalid input..."), + dbc.FormFeedback("That's an invalid input...", type="invalid"), ] ), ] @@ -97,10 +97,7 @@ make_subheading("InputGroup and addons", "input_group"), dbc.InputGroup( [ - dbc.InputGroupAddon( - dbc.Button("To the left!", color="danger"), - addon_type="prepend", - ), + dbc.Button("To the left!", color="danger"), dbc.Input(type="text"), ], class_name="my-3", @@ -108,16 +105,13 @@ dbc.InputGroup( [ dbc.Input(type="text"), - dbc.InputGroupAddon( - dbc.Button("To the right!", color="success"), - addon_type="append", - ), + dbc.Button("To the right!", color="success"), ], class_name="mb-3", ), dbc.InputGroup( [ - dbc.InputGroupAddon("@", addon_type="prepend"), + dbc.InputGroupText("@"), dbc.Input(type="text", placeholder="Enter username"), ], class_name="mb-3", diff --git a/docs/demos/theme_explorer/jumbotron.py b/docs/demos/theme_explorer/jumbotron.py deleted file mode 100644 index 9f18bbd5..00000000 --- a/docs/demos/theme_explorer/jumbotron.py +++ /dev/null @@ -1,18 +0,0 @@ -import dash_bootstrap_components as dbc -import dash_html_components as html - -from .util import make_subheading - -jumbotron = html.Div( - [ - make_subheading("Jumbotron", "jumbotron"), - dbc.Jumbotron( - [ - html.H2("This is a jumbotron"), - html.P("It makes things big..."), - dbc.Button("Click here", color="danger"), - ] - ), - ], - class_name="mb-4", -) diff --git a/docs/demos/theme_explorer/list_group.py b/docs/demos/theme_explorer/list_group.py index 2fab84b9..863d7e2f 100644 --- a/docs/demos/theme_explorer/list_group.py +++ b/docs/demos/theme_explorer/list_group.py @@ -13,8 +13,8 @@ dbc.ListGroupItem("Item 3"), dbc.ListGroupItem( [ - dbc.ListGroupItemHeading("Item 4 heading"), - dbc.ListGroupItemText("Item 4 text"), + html.H5("Item 4 heading"), + html.P("Item 4 text"), ] ), ] diff --git a/docs/demos/theme_explorer/util.py b/docs/demos/theme_explorer/util.py index bad54efe..82b19e8e 100644 --- a/docs/demos/theme_explorer/util.py +++ b/docs/demos/theme_explorer/util.py @@ -14,7 +14,7 @@ def make_subheading(label, link): [ label, html.A( - html.I(class_name="fas fa-book fa-xs ml-2"), + html.I(class_name="fas fa-book fa-xs ms-2"), href=f"{DBC_DOCS}{link}", target="_blank", id=f"tooltip_target_{slug}", diff --git a/docs/run.py b/docs/run.py index 74b23c9d..d39f7f2c 100644 --- a/docs/run.py +++ b/docs/run.py @@ -1,10 +1,45 @@ +import dash_core_components as dcc +import dash_html_components as html from werkzeug.middleware.dispatcher import DispatcherMiddleware -from components_page import register_apps as register_component_apps -from demos import register_apps as register_demo_apps -from examples import register_apps as register_example_apps -from markdown_to_html import convert_all_markdown_files -from server import create_server + +# TODO: delete once Dash 2.0 is released +def class_name_shim(fn): + def new_init(self, *args, **kwargs): + kwargs["className"] = kwargs.get("class_name", kwargs.get("className")) + return fn( + self, + *args, + **{k: v for k, v in kwargs.items() if k != "class_name"} + ) + + return new_init + + +for component in [ + dcc.Markdown, + html.A, + html.Blockquote, + html.Div, + html.H1, + html.H2, + html.H3, + html.H4, + html.H5, + html.H6, + html.Hr, + html.I, + html.P, + html.Small, +]: + component.__init__ = class_name_shim(component.__init__) + + +from components_page import register_apps as register_component_apps # noqa +from demos import register_apps as register_demo_apps # noqa +from examples import register_apps as register_example_apps # noqa +from markdown_to_html import convert_all_markdown_files # noqa +from server import create_server # noqa convert_all_markdown_files() diff --git a/docs/server.py b/docs/server.py index 82ccf51c..48309891 100644 --- a/docs/server.py +++ b/docs/server.py @@ -86,9 +86,9 @@ def dashr(): @server.route("/docs/components/") def components_index(): - return redirect("/docs/components/alert", 302) + return redirect("/docs/components/accordion", 302) - @server.route("/l/components/", defaults={"slug": "alert"}) + @server.route("/l/components/", defaults={"slug": "accordion"}) @server.route("/l/components//") def components_redirect(slug): return redirect(f"/docs/components/{slug}", 302) diff --git a/docs/static/docs.css b/docs/static/docs.css index a4a4776e..575bb2d7 100644 --- a/docs/static/docs.css +++ b/docs/static/docs.css @@ -106,14 +106,14 @@ span.hljs-meta { background: linear-gradient( to right, rgba(0, 0, 0, 0), - rgba(0, 0, 0, 0) calc(100% - 15px), - #fff calc(100% - 15px) + rgba(0, 0, 0, 0) calc(100% - 0.75rem), + #fff calc(100% - 0.75rem) ), - linear-gradient(to right, #fff, #fff 15px, rgba(0, 0, 0, 0) 15px), + linear-gradient(to right, #fff, #fff 0.75rem, rgba(0, 0, 0, 0) 0.75rem), linear-gradient(to right, #eeeeee, #eeeeee); } -.layout-demo .row.no-gutters { +.layout-demo .row.g-0 { background: linear-gradient(to right, #eeeeee, #eeeeee); } diff --git a/docs/templates/macros/example-navbar.html b/docs/templates/macros/example-navbar.html index 0bf4b50a..6751b137 100644 --- a/docs/templates/macros/example-navbar.html +++ b/docs/templates/macros/example-navbar.html @@ -1,6 +1,6 @@ {% macro example_navbar() -%}