material_side_nav_tabs: Place UI content within a side-nav tab

In shinymaterial: Implement Material Design in Shiny Applications

Description

Use this function to create side-nav tabs in your application.

Usage

material_side_nav_tabs(
  side_nav_tabs,
  icons = NULL,
  color = NULL,
  font_color = NULL
)

Arguments

side_nav_tabs	Named vector. The side-nav tab display names and corresponding side-nav tab ids.
icons	String vector. The names of the icons. Leave blank for no icons, or use "none". The length of the vector must match the length of side_nav_tabs. Visit https://materializecss.com/icons.html for a list of available icons.
color	String. The accent color of the side-nav tab wave animation. Leave blank for the default color. Visit https://materializecss.com/waves.html for a list of available colors. Side-nav tab color requires using word forms of colors (e.g. "purple").
font_color	String. The side-nav tabs font color. Leave blank for the default color. Visit https://materializecss.com/color.html for a list of available colors. Side-nav tab color requires using word forms of colors (e.g. "deep-purple"). Also, lighten or darken effects do not work on side-nav tab colors.

See Also

material_side_nav_tab_content

Examples

material_side_nav_tabs(
  side_nav_tabs = c(
    "Example Side-Nav Tab 1" = "example_side_nav_tab_1",
    "Example Side-Nav Tab 2" = "example_side_nav_tab_2"
  ),
  icons = c("cloud", "none"),
  color = "teal"
)

Example output

<div id="side_nav_tabs_click_info"></div>
<li class="shiny-material-side-nav-tab" id="example_side_nav_tab_1_tab_id">
  <a class="waves-effect waves-teal" href="javascript:void(0)" onclick="$(&#39;.shiny-material-side-nav-tab-content&#39;).hide();$(&#39;.shiny-material-side-nav-tab-content&#39;).trigger(&#39;hide&#39;);$(&#39;.shiny-material-side-nav-tab-content&#39;).trigger(&#39;hidden&#39;);$(&#39;.shiny-material-side-nav-tab&#39;).removeClass(&#39;active&#39;);$(&#39;#example_side_nav_tab_1&#39;).show();$(&#39;#example_side_nav_tab_1&#39;).trigger(&#39;show&#39;);$(&#39;#example_side_nav_tab_1&#39;).trigger(&#39;shown&#39;);$(&#39;#example_side_nav_tab_1_tab_id&#39;).addClass(&#39;active&#39;);$(&#39;#side_nav_tabs_click_info&#39;).trigger(&#39;click&#39;);">
    <i class="material-icons">cloud</i>
    Example Side-Nav Tab 1
  </a>
</li>
<li class="shiny-material-side-nav-tab" id="example_side_nav_tab_2_tab_id">
  <a class="waves-effect waves-teal" href="javascript:void(0)" onclick="$(&#39;.shiny-material-side-nav-tab-content&#39;).hide();$(&#39;.shiny-material-side-nav-tab-content&#39;).trigger(&#39;hide&#39;);$(&#39;.shiny-material-side-nav-tab-content&#39;).trigger(&#39;hidden&#39;);$(&#39;.shiny-material-side-nav-tab&#39;).removeClass(&#39;active&#39;);$(&#39;#example_side_nav_tab_2&#39;).show();$(&#39;#example_side_nav_tab_2&#39;).trigger(&#39;show&#39;);$(&#39;#example_side_nav_tab_2&#39;).trigger(&#39;shown&#39;);$(&#39;#example_side_nav_tab_2_tab_id&#39;).addClass(&#39;active&#39;);$(&#39;#side_nav_tabs_click_info&#39;).trigger(&#39;click&#39;);">
    <i class="material-icons">none</i>
    Example Side-Nav Tab 2
  </a>
</li>

shinymaterial documentation built on Sept. 1, 2020, 1:07 a.m.