A tree view is a component based on nodes that are shown in a hierarchical structure.
| install | yarn add @clayui/core |
|---|---|
| version |  |
| use | import {TreeView} from '@clayui/core'; |
Table of Contents
Treeview
The treeview provides a way to display information in a hierarchical structure by using collapsible items (nodes). You can navigate between these items using either your mouse device or keyboard. The most common example of a treeview is a folder structure for file systems, but it can be used for showing any hierarchical relationships.
See
https://www.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-2/treeview-2a.html
for accessibility patterns.
Treeview Link indentation must be provided by javascript through inline
styles, use the styles
padding-left: 24px; on .treeview-link and
margin-left: -24px on .treeview-link > .c-inner. Increase the indentation
for each level by increasing or decreasing padding-left or margin-left by
24px.- Liferay Drive
- Liferay Drive (ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)
- Details
- Categorization
- Documents and Media
- Site Template
- Repositories
- Sitemap
- Robots
- Documents and Media
- Default User Associations
- Staging
- Analytics
- Maps
Snippet
<ul className="treeview treeview-light treeview-nested" role="tree"> <li className="treeview-item" role="none"> <div aria-controls="treeviewCollapse01" aria-expanded="true" className="treeview-link" data-target="#treeviewCollapse01" data-toggle="collapse" role="treeitem" tabIndex="0" > <span className="c-inner" tabIndex="-2"> <span className="autofit-row"> <span className="autofit-col"> <button aria-controls="treeviewCollapse01" aria-expanded="true" className="btn btn-monospaced component-expander" data-target="#treeviewCollapse01" data-toggle="collapse" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-angle-down" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-down" /> </svg> <svg className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-right" /> </svg> </span> </button> </span> <span className="autofit-col"> <span className="component-icon"> <svg className="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#folder" /> </svg> </span> </span> <span className="autofit-col autofit-col-expand"> <span className="component-text"> <span className="text-truncate-inline" title="Liferay Drive" ><span className="text-truncate" >Liferay Drive</span ></span > </span> </span> </span> </span> </div> <div className="collapse show" id="treeviewCollapse01"> <ul className="treeview-group" role="group"> <li className="treeview-item" role="none"> <div aria-controls="treeviewCollapse02" aria-expanded="false" className="collapsed treeview-link" data-target="#treeviewCollapse02" data-toggle="collapse" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <span className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <span className="autofit-row"> <span className="autofit-col"> <button aria-controls="treeviewCollapse02" aria-expanded="false" className="btn btn-monospaced component-expander" data-target="#treeviewCollapse02" data-toggle="collapse" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-angle-down" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-down" /> </svg> <svg className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-right" /> </svg> </span> </button> </span> <span className="autofit-col"> <span className="component-icon"> <svg className="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#folder" /> </svg> </span> </span> <span className="autofit-col autofit-col-expand" > <span className="component-text"> <span className="text-truncate-inline" title="Liferay Drive (ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)" ><span className="text-truncate" >Liferay Drive (ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)</span ></span > </span> </span> </span> </span> </div> <div className="collapse" id="treeviewCollapse02"> <ul className="treeview-group" role="group"> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '48px'}} > <span className="c-inner" tabIndex="-2" style={{marginLeft: '-48px'}} > <span className="autofit-row"> <span className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" title="Details" ><span className="text-truncate" >Details</span ></span ></span > </span> </span> </span> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '48px'}} > <span className="c-inner" tabIndex="-2" style={{marginLeft: '-48px'}} > <span className="autofit-row"> <span className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" title="Categorization" ><span className="text-truncate" >Categorization</span ></span ></span > </span> </span> </span> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '48px'}} > <span className="c-inner" tabIndex="-2" style={{marginLeft: '-48px'}} > <span className="autofit-row"> <span className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" title="Documents and Media" ><span className="text-truncate" >Documents and Media</span ></span ></span > </span> </span> </span> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '48px'}} > <span className="c-inner" tabIndex="-2" style={{marginLeft: '-48px'}} > <span className="autofit-row"> <span className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" title="Site Template" ><span className="text-truncate" >Site Template</span ></span ></span > </span> </span> </span> </div> </li> </ul> </div> </li> </ul> </div> </li> <li className="treeview-item" role="none"> <div aria-controls="treeviewCollapse03" aria-expanded="false" className="collapsed treeview-link" data-target="#treeviewCollapse03" data-toggle="collapse" role="treeitem" tabIndex="-1" > <span className="c-inner" tabIndex="-2"> <span className="autofit-row"> <span className="autofit-col"> <button aria-controls="treeviewCollapse03" aria-expanded="false" className="btn btn-monospaced component-expander" data-target="#treeviewCollapse03" data-toggle="collapse" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-angle-down" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-down" /> </svg> <svg className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-right" /> </svg> </span> </button> </span> <span className="autofit-col"> <span className="component-icon"> <svg className="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#folder" /> </svg> </span> </span> <span className="autofit-col autofit-col-expand"> <span className="component-text"> <span className="text-truncate-inline" title="Repositories" ><span className="text-truncate" >Repositories</span ></span > </span> </span> </span> </span> </div> <div className="collapse" id="treeviewCollapse03"> <ul className="treeview-group" role="group"> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <span className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <span className="autofit-row"> <span className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" title="Site Map" ><span className="text-truncate" >Sitemap</span ></span ></span > </span> </span> </span> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <span className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <span className="autofit-row"> <span className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" title="Robots" ><span className="text-truncate" >Robots</span ></span ></span > </span> </span> </span> </div> </li> </ul> </div> </li> <li className="treeview-item" role="none"> <div aria-controls="treeviewCollapse04" aria-expanded="false" className="collapsed treeview-link" data-target="#treeviewCollapse04" data-toggle="collapse" role="treeitem" tabIndex="-1" > <span className="c-inner" tabIndex="-2"> <span className="autofit-row"> <span className="autofit-col"> <button aria-controls="treeviewCollapse04" aria-expanded="false" className="btn btn-monospaced component-expander" data-target="#treeviewCollapse04" data-toggle="collapse" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-angle-down" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-down" /> </svg> <svg className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-right" /> </svg> </span> </button> </span> <span className="autofit-col"> <span className="component-icon"> <svg className="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#folder" /> </svg> </span> </span> <span className="autofit-col autofit-col-expand"> <span className="component-text"> <span className="text-truncate-inline" title="Documents and Media" ><span className="text-truncate" >Documents and Media</span ></span > </span> </span> </span> </span> </div> <div className="collapse" id="treeviewCollapse04"> <ul className="treeview-group" role="group"> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <span className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <span className="autofit-row"> <span className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" title="Default User Associations" ><span className="text-truncate" >Default User Associations</span ></span ></span > </span> </span> </span> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <span className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <span className="autofit-row"> <span className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" title="Staging" ><span className="text-truncate" >Staging</span ></span ></span > </span> </span> </span> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <span className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <span className="autofit-row"> <span className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" title="Analytics" ><span className="text-truncate" >Analytics</span ></span ></span > </span> </span> </span> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <span className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <span className="autofit-row"> <span className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" title="Maps" ><span className="text-truncate" >Maps</span ></span ></span > </span> </span> </span> </div> </li> </ul> </div> </li> </ul>
Treeview Group
The class treeview-group must be applied to all nested ul elements inside treeview. This class helps provide the proper spacing for nested treeview-links.
Snippet
<ul className="treeview treeview-light treeview-nested" role="tree"> <li className="treeview-item" role="none"> <div aria-controls="treeviewExpanderCollapse01" aria-expanded="false" className="treeview-link" data-target="#treeviewExpanderCollapse01" data-toggle="collapse" role="treeitem" tabIndex="0" > ... </div> <div className="collapse" id="treeviewExpanderCollapse01"> <ul className="treeview-group" role="group"> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <span className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} ><span className="component-text" >Tree Item</span ></span > </div> </li> </ul> </div> </li> </ul>
Treeview Item
The class treeview-item must be applied to all li elements. This class helps provide the proper spacing for nested treeview-links.
Snippet
<ul className="treeview treeview-light treeview-nested" role="tree"> <li className="treeview-item" role="none"> <div aria-controls="treeviewExpanderCollapse01" aria-expanded="false" className="treeview-link" data-target="#treeviewExpanderCollapse01" data-toggle="collapse" role="treeitem" tabindex="0" > ... </div> </li> </ul>
Treeview Link
This is the container for all nodes inside treeview. If there are auxiliary controls inside the treeview-link (e.g., a or button) it is recommended to use a div element with the tabIndex attribute.
Snippet
<ul className="treeview treeview-light treeview-nested" role="tree"> <li className="treeview-item" role="none"> <div aria-controls="treeviewExpanderCollapse01" aria-expanded="false" className="treeview-link" data-target="#treeviewExpanderCollapse01" data-toggle="collapse" role="treeitem" tabindex="0" > ... </div> </li> </ul>
Treeview Link Disabled
The modifier class disabled adds disabled styles to treeview-link. The class does not add disabled styles to form elements, links, or buttons inside. Those must be disabled individually.
Snippet
<ul className="treeview treeview-light treeview-nested" role="tree"> <li className="treeview-item" role="none"> <div aria-controls="treeviewItemDisabledCollapse02" aria-expanded="true" className="treeview-link disabled hover" data-target="#treeviewItemDisabledCollapse02" data-toggle="collapse" role="treeitem" tabindex="-1" > ... </div> </li> </ul> <div className="bg-dark"> <ul className="treeview treeview-dark treeview-nested" role="tree"> <li className="treeview-item" role="none"> <div aria-controls="treeviewItemDisabledDarkCollapse01" aria-expanded="true" className="treeview-link disabled hover" data-target="#treeviewItemDisabledDarkCollapse01" data-toggle="collapse" role="treeitem" tabindex="-1" > ... </div> </li> </ul> </div>
Component Expander
The expander is used to expand or collapse the nodes and serves as an indicator for those states. The class component-expander marks the button as the toggle. The class component-expanded-d-none on lexicon-icon hides the icon when tree node is expanded.
- Liferay Drive
- Tree Item
Snippet
<button aria-controls="treeviewExpanderCollapse01" aria-expanded="false" className="btn btn-monospaced component-expander" data-target="#treeviewExpanderCollapse01" data-toggle="collapse" tabindex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-angle-down" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-down" /> </svg> <svg className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-right" /> </svg> </span> </button>
Component Action
The action button(s) are monospaced buttons used to supply additional features to a tree node, such as removal or a dropdown.
- Liferay Drive
- Tree Item
Snippet
<button className="btn btn-monospaced component-action" tabindex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button>
Treeview Dragging
The modifier class treeview-dragging displays an indicator showing the item being dragged.
Liferay Drive
Treeview Dropping Bottom
The modifier class treeview-dropping-bottom adds a visual indicator to the bottom of treeview-link to show where a dragged treeview-link will be inserted.
- Liferay Drive
- Tree Item
Snippet
<ul className="treeview treeview-light treeview-nested show-quick-actions-on-hover" role="tree" > <li className="treeview-item" role="none"> <div aria-controls="treeviewDroppoingBottomCollapse01" aria-expanded="true" className="treeview-dropping-bottom treeview-link" data-target="#treeviewDroppoingBottomCollapse01" data-toggle="collapse" role="treeitem" tabIndex="0" > <span className="c-inner" tabIndex="-2"> <span className="autofit-row"> <span className="autofit-col"> <button aria-controls="treeviewDroppoingBottomCollapse01" aria-expanded="true" className="btn btn-monospaced component-expander" data-target="#treeviewDroppoingBottomCollapse01" data-toggle="collapse" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-angle-down" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-down" /> </svg> <svg className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-right" /> </svg> </span> </button> </span> <span className="autofit-col"> <span className="component-icon"> <svg className="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#folder" /> </svg> </span> </span> <span className="autofit-col autofit-col-expand"> <span className="component-text"> <span className="text-truncate-inline" title="Liferay Drive" ><span className="text-truncate" >Liferay Drive</span ></span > </span> </span> <span className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </span> <span className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </span> </span> </span> </div> <div className="collapse show" id="treeviewDroppoingBottomCollapse01"> <ul className="treeview-group" role="group"> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <span className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} ><span className="component-text" >Tree Item</span ></span > </div> </li> </ul> </div> </li> </ul>
Treeview Dropping Top
The modifier class treeview-dropping-top adds a visual indicator to the bottom of treeview-link to show where a dragged treeview-link will be inserted.
- Liferay Drive
- Tree Item
Snippet
<ul className="treeview treeview-light treeview-nested show-quick-actions-on-hover" role="tree" > <li className="treeview-item" role="none"> <div aria-controls="treeviewDroppingTopCollapse01" aria-expanded="true" className="treeview-dropping-top treeview-link" data-target="#treeviewDroppingTopCollapse01" data-toggle="collapse" role="treeitem" tabIndex="0" > <span className="c-inner" tabIndex="-2"> <span className="autofit-row"> <span className="autofit-col"> <button aria-controls="treeviewDroppingTopCollapse01" aria-expanded="true" className="btn btn-monospaced component-expander" data-target="#treeviewDroppingTopCollapse01" data-toggle="collapse" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-angle-down" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-down" /> </svg> <svg className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-right" /> </svg> </span> </button> </span> <span className="autofit-col"> <span className="component-icon"> <svg className="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#folder" /> </svg> </span> </span> <span className="autofit-col autofit-col-expand"> <span className="component-text"> <span className="text-truncate-inline" title="Liferay Drive" ><span className="text-truncate" >Liferay Drive</span ></span > </span> </span> <span className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </span> <span className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </span> </span> </span> </div> <div className="collapse show" id="treeviewDroppingTopCollapse01"> <ul className="treeview-group" role="group"> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <span className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} ><span className="component-text" >Tree Item</span ></span > </div> </li> </ul> </div> </li> </ul>
Treeview Dropping Middle
The modifier class treeview-dropping-middle adds a visual indicator around the treeview-link to show where a dragged treeview-link will be nested.
- Liferay Drive
- Tree Item
Snippet
<ul className="treeview treeview-light treeview-nested show-quick-actions-on-hover" role="tree" > <li className="treeview-item" role="none"> <div aria-controls="treeviewDroppingMiddleCollapse01" aria-expanded="true" className="treeview-dropping-middle treeview-link" data-target="#treeviewDroppingMiddleCollapse01" data-toggle="collapse" role="treeitem" tabIndex="0" > <span className="c-inner" tabIndex="-2"> <span className="autofit-row"> <span className="autofit-col"> <button aria-controls="treeviewDroppingMiddleCollapse01" aria-expanded="true" className="btn btn-monospaced component-expander" data-target="#treeviewDroppingMiddleCollapse01" data-toggle="collapse" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-angle-down" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-down" /> </svg> <svg className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-right" /> </svg> </span> </button> </span> <span className="autofit-col"> <span className="component-icon"> <svg className="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#folder" /> </svg> </span> </span> <span className="autofit-col autofit-col-expand"> <span className="component-text"> <span className="text-truncate-inline" title="Liferay Drive" ><span className="text-truncate" >Liferay Drive</span ></span > </span> </span> <span className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </span> <span className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </span> </span> </span> </div> <div className="collapse show" id="treeviewDroppingMiddleCollapse01"> <ul className="treeview-group" role="group"> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <span className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} ><span className="component-text" >Tree Item</span ></span > </div> </li> </ul> </div> </li> </ul>
Variations
Show Component Expander on Hover
The class show-component-expander-on-hover displays the component-expander when the mouse hovers over the treeview component.
- Liferay Drive
- Liferay Drive (ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)
- Details
- Categorization
- Documents and Media
- Site Template
- Repositories
- Sitemap
- Robots
- Documents and Media
- Default User Associations
- Staging
- Analytics
- Maps
Snippet
<ul className="show-component-expander-on-hover treeview treeview-nested treeview-light" role="tree" > <li className="treeview-item" role="none"> <div aria-controls="showComponentExpanderCollapse01" aria-expanded="true" className="treeview-link" data-target="#showComponentExpanderCollapse01" data-toggle="collapse" role="treeitem" tabIndex="0" > <span className="c-inner" tabIndex="-2"> <span className="autofit-row"> <span className="autofit-col"> <button aria-controls="showComponentExpanderCollapse01" aria-expanded="true" className="btn btn-monospaced component-expander show" data-target="#showComponentExpanderCollapse01" data-toggle="collapse" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-angle-down" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-down" /> </svg> <svg className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-right" /> </svg> </span> </button> </span> <span className="autofit-col"> <span className="component-icon"> <svg className="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#folder" /> </svg> </span> </span> <span className="autofit-col autofit-col-expand"> <span className="component-text"> <span className="text-truncate-inline" data-toggle="tooltip" title="Liferay Drive" ><span className="text-truncate" >Liferay Drive</span ></span > </span> </span> </span> </span> </div> <div className="collapse show" id="showComponentExpanderCollapse01"> <ul className="treeview-group" role="group"> <li className="treeview-item" role="none"> <div aria-controls="showComponentExpanderCollapse02" aria-expanded="false" className="collapsed treeview-link" data-target="#showComponentExpanderCollapse02" data-toggle="collapse" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <span className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <span className="autofit-row"> <span className="autofit-col"> <button aria-controls="showComponentExpanderCollapse02" aria-expanded="false" className="btn btn-monospaced component-expander" data-target="#showComponentExpanderCollapse02" data-toggle="collapse" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-angle-down" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-down" /> </svg> <svg className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-right" /> </svg> </span> </button> </span> <span className="autofit-col"> <span className="component-icon"> <svg className="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#folder" /> </svg> </span> </span> <span className="autofit-col autofit-col-expand" > <span className="component-text"> <span className="text-truncate-inline" data-toggle="tooltip" title="Liferay Drive (ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)" ><span className="text-truncate" >Liferay Drive (ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)</span ></span > </span> </span> </span> </span> </div> <div className="collapse" id="showComponentExpanderCollapse02" > <ul className="treeview-group" role="group"> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '48px'}} > <span className="c-inner" tabIndex="-2" style={{marginLeft: '-48px'}} > <span className="autofit-row"> <span className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" ><span className="text-truncate" data-toggle="tooltip" title="Details" >Details</span ></span ></span > </span> </span> </span> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '48px'}} > <span className="c-inner" tabIndex="-2" style={{marginLeft: '-48px'}} > <span className="autofit-row"> <span className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" data-toggle="tooltip" title="Categorization" ><span className="text-truncate" >Categorization</span ></span ></span > </span> </span> </span> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '48px'}} > <span className="c-inner" tabIndex="-2" style={{marginLeft: '-48px'}} > <span className="autofit-row"> <span className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" data-toggle="tooltip" title="Documents and Media" ><span className="text-truncate" >Documents and Media</span ></span ></span > </span> </span> </span> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '48px'}} > <span className="c-inner" tabIndex="-2" style={{marginLeft: '-48px'}} > <span className="autofit-row"> <span className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" data-toggle="tooltip" title="Site Template" ><span className="text-truncate" >Site Template</span ></span ></span > </span> </span> </span> </div> </li> </ul> </div> </li> </ul> </div> </li> <li className="treeview-item" role="none"> <div aria-controls="showComponentExpanderCollapse03" aria-expanded="false" className="collapsed treeview-link" data-target="#showComponentExpanderCollapse03" data-toggle="collapse" role="treeitem" tabIndex="-1" > <span className="c-inner" tabIndex="-2"> <span className="autofit-row"> <span className="autofit-col"> <button aria-controls="showComponentExpanderCollapse03" aria-expanded="false" className="btn btn-monospaced component-expander" data-target="#showComponentExpanderCollapse03" data-toggle="collapse" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-angle-down" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-down" /> </svg> <svg className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-right" /> </svg> </span> </button> </span> <span className="autofit-col"> <span className="component-icon"> <svg className="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#folder" /> </svg> </span> </span> <span className="autofit-col autofit-col-expand"> <span className="component-text"> <span className="text-truncate-inline" data-toggle="tooltip" title="Repositories" ><span className="text-truncate" >Repositories</span ></span > </span> </span> </span> </span> </div> <div className="collapse" id="showComponentExpanderCollapse03"> <ul className="treeview-group" role="group"> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <span className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <span className="autofit-row"> <span className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" data-toggle="tooltip" title="Sitemap" ><span className="text-truncate" >Sitemap</span ></span ></span > </span> </span> </span> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <span className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <span className="autofit-row"> <span className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" data-toggle="tooltip" title="Robots" ><span className="text-truncate" >Robots</span ></span ></span > </span> </span> </span> </div> </li> </ul> </div> </li> <li className="treeview-item" role="none"> <div aria-controls="showComponentExpanderCollapse04" aria-expanded="false" className="collapsed treeview-link" data-target="#showComponentExpanderCollapse04" data-toggle="collapse" role="treeitem" tabIndex="-1" > <span className="c-inner" tabIndex="-2"> <span className="autofit-row"> <span className="autofit-col"> <button aria-controls="showComponentExpanderCollapse04" aria-expanded="false" className="btn btn-monospaced component-expander" data-target="#showComponentExpanderCollapse04" data-toggle="collapse" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-angle-down" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-down" /> </svg> <svg className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-right" /> </svg> </span> </button> </span> <span className="autofit-col"> <span className="component-icon"> <svg className="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#folder" /> </svg> </span> </span> <span className="autofit-col autofit-col-expand"> <span className="component-text"> <span className="text-truncate-inline" data-toggle="tooltip" title="Documents and Media" ><span className="text-truncate" >Documents and Media</span ></span > </span> </span> </span> </span> </div> <div className="collapse" id="showComponentExpanderCollapse04"> <ul className="treeview-group" role="group"> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <span className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <span className="autofit-row"> <span className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" data-toggle="tooltip" title="Default User Associations" ><span className="text-truncate" >Default User Associations</span ></span ></span > </span> </span> </span> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <span className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <span className="autofit-row"> <span className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" data-toggle="tooltip" title="Staging" ><span className="text-truncate" >Staging</span ></span ></span > </span> </span> </span> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <span className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <span className="autofit-row"> <span className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" data-toggle="tooltip" title="Analytics" ><span className="text-truncate" >Analytics</span ></span ></span > </span> </span> </span> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <span className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <span className="autofit-row"> <span className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" data-toggle="tooltip" title="Maps" ><span className="text-truncate" >Maps</span ></span ></span > </span> </span> </span> </div> </li> </ul> </div> </li> </ul>
Show Quick Actions on Hover
The class show-quick-actions-on-hover on treeview will hide all quick-action-item’s except when treeview-link is hovered or focused.
- Liferay Drive
- Liferay Drive (ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)
- Details
- Categorization
- Documents and Media
- Site Template
- Repositories
- Sitemap
- Robots
- Documents and Media
- Default User Associations
- Staging
- Analytics
- Maps
Snippet
<ul className="treeview treeview-nested treeview-light show-quick-actions-on-hover" role="tree" > <li className="treeview-item" role="none"> <div aria-controls="treeviewCollapseCheckboxHoverBtn01" aria-expanded="true" className="treeview-link show" data-target="#treeviewCollapseCheckboxHoverBtn01" data-toggle="collapse" role="treeitem" tabIndex="0" > <div className="c-inner" tabIndex="-2"> <div className="autofit-row"> <div className="autofit-col"> <button aria-controls="treeviewCollapseCheckboxHoverBtn01" aria-expanded="true" className="btn btn-monospaced component-expander show" data-target="#treeviewCollapseCheckboxHoverBtn01" data-toggle="collapse" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-angle-down" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-down" /> </svg> <svg className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-right" /> </svg> </span> </button> </div> <div className="autofit-col"> <div className="custom-control custom-checkbox"> <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label"></span> </label> </div> </div> <div className="autofit-col"> <div className="component-icon"> <svg className="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#folder" /> </svg> </div> </div> <div className="autofit-col autofit-col-expand"> <span className="component-text"> <span className="autofit-row"> <span className="autofit-col autofit-col-shrink" > <span className="text-truncate-inline" title="Liferay Drive" ><span className="text-truncate" >Liferay Drive</span ></span > </span> <span className="autofit-col"> <button className="btn btn-secondary quick-action-item ml-4" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" >Check child nodes</span > </button> </span> </span> </span> </div> </div> </div> </div> <div className="collapse show" id="treeviewCollapseCheckboxHoverBtn01"> <ul className="treeview-group" role="group"> <li className="treeview-item" role="none"> <div aria-controls="treeviewCollapseCheckboxHoverBtn02" aria-expanded="false" className="collapsed treeview-link" data-target="#treeviewCollapseCheckboxHoverBtn02" data-toggle="collapse" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <div className="autofit-row"> <div className="autofit-col"> <button aria-controls="treeviewCollapseCheckboxHoverBtn02" aria-expanded="false" className="btn btn-monospaced component-expander" data-target="#treeviewCollapseCheckboxHoverBtn02" data-toggle="collapse" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-angle-down" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-down" /> </svg> <svg className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-right" /> </svg> </span> </button> </div> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col"> <div className="component-icon"> <svg className="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#folder" /> </svg> </div> </div> <div className="autofit-col autofit-col-expand"> <span className="component-text"> <span className="autofit-row"> <span className="autofit-col autofit-col-shrink" > <span className="text-truncate-inline" title="Liferay Drive (ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)" ><span className="text-truncate" >Liferay Drive (ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)</span ></span > </span> <span className="autofit-col"> <button className="btn btn-secondary quick-action-item ml-4" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" >Check child nodes</span > </button> </span> </span> </span> </div> </div> </div> </div> <div className="collapse" id="treeviewCollapseCheckboxHoverBtn02" > <ul className="treeview-group" role="group"> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '48px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-48px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" ><span className="text-truncate" title="Details" >Details</span ></span ></span > </div> </div> </div> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '48px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-48px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" title="Categorization" ><span className="text-truncate" >Categorization</span ></span ></span > </div> </div> </div> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '48px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-48px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" title="Documents and Media" ><span className="text-truncate" >Documents and Media</span ></span ></span > </div> </div> </div> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '48px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-48px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" title="Site Template" ><span className="text-truncate" >Site Template</span ></span ></span > </div> </div> </div> </div> </li> </ul> </div> </li> </ul> </div> </li> <li className="treeview-item" role="none"> <div aria-controls="treeviewCollapseCheckboxHoverBtn03" aria-expanded="false" className="collapsed treeview-link" data-target="#treeviewCollapseCheckboxHoverBtn03" data-toggle="collapse" role="treeitem" tabIndex="-1" > <div className="c-inner" tabIndex="-2"> <div className="autofit-row"> <div className="autofit-col"> <button aria-controls="treeviewCollapseCheckboxHoverBtn03" aria-expanded="false" className="btn btn-monospaced component-expander" data-target="#treeviewCollapseCheckboxHoverBtn03" data-toggle="collapse" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-angle-down" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-down" /> </svg> <svg className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-right" /> </svg> </span> </button> </div> <div className="autofit-col"> <div className="custom-control custom-checkbox"> <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label"></span> </label> </div> </div> <div className="autofit-col"> <div className="component-icon"> <svg className="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#folder" /> </svg> </div> </div> <div className="autofit-col autofit-col-expand"> <span className="component-text"> <span className="autofit-row"> <span className="autofit-col autofit-col-shrink" > <span className="text-truncate-inline" data-toggle="tooltip" title="Repositories" ><span className="text-truncate" >Repositories</span ></span > </span> <span className="autofit-col"> <button className="btn btn-secondary quick-action-item ml-4" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" >Check child nodes</span > </button> </span> </span> </span> </div> </div> </div> </div> <div className="collapse" id="treeviewCollapseCheckboxHoverBtn03"> <ul className="treeview-group" role="group"> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand"> <span className="component-text" ><span className="text-truncate-inline" data-toggle="tooltip" title="Sitemap" ><span className="text-truncate" >Sitemap</span ></span ></span > </div> </div> </div> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand"> <span className="component-text" ><span className="text-truncate-inline" data-toggle="tooltip" title="Robots" ><span className="text-truncate" >Robots</span ></span ></span > </div> </div> </div> </div> </li> </ul> </div> </li> <li className="treeview-item" role="none"> <div aria-controls="treeviewCollapseCheckboxHoverBtn04" aria-expanded="false" className="collapsed treeview-link" data-target="#treeviewCollapseCheckboxHoverBtn04" data-toggle="collapse" role="treeitem" tabIndex="-1" > <div className="c-inner" tabIndex="-2"> <div className="autofit-row"> <div className="autofit-col"> <button aria-controls="treeviewCollapseCheckboxHoverBtn04" aria-expanded="false" className="btn btn-monospaced component-expander" data-target="#treeviewCollapseCheckboxHoverBtn04" data-toggle="collapse" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-angle-down" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-down" /> </svg> <svg className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-right" /> </svg> </span> </button> </div> <div className="autofit-col"> <div className="custom-control custom-checkbox"> <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label"></span> </label> </div> </div> <div className="autofit-col"> <div className="component-icon"> <svg className="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#folder" /> </svg> </div> </div> <div className="autofit-col autofit-col-expand"> <span className="component-text"> <span className="autofit-row"> <span className="autofit-col autofit-col-shrink" > <span className="text-truncate-inline" data-toggle="tooltip" title="Documents and Media" ><span className="text-truncate" >Documents and Media</span ></span > </span> <span className="autofit-col"> <button className="btn btn-secondary quick-action-item ml-4" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" >Check child nodes</span > </button> </span> </span> </span> </div> </div> </div> </div> <div className="collapse" id="treeviewCollapseCheckboxHoverBtn04"> <ul className="treeview-group" role="group"> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand"> <span className="component-text" ><span className="text-truncate-inline" data-toggle="tooltip" title="Default User Associations" ><span className="text-truncate" >Default User Associations</span ></span ></span > </div> </div> </div> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand"> <span className="component-text" ><span className="text-truncate-inline" data-toggle="tooltip" title="Staging" ><span className="text-truncate" >Staging</span ></span ></span > </div> </div> </div> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand"> <span className="component-text" ><span className="text-truncate-inline" data-toggle="tooltip" title="Analytics" ><span className="text-truncate" >Analytics</span ></span ></span > </div> </div> </div> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand"> <span className="component-text" ><span className="text-truncate-inline" data-toggle="tooltip" title="Maps" ><span className="text-truncate" >Maps</span ></span ></span > </div> </div> </div> </div> </li> </ul> </div> </li> </ul>
Treeview Light
A treeview variation for light colored backgrounds.
- Liferay Drive
- Liferay Drive (ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)
- Details
- Categorization
- Documents and Media
- Site Template
- Repositories
- Sitemap
- Robots
- Documents and Media
- Default User Associations
- Staging
- Analytics
- Maps
Snippet
<ul className="treeview treeview-nested treeview-light show-quick-actions-on-hover" role="tree" > <li className="treeview-item" role="none"> <div aria-controls="treeviewLightCollapseCheckbox01" aria-expanded="true" className="treeview-link" data-target="#treeviewLightCollapseCheckbox01" data-toggle="collapse" role="treeitem" tabIndex="0" > <div className="c-inner" tabIndex="-2"> <div className="autofit-row"> <div className="autofit-col"> <button aria-controls="treeviewLightCollapseCheckbox01" aria-expanded="true" className="btn btn-monospaced component-expander" data-target="#treeviewLightCollapseCheckbox01" data-toggle="collapse" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-angle-down" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-down" /> </svg> <svg className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-right" /> </svg> </span> </button> </div> <div className="autofit-col"> <div className="custom-control custom-checkbox"> <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label"></span> </label> </div> </div> <div className="autofit-col"> <div className="component-icon"> <svg className="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#folder" /> </svg> </div> </div> <div className="autofit-col autofit-col-expand"> <span className="component-text"> <span className="text-truncate-inline" title="Liferay Drive" ><span className="text-truncate" >Liferay Drive</span ></span > </span> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> <div className="collapse show" id="treeviewLightCollapseCheckbox01"> <ul className="treeview-group" role="group"> <li className="treeview-item" role="none"> <div aria-controls="treeviewLightCollapseCheckbox02" aria-expanded="false" className="collapsed treeview-link" data-target="#treeviewLightCollapseCheckbox02" data-toggle="collapse" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <div className="autofit-row"> <div className="autofit-col"> <button aria-controls="treeviewLightCollapseCheckbox02" aria-expanded="false" className="btn btn-monospaced component-expander" data-target="#treeviewLightCollapseCheckbox02" data-toggle="collapse" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-angle-down" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-down" /> </svg> <svg className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-right" /> </svg> </span> </button> </div> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col"> <div className="component-icon"> <svg className="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#folder" /> </svg> </div> </div> <div className="autofit-col autofit-col-expand"> <span className="component-text"> <span className="text-truncate-inline" title="Liferay Drive (ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)" ><span className="text-truncate" >Liferay Drive (ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)</span ></span > </span> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> <div className="collapse" id="treeviewLightCollapseCheckbox02" > <ul className="treeview-group" role="group"> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '48px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-48px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" ><span className="text-truncate" title="Details" >Details</span ></span ></span > </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '48px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-48px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" title="Categorization" ><span className="text-truncate" >Categorization</span ></span ></span > </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '48px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-48px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" title="Documents and Media" ><span className="text-truncate" >Documents and Media</span ></span ></span > </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '48px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-48px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" title="Site Template" ><span className="text-truncate" >Site Template</span ></span ></span > </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> </li> </ul> </div> </li> </ul> </div> </li> <li className="treeview-item" role="none"> <div aria-controls="treeviewLightCollapseCheckbox03" aria-expanded="false" className="collapsed treeview-link" data-target="#treeviewLightCollapseCheckbox03" data-toggle="collapse" role="treeitem" tabIndex="-1" > <div className="c-inner" tabIndex="-2"> <div className="autofit-row"> <div className="autofit-col"> <button aria-controls="treeviewLightCollapseCheckbox03" aria-expanded="false" className="btn btn-monospaced component-expander" data-target="#treeviewLightCollapseCheckbox03" data-toggle="collapse" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-angle-down" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-down" /> </svg> <svg className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-right" /> </svg> </span> </button> </div> <div className="autofit-col"> <div className="custom-control custom-checkbox"> <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label"></span> </label> </div> </div> <div className="autofit-col"> <div className="component-icon"> <svg className="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#folder" /> </svg> </div> </div> <div className="autofit-col autofit-col-expand"> <span className="component-text"> <span className="text-truncate-inline" title="Repositories" ><span className="text-truncate" >Repositories</span ></span > </span> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> <div className="collapse" id="treeviewLightCollapseCheckbox03"> <ul className="treeview-group" role="group"> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand"> <span className="component-text" ><span className="text-truncate-inline" title="Sitemap" ><span className="text-truncate" >Sitemap</span ></span ></span > </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand"> <span className="component-text" ><span className="text-truncate-inline" title="Robots" ><span className="text-truncate" >Robots</span ></span ></span > </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> </li> </ul> </div> </li> <li className="treeview-item" role="none"> <div aria-controls="treeviewLightCollapseCheckbox04" aria-expanded="false" className="collapsed treeview-link" data-target="#treeviewLightCollapseCheckbox04" data-toggle="collapse" role="treeitem" tabIndex="-1" > <div className="c-inner" tabIndex="-2"> <div className="autofit-row"> <div className="autofit-col"> <button aria-controls="treeviewLightCollapseCheckbox04" aria-expanded="false" className="btn btn-monospaced component-expander" data-target="#treeviewLightCollapseCheckbox04" data-toggle="collapse" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-angle-down" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-down" /> </svg> <svg className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-right" /> </svg> </span> </button> </div> <div className="autofit-col"> <div className="custom-control custom-checkbox"> <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label"></span> </label> </div> </div> <div className="autofit-col"> <div className="component-icon"> <svg className="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#folder" /> </svg> </div> </div> <div className="autofit-col autofit-col-expand"> <span className="component-text"> <span className="text-truncate-inline" title="Documents and Media" ><span className="text-truncate" >Documents and Media</span ></span > </span> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> <div className="collapse" id="treeviewLightCollapseCheckbox04"> <ul className="treeview-group" role="group"> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand"> <span className="component-text" ><span className="text-truncate-inline" title="Default User Associations" ><span className="text-truncate" >Default User Associations</span ></span ></span > </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand"> <span className="component-text" ><span className="text-truncate-inline" title="Staging" ><span className="text-truncate" >Staging</span ></span ></span > </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand"> <span className="component-text" ><span className="text-truncate-inline" title="Analytics" ><span className="text-truncate" >Analytics</span ></span ></span > </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand"> <span className="component-text" ><span className="text-truncate-inline" title="Maps" ><span className="text-truncate" >Maps</span ></span ></span > </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> </li> </ul> </div> </li> </ul>
Treeview Dark
A treeview variation for dark colored backgrounds.
- Liferay Drive
- Liferay Drive (ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)
- Details
- Categorization
- Documents and Media
- Site Template
- Repositories
- Sitemap
- Robots
- Documents and Media
- Default User Associations
- Staging
- Analytics
- Maps
Snippet
<div className="bg-dark"> <ul className="treeview treeview-dark treeview-nested show-quick-actions-on-hover" role="tree" > <li className="treeview-item" role="none"> <div aria-controls="treeviewDarkCollapseCheckbox01" aria-expanded="true" className="treeview-link" data-target="#treeviewDarkCollapseCheckbox01" data-toggle="collapse" role="treeitem" tabIndex="0" > <div className="c-inner" tabIndex="-2"> <div className="autofit-row"> <div className="autofit-col"> <button aria-controls="treeviewDarkCollapseCheckbox01" aria-expanded="true" className="btn btn-monospaced component-expander" data-target="#treeviewDarkCollapseCheckbox01" data-toggle="collapse" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-angle-down" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-down" /> </svg> <svg className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-right" /> </svg> </span> </button> </div> <div className="autofit-col"> <div className="custom-control custom-checkbox"> <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col"> <div className="component-icon"> <svg className="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#folder" /> </svg> </div> </div> <div className="autofit-col autofit-col-expand"> <span className="component-text"> <span className="text-truncate-inline" title="Liferay Drive" ><span className="text-truncate" >Liferay Drive</span ></span > </span> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> <div className="collapse show" id="treeviewDarkCollapseCheckbox01"> <ul className="treeview-group" role="group"> <li className="treeview-item" role="none"> <div aria-controls="treeviewDarkCollapseCheckbox02" aria-expanded="false" className="collapsed treeview-link" data-target="#treeviewDarkCollapseCheckbox02" data-toggle="collapse" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <div className="autofit-row"> <div className="autofit-col"> <button aria-controls="treeviewDarkCollapseCheckbox02" aria-expanded="false" className="btn btn-monospaced component-expander" data-target="#treeviewDarkCollapseCheckbox02" data-toggle="collapse" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-angle-down" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-down" /> </svg> <svg className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-right" /> </svg> </span> </button> </div> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col"> <div className="component-icon"> <svg className="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#folder" /> </svg> </div> </div> <div className="autofit-col autofit-col-expand" > <span className="component-text"> <span className="text-truncate-inline" title="Liferay Drive (ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)" ><span className="text-truncate" >Liferay Drive (ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)</span ></span > </span> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> <div className="collapse" id="treeviewDarkCollapseCheckbox02" > <ul className="treeview-group" role="group"> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '48px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-48px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" ><span className="text-truncate" title="Details" >Details</span ></span ></span > </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '48px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-48px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" title="Categorization" ><span className="text-truncate" >Categorization</span ></span ></span > </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '48px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-48px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" title="Documents and Media" ><span className="text-truncate" >Documents and Media</span ></span ></span > </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '48px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-48px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" title="Site Template" ><span className="text-truncate" >Site Template</span ></span ></span > </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> </li> </ul> </div> </li> </ul> </div> </li> <li className="treeview-item" role="none"> <div aria-controls="treeviewDarkCollapseCheckbox03" aria-expanded="false" className="collapsed treeview-link" data-target="#treeviewDarkCollapseCheckbox03" data-toggle="collapse" role="treeitem" tabIndex="-1" > <div className="c-inner" tabIndex="-2"> <div className="autofit-row"> <div className="autofit-col"> <button aria-controls="treeviewDarkCollapseCheckbox03" aria-expanded="false" className="btn btn-monospaced component-expander" data-target="#treeviewDarkCollapseCheckbox03" data-toggle="collapse" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-angle-down" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-down" /> </svg> <svg className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-right" /> </svg> </span> </button> </div> <div className="autofit-col"> <div className="custom-control custom-checkbox"> <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col"> <div className="component-icon"> <svg className="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#folder" /> </svg> </div> </div> <div className="autofit-col autofit-col-expand"> <span className="component-text"> <span className="text-truncate-inline" title="Repositories" ><span className="text-truncate" >Repositories</span ></span > </span> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> <div className="collapse" id="treeviewDarkCollapseCheckbox03"> <ul className="treeview-group" role="group"> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" title="Sitemap" ><span className="text-truncate" >Sitemap</span ></span ></span > </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" title="Robots" ><span className="text-truncate" >Robots</span ></span ></span > </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> </li> </ul> </div> </li> <li className="treeview-item" role="none"> <div aria-controls="treeviewDarkCollapseCheckbox04" aria-expanded="false" className="collapsed treeview-link" data-target="#treeviewDarkCollapseCheckbox04" data-toggle="collapse" role="treeitem" tabIndex="-1" > <div className="c-inner" tabIndex="-2"> <div className="autofit-row"> <div className="autofit-col"> <button aria-controls="treeviewDarkCollapseCheckbox04" aria-expanded="false" className="btn btn-monospaced component-expander" data-target="#treeviewDarkCollapseCheckbox04" data-toggle="collapse" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-angle-down" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-down" /> </svg> <svg className="lexicon-icon lexicon-icon-angle-right component-expanded-d-none" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#angle-right" /> </svg> </span> </button> </div> <div className="autofit-col"> <div className="custom-control custom-checkbox"> <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col"> <div className="component-icon"> <svg className="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#folder" /> </svg> </div> </div> <div className="autofit-col autofit-col-expand"> <span className="component-text"> <span className="text-truncate-inline" title="Documents and Media" ><span className="text-truncate" >Documents and Media</span ></span > </span> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2"> <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> <div className="collapse" id="treeviewDarkCollapseCheckbox04"> <ul className="treeview-group" role="group"> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" title="Default User Associations" ><span className="text-truncate" >Default User Associations</span ></span ></span > </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" title="Staging" ><span className="text-truncate" >Staging</span ></span ></span > </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" title="Analytics" ><span className="text-truncate" >Analytics</span ></span ></span > </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> </li> <li className="treeview-item" role="none"> <div className="treeview-link" role="treeitem" tabIndex="-1" style={{paddingLeft: '24px'}} > <div className="c-inner" tabIndex="-2" style={{marginLeft: '-24px'}} > <div className="autofit-row"> <div className="autofit-col"> <div className="custom-control custom-checkbox" > <label> <input className="custom-control-input" tabIndex="-1" type="checkbox" /> <span className="custom-control-label" ></span> </label> </div> </div> <div className="autofit-col autofit-col-expand" > <span className="component-text" ><span className="text-truncate-inline" title="Maps" ><span className="text-truncate" >Maps</span ></span ></span > </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-times-circle-full" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#times-circle-full" /> </svg> </span> </button> </div> <div className="autofit-col"> <button className="btn btn-monospaced component-action quick-action-item" tabIndex="-1" type="button" > <span className="c-inner" tabIndex="-2" > <svg className="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation" > <use xlinkHref="/icons.svg#ellipsis-v" /> </svg> </span> </button> </div> </div> </div> </div> </li> </ul> </div> </li> </ul> </div>
Table of Contents