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
You can now use _dash-bootstrap-components_ with Dash for R! Note that support for Dash for R is still in beta so proceed with caution. If you try it out and run into issues, please [let us know](https://github.com/facultyai/dash-bootstrap-components/issues/new?template=bug.md)! To get started make sure you have the _devtools_ library installed
58
+
You can now use _dash-bootstrap-components_ with Dash for R! To get started make sure you have the _devtools_ library installed
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.
34
+
35
+
```r
36
+
install.packages("devtools")
37
+
```
38
+
39
+
You can then install _dash-bootstrap-components_ from the `r-release` branch of our GitHub repository.
The `r-release` branch will always point to the latest R release. If you want a specific version you can install it by referencing with a tag of the form `rX.X.X` where `X.X.X` is the desired version number. For example to install version `0.10.0` you could do
To get started make sure you have [installed Dash.jl](https://dash-julia.plotly.com/installation). You can then install `DashBootstrapComponents` as follows
55
+
56
+
```julia-repl
57
+
pkg> add DashBootstrapComponents
58
+
```
59
+
60
+
Or alternatively you can install from source as follows
@@ -38,21 +80,52 @@ To use _dash-bootstrap-components_ you must do two things:
38
80
39
81
_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.
40
82
41
-
For convenience, links to [BootstrapCDN][bootstrapcdn] for standard Bootstrap and each Bootswatch theme are available through the `themes` module, which can be used as follows:
83
+
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
+
85
+
~~~bootstrap-tabs
86
+
Python
87
+
In Python, each CDN link is available within the `dbc.themes` submodule and can
For more information on available themes see the [_themes documentation_][docs-themes]
51
120
52
121
### Build the layout
53
122
54
123
With CSS linked, you can start building your app's layout with our Bootstrap components. See the [_component documentation_][docs-components] for a full list of available components, or try running this minimal example to get started.
Copy file name to clipboardExpand all lines: docs/content/docs/themes.md
+70-3Lines changed: 70 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -10,9 +10,14 @@ _dash-bootstrap-components_ doesn't come with CSS included. This is to give you
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
-
## The `themes` module
13
+
## Packaged CDN links
14
14
15
-
The `dash_bootstrap_components.themes` module 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 in the `dash.Dash` constructor like this.
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.
16
+
17
+
~~~bootstrap-tabs
18
+
Python
19
+
20
+
Links are available in the `dash_bootstrap_components.themes` submodule.
16
21
17
22
```python
18
23
import dash
@@ -29,17 +34,75 @@ import dash_bootstrap_components as dbc
This will link the standard Bootstrap stylesheet. To link one of the Bootswatch styles, such as [Cyborg][bootswatch-cyborg] you would just change this to
This will link the standard Bootstrap stylesheet. To link one of the Bootswatch styles, such as [Cyborg][bootswatch-cyborg] you would just change this to
See the [available themes](#available-themes) for more.
34
78
35
79
## Manually linking to a CDN
36
80
37
-
Each theme such as `dash_bootstrap_components.themes.BOOTSTRAP` is simply BootstrapCDN URL stored as a Python string, so using the themes module is really equivalent to doing something like the following.
81
+
Each theme such as is simply a BootstrapCDN URL stored as a string, so using the themes module is really equivalent to doing something like the following.
You can change this URL to anything you like, for example if you prefer to use a mirror or a different CDN to supply the stylesheet.
45
108
@@ -53,6 +116,10 @@ There are numerous free to use Bootstrap stylesheets available on the web. The `
53
116
54
117
To start with, we recommend experimenting with some of the Bootswatch themes available in the `dash_bootstrap_components.themes` module. The full list of available themes is [`CERULEAN`](https://bootswatch.com/cerulean/), [`COSMO`](https://bootswatch.com/cosmo/), [`CYBORG`](https://bootswatch.com/cyborg/), [`DARKLY`](https://bootswatch.com/darkly/), [`FLATLY`](https://bootswatch.com/flatly/), [`JOURNAL`](https://bootswatch.com/journal/), [`LITERA`](https://bootswatch.com/litera/), [`LUMEN`](https://bootswatch.com/lumen/), [`LUX`](https://bootswatch.com/lux/), [`MATERIA`](https://bootswatch.com/materia/), [`MINTY`](https://bootswatch.com/minty/), [`PULSE`](https://bootswatch.com/pulse/), [`SANDSTONE`](https://bootswatch.com/sandstone/), [`SIMPLEX`](https://bootswatch.com/simplex/), [`SKETCHY`](https://bootswatch.com/sketchy/), [`SLATE`](https://bootswatch.com/slate/), [`SOLAR`](https://bootswatch.com/solar/), [`SPACELAB`](https://bootswatch.com/spacelab/), [`SUPERHERO`](https://bootswatch.com/superhero/), [`UNITED`](https://bootswatch.com/united/), [`YETI`](https://bootswatch.com/yeti/)
55
118
119
+
## Customising themes
120
+
121
+
Bootstrap is highly customisable, so you can also build your own stylesheet with the styles you like. There are tools online to help with this, we recommend [Bootstrap Build](https://bootstrap.build/app). If you're familiar with SASS then you can check out the [Bootstrap documentation](https://getbootstrap.com/docs/4.6/getting-started/theming/) on customisation.
0 commit comments