You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: docs/components_page/components/card.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -57,13 +57,13 @@ As mentioned previously, cards assume no specific width, so they will expand to
57
57
58
58
### Using grid components
59
59
60
-
Wrap cards in `Row` and `Col` components to control their width and layout. In this example we use the `width` argument of `Col` to make the first card take up a third of the available width, and the second card two thirds. See the [layout documentation](/l/components/layout) for more details on `Row` and `Col`.
60
+
Wrap cards in `Row` and `Col` components to control their width and layout. In this example we use the `width` argument of `Col` to make the first card take up a third of the available width, and the second card two thirds. See the [layout documentation](/docs/components/layout) for more details on `Row` and `Col`.
61
61
62
62
{{example:components/card/sizing/grid.py:cards}}
63
63
64
64
### Using Bootstrap utility classes
65
65
66
-
Bootstrap comes with several CSS utility classes built in, including some for sizing. For example, the class `w-50` sets `width:50%`. We can can apply these classes to quickly set the desired width of the cards. See the [Bootstrap documentation](https://getbootstrap.com/docs/4.3/utilities/sizing/) for more details.
66
+
Bootstrap comes with several CSS utility classes built in, including some for sizing. For example, the class `w-50` sets `width:50%`. We can can apply these classes to quickly set the desired width of the cards. See the [Bootstrap documentation](https://getbootstrap.com/docs/5.0/utilities/sizing/) for more details.
Copy file name to clipboardexpand all lines: docs/components_page/components/form.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,7 @@ When building Dash apps we rarely make use of HTML forms, instead attaching call
7
7
8
8
## Examples
9
9
10
-
The `FormGroup` is the easiest way to add structure to forms. It encourages proper grouping of labels, controls, optional help text, and form validation messaging. See this simple example.
10
+
Bootstrap's form components can be used to group labels, controls, optional help text, and form validation messaging. See this simple example.
11
11
12
12
{{example:components/form/simple.py:form}}
13
13
@@ -47,7 +47,7 @@ The `FormFeedback` component should be added to a `html.Div` containing the `Inp
47
47
48
48
## Dash Core Components
49
49
50
-
The `Form` and `FormGroup` components can also be used with _dash-core-components_.
50
+
`Form` and other components can also be used with _dash-core-components_.
Copy file name to clipboardexpand all lines: docs/components_page/components/index.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -24,4 +24,4 @@ For example, a simple application incorporating example above could look like th
24
24
25
25
There is more detail on this in the [Quickstart](/docs/quickstart/) instructions for creating a basic app. Additionally, the [examples](https://github.com/facultyai/dash-bootstrap-components/tree/main/examples) in our GitHub repository demonstrate how multiple components can be combined to create a feature rich application.
26
26
27
-
For more details on Dash in general, please refer to the official Dash documentation for [Python](https://dash.plotly.com/), [R](https://dashr.plotly.com/), or [Julia](https://dash-julia.plotly.com/).
27
+
For more details on Dash in general, please refer to the official Dash documentation for [Python](https://dash.plotly.com/), [R](https://dash.plotly.com/r/), or [Julia](https://dash.plotly.com/julia/).
Copy file name to clipboardexpand all lines: docs/components_page/components/layout.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ lead: Components for laying out your Dash app, including wrapping containers, an
5
5
6
6
## Examples
7
7
8
-
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.
8
+
Layout in Bootstrap is controlled using the grid system. The Bootstrap grid has twelve columns, and six 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.
9
9
10
10
There are three main layout components in _dash-bootstrap-components_: `Container`, `Row`, and `Col`.
11
11
@@ -20,7 +20,7 @@ For best results, make sure you adhere to the following two rules when construct
20
20
1. Only use `Row` and `Col` inside a `Container`. A single `Container` wrapping your entire app's content is fine. Set `fluid=True` if you don't want the margins that `Container` adds by default. Since the content of this page is wrapped with a `Container`, the snippets below don't explicitly include them.
21
21
2. The immediate children of any `Row` component should always be `Col` components. Your content should go inside the `Col` components.
22
22
23
-
For much more detail on the Bootstrap grid system, see the [Bootstrap documentation](https://getbootstrap.com/docs/4.2/layout/grid/).
23
+
For much more detail on the Bootstrap grid system, see the [Bootstrap documentation](https://getbootstrap.com/docs/5.1/layout/grid/).
24
24
25
25
## Row with columns
26
26
@@ -84,7 +84,7 @@ Sometimes you may wish to use Bootstrap's grid system for specifying the layout
84
84
85
85
{{code-example:components/layout/grid_only.py}}
86
86
87
-
Alternatively download `bootstrap-grid.css` from the [Bootstrap website](https://getbootstrap.com/docs/4.2/getting-started/download/) and place it in your app's `assets/` directory. See the [Plotly Dash documentation](https://dash.plot.ly/external-resources) for details.
87
+
Alternatively download `bootstrap-grid.css` from the [Bootstrap website](https://getbootstrap.com/docs/5.1/getting-started/download/) and place it in your app's `assets/` directory. See the [Plotly Dash documentation](https://dash.plotly.com/external-resources) for details.
Copy file name to clipboardexpand all lines: docs/content/changelog.md
+9-3
Original file line number
Diff line number
Diff line change
@@ -6,12 +6,12 @@ title: Changelog
6
6
7
7
This page documents notable changes in dash-bootstrap-components releases.
8
8
9
-
## 1.0.0 - 2021/XX/XX
9
+
## 1.0.0 - 2021/10/19
10
10
11
-
v1 of _dash-bootstrap-components_! This release contains loads of new features, but also breaking changes. Please read the changelog carefullyfor full details.
11
+
v1 of _dash-bootstrap-components_! This release contains loads of new features, but also breaking changes. Please read the changelog carefully, and refer to the [migration guide](/migration-guide/)for full details of the changes.
12
12
13
13
### Added
14
-
-Six new components! [Accordion](/docs/components/accordion), [Breadcrumb](/docs/components/breadcrumb), [FormFloating](/docs/components/form), [Offcanvas](/docs/components/offcanvas), [Pagination](/docs/components/pagination), and [Switch](/docs/components/input) ([PR 646](https://github.com/facultyai/dash-bootstrap-components/pull/646)) ([PR 689](https://github.com/facultyai/dash-bootstrap-components/pull/689))
14
+
-Seven new components! [Accordion](/docs/components/accordion), [Breadcrumb](/docs/components/breadcrumb), [FormFloating](/docs/components/form), [ModalTitle](/docs/components/modal), [Offcanvas](/docs/components/offcanvas), [Pagination](/docs/components/pagination), and [Switch](/docs/components/input) ([PR 646](https://github.com/facultyai/dash-bootstrap-components/pull/646)) ([PR 689](https://github.com/facultyai/dash-bootstrap-components/pull/689))
15
15
- New CDN links for icons from Bootstrap Icons and Font Awesome ([PR 661](https://github.com/facultyai/dash-bootstrap-components/pull/661))
16
16
- CDN Links for four new Bootswatch themes: `QUARTZ`, `MORPH`, `VAPOR` and `ZEPHYR`.
17
17
- All components now accept `class_name` as an alternative to `className`. If both are specified then `class_name` will take precedence. `class_name` should be preferred from now on. ([PR 642](https://github.com/facultyai/dash-bootstrap-components/pull/642))
@@ -23,6 +23,12 @@ v1 of _dash-bootstrap-components_! This release contains loads of new features,
23
23
### Changed
24
24
- Components are all now built for Bootstrap 5. CDN links have all been updated. There are multiple breaking changes in the component props. Please see the [migration-guide](/migration-guide) for full details on the changes ([PR 646](https://github.com/facultyai/dash-bootstrap-components/pull/646)).
25
25
26
+
## 0.13.1 - 2021/9/22
27
+
28
+
### Fixed
29
+
30
+
- Fix cursor jump issue in `Input` component. ([PR 707](https://github.com/facultyai/dash-bootstrap-components/pull/707))
To get started make sure you have [installed Dash for R](https://dashr.plotly.com/installation). If you didn't already install it in order to install Dash for R, we also need to make sure that the _devtools_ library is installed.
33
+
To get started make sure you have [installed Dash for R](https://dash.plotly.com/r/installation). If you didn't already install it in order to install Dash for R, we also need to make sure that the _devtools_ library is installed.
To get started make sure you have [installed Dash.jl](https://dash-julia.plotly.com/installation). You can then install `DashBootstrapComponents` as follows
54
+
To get started make sure you have [installed Dash.jl](https://dash.plotly.com/julia/installation). You can then install `DashBootstrapComponents` as follows
55
55
56
56
```julia-repl
57
57
pkg> add DashBootstrapComponents
@@ -79,12 +79,13 @@ To use _dash-bootstrap-components_ you must do two things:
79
79
80
80
### Linking a stylesheet
81
81
82
-
_dash-bootstrap-components_ doesn't come with CSS included. This is to give you the freedom to use any Bootstrap v4 stylesheet of your choice. This means however that in order for the components to be styled properly, you must link to a stylesheet yourself.
82
+
_dash-bootstrap-components_ doesn't come with CSS included. This is to give you the freedom to use any Bootstrap v5 stylesheet of your choice. This means however that in order for the components to be styled properly, you must link to a stylesheet yourself.
83
83
84
-
For convenience, links to [BootstrapCDN][bootstrapcdn] for standard Bootstrap and each Bootswatch theme are available as part of _dash-bootstrap-components_ and can be used as follows
84
+
For convenience, CDN links to [JSDelivr][jsdelivr] for standard Bootstrap and each Bootswatch theme are available as part of _dash-bootstrap-components_ and can be used as follows
85
85
86
86
~~~bootstrap-tabs
87
87
Python
88
+
88
89
In Python, each CDN link is available within the `dbc.themes` submodule and can
Once you have imported _dash-bootstrap-components_ with `using DashBootstrapComponents`, you can access CDN links through the `dbc_themes` named tuple.
116
+
113
117
```julia
114
118
using Dash, DashBootstrapComponents
115
119
@@ -183,5 +187,5 @@ Check out these [example apps][examples] made with _dash-bootstrap-components_.
Copy file name to clipboardexpand all lines: docs/content/docs/themes.md
+9-10
Original file line number
Diff line number
Diff line change
@@ -6,13 +6,13 @@ title: Themes
6
6
7
7
<pclass="lead">Customise your app by choosing from different Bootstrap and Bootswatch themes.</p>
8
8
9
-
_dash-bootstrap-components_ doesn't come with CSS included. This is to give you the freedom to use any Bootstrap v4 stylesheet of your choice, so you can achieve the look you want in your app.
9
+
_dash-bootstrap-components_ doesn't come with CSS included. This is to give you the freedom to use any Bootstrap v5 stylesheet of your choice, so you can achieve the look you want in your app.
10
10
11
11
You can link to a stylesheet served over a CDN, or serve CSS locally depending on your needs.
12
12
13
13
## Packaged CDN links
14
14
15
-
_dash-bootstrap-components_ contains links to Bootstrap and Bootswatch stylesheets hosted on [BootstrapCDN][bootstrapcdn] so you can conveniently link to one of them in your app. The easiest way to do so is to use the `external_stylesheets` argument when instantiating your app.
15
+
_dash-bootstrap-components_ contains links to Bootstrap and Bootswatch stylesheets hosted on [JSDelivr][jsdelivr] so you can conveniently link to one of them in your app. The easiest way to do so is to use the `external_stylesheets` argument when instantiating your app.
16
16
17
17
~~~bootstrap-tabs
18
18
Python
@@ -84,21 +84,21 @@ Each theme such as is simply a BootstrapCDN URL stored as a string, so using the
@@ -113,17 +113,16 @@ The easiest way to link a local stylesheet is to place it in a folder named `ass
113
113
114
114
<h2id="available-themes">Available themes</h2>
115
115
116
-
There are numerous free to use Bootstrap stylesheets available on the web. The `dash_bootstrap_components.themes` module contains CDN links for Bootstrap and all of the [Bootswatch themes][bootswatch-themes]. Bootstrap also maintains its own [themes website][bootstrap-themes] which lists a number of free and premium themes that you could incorporate into your apps.
116
+
There are numerous free to use Bootstrap stylesheets available on the web. The `dash_bootstrap_components.themes` module contains CDN links for Bootstrap and all of the [Bootswatch themes][bootswatch]. Bootstrap also maintains its own [themes website][bootstrap-themes] which lists a number of free and premium themes that you could incorporate into your apps.
117
117
118
118
To start with, we recommend experimenting with some of the Bootswatch themes available in the `dash_bootstrap_components.themes` module. The full list of available themes is [`CERULEAN`](https://bootswatch.com/cerulean/), [`COSMO`](https://bootswatch.com/cosmo/), [`CYBORG`](https://bootswatch.com/cyborg/), [`DARKLY`](https://bootswatch.com/darkly/), [`FLATLY`](https://bootswatch.com/flatly/), [`JOURNAL`](https://bootswatch.com/journal/), [`LITERA`](https://bootswatch.com/litera/), [`LUMEN`](https://bootswatch.com/lumen/), [`LUX`](https://bootswatch.com/lux/), [`MATERIA`](https://bootswatch.com/materia/), [`MINTY`](https://bootswatch.com/minty/), [`MORPH`](https://bootswatch.com/morph/), [`PULSE`](https://bootswatch.com/pulse/), [`QUARTZ`](https://bootswatch.com/quartz/), [`SANDSTONE`](https://bootswatch.com/sandstone/), [`SIMPLEX`](https://bootswatch.com/simplex/), [`SKETCHY`](https://bootswatch.com/sketchy/), [`SLATE`](https://bootswatch.com/slate/), [`SOLAR`](https://bootswatch.com/solar/), [`SPACELAB`](https://bootswatch.com/spacelab/), [`SUPERHERO`](https://bootswatch.com/superhero/), [`UNITED`](https://bootswatch.com/united/), [`VAPOR`](https://bootswatch.com/vapor/), [`YETI`](https://bootswatch.com/yeti/), [`ZEPHYR`](https://bootswatch.com/zephyr/).
119
119
120
120
Check out the [theme explorer](/docs/themes/explorer/) for a live demo of dash-bootstrap-components using all of the different available themes. You may also like to check out the [dash-bootstrap-css](https://github.com/tcbegley/dash-bootstrap-css) project which contains Bootstrap stylesheets that apply consistent styling to various components from dash-core-components.
0 commit comments