Create a tabstrip panel

miniTabstripPanel is a tabstrip panel that contains miniTabPanel elements. Similar to shiny::tabsetPanel(), but optimized for small page sizes like mobile devices or the RStudio Viewer pane.

miniTabstripPanel(..., id = NULL, selected = NULL, between = NULL)

miniTabPanel(title, ..., value = title, icon = NULL)

Arguments

...: For miniTabstripPanel, miniTabPanel elements to include in the tabset. For miniTabPanel, UI elements to include within the tab.
id: If provided, you can use input$id in your server logic to determine which of the current tabs is active. The value will correspond to the value argument that is passed to miniTabPanel().
selected: The value (or, if none was supplied, the title) of the tab that should be selected by default. If NULL, the first tab will be selected.
between: A tag or list of tags that should be inserted between the content (above) and tabstrip (below).
title: Display title for tab.
value: The value that should be sent when miniTabstripPanel reports that this tab is selected. If omitted and miniTabstripPanel has an id, then the tab's title will be used as the value.
icon: Icon to appear on the tab; see shiny::icon().

Examples

library(shiny)

miniTabstripPanel(
  miniTabPanel("Data", icon = icon("table"),
    selectInput("dataset", "Data set", ls("package:datasets"))),
  miniTabPanel("Subset", icon = icon("sliders"),
    uiOutput("subset_ui")
  )
)
#> <div class="gadget-tabs-content-container">
#>   <div class="tab-content">
#>     <div class="tab-pane active" data-value="Data" data-icon-class="fas fa-table fa-fw" id="tab-6293-1">
#>       <div class="gadget-tabs-content-inner">
#>         <div class="form-group shiny-input-container">
#>           <label class="control-label" id="dataset-label" for="dataset">Data set</label>
#>           <div>
#>             <select id="dataset" class="shiny-input-select"><option value="AirPassengers" selected>AirPassengers</option>
#> <option value="BJsales">BJsales</option>
#> <option value="BJsales.lead">BJsales.lead</option>
#> <option value="BOD">BOD</option>
#> <option value="CO2">CO2</option>
#> <option value="ChickWeight">ChickWeight</option>
#> <option value="DNase">DNase</option>
#> <option value="EuStockMarkets">EuStockMarkets</option>
#> <option value="Formaldehyde">Formaldehyde</option>
#> <option value="HairEyeColor">HairEyeColor</option>
#> <option value="Harman23.cor">Harman23.cor</option>
#> <option value="Harman74.cor">Harman74.cor</option>
#> <option value="Indometh">Indometh</option>
#> <option value="InsectSprays">InsectSprays</option>
#> <option value="JohnsonJohnson">JohnsonJohnson</option>
#> <option value="LakeHuron">LakeHuron</option>
#> <option value="LifeCycleSavings">LifeCycleSavings</option>
#> <option value="Loblolly">Loblolly</option>
#> <option value="Nile">Nile</option>
#> <option value="Orange">Orange</option>
#> <option value="OrchardSprays">OrchardSprays</option>
#> <option value="PlantGrowth">PlantGrowth</option>
#> <option value="Puromycin">Puromycin</option>
#> <option value="Seatbelts">Seatbelts</option>
#> <option value="Theoph">Theoph</option>
#> <option value="Titanic">Titanic</option>
#> <option value="ToothGrowth">ToothGrowth</option>
#> <option value="UCBAdmissions">UCBAdmissions</option>
#> <option value="UKDriverDeaths">UKDriverDeaths</option>
#> <option value="UKgas">UKgas</option>
#> <option value="USAccDeaths">USAccDeaths</option>
#> <option value="USArrests">USArrests</option>
#> <option value="USJudgeRatings">USJudgeRatings</option>
#> <option value="USPersonalExpenditure">USPersonalExpenditure</option>
#> <option value="UScitiesD">UScitiesD</option>
#> <option value="VADeaths">VADeaths</option>
#> <option value="WWWusage">WWWusage</option>
#> <option value="WorldPhones">WorldPhones</option>
#> <option value="ability.cov">ability.cov</option>
#> <option value="airmiles">airmiles</option>
#> <option value="airquality">airquality</option>
#> <option value="anscombe">anscombe</option>
#> <option value="attenu">attenu</option>
#> <option value="attitude">attitude</option>
#> <option value="austres">austres</option>
#> <option value="beaver1">beaver1</option>
#> <option value="beaver2">beaver2</option>
#> <option value="cars">cars</option>
#> <option value="chickwts">chickwts</option>
#> <option value="co2">co2</option>
#> <option value="crimtab">crimtab</option>
#> <option value="discoveries">discoveries</option>
#> <option value="esoph">esoph</option>
#> <option value="euro">euro</option>
#> <option value="euro.cross">euro.cross</option>
#> <option value="eurodist">eurodist</option>
#> <option value="faithful">faithful</option>
#> <option value="fdeaths">fdeaths</option>
#> <option value="freeny">freeny</option>
#> <option value="freeny.x">freeny.x</option>
#> <option value="freeny.y">freeny.y</option>
#> <option value="infert">infert</option>
#> <option value="iris">iris</option>
#> <option value="iris3">iris3</option>
#> <option value="islands">islands</option>
#> <option value="ldeaths">ldeaths</option>
#> <option value="lh">lh</option>
#> <option value="longley">longley</option>
#> <option value="lynx">lynx</option>
#> <option value="mdeaths">mdeaths</option>
#> <option value="morley">morley</option>
#> <option value="mtcars">mtcars</option>
#> <option value="nhtemp">nhtemp</option>
#> <option value="nottem">nottem</option>
#> <option value="npk">npk</option>
#> <option value="occupationalStatus">occupationalStatus</option>
#> <option value="precip">precip</option>
#> <option value="presidents">presidents</option>
#> <option value="pressure">pressure</option>
#> <option value="quakes">quakes</option>
#> <option value="randu">randu</option>
#> <option value="rivers">rivers</option>
#> <option value="rock">rock</option>
#> <option value="sleep">sleep</option>
#> <option value="stack.loss">stack.loss</option>
#> <option value="stack.x">stack.x</option>
#> <option value="stackloss">stackloss</option>
#> <option value="state.abb">state.abb</option>
#> <option value="state.area">state.area</option>
#> <option value="state.center">state.center</option>
#> <option value="state.division">state.division</option>
#> <option value="state.name">state.name</option>
#> <option value="state.region">state.region</option>
#> <option value="state.x77">state.x77</option>
#> <option value="sunspot.month">sunspot.month</option>
#> <option value="sunspot.year">sunspot.year</option>
#> <option value="sunspots">sunspots</option>
#> <option value="swiss">swiss</option>
#> <option value="treering">treering</option>
#> <option value="trees">trees</option>
#> <option value="uspop">uspop</option>
#> <option value="volcano">volcano</option>
#> <option value="warpbreaks">warpbreaks</option>
#> <option value="women">women</option></select>
#>             <script type="application/json" data-for="dataset" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
#>           </div>
#>         </div>
#>       </div>
#>     </div>
#>     <div class="tab-pane" data-value="Subset" data-icon-class="fas fa-sliders fa-fw" id="tab-6293-2">
#>       <div class="gadget-tabs-content-inner">
#>         <div id="subset_ui" class="shiny-html-output"></div>
#>       </div>
#>     </div>
#>   </div>
#> </div>
#> <div class="gadget-tabs-container">
#>   <ul class="nav gadget-tabs">
#>     <li class="active">
#>       <a href="#tab-6293-1" data-toggle="tab" data-value="Data">
#>         <i class="fas fa-table fa-fw fa-fw" role="presentation" aria-label=" icon"></i>
#>         Data
#>       </a>
#>     </li>
#>     <li>
#>       <a href="#tab-6293-2" data-toggle="tab" data-value="Subset">
#>         <i class="fas fa-sliders fa-fw fa-fw" role="presentation" aria-label=" icon"></i>
#>         Subset
#>       </a>
#>     </li>
#>   </ul>
#> </div>

Arguments

See also

Examples