Toolbar
View in LexiconA toolbar is a set of actions related to a specific context that are grouped into a horizontal bar.
install | yarn add @clayui/toolbar |
---|---|
version | |
use | import TimePicker from '@clayui/toolbar'; |
Snippet
<nav className="component-tbar tbar"> <div className="container-fluid container-fluid-max-xl"> <ul className="tbar-nav"> <li className="tbar-item"> <a aria-label="Previous" title="Previous" className="component-action disabled" href="#1" role="button" tabindex="-1" > <svg className="lexicon-icon lexicon-icon-angle-left" focusable="false" role="presentation" > <use xlink:href="/icons.svg#angle-left" /> </svg> </a> </li> <li className="tbar-item tbar-item-expand"> <div className="tbar-section"> <span className="text-truncate-inline"> <span className="text-truncate" >Item 1 of 3,138,732,873,467,182,321,341,231,234,342,559,827,334,424</span > </span> </div> </li> <li className="tbar-item"> <a aria-label="Next" title="Next" className="component-action" href="#1" role="button" > <svg className="lexicon-icon lexicon-icon-angle-right" focusable="false" role="presentation" > <use xlink:href="/icons.svg#angle-right" /> </svg> </a> </li> <li className="tbar-item"> <a aria-label="Close" title="Close" className="component-action" href="#1" role="button" > <svg className="lexicon-icon lexicon-icon-times" focusable="false" role="presentation" > <use xlink:href="/icons.svg#times" /> </svg> </a> </li> </ul> </div> </nav>
Subnav
Subnavigation to use with main navigations such as Management Toolbar.
Snippet
<nav className="tbar subnav-tbar"> <div className="container-fluid container-fluid-max-xl"> <ul className="tbar-nav"> <li className="tbar-item tbar-item-expand"> <div className="tbar-section"> <span className="text-truncate-inline"> <span className="text-truncate" >25,392 results for <strong >ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</strong ></span > </span> </div> </li> <li className="tbar-item"> <a className="component-link tbar-link" href="#1" role="button" >Clear</a > </li> <li className="tbar-item"> <button className="btn btn-unstyled component-link tbar-link" type="button" > Clear </button> </li> </ul> </div> </nav>
Subnav Light
Subnavigation used in Modals
Snippet
<div className="tbar subnav-tbar subnav-tbar-light"> <div className="container-fluid container-fluid-max-xl"> <div className="tbar-nav"> <div className="tbar-item tbar-item-expand"> <div className="tbar-section"> <span className="component-text text-truncate-inline"> <span className="text-truncate">User Information</span> </span> </div> </div> <div className="tbar-item"> <span className="component-text">Step 1 of 2</span> </div> </div> </div> </div>
Subnav Primary
Subnavigation used in Management Toolbar.
Snippet
<nav className="tbar tbar-inline-md-down subnav-tbar subnav-tbar-primary"> <div className="container-fluid container-fluid-max-xl"> <ul className="tbar-nav tbar-nav-wrap"> <li className="tbar-item"> <div className="tbar-section"> <span className="component-text" >7 results for "<strong>banner</strong>"</span > </div> </li> <li className="tbar-item"> <div className="tbar-section"> <span className="component-label label label-dismissible tbar-label"> <span className="label-item label-item-expand"> <div className="label-section"> Category: <strong>Productivity</strong> </div> </span> <span className="label-item label-item-after"> <button aria-label="Close" className="close" type="button"> <svg className="lexicon-icon lexicon-icon-times" focusable="false" role="presentation" > <use xlink:href="/icons.svg#times"></use> </svg> </button> </span> </span> </div> </li> <li className="tbar-item"> <div className="tbar-section"> <span className="component-label label label-dismissible tbar-label"> <span className="label-item label-item-expand"> <div className="label-section"> Status: <strong>Approved</strong> </div> </span> <span className="label-item label-item-after"> <button aria-label="Close" className="close" type="button"> <svg className="lexicon-icon lexicon-icon-times" focusable="false" role="presentation" > <use xlink:href="/icons.svg#times"></use> </svg> </button> </span> </span> </div> </li> <li className="tbar-item tbar-item-expand"> <div className="tbar-section"> <span className="component-label label label-dismissible tbar-label"> <span className="label-item label-item-expand"> <div className="label-section">Type: <strong>png</strong></div> </span> <span className="label-item label-item-after"> <button aria-label="Close" className="close" disabled type="button" > <svg className="lexicon-icon lexicon-icon-times" focusable="false" role="presentation" > <use xlink:href="/icons.svg#times"></use> </svg> </button> </span> </span> </div> </li> <li className="tbar-item"> <div className="tbar-section"> <a className="component-link disabled tbar-link" href="#1" role="button" tabindex="-1" >Apply to Root</a > </div> </li> <li className="tbar-item"> <div className="tbar-section"> <button className="btn btn-unstyled component-link tbar-link" type="button" > Clear All </button> </div> </li> </ul> </div> </nav>
Subnav Primary Disabled
Disabled sub-navigation used in Management Toolbar, just add subnav-tbar-disabled
. The disabled
attribute must be added to any button
tag. The class disabled
and attribute tabindex="-1"
must be added to any anchor
tag and clicks disabled via javascript.
Snippet
<nav className="tbar tbar-inline-md-down subnav-tbar subnav-tbar-disabled subnav-tbar-primary" > <div className="container-fluid container-fluid-max-xl"> <ul className="tbar-nav tbar-nav-wrap"> <li className="tbar-item"> <div className="tbar-section"> <span className="component-text" >7 results for "<strong>banner</strong>"</span > </div> </li> <li className="tbar-item"> <div className="tbar-section"> <span className="component-label label label-dismissible tbar-label"> <span className="label-item label-item-expand"> <div className="label-section"> Category: <strong>Productivity</strong> </div> </span> <span className="label-item label-item-after"> <button aria-label="Close" className="close" disabled type="button" > <svg className="lexicon-icon lexicon-icon-times" focusable="false" role="presentation" > <use xlink:href="/icons.svg#times"></use> </svg> </button> </span> </span> </div> </li> <li className="tbar-item"> <div className="tbar-section"> <span className="component-label label label-dismissible tbar-label"> <span className="label-item label-item-expand"> <div className="label-section"> Status: <strong>Approved</strong> </div> </span> <span className="label-item label-item-after"> <button aria-label="Close" className="close" disabled type="button" > <svg className="lexicon-icon lexicon-icon-times" focusable="false" role="presentation" > <use xlink:href="/icons.svg#times"></use> </svg> </button> </span> </span> </div> </li> <li className="tbar-item tbar-item-expand"> <div className="tbar-section"> <span className="component-label label label-dismissible tbar-label"> <span className="label-item label-item-expand"> <div className="label-section">Type: <strong>png</strong></div> </span> <span className="label-item label-item-after"> <button aria-label="Close" className="close" disabled type="button" > <svg className="lexicon-icon lexicon-icon-times" focusable="false" role="presentation" > <use xlink:href="/icons.svg#times"></use> </svg> </button> </span> </span> </div> </li> <li className="tbar-item"> <div className="tbar-section"> <a className="component-link disabled tbar-link" href="#1" role="button" tabindex="-1" >Apply to Root</a > </div> </li> <li className="tbar-item"> <div className="tbar-section"> <button className="btn btn-unstyled component-link tbar-link" disabled type="button" > Clear All </button> </div> </li> </ul> </div> </nav>
Helper Classes
tbar-inline-{xs|sm|md|lg|xl}-down
A helper class on tbar
that turns tbar-nav
, tbar-item
, tbar-section
, and component-title
inline at specific breakpoints.
tbar-nav-wrap
A helper class on tbar-nav
that breaks tbar-nav
content to new line when the container becomes too small.
tbar-nav-shrink
A helper class on tbar-nav
that makes it only as wide as its content, use with other tbar-nav
’s.