From f65b0be3cddcb34895b06a1b1171196b95fda65f Mon Sep 17 00:00:00 2001 From: Ryan Patrick Kyle Date: Tue, 17 Dec 2019 11:38:41 -0500 Subject: [PATCH 01/10] :tada: dashHtmlComponents to 1.0.2, async --- DESCRIPTION | 8 +- R/internal.R | 2 +- dash-info.yaml | 2470 +++++++++++++++++++++ inst/deps/dash_html_components.min.js.map | 2 +- inst/doc/dash-html-components.Rmd | 96 + inst/doc/dash-html-components.html | 176 ++ man/htmlA.Rd | 20 +- man/htmlAbbr.Rd | 19 +- man/htmlAcronym.Rd | 19 +- man/htmlAddress.Rd | 18 +- man/htmlArea.Rd | 43 +- man/htmlArticle.Rd | 25 +- man/htmlAside.Rd | 25 +- man/htmlAudio.Rd | 20 +- man/htmlB.Rd | 19 +- man/htmlBase.Rd | 5 +- man/htmlBasefont.Rd | 27 +- man/htmlBdi.Rd | 19 +- man/htmlBdo.Rd | 24 +- man/htmlBig.Rd | 22 +- man/htmlBlink.Rd | 25 +- man/htmlBlockquote.Rd | 22 +- man/htmlBr.Rd | 22 +- man/htmlButton.Rd | 18 +- man/htmlCanvas.Rd | 19 +- man/htmlCaption.Rd | 18 +- man/htmlCenter.Rd | 18 +- man/htmlCite.Rd | 18 +- man/htmlCode.Rd | 5 +- man/htmlCol.Rd | 5 +- man/htmlColgroup.Rd | 5 +- man/htmlCommand.Rd | 5 +- man/htmlContent.Rd | 5 +- man/htmlData.Rd | 5 +- man/htmlDatalist.Rd | 5 +- man/htmlDd.Rd | 5 +- man/htmlDel.Rd | 5 +- man/htmlDetails.Rd | 5 +- man/htmlDfn.Rd | 5 +- man/htmlDialog.Rd | 20 +- man/htmlDiv.Rd | 15 +- man/htmlDl.Rd | 22 +- man/htmlDt.Rd | 21 +- man/htmlElement.Rd | 9 +- man/htmlEm.Rd | 20 +- man/htmlEmbed.Rd | 20 +- man/htmlFieldset.Rd | 29 +- man/htmlFigcaption.Rd | 20 +- man/htmlFigure.Rd | 22 +- man/htmlFont.Rd | 9 +- man/htmlFooter.Rd | 24 +- man/htmlForm.Rd | 24 +- man/htmlFrame.Rd | 2 +- man/htmlFrameset.Rd | 2 +- man/htmlH1.Rd | 23 +- man/htmlH2.Rd | 23 +- man/htmlH3.Rd | 23 +- man/htmlH4.Rd | 23 +- man/htmlH5.Rd | 23 +- man/htmlH6.Rd | 23 +- man/htmlHeader.Rd | 5 +- man/htmlHgroup.Rd | 24 +- man/htmlHr.Rd | 24 +- man/htmlI.Rd | 19 +- man/htmlIframe.Rd | 2 +- man/htmlImg.Rd | 20 +- man/htmlIns.Rd | 19 +- man/htmlIsindex.Rd | 19 +- man/htmlKbd.Rd | 23 +- man/htmlKeygen.Rd | 9 +- man/htmlLabel.Rd | 29 +- man/htmlLegend.Rd | 30 +- man/htmlLi.Rd | 26 +- man/htmlLink.Rd | 17 +- man/htmlListing.Rd | 26 +- man/htmlMain.Rd | 25 +- man/htmlMapEl.Rd | 43 +- man/htmlMark.Rd | 21 +- man/htmlMarquee.Rd | 23 +- man/htmlMeta.Rd | 21 +- man/htmlMeter.Rd | 26 +- man/htmlMulticol.Rd | 2 +- man/htmlNav.Rd | 26 +- man/htmlNextid.Rd | 22 +- man/htmlNobr.Rd | 27 +- man/htmlNoscript.Rd | 23 +- man/htmlObjectEl.Rd | 22 +- man/htmlOl.Rd | 22 +- man/htmlOptgroup.Rd | 28 +- man/htmlOption.Rd | 23 +- man/htmlOutput.Rd | 5 +- man/htmlP.Rd | 18 +- man/htmlParam.Rd | 24 +- man/htmlPicture.Rd | 23 +- man/htmlPlaintext.Rd | 2 +- man/htmlPre.Rd | 24 +- man/htmlProgress.Rd | 19 +- man/htmlQ.Rd | 21 +- man/htmlRb.Rd | 22 +- man/htmlRp.Rd | 23 +- man/htmlRt.Rd | 21 +- man/htmlRtc.Rd | 21 +- man/htmlRuby.Rd | 18 +- man/htmlS.Rd | 19 +- man/htmlSamp.Rd | 18 +- man/htmlScript.Rd | 21 +- man/htmlSection.Rd | 24 +- man/htmlSelect.Rd | 25 +- man/htmlShadow.Rd | 19 +- man/htmlSlot.Rd | 19 +- man/htmlSmall.Rd | 21 +- man/htmlSource.Rd | 31 +- man/htmlSpacer.Rd | 19 +- man/htmlSpan.Rd | 24 +- man/htmlStrike.Rd | 20 +- man/htmlStrong.Rd | 21 +- man/htmlSub.Rd | 20 +- man/htmlSummary.Rd | 26 +- man/htmlSup.Rd | 20 +- man/htmlTable.Rd | 36 +- man/htmlTbody.Rd | 39 +- man/htmlTd.Rd | 36 +- man/htmlTemplate.Rd | 38 +- man/htmlTextarea.Rd | 22 +- man/htmlTfoot.Rd | 39 +- man/htmlTh.Rd | 29 +- man/htmlThead.Rd | 39 +- man/htmlTime.Rd | 25 +- man/htmlTitle.Rd | 19 +- man/htmlTr.Rd | 38 +- man/htmlTrack.Rd | 19 +- man/htmlU.Rd | 19 +- man/htmlUl.Rd | 26 +- man/htmlVar.Rd | 21 +- man/htmlVideo.Rd | 23 +- man/htmlWbr.Rd | 22 +- man/htmlXmp.Rd | 24 +- vignettes/dash-html-components.html | 176 ++ vignettes/dash-html-components.html.asis | 3 + 139 files changed, 5459 insertions(+), 139 deletions(-) create mode 100644 inst/doc/dash-html-components.Rmd create mode 100644 inst/doc/dash-html-components.html create mode 100644 vignettes/dash-html-components.html create mode 100644 vignettes/dash-html-components.html.asis diff --git a/DESCRIPTION b/DESCRIPTION index 7955b1ce..a87f0392 100644 --- a/DESCRIPTION +++ b/DESCRIPTION @@ -1,12 +1,10 @@ Package: dashHtmlComponents Title: Vanilla HTML components for Dash Version: 1.0.2 -Authors @R: as.person(c(Chris Parmer )) -Description: A web application framework that provides pure Python and R abstraction around HTML, CSS, and JavaScript, Dash offers a pleasant and productive development experience. Instead of writing HTML or using an HTML templating engine, you compose your layout using R functions within the 'dashHtmlComponents' package. The source for this package is on GitHub: 'plotly/dash-html-components'. +Description: Vanilla HTML components for Dash Depends: R (>= 3.0.2) -Imports: -Suggests: knitr, rmarkdown -VignetteBuilder: knitr +Imports: +Suggests: License: MIT + file LICENSE URL: https://github.com/plotly/dash-html-components BugReports: https://github.com/plotly/dash-html-components/issues diff --git a/R/internal.R b/R/internal.R index c8e0abca..0ce1196f 100644 --- a/R/internal.R +++ b/R/internal.R @@ -10,7 +10,7 @@ version = "1.0.2", src = list(href = NULL, file = "deps"), meta = NULL, script = 'dash_html_components.min.js.map', stylesheet = NULL, head = NULL, attachment = NULL, package = "dashHtmlComponents", -all_files = FALSE), class = "html_dependency")) +all_files = FALSE, dynamic = TRUE), class = "html_dependency")) return(deps_metadata) } diff --git a/dash-info.yaml b/dash-info.yaml index 493cc5f0..1f97228c 100644 --- a/dash-info.yaml +++ b/dash-info.yaml @@ -8,3 +8,2473 @@ pkg_help_description: > plotly/dash-html-components. pkg_help_title: > Vanilla HTML Components for Dash + +r_examples: + - name: htmlA + dontrun: TRUE + code: | + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout( + htmlDiv(list( + htmlA(children="Link to external site", + href="https://plot.ly", + target="_blank") + ) + ) + ) + + app$run_server() + - name: htmlAbbr + dontrun: TRUE + code: | + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout( + htmlDiv(list( + htmlAbbr(children="\U{1F50D} Hover over this line for a few seconds and see the text box appear...", + title="Hello! htmlAbbr at work!") + ) + ) + ) + + app$run_server() + - name: htmlAcronym + dontrun: TRUE + code: | + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout( + htmlDiv(list( + htmlAcronym(children="Mouse over these words to see the acronym for \"as soon as possible\".", + title="ASAP") + ) + ) + ) + + app$run_server() + - name: htmlAddress + dontrun: TRUE + code: | + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout( + htmlDiv(list( + htmlAddress(children="5555 Avenue de Gasp\U{00E9}, Montréal QC H2T 2A3") + ) + ) + ) + + app$run_server() + - name: htmlArea + dontrun: TRUE + code: | + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout( + htmlDiv(list( + htmlImg(src = "https://upload.wikimedia.org/wikipedia/commons/0/0c/PIA17351-ApparentSizes-MarsDeimosPhobos-EarthMoon.jpg", + useMap = "#image-map"), + htmlMapEl(list( + htmlArea(target="_blank", + alt="Deimos", + title="Deimos", + href="https://en.wikipedia.org/wiki/Deimos_(moon)", + coords="5,114,32,147", + shape="rect"), + htmlArea(target="_blank", + alt="Phobos", + title="Phobos", + href="https://en.wikipedia.org/wiki/Phobos_(moon)", + coords="113,196,32,103", + shape="rect"), + htmlArea(target="_blank", + alt="Moon", + title="Moon", + href="https://en.wikipedia.org/wiki/Moon", + coords="127,285,294,1", + shape="rect") + ), + name = "image-map" + ), + htmlDiv(children = "Click on the image to visit a Wikipedia article", + id = "object-name") + ) + ) + ) + + app$run_server() + - name: htmlArticle + dontrun: TRUE + code: | + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout( + htmlDiv(list( + htmlArticle(list( + htmlH2("Dash for R launched!"), + htmlP("Dash is a user interface library for creating analytical web applications.\n + Those who use R for data analysis, data exploration, visualization,\n + modelling, instrument control, and reporting will find immediate use for Dash for R."), + htmlAside("Plotly is a technical computing company with offices in Montr\U{00E9}al, Canada and Cambridge, Massachusetts.") + ) + ) + ) + ) + ) + + app$run_server() + - name: htmlAside + dontrun: TRUE + code: | + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout( + htmlDiv(list( + htmlArticle(list( + htmlH2("Dash for R launched!"), + htmlP("Dash is a user interface library for creating analytical web applications.\n + Those who use R for data analysis, data exploration, visualization,\n + modelling, instrument control, and reporting will find immediate use for Dash for R."), + htmlAside("Plotly is a technical computing company with offices in Montr\U{00E9}al, Canada and Cambridge, Massachusetts.") + ) + ) + ) + ) + ) + + app$run_server() + - name: htmlAudio + dontrun: TRUE + code: | + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout( + htmlDiv(list( + htmlAudio(src="https://www.nasa.gov/62284main_onesmall2.wav", + controls=TRUE, + title="Apollo 11 - July 16, 1969 - Neil Armstrong") + ) + ) + ) + + app$run_server() + - name: htmlB + dontrun: TRUE + code: | + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout( + htmlDiv(list( + htmlB(children="This is a bold statement!"), + htmlP(children="This is not so bold.") + ) + ) + ) + + app$run_server() + - name: htmlBase + dontrun: TRUE + code: + - name: htmlBasefont + dontrun: TRUE + code: | + # This feature is obsolete. It may still work in some + # browsers, but could stop working at any time. Try to + # avoid using this component. + # + # Instead, use CSS properties to set font, font-family, + # font-size and color. + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout( + htmlDiv(list( + htmlBasefont(color="FF0000", + face="Helvetica", + size="+2"), + htmlP(children="If it works, this will be Helvetica but a couple point sizes larger.") + ) + ) + ) + + app$rqun_server() + - name: htmlBdi + dontrun: TRUE + code: | + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout( + htmlDiv(list( + htmlP(children="The line below should render as 'Aladdin', but in Arabic script:"), + htmlBdi(children="\U{0639}\U{0644}\U{0627}\U{0621} \U{0627}\U{0644}\U{062F}\U{064A}\U{0646}") + ) + ) + ) + + app$run_server() + - name: htmlBdo + dontrun: TRUE + code: | + # This element supports bidirectional text override. + # We can force text to render from right to left instead + # of left to right. + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout( + htmlDiv(list( + htmlP(children="This text will print from left to right."), + htmlP(children="Below, we use bidirectional override to print right to left:"), + htmlBdo(children="This text will print from right to left.", + dir="rtl") + ) + ) + ) + + app$run_server() + - name: htmlBig + dontrun: TRUE + code: | + # The tag is not supported in HTML5. + # Instead, use the font-size property in + # CSS to enlarge text. + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout( + htmlDiv(list( + htmlP(children="This text will display in standard size."), + htmlBig(children="This text may or may not appear slightly larger.") + ) + ) + ) + + app$run_server() + - name: htmlBlink + dontrun: TRUE + code: | + # The blink tag is now obsolete and deprecated. + # It may not function properly in all browsers, + # and it may cease working without warning. + # + # This element is generally unsupported on all + # modern browser releases. + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout( + htmlDiv(list( + htmlP(children="Here is a bit of text."), + htmlBlink(children="Here is a bit of blinking text.") + ) + ) + ) + + app$run_server() + - name: htmlBlockquote + dontrun: TRUE + code: | + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout( + htmlDiv(list( + htmlP("Here is some text."), + htmlBlockquote(children=list( + htmlP("And here is a quotation in block format.") + ) + ) + ) + ) + ) + + app$run_server() + - name: htmlBr + dontrun: TRUE + code: | + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout( + htmlDiv(list( + htmlP("Here is some text."), + htmlBr(), + htmlP("Here is additional text."), + htmlBr(), + htmlP("See the gap in between the lines?") + ) + ) + ) + + app$run_server() + - name: htmlButton + dontrun: TRUE + code: | + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout( + htmlDiv(list( + htmlButton("Click me!") + ) + ) + ) + + app$run_server() + - name: htmlCanvas + dontrun: TRUE + code: | + # this component requires JavaScript code + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout( + htmlDiv(list( + htmlCanvas(id="canvas-component") + ) + ) + ) + + app$run_server() + - name: htmlCaption + dontrun: TRUE + code: | + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout( + htmlDiv(list( + htmlCaption("This is an example of htmlCaption.") + ) + ) + ) + + app$run_server() + - name: htmlCenter + dontrun: TRUE + code: | + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout( + htmlDiv(list( + htmlCenter("Centered text!") + ) + ) + ) + + app$run_server() + - name: htmlCite + dontrun: TRUE + code: | + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout( + htmlDiv(list( + htmlCite("Click me!") + ) + ) + ) + + app$run_server() + - name: htmlCode + dontrun: TRUE + code: | + - name: htmlCol + dontrun: TRUE + code: | + - name: htmlColgroup + dontrun: TRUE + code: | + - name: htmlCommand + dontrun: TRUE + code: | + - name: htmlContent + dontrun: TRUE + code: | + - name: htmlData + dontrun: TRUE + code: | + - name: htmlDatalist + dontrun: TRUE + code: | + - name: htmlDd + dontrun: TRUE + code: | + - name: htmlDel + dontrun: TRUE + code: | + - name: htmlDetails + dontrun: TRUE + code: | + - name: htmlDfn + dontrun: TRUE + code: | + - name: htmlDialog + dontrun: TRUE + code: | + + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout(htmlDiv(list( + htmlDialog( + children = htmlP('Greetings') + ) + ) + ) + ) + + app$run_server() + - name: htmlDiv + dontrun: TRUE + code: | + app <- Dash$new() + + app$layout( + htmlDiv(list( + htmlDiv('This Title is Wrapped inside an inner Div') + ) + ) + ) + + app$run_server() + - name: htmlDl + dontrun: TRUE + code: | + + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout(htmlDiv(list( + htmlDl( + children= list('Dash', + htmlDd('Dash is a framework for building web + applications.')) + ) + ) + ) + ) + + app$run_server() + - name: htmlDt + dontrun: TRUE + code: | + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout(htmlDiv(list( + htmlDl( + children= list(htmlDt("Dash for R"), + htmlDd('HtmlDt and htmlDD must be used + within htmlDl')) + ) + ) + ) + ) + + app$run_server() + - name: htmlElement + dontrun: TRUE + code: | + + # This feature is obsolete. It may still work in some + # browsers, but could stop working at any time. Try to + # avoid using this component. + - name: htmlEm + dontrun: TRUE + code: | + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout(htmlDiv(list( + htmlH1(list('Dash is a very ', + htmlEm(' important '), + 'framework') + ) + ) + ) + ) + + app$run_server() + - name: htmlEmbed + dontrun: TRUE + code: | + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout(htmlDiv(list( + htmlEmbed( + src = 'https://www.youtube.com/watch?v=njW7DmeK1Qk', + width = '250', + height = '500') + ) + ) + ) + + app$run_server() + - name: htmlFieldset + dontrun: TRUE + code: | + + library(dash) + library(dashHtmlComponents) + library(dashCoreComponents) + + app <- Dash$new() + + app$layout(htmlDiv(list( + htmlFieldset( + children = list('Choose your favourite Dash HTML component', + dccRadioItems( + options=list( + list("label" = "htmlDiv", "value" = "htmlDiv"), + list("label" = "htmlBase", "value" = "htmlBase"), + list("label" = "htmlArticle", "value" = "htmlArticle") + ) + ) + ) + ) + ) + ) + ) + + app$run_server() + - name: htmlFigcaption + dontrun: TRUE + code: | + + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout(htmlDiv(list( + htmlFigure(children = list( + htmlImg(src = 'https://brand.plot.ly/static/images/plotly-logo-01-stripe@2x.png'), + htmlFigcaption(children = 'Plotly Logo'))) + ) + ) + ) + + app$run_server() + - name: htmlFigure + dontrun: TRUE + code: | + library(dash) + library(dashHtmlComponents) + + app <- Dash$new() + + app$layout(htmlDiv(list( + htmlFigure(children = list( + htmlImg(src = 'https://brand.plot.ly/static/images/plotly-logo-01-stripe@2x.png', + width = '400', + height = '150') + ) + ) + ) + ) + ) + + app$run_server() + - name: htmlFont + dontrun: TRUE + code: | + + # Starting with HTML 4, HTML does not convey styling information + # anymore (outside the + + + + + + + + + + + + + + + + + +

Dash HTML Components

+ + + +

Dash is a web application framework that provides pure R and Python abstraction around HTML, CSS, and JavaScript. Instead of writing HTML or using an HTML templating engine, you compose your layout using R functions within the 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.plot.ly.

+

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:

+
library(dashHtmlComponents)
+library(dash)
+
+htmlDiv(list(
+  htmlH1('Hello Dash'),
+  htmlDiv(list(
+    htmlP('Dash converts R classes into HTML'),
+    htmlP("This conversion happens behind the scenes by Dash's JavaScript front-end")
+  ))
+))
+

which gets converted (behind the scenes) into the following HTML in your web application:

+
<div>
+    <h1>Hello Dash</h1>
+    <div>
+        <p>Dash converts Python classes into HTML</p>
+        <p>This conversion happens behind the scenes by Dash's JavaScript front-end</p>
+    </div>
+</div>
+

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(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

+

Dash supports Markdown Markdown is a simple way to write and format text. It includes a syntax for things like bold text and italics, links, inline code snippets, lists, quotes, and more.

+
+

If you’re using HTML components, then you also have access to properties like style, class, and id.

+

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:

+
    +
  • The style property is a named list
    • +
  • Properties in the style dictionary are camelCased
    • +
  • The class key is renamed as className
    • +
  • Style properties in pixel units can be supplied as just numbers without the px unit
    • +
+

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>
+ + + + + + + + diff --git a/man/htmlA.Rd b/man/htmlA.Rd index bed47ab6..eaf3e836 100644 --- a/man/htmlA.Rd +++ b/man/htmlA.Rd @@ -51,7 +51,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{target}{Character. } -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -81,3 +81,21 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout( + htmlDiv(list( + htmlA(children="Link to external site", + href="https://plot.ly", + target="_blank") + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlAbbr.Rd b/man/htmlAbbr.Rd index f2ac0ea5..ce8f738d 100644 --- a/man/htmlAbbr.Rd +++ b/man/htmlAbbr.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,20 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout( + htmlDiv(list( + htmlAbbr(children="\U{1F50D} Hover over this line for a few seconds and see the text box appear...", + title="Hello! htmlAbbr at work!") + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlAcronym.Rd b/man/htmlAcronym.Rd index 7d44643a..20bbd75a 100644 --- a/man/htmlAcronym.Rd +++ b/man/htmlAcronym.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,20 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout( + htmlDiv(list( + htmlAcronym(children="Mouse over these words to see the acronym for \"as soon as possible\".", + title="ASAP") + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlAddress.Rd b/man/htmlAddress.Rd index 384616d7..a54b06e6 100644 --- a/man/htmlAddress.Rd +++ b/man/htmlAddress.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,19 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout( + htmlDiv(list( + htmlAddress(children="5555 Avenue de Gasp\U{00E9}, Montréal QC H2T 2A3") + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlArea.Rd b/man/htmlArea.Rd index 7866d787..24d9dec1 100644 --- a/man/htmlArea.Rd +++ b/man/htmlArea.Rd @@ -56,7 +56,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{target}{Character. } -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -86,3 +86,44 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout( + htmlDiv(list( + htmlImg(src = "https://upload.wikimedia.org/wikipedia/commons/0/0c/PIA17351-ApparentSizes-MarsDeimosPhobos-EarthMoon.jpg", + useMap = "#image-map"), + htmlMapEl(list( + htmlArea(target="_blank", + alt="Deimos", + title="Deimos", + href="https://en.wikipedia.org/wiki/Deimos_(moon)", + coords="5,114,32,147", + shape="rect"), + htmlArea(target="_blank", + alt="Phobos", + title="Phobos", + href="https://en.wikipedia.org/wiki/Phobos_(moon)", + coords="113,196,32,103", + shape="rect"), + htmlArea(target="_blank", + alt="Moon", + title="Moon", + href="https://en.wikipedia.org/wiki/Moon", + coords="127,285,294,1", + shape="rect") + ), + name = "image-map" + ), + htmlDiv(children = "Click on the image to visit a Wikipedia article", + id = "object-name") + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlArticle.Rd b/man/htmlArticle.Rd index 7ca43f67..9783e413 100644 --- a/man/htmlArticle.Rd +++ b/man/htmlArticle.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,26 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout( + htmlDiv(list( + htmlArticle(list( + htmlH2("Dash for R launched!"), + htmlP("Dash is a user interface library for creating analytical web applications.\n + Those who use R for data analysis, data exploration, visualization,\n + modelling, instrument control, and reporting will find immediate use for Dash for R."), + htmlAside("Plotly is a technical computing company with offices in Montr\U{00E9}al, Canada and Cambridge, Massachusetts.") + ) + ) + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlAside.Rd b/man/htmlAside.Rd index 788c65f6..8d97364e 100644 --- a/man/htmlAside.Rd +++ b/man/htmlAside.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,26 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout( + htmlDiv(list( + htmlArticle(list( + htmlH2("Dash for R launched!"), + htmlP("Dash is a user interface library for creating analytical web applications.\n + Those who use R for data analysis, data exploration, visualization,\n + modelling, instrument control, and reporting will find immediate use for Dash for R."), + htmlAside("Plotly is a technical computing company with offices in Montr\U{00E9}al, Canada and Cambridge, Massachusetts.") + ) + ) + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlAudio.Rd b/man/htmlAudio.Rd index aea6a4cc..16d66386 100644 --- a/man/htmlAudio.Rd +++ b/man/htmlAudio.Rd @@ -52,7 +52,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{src}{Character. The URL of the embeddable content.} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -82,3 +82,21 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout( + htmlDiv(list( + htmlAudio(src="https://www.nasa.gov/62284main_onesmall2.wav", + controls=TRUE, + title="Apollo 11 - July 16, 1969 - Neil Armstrong") + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlB.Rd b/man/htmlB.Rd index 130c02ea..f045a85a 100644 --- a/man/htmlB.Rd +++ b/man/htmlB.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,20 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout( + htmlDiv(list( + htmlB(children="This is a bold statement!"), + htmlP(children="This is not so bold.") + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlBase.Rd b/man/htmlBase.Rd index bde001ea..6b4baea4 100644 --- a/man/htmlBase.Rd +++ b/man/htmlBase.Rd @@ -41,7 +41,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{target}{Character. } -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -71,3 +71,6 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +None}} diff --git a/man/htmlBasefont.Rd b/man/htmlBasefont.Rd index caa63baa..c3d7dab7 100644 --- a/man/htmlBasefont.Rd +++ b/man/htmlBasefont.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,28 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +# This feature is obsolete. It may still work in some +# browsers, but could stop working at any time. Try to +# avoid using this component. +# +# Instead, use CSS properties to set font, font-family, +# font-size and color. +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout( + htmlDiv(list( + htmlBasefont(color="FF0000", + face="Helvetica", + size="+2"), + htmlP(children="If it works, this will be Helvetica but a couple point sizes larger.") + ) + ) +) + +app$rqun_server() +}} diff --git a/man/htmlBdi.Rd b/man/htmlBdi.Rd index b17d7ccc..2ca09bca 100644 --- a/man/htmlBdi.Rd +++ b/man/htmlBdi.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,20 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout( + htmlDiv(list( + htmlP(children="The line below should render as 'Aladdin', but in Arabic script:"), + htmlBdi(children="\U{0639}\U{0644}\U{0627}\U{0621} \U{0627}\U{0644}\U{062F}\U{064A}\U{0646}") + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlBdo.Rd b/man/htmlBdo.Rd index 6b3670fa..696e998e 100644 --- a/man/htmlBdo.Rd +++ b/man/htmlBdo.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,25 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +# This element supports bidirectional text override. +# We can force text to render from right to left instead +# of left to right. +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout( + htmlDiv(list( + htmlP(children="This text will print from left to right."), + htmlP(children="Below, we use bidirectional override to print right to left:"), + htmlBdo(children="This text will print from right to left.", + dir="rtl") + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlBig.Rd b/man/htmlBig.Rd index 92c85ed4..fb866a31 100644 --- a/man/htmlBig.Rd +++ b/man/htmlBig.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,23 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +# The tag is not supported in HTML5. +# Instead, use the font-size property in +# CSS to enlarge text. +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout( + htmlDiv(list( + htmlP(children="This text will display in standard size."), + htmlBig(children="This text may or may not appear slightly larger.") + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlBlink.Rd b/man/htmlBlink.Rd index 70bec7ff..39877049 100644 --- a/man/htmlBlink.Rd +++ b/man/htmlBlink.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,26 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +# The blink tag is now obsolete and deprecated. +# It may not function properly in all browsers, +# and it may cease working without warning. +# +# This element is generally unsupported on all +# modern browser releases. +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout( + htmlDiv(list( + htmlP(children="Here is a bit of text."), + htmlBlink(children="Here is a bit of blinking text.") + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlBlockquote.Rd b/man/htmlBlockquote.Rd index 03d3566b..51f4cfde 100644 --- a/man/htmlBlockquote.Rd +++ b/man/htmlBlockquote.Rd @@ -38,7 +38,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{cite}{Character. Contains a URI which points to the source of the quote or change.} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -68,3 +68,23 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout( + htmlDiv(list( + htmlP("Here is some text."), + htmlBlockquote(children=list( + htmlP("And here is a quotation in block format.") + ) + ) + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlBr.Rd b/man/htmlBr.Rd index 42072e89..ff0138ca 100644 --- a/man/htmlBr.Rd +++ b/man/htmlBr.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,23 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout( + htmlDiv(list( + htmlP("Here is some text."), + htmlBr(), + htmlP("Here is additional text."), + htmlBr(), + htmlP("See the gap in between the lines?") + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlButton.Rd b/man/htmlButton.Rd index f18c2ced..4a0401d4 100644 --- a/man/htmlButton.Rd +++ b/man/htmlButton.Rd @@ -61,7 +61,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{value}{Character. Defines a default value which will be displayed in the element on page load.} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -91,3 +91,19 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout( + htmlDiv(list( + htmlButton("Click me!") + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlCanvas.Rd b/man/htmlCanvas.Rd index 7579ac84..358c35da 100644 --- a/man/htmlCanvas.Rd +++ b/man/htmlCanvas.Rd @@ -41,7 +41,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{width}{Character | numeric. For the elements listed here, this establishes the element's width. Note: For all other instances, such as
, this is a legacy attribute, in which case the CSS width property should be used instead.} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -71,3 +71,20 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +# this component requires JavaScript code +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout( + htmlDiv(list( + htmlCanvas(id="canvas-component") + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlCaption.Rd b/man/htmlCaption.Rd index 4802b483..bacdd967 100644 --- a/man/htmlCaption.Rd +++ b/man/htmlCaption.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,19 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout( + htmlDiv(list( + htmlCaption("This is an example of htmlCaption.") + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlCenter.Rd b/man/htmlCenter.Rd index 07146d05..b67bfd57 100644 --- a/man/htmlCenter.Rd +++ b/man/htmlCenter.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,19 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout( + htmlDiv(list( + htmlCenter("Centered text!") + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlCite.Rd b/man/htmlCite.Rd index f28bb17f..88a4a6d5 100644 --- a/man/htmlCite.Rd +++ b/man/htmlCite.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,19 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout( + htmlDiv(list( + htmlCite("Click me!") + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlCode.Rd b/man/htmlCode.Rd index 13352eb5..356e99c8 100644 --- a/man/htmlCode.Rd +++ b/man/htmlCode.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,6 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +}} diff --git a/man/htmlCol.Rd b/man/htmlCol.Rd index 171b4a03..ee34d32f 100644 --- a/man/htmlCol.Rd +++ b/man/htmlCol.Rd @@ -38,7 +38,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{span}{Character. } -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -68,3 +68,6 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +}} diff --git a/man/htmlColgroup.Rd b/man/htmlColgroup.Rd index b6062413..2553022c 100644 --- a/man/htmlColgroup.Rd +++ b/man/htmlColgroup.Rd @@ -38,7 +38,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{span}{Character. } -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -68,3 +68,6 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +}} diff --git a/man/htmlCommand.Rd b/man/htmlCommand.Rd index 3df440fd..29acecba 100644 --- a/man/htmlCommand.Rd +++ b/man/htmlCommand.Rd @@ -47,7 +47,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{type}{Character. Defines the type of the element.} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -77,3 +77,6 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +}} diff --git a/man/htmlContent.Rd b/man/htmlContent.Rd index 3af31d98..5af3bcd9 100644 --- a/man/htmlContent.Rd +++ b/man/htmlContent.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,6 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +}} diff --git a/man/htmlData.Rd b/man/htmlData.Rd index f7f61374..3eee752e 100644 --- a/man/htmlData.Rd +++ b/man/htmlData.Rd @@ -38,7 +38,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{value}{Character. Defines a default value which will be displayed in the element on page load.} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -68,3 +68,6 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +}} diff --git a/man/htmlDatalist.Rd b/man/htmlDatalist.Rd index 422101e6..984dec87 100644 --- a/man/htmlDatalist.Rd +++ b/man/htmlDatalist.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,6 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +}} diff --git a/man/htmlDd.Rd b/man/htmlDd.Rd index e6e85cd9..2450b52c 100644 --- a/man/htmlDd.Rd +++ b/man/htmlDd.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,6 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +}} diff --git a/man/htmlDel.Rd b/man/htmlDel.Rd index dded907e..6ca26a96 100644 --- a/man/htmlDel.Rd +++ b/man/htmlDel.Rd @@ -41,7 +41,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{dateTime}{Character. Indicates the date and time associated with the element.} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -71,3 +71,6 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +}} diff --git a/man/htmlDetails.Rd b/man/htmlDetails.Rd index d0405904..d89a8731 100644 --- a/man/htmlDetails.Rd +++ b/man/htmlDetails.Rd @@ -38,7 +38,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{open}{A value equal to: 'open', 'open' | logical. Indicates whether the details will be shown on page load.} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -68,3 +68,6 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +}} diff --git a/man/htmlDfn.Rd b/man/htmlDfn.Rd index d44065bc..30d5ef07 100644 --- a/man/htmlDfn.Rd +++ b/man/htmlDfn.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,6 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +}} diff --git a/man/htmlDialog.Rd b/man/htmlDialog.Rd index d7a65a80..00c5ca02 100644 --- a/man/htmlDialog.Rd +++ b/man/htmlDialog.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,21 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ + +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout(htmlDiv(list( + htmlDialog( + children = htmlP('Greetings') + ) + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlDiv.Rd b/man/htmlDiv.Rd index 7179fa7a..8cbdf135 100644 --- a/man/htmlDiv.Rd +++ b/man/htmlDiv.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,16 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +app <- Dash$new() + +app$layout( + htmlDiv(list( + htmlDiv('This Title is Wrapped inside an inner Div') + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlDl.Rd b/man/htmlDl.Rd index 197fe9c8..1ebcf39a 100644 --- a/man/htmlDl.Rd +++ b/man/htmlDl.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,23 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ + +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout(htmlDiv(list( + htmlDl( + children= list('Dash', + htmlDd('Dash is a framework for building web + applications.')) + ) + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlDt.Rd b/man/htmlDt.Rd index ced7913f..09e628ac 100644 --- a/man/htmlDt.Rd +++ b/man/htmlDt.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,22 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout(htmlDiv(list( + htmlDl( + children= list(htmlDt("Dash for R"), + htmlDd('HtmlDt and htmlDD must be used + within htmlDl')) + ) + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlElement.Rd b/man/htmlElement.Rd index f75ade47..756253d4 100644 --- a/man/htmlElement.Rd +++ b/man/htmlElement.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,10 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ + +# This feature is obsolete. It may still work in some +# browsers, but could stop working at any time. Try to +# avoid using this component. +}} diff --git a/man/htmlEm.Rd b/man/htmlEm.Rd index 63d65f76..ba802226 100644 --- a/man/htmlEm.Rd +++ b/man/htmlEm.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,21 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout(htmlDiv(list( + htmlH1(list('Dash is a very ', + htmlEm(' important '), + 'framework') + ) + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlEmbed.Rd b/man/htmlEmbed.Rd index 60aff92e..49b2141b 100644 --- a/man/htmlEmbed.Rd +++ b/man/htmlEmbed.Rd @@ -45,7 +45,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{width}{Character | numeric. For the elements listed here, this establishes the element's width. Note: For all other instances, such as
, this is a legacy attribute, in which case the CSS width property should be used instead.} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -75,3 +75,21 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout(htmlDiv(list( + htmlEmbed( + src = 'https://www.youtube.com/watch?v=njW7DmeK1Qk', + width = '250', + height = '500') + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlFieldset.Rd b/man/htmlFieldset.Rd index c250c71d..49f83442 100644 --- a/man/htmlFieldset.Rd +++ b/man/htmlFieldset.Rd @@ -43,7 +43,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{name}{Character. Name of the element. For example used by the server to identify the fields in form submits.} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -73,3 +73,30 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ + +library(dash) +library(dashHtmlComponents) +library(dashCoreComponents) + +app <- Dash$new() + +app$layout(htmlDiv(list( + htmlFieldset( + children = list('Choose your favourite Dash HTML component', + dccRadioItems( + options=list( + list("label" = "htmlDiv", "value" = "htmlDiv"), + list("label" = "htmlBase", "value" = "htmlBase"), + list("label" = "htmlArticle", "value" = "htmlArticle") + ) + ) + ) + ) + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlFigcaption.Rd b/man/htmlFigcaption.Rd index 91cf7699..209ec3ee 100644 --- a/man/htmlFigcaption.Rd +++ b/man/htmlFigcaption.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,21 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ + +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout(htmlDiv(list( + htmlFigure(children = list( + htmlImg(src = 'https://brand.plot.ly/static/images/plotly-logo-01-stripe@2x.png'), + htmlFigcaption(children = 'Plotly Logo'))) + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlFigure.Rd b/man/htmlFigure.Rd index cb3d29c1..ae4fd3ef 100644 --- a/man/htmlFigure.Rd +++ b/man/htmlFigure.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,23 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ +library(dash) +library(dashHtmlComponents) + +app <- Dash$new() + +app$layout(htmlDiv(list( + htmlFigure(children = list( + htmlImg(src = 'https://brand.plot.ly/static/images/plotly-logo-01-stripe@2x.png', + width = '400', + height = '150') + ) + ) + ) + ) +) + +app$run_server() +}} diff --git a/man/htmlFont.Rd b/man/htmlFont.Rd index a1df545b..0cf26c64 100644 --- a/man/htmlFont.Rd +++ b/man/htmlFont.Rd @@ -36,7 +36,7 @@ See https://reactjs.org/docs/lists-and-keys.html for more info} \item{role}{Character. The ARIA role attribute} -\item{accessKey}{Character. Defines a keyboard shortcut to activate or add focus to the element.} +\item{accessKey}{Character. Keyboard shortcut to activate or add focus to the element.} \item{className}{Character. Often used with CSS to style elements with common properties.} @@ -66,3 +66,10 @@ those elements have the following types: - prop_name (character; optional): holds which property is loading - component_name (character; optional): holds the name of the component that is loading. Object that holds the loading state object coming from dash-renderer} } +\examples{ +\dontrun{ + +# Starting with HTML 4, HTML does not convey styling information +# anymore (outside the + + + + + + + + + + + + + + + + + +

Dash HTML Components

+ + + +

Dash is a web application framework that provides pure R and Python abstraction around HTML, CSS, and JavaScript. Instead of writing HTML or using an HTML templating engine, you compose your layout using R functions within the 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.plot.ly.

+

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:

+
library(dashHtmlComponents)
+library(dash)
+
+htmlDiv(list(
+  htmlH1('Hello Dash'),
+  htmlDiv(list(
+    htmlP('Dash converts R classes into HTML'),
+    htmlP("This conversion happens behind the scenes by Dash's JavaScript front-end")
+  ))
+))
+

which gets converted (behind the scenes) into the following HTML in your web application:

+
<div>
+    <h1>Hello Dash</h1>
+    <div>
+        <p>Dash converts Python classes into HTML</p>
+        <p>This conversion happens behind the scenes by Dash's JavaScript front-end</p>
+    </div>
+</div>
+

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(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

+

Dash supports Markdown Markdown is a simple way to write and format text. It includes a syntax for things like bold text and italics, links, inline code snippets, lists, quotes, and more.

+
+

If you’re using HTML components, then you also have access to properties like style, class, and id.

+

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:

+
    +
  • The style property is a named list
    • +
  • Properties in the style dictionary are camelCased
    • +
  • The class key is renamed as className
    • +
  • Style properties in pixel units can be supplied as just numbers without the px unit
    • +
+

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>
+ + + + + + + + diff --git a/vignettes/dash-html-components.html.asis b/vignettes/dash-html-components.html.asis new file mode 100644 index 00000000..c215f91e --- /dev/null +++ b/vignettes/dash-html-components.html.asis @@ -0,0 +1,3 @@ +%\VignetteEngine{knitr::knitr} +%\VignetteIndexEntry{Dash HTML Components} +%\usepackage[utf8]{inputenc} From dee66983dff5cbb62fdfa725a39e4a39924861ce Mon Sep 17 00:00:00 2001 From: Ryan Patrick Kyle Date: Tue, 17 Dec 2019 13:15:45 -0500 Subject: [PATCH 02/10] :hammer: fix package title/desc --- DESCRIPTION | 4 ++-- dash-info.yaml | 5 ++--- man/dashHtmlComponents-package.Rd | 4 +--- 3 files changed, 5 insertions(+), 8 deletions(-) diff --git a/DESCRIPTION b/DESCRIPTION index a87f0392..8e06f130 100644 --- a/DESCRIPTION +++ b/DESCRIPTION @@ -1,7 +1,7 @@ Package: dashHtmlComponents -Title: Vanilla HTML components for Dash +Title: Vanilla HTML Components for Dash Version: 1.0.2 -Description: Vanilla HTML components for Dash +Description: Dash is a web application framework that provides pure Python and R abstraction around HTML, CSS, and JavaScript. Instead of writing HTML or using an HTML templating engine, you compose your layout using R functions within the dashHtmlComponents package. The source for this package is on GitHub: plotly/dash-html-components. Depends: R (>= 3.0.2) Imports: Suggests: diff --git a/dash-info.yaml b/dash-info.yaml index 1f97228c..cfaa4c3d 100644 --- a/dash-info.yaml +++ b/dash-info.yaml @@ -1,4 +1,4 @@ -pkg_help_description: > +pkg_help_description: >- Dash is a web application framework that provides pure Python and R abstraction around HTML, CSS, and JavaScript. Instead of writing HTML or using an HTML @@ -6,9 +6,8 @@ pkg_help_description: > functions within the dashHtmlComponents package. The source for this package is on GitHub: plotly/dash-html-components. -pkg_help_title: > +pkg_help_title: >- Vanilla HTML Components for Dash - r_examples: - name: htmlA dontrun: TRUE diff --git a/man/dashHtmlComponents-package.Rd b/man/dashHtmlComponents-package.Rd index 7dcb75c7..7eddb716 100644 --- a/man/dashHtmlComponents-package.Rd +++ b/man/dashHtmlComponents-package.Rd @@ -2,11 +2,9 @@ \docType{package} \name{dashHtmlComponents-package} \alias{dashHtmlComponents} -\title{Vanilla HTML Components for Dash -} +\title{Vanilla HTML Components for Dash} \description{ Dash is a web application framework that provides pure Python and R abstraction around HTML, CSS, and JavaScript. Instead of writing HTML or using an HTML templating engine, you compose your layout using R functions within the dashHtmlComponents package. The source for this package is on GitHub: plotly/dash-html-components. - } \author{ \strong{Maintainer}: Ryan Patrick Kyle From 613f0e968fdea0dbb00d4c90fb7eef41a88f2188 Mon Sep 17 00:00:00 2001 From: Ryan Patrick Kyle Date: Tue, 17 Dec 2019 16:31:03 -0500 Subject: [PATCH 03/10] fix typo in dash-info.yaml MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Marc-André Rivet --- dash-info.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dash-info.yaml b/dash-info.yaml index cfaa4c3d..454cfaf5 100644 --- a/dash-info.yaml +++ b/dash-info.yaml @@ -226,7 +226,7 @@ r_examples: ) ) - app$rqun_server() + app$run_server() - name: htmlBdi dontrun: TRUE code: | From 226bf20b40303f94f1b9a383212964fdf92fee1c Mon Sep 17 00:00:00 2001 From: Ryan Patrick Kyle Date: Tue, 17 Dec 2019 16:31:20 -0500 Subject: [PATCH 04/10] fix typo in basefont example MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Marc-André Rivet --- man/htmlBasefont.Rd | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/man/htmlBasefont.Rd b/man/htmlBasefont.Rd index c3d7dab7..5e893a1d 100644 --- a/man/htmlBasefont.Rd +++ b/man/htmlBasefont.Rd @@ -89,5 +89,5 @@ app$layout( ) ) -app$rqun_server() +app$run_server() }} From 8e8e0d89d1e4d50ccf87233ad099592cb11930b7 Mon Sep 17 00:00:00 2001 From: Ryan Patrick Kyle Date: Tue, 17 Dec 2019 16:31:42 -0500 Subject: [PATCH 05/10] use :flag-us: spelling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Marc-André Rivet --- man/htmlFieldset.Rd | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/man/htmlFieldset.Rd b/man/htmlFieldset.Rd index 49f83442..ef653eec 100644 --- a/man/htmlFieldset.Rd +++ b/man/htmlFieldset.Rd @@ -84,7 +84,7 @@ app <- Dash$new() app$layout(htmlDiv(list( htmlFieldset( - children = list('Choose your favourite Dash HTML component', + children = list('Choose your favorite Dash HTML component', dccRadioItems( options=list( list("label" = "htmlDiv", "value" = "htmlDiv"), From bc779839f1f13be8a7fcb4367b26a5ff8c90e13d Mon Sep 17 00:00:00 2001 From: Ryan Patrick Kyle Date: Tue, 17 Dec 2019 16:32:35 -0500 Subject: [PATCH 06/10] :us: spelling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Marc-André Rivet --- man/htmlLegend.Rd | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/man/htmlLegend.Rd b/man/htmlLegend.Rd index 3367913e..99d05d24 100644 --- a/man/htmlLegend.Rd +++ b/man/htmlLegend.Rd @@ -78,7 +78,7 @@ app <- Dash$new() app$layout(htmlDiv(list( htmlFieldset( children = list( - htmlLegend('Select your favourite component'), + htmlLegend('Select your favorite component'), dccRadioItems( options=list( list("label" = "htmlDiv", "value" = "htmlDiv"), From 0c17c10fbcb88be3e5238866068ae77e38304b3b Mon Sep 17 00:00:00 2001 From: Ryan Patrick Kyle Date: Tue, 17 Dec 2019 16:32:45 -0500 Subject: [PATCH 07/10] :us: spelling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Marc-André Rivet --- dash-info.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dash-info.yaml b/dash-info.yaml index 454cfaf5..b2bee3eb 100644 --- a/dash-info.yaml +++ b/dash-info.yaml @@ -588,7 +588,7 @@ r_examples: app$layout(htmlDiv(list( htmlFieldset( - children = list('Choose your favourite Dash HTML component', + children = list('Choose your favorite Dash HTML component', dccRadioItems( options=list( list("label" = "htmlDiv", "value" = "htmlDiv"), From f458c454ec195be024980ad3ab66372e3941a111 Mon Sep 17 00:00:00 2001 From: Ryan Patrick Kyle Date: Tue, 17 Dec 2019 16:32:58 -0500 Subject: [PATCH 08/10] :us: spelling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Marc-André Rivet --- dash-info.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dash-info.yaml b/dash-info.yaml index b2bee3eb..132b768e 100644 --- a/dash-info.yaml +++ b/dash-info.yaml @@ -1040,7 +1040,7 @@ r_examples: app$layout(htmlDiv(list( htmlFieldset( children = list( - htmlLegend('Select your favourite component'), + htmlLegend('Select your favorite component'), dccRadioItems( options=list( list("label" = "htmlDiv", "value" = "htmlDiv"), From c5026b7a354a3fe2691526c7babd16a82982c305 Mon Sep 17 00:00:00 2001 From: Ryan Patrick Kyle Date: Tue, 17 Dec 2019 17:13:58 -0500 Subject: [PATCH 09/10] fix unicode --- dash-info.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dash-info.yaml b/dash-info.yaml index cfaa4c3d..fa03fe73 100644 --- a/dash-info.yaml +++ b/dash-info.yaml @@ -71,7 +71,7 @@ r_examples: app$layout( htmlDiv(list( - htmlAddress(children="5555 Avenue de Gasp\U{00E9}, Montréal QC H2T 2A3") + htmlAddress(children="5555 Avenue de Gasp\U{00E9}, Montr\U{00E9}al QC H2T 2A3") ) ) ) From 64c2b1e9d676ff7562134cdc41d77293e735ee2f Mon Sep 17 00:00:00 2001 From: Ryan Patrick Kyle Date: Tue, 17 Dec 2019 17:15:43 -0500 Subject: [PATCH 10/10] fix unicode typo --- DESCRIPTION | 3 ++- man/htmlAddress.Rd | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/DESCRIPTION b/DESCRIPTION index 8e06f130..390888ae 100644 --- a/DESCRIPTION +++ b/DESCRIPTION @@ -4,11 +4,12 @@ Version: 1.0.2 Description: Dash is a web application framework that provides pure Python and R abstraction around HTML, CSS, and JavaScript. Instead of writing HTML or using an HTML templating engine, you compose your layout using R functions within the dashHtmlComponents package. The source for this package is on GitHub: plotly/dash-html-components. Depends: R (>= 3.0.2) Imports: -Suggests: +Suggests: knitr, rmarkdown License: MIT + file LICENSE URL: https://github.com/plotly/dash-html-components BugReports: https://github.com/plotly/dash-html-components/issues Encoding: UTF-8 LazyData: true +VignetteBuilder: knitr Author: Chris Parmer [aut] Maintainer: Ryan Patrick Kyle diff --git a/man/htmlAddress.Rd b/man/htmlAddress.Rd index a54b06e6..6ade28b6 100644 --- a/man/htmlAddress.Rd +++ b/man/htmlAddress.Rd @@ -75,7 +75,7 @@ app <- Dash$new() app$layout( htmlDiv(list( - htmlAddress(children="5555 Avenue de Gasp\U{00E9}, Montréal QC H2T 2A3") + htmlAddress(children="5555 Avenue de Gasp\U{00E9}, Montr\U{00E9}al QC H2T 2A3") ) ) )