dccTab: Tab component

In dashCoreComponents: Core Interactive UI Components for 'Dash'

Description

Part of dcc.Tabs - this is the child Tab component used to render a tabbed page. Its children will be set as the content of that tab, which if clicked will become visible.

Usage

dccTab(children=NULL, id=NULL, label=NULL, value=NULL,
disabled=NULL, disabled_style=NULL, disabled_className=NULL,
className=NULL, selected_className=NULL, style=NULL,
selected_style=NULL, loading_state=NULL)

Arguments

children	A list of or a singular dash component, string or number. The content of the tab - will only be displayed if this tab is selected
id	Character. The ID of this component, used to identify dash components in callbacks. The ID needs to be unique across all of the components in an app.
label	Character. The tab's label
value	Character. Value for determining which Tab is currently selected
disabled	Logical. Determines if tab is disabled or not - defaults to false
disabled_style	Named list. Overrides the default (inline) styles when disabled
disabled_className	Character. Appends a class to the Tab component when it is disabled.
className	Character. Appends a class to the Tab component.
selected_className	Character. Appends a class to the Tab component when it is selected.
style	Named list. Overrides the default (inline) styles for the Tab component.
selected_style	Named list. Overrides the default (inline) styles for the Tab component when it is selected.
loading_state	Lists containing elements 'is_loading', 'prop_name', 'component_name'. those elements have the following types: - is_loading (logical; optional): determines if the component is loading or not - 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

Value

named list of JSON elements corresponding to React.js properties and their values

Examples

if (interactive() && require(dash)) {
    library(dash)
    library(dashCoreComponents)
    library(dashHtmlComponents)

    app <- Dash$new()

    app$layout(htmlDiv(list(
      dccTabs(id="tabs", value='tab-1', children=list(
        dccTab(label='Tab one', value='tab-1'),
        dccTab(label='Tab two', value='tab-2')
        )
      ),
      htmlDiv(id='tabs-content')
      )
      )
    )

    app$callback(output('tabs-content', 'children'),
        params = list(input('tabs', 'value')),
    function(tab){
      if(tab == 'tab-1'){
      return(htmlDiv(list(
        htmlH3('Tab content 1')
        )))}
      else if(tab == 'tab-2'){
      return(htmlDiv(list(
        htmlH3('Tab content 2')
        )))}
      }
    )

  app$run_server()
}

Example output

dashCoreComponents documentation built on July 1, 2020, 8:20 p.m.