dashHtmlComponents package. The source is on GitHub at plotly/dash-html-components.
Please visit our online documentation, which is interactive and frequently updated: https://dashr.plotly.com.
The components in this package are all simple wrappers for HTML5 elements. Extensive documentation for these elements is available online: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/
Here is an example of a simple HTML structure:
which gets converted (behind the scenes) into the following HTML in your web application:
If you're not comfortable with HTML, don't worry! You can get 95% of the way there with just a few elements and attributes. Dash's core component library also supports Markdown.
library(dashHtmlComponents) library(dashCoreComponents) library(dash) dccMarkdown(''' #### Dash and Markdown Dash supports [Markdown](https://daringfireball.net/projects/markdown/). Markdown is a simple way to write and format text. It includes a syntax for things like **bold text** and *italics*, [links](https://daringfireball.net/projects/markdown/), inline `code` snippets, lists, quotes, and more. ''')
which renders the following:
Dash and Markdown
If you're using HTML components, then you also have access to properties like
All of these attributes are available in the R functions. The HTML elements and Dash classes are mostly the same but there are a few key differences:
styleproperty is a named list
styledictionary are camelCased
Let's take a look at an example.
library(dashHtmlComponents) library(dash) htmlDiv(list( htmlDiv('Example Div', style=list('color' = 'blue', 'fontSize' = 14)), htmlP('Example P', className='my-class', id='my-p-element') ), style=list('marginBottom' = 50, 'marginTop' = 25))
That Dash code will render this HTML markup:
<div style="margin-bottom: 50px; margin-top: 25px;"> <div style="color: blue; font-size: 14px"> Example Div </div> <p class="my-class" id="my-p-element"> Example P </p> </div>
Any scripts or data that you put into this service are public.
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.