Skip to content

Commit

Permalink
Fixes liferay#1254 - Adding example of the Management Toolbar with fi…
Browse files Browse the repository at this point in the history 
…lter labels
  • Loading branch information
@matuzalemsteles
matuzalemsteles committed Oct 24, 2018
1 parent e275757 commit 02f51e3
Showing 1 changed file with 129 additions and 1 deletion.
130 changes: 129 additions & 1 deletion clayui.com/content/docs/components/toolbars/management-toolbar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -558,7 +558,7 @@ Management toolbar is an extension of Toolbar. It is a combination of different
</nav>
```

### Management Toolbar Seach Results
### Management Toolbar Search Results

<div>
<nav class="tbar subnav-tbar subnav-tbar-primary">
Expand Down Expand Up @@ -598,6 +598,134 @@ Management toolbar is an extension of Toolbar. It is a combination of different
</nav>
```

### Management Toolbar search results with filter labels

<nav class="tbar tbar-inline-md-down subnav-tbar subnav-tbar-primary">
<div class="container-fluid container-fluid-max-xl">
<ul class="tbar-nav tbar-nav-wrap">
<li class="tbar-item">
<div class="tbar-section">
<span class="component-text text-truncate-inline">
<span class="text-truncate">6 results for "<strong>red</strong>"</span>
</span>
</div>
</li>
<li class="tbar-item">
<div class="tbar-section">
<span class="label component-label tbar-label">
<span class="label-item label-item-expand">
<div class="label-section">Filter 1</div>
</span>
</span>
</div>
</li>
<li class="tbar-item">
<div class="tbar-section">
<span class="label label-dismissible component-label tbar-label">
<span class="label-item label-item-expand">
<div class="label-section">Filter 2</div>
</span>
<span class="label-item label-item-after">
<button class="btn close" aria-label="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
<title>times</title>
<use href="/images/icons/icons.svg#times"></use>
</svg>
</button>
</span>
</span>
</div>
</li>
<li class="tbar-item tbar-item-expand">
<div class="tbar-section">
<span class="label label-dismissible component-label tbar-label">
<span class="label-item label-item-expand">
<div class="label-section">Category: <strong>Label 3</strong></div>
</span>
<span class="label-item label-item-after">
<button class="btn close" aria-label="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
<title>times</title>
<use href="/images/icons/icons.svg#times"></use>
</svg>
</button>
</span>
</span>
</div>
</li>
<li class="tbar-item">
<div class="tbar-section">
<a class=" component-link tbar-link" href="#clear">clear</a>
</div>
</li>
</ul>
</div>
</nav>

```html
<nav class="tbar tbar-inline-md-down subnav-tbar subnav-tbar-primary">
<div class="container-fluid container-fluid-max-xl">
<ul class="tbar-nav tbar-nav-wrap">
<li class="tbar-item">
<div class="tbar-section">
<span class="component-text text-truncate-inline">
<span class="text-truncate">6 results for "<strong>red</strong>"</span>
</span>
</div>
</li>
<li class="tbar-item">
<div class="tbar-section">
<span class="label component-label tbar-label">
<span class="label-item label-item-expand">
<div class="label-section">Filter 1</div>
</span>
</span>
</div>
</li>
<li class="tbar-item">
<div class="tbar-section">
<span class="label label-dismissible component-label tbar-label">
<span class="label-item label-item-expand">
<div class="label-section">Filter 2</div>
</span>
<span class="label-item label-item-after">
<button class="btn close" aria-label="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
<title>times</title>
<use href="/images/icons/icons.svg#times"></use>
</svg>
</button>
</span>
</span>
</div>
</li>
<li class="tbar-item tbar-item-expand">
<div class="tbar-section">
<span class="label label-dismissible component-label tbar-label">
<span class="label-item label-item-expand">
<div class="label-section">Category: <strong>Label 3</strong></div>
</span>
<span class="label-item label-item-after">
<button class="btn close" aria-label="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
<title>times</title>
<use href="/images/icons/icons.svg#times"></use>
</svg>
</button>
</span>
</span>
</div>
</li>
<li class="tbar-item">
<div class="tbar-section">
<a class=" component-link tbar-link" href="#clear">clear</a>
</div>
</li>
</ul>
</div>
</nav>
```

### API

<div>
Expand Down

0 comments on commit 02f51e3

Please sign in to comment.