Dropdown
| Last update: | () |
| Message | doc(search): new tags and hidden components --skip-ci |
| Committer: | Tamás Bíró |
| Version history | |
Default
<div class="e-row">
<div class="e-col-6">
</div>
<div class="e-col-6">
<e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
<div class="e-dropdown__content">
<a href="#0" class="e-dropdown__item">
<e-icon icon="pencil" type="table"></e-icon>
Preview
</a>
<a href="#0" class="e-dropdown__item">
<e-icon icon="eye" type="table"></e-icon>
Edit
</a>
<a href="#0" class="e-dropdown__item">
<e-icon icon="pencil" type="table"></e-icon>
Copy
</a>
<a href="#0" class="e-dropdown__item">
<e-icon icon="eye" type="table"></e-icon>
Delete
</a>
</div>
</e-dropdown>
</div>
</div>
<div class="e-row">
<div class="e-col-6"> </div>
<div class="e-col-6">
<e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
<div class="e-dropdown__content"><a href="#0" class="e-dropdown__item">
<e-icon icon="pencil" type="table"></e-icon> Preview</a><a href="#0" class="e-dropdown__item">
<e-icon icon="eye" type="table"></e-icon> Edit</a><a href="#0" class="e-dropdown__item">
<e-icon icon="pencil" type="table"></e-icon> Copy</a><a href="#0" class="e-dropdown__item">
<e-icon icon="eye" type="table"></e-icon> Delete </a></div>
</e-dropdown>
</div>
</div>Variations
Auto align
<div class="e-row">
<div class="e-col-6">
</div>
<div class="e-col-6">
<e-dropdown data-markup-content="Dropdown" data-dropdown-align="auto" data-markup-class="e-btn e-btn-dropdown">
<div class="e-dropdown__content">
<a href="#0" class="e-dropdown__item">
<e-icon icon="pencil" type="table"></e-icon>
Preview
</a>
<a href="#0" class="e-dropdown__item">
<e-icon icon="eye" type="table"></e-icon>
Edit
</a>
<a href="#0" class="e-dropdown__item">
<e-icon icon="pencil" type="table"></e-icon>
Copy
</a>
<a href="#0" class="e-dropdown__item">
<e-icon icon="eye" type="table"></e-icon>
Delete
</a>
</div>
</e-dropdown>
</div>
</div>
<div class="e-row">
<div class="e-col-6"> </div>
<div class="e-col-6">
<e-dropdown data-markup-content="Dropdown" data-dropdown-align="auto" data-markup-class="e-btn e-btn-dropdown">
<div class="e-dropdown__content"><a href="#0" class="e-dropdown__item">
<e-icon icon="pencil" type="table"></e-icon> Preview</a><a href="#0" class="e-dropdown__item">
<e-icon icon="eye" type="table"></e-icon> Edit</a><a href="#0" class="e-dropdown__item">
<e-icon icon="pencil" type="table"></e-icon> Copy</a><a href="#0" class="e-dropdown__item">
<e-icon icon="eye" type="table"></e-icon> Delete </a></div>
</e-dropdown>
</div>
</div>Align right
<div class="e-row">
<div class="e-col-6">
</div>
<div class="e-col-6">
<e-dropdown data-markup-content="Dropdown" data-dropdown-align="right" data-markup-class="e-btn e-btn-dropdown">
<div class="e-dropdown__content">
<a href="#0" class="e-dropdown__item">
<e-icon icon="pencil" type="table"></e-icon>
Preview
</a>
<a href="#0" class="e-dropdown__item">
<e-icon icon="eye" type="table"></e-icon>
Edit
</a>
<a href="#0" class="e-dropdown__item">
<e-icon icon="pencil" type="table"></e-icon>
Copy
</a>
<a href="#0" class="e-dropdown__item">
<e-icon icon="eye" type="table"></e-icon>
Delete
</a>
</div>
</e-dropdown>
</div>
</div>
<div class="e-row">
<div class="e-col-6"> </div>
<div class="e-col-6">
<e-dropdown data-markup-content="Dropdown" data-dropdown-align="right" data-markup-class="e-btn e-btn-dropdown">
<div class="e-dropdown__content"><a href="#0" class="e-dropdown__item">
<e-icon icon="pencil" type="table"></e-icon> Preview</a><a href="#0" class="e-dropdown__item">
<e-icon icon="eye" type="table"></e-icon> Edit</a><a href="#0" class="e-dropdown__item">
<e-icon icon="pencil" type="table"></e-icon> Copy</a><a href="#0" class="e-dropdown__item">
<e-icon icon="eye" type="table"></e-icon> Delete </a></div>
</e-dropdown>
</div>
</div>With right icon
<div class="e-row">
<div class="e-col-6">
</div>
<div class="e-col-6">
<e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
<div class="e-dropdown__content">
<div href="#" class="e-dropdown__item">
<a href="#">
<e-icon icon="file-text" type="table"></e-icon>
Version A
</a>
</div>
<div href="#" class="e-dropdown__item e-dropdown__item-righticon">
<div class="float-right">
<e-icon icon="trash-o" type="table"></e-icon>
</div>
<a href="#">
<e-icon icon="file-text" type="table"></e-icon>
Version B
</a>
</div>
<div href="#" class="e-dropdown__item e-dropdown__item-righticon">
<div class="float-right">
<e-icon icon="trash-o" type="table"></e-icon>
</div>
<a href="#">
<e-icon icon="file-text" type="table"></e-icon>
Version Long name Lorem ipsum dolor sit
</a>
</div>
<hr style="margin-bottom: 0;" class="e-separator">
<a href="#" class="e-dropdown__item">
<e-icon icon="eye" type="table"></e-icon>
Create new based on Version A
</a>
</div>
</e-dropdown>
</div>
</div>
<div class="e-row">
<div class="e-col-6"> </div>
<div class="e-col-6">
<e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
<div class="e-dropdown__content">
<div href="#" class="e-dropdown__item"><a href="#">
<e-icon icon="file-text" type="table"></e-icon> Version A</a></div>
<div href="#" class="e-dropdown__item e-dropdown__item-righticon">
<div class="float-right">
<e-icon icon="trash-o" type="table"></e-icon>
</div><a href="#">
<e-icon icon="file-text" type="table"></e-icon> Version B</a>
</div>
<div href="#" class="e-dropdown__item e-dropdown__item-righticon">
<div class="float-right">
<e-icon icon="trash-o" type="table"></e-icon>
</div><a href="#">
<e-icon icon="file-text" type="table"></e-icon> Version Long name Lorem ipsum dolor sit</a>
</div>
<hr style="margin-bottom: 0;" class="e-separator"><a href="#" class="e-dropdown__item">
<e-icon icon="eye" type="table"></e-icon> Create new based on Version A</a>
</div>
</e-dropdown>
</div>
</div>Long item name
<div class="e-row">
<div class="e-col-6">
</div>
<div class="e-col-6">
<e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
<div class="e-dropdown__content">
<a href="#0" class="e-dropdown__item">
<e-icon icon="pencil" type="table"></e-icon>
Preview
</a>
<a href="#0" class="e-dropdown__item e-dropdown__item-fixwidth">
<e-icon icon="eye" type="table"></e-icon>
Dolor, non officia, duis ipsum amet dolore quis, ullamco aliqua. Enim et in, nostrud nulla, officia anim duis deserunt culpa ipsum. Laboris commodo in, dolor ut adipiscing ex consectetur non ut anim mollit. Cupidatat fugiat mollit ex in lorem ut. Dolor in mollit id ullamco eiusmod, eu est.
</a>
</div>
</e-dropdown>
</div>
</div>
<div class="e-row">
<div class="e-col-6"> </div>
<div class="e-col-6">
<e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
<div class="e-dropdown__content"><a href="#0" class="e-dropdown__item">
<e-icon icon="pencil" type="table"></e-icon> Preview</a><a href="#0" class="e-dropdown__item e-dropdown__item-fixwidth">
<e-icon icon="eye" type="table"></e-icon>Sint sit mollit ut reprehenderit, irure aute cillum ex, est ut. Pariatur, quis dolor consectetur magna ea anim, anim fugiat tempor magna. Laborum ea ut non culpa exercitation, est nisi enim. Magna, ut est, duis id et velit, est dolore aliqua anim incididunt, voluptate. Ut anim, cillum enim ipsum eu in consequat dolor laboris officia, sit in. </a></div>
</e-dropdown>
</div>
</div>Only icon (use in the table)
<div class="e-row">
<div class="e-col-6">
</div>
<div class="e-col-6">
<e-dropdown data-markup-content="<e-icon icon='dots' type='table'></e-icon>" data-markup-class="e-dropdown__button" data-markup-class-active="e-dropdown__button-open">
<div class="e-dropdown__content">
<a href="#0" class="e-dropdown__item">
<e-icon icon="pencil" type="table"></e-icon>
Preview
</a>
<a href="#0" class="e-dropdown__item">
<e-icon icon="eye" type="table"></e-icon>
Edit
</a>
<a href="#0" class="e-dropdown__item">
<e-icon icon="pencil" type="table"></e-icon>
Copy
</a>
<a href="#0" class="e-dropdown__item">
<e-icon icon="eye" type="table"></e-icon>
Delete
</a>
</div>
</e-dropdown>
</div>
</div>
<div class="e-row">
<div class="e-col-6"> </div>
<div class="e-col-6">
<e-dropdown data-markup-content="<e-icon icon='dots' type='table'></e-icon>" data-markup-class="e-dropdown__button" data-markup-class-active="e-dropdown__button-open">
<div class="e-dropdown__content"><a href="#0" class="e-dropdown__item">
<e-icon icon="pencil" type="table"></e-icon> Preview</a><a href="#0" class="e-dropdown__item">
<e-icon icon="eye" type="table"></e-icon> Edit</a><a href="#0" class="e-dropdown__item">
<e-icon icon="pencil" type="table"></e-icon> Copy</a><a href="#0" class="e-dropdown__item">
<e-icon icon="eye" type="table"></e-icon> Delete </a></div>
</e-dropdown>
</div>
</div>Rich content
<div class="e-row">
<div class="e-col-6">
</div>
<div class="e-col-6">
<e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
<div class="e-dropdown__content">
<div class="e-dropdown__container">
Magna deserunt, ullamco, deserunt nostrud non nulla magna velit, voluptate id. Lorem mollit nisi, voluptate cupidatat sint dolore lorem adipiscing.
</div>
</div>
</e-dropdown>
</div>
</div>
<div class="e-row">
<div class="e-col-6"> </div>
<div class="e-col-6">
<e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
<div class="e-dropdown__content">
<div class="e-dropdown__container">Irure cupidatat occaecat, ut commodo pariatur. Ea reprehenderit nisi, anim fugiat ad est laboris, est est anim.
</div>
</div>
</e-dropdown>
</div>
</div>Nisi do laboris duis. Veniam, elit minim, esse aliquip est lorem do fugiat pariatur ut laboris culpa.
Auto close
<div class="e-row">
<div class="e-col-6">
</div>
<div class="e-col-6">
<e-dropdown data-markup-content="Dropdown" data-autoclose data-markup-class="e-btn e-btn-dropdown">
<div class="e-dropdown__content">
<a href="#0" class="e-dropdown__item">
<e-icon icon="pencil" type="table"></e-icon>
Preview
</a>
<a href="#0" class="e-dropdown__item">
<e-icon icon="eye" type="table"></e-icon>
Edit
</a>
<a href="#0" class="e-dropdown__item">
<e-icon icon="pencil" type="table"></e-icon>
Copy
</a>
<a href="#0" class="e-dropdown__item">
<e-icon icon="eye" type="table"></e-icon>
Delete
</a>
</div>
</e-dropdown>
</div>
</div>
<div class="e-row">
<div class="e-col-6"> </div>
<div class="e-col-6">
<e-dropdown data-markup-content="Dropdown" data-autoclose="" data-markup-class="e-btn e-btn-dropdown">
<div class="e-dropdown__content"><a href="#0" class="e-dropdown__item">
<e-icon icon="pencil" type="table"></e-icon> Preview</a><a href="#0" class="e-dropdown__item">
<e-icon icon="eye" type="table"></e-icon> Edit</a><a href="#0" class="e-dropdown__item">
<e-icon icon="pencil" type="table"></e-icon> Copy</a><a href="#0" class="e-dropdown__item">
<e-icon icon="eye" type="table"></e-icon> Delete </a></div>
</e-dropdown>
</div>
</div>Sticky content
<div class="e-row">
<div class="e-col-6">
</div>
<div class="e-col-6">
<e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown e-btn-no_minwidth" data-dropdown-sticky="true">
<div class="e-dropdown__content">
<a href="#0" class="e-dropdown__item">
<e-icon icon="pencil" type="table"></e-icon>
Preview
</a>
<a href="#0" class="e-dropdown__item">
<e-icon icon="eye" type="table"></e-icon>
Edit
</a>
<a href="#0" class="e-dropdown__item">
<e-icon icon="pencil" type="table"></e-icon>
Copy
</a>
<a href="#0" class="e-dropdown__item">
<e-icon icon="eye" type="table"></e-icon>
Delete
</a>
</div>
</e-dropdown>
</div>
</div>
<div class="e-row">
<div class="e-col-6"> </div>
<div class="e-col-6">
<e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown e-btn-no_minwidth" data-dropdown-sticky="true">
<div class="e-dropdown__content"><a href="#0" class="e-dropdown__item">
<e-icon icon="pencil" type="table"></e-icon> Preview</a><a href="#0" class="e-dropdown__item">
<e-icon icon="eye" type="table"></e-icon> Edit</a><a href="#0" class="e-dropdown__item">
<e-icon icon="pencil" type="table"></e-icon> Copy</a><a href="#0" class="e-dropdown__item">
<e-icon icon="eye" type="table"></e-icon> Delete </a></div>
</e-dropdown>
</div>
</div>With checkbox
<div class="e-row">
<div class="e-col-6">
</div>
<div class="e-col-6">
<e-dropdown data-markup-class="e-btn e-btn-dropdown e-btn-no_minwidth" data-dropdown-sticky="true">
<e-dropdown-handler>
<input id="chb_dropdown" type="checkbox" class="e-checkbox e-checkbox-onlycheckbox">
<label for="chb_dropdown"></label>
</e-dropdown-handler>
<div class="e-dropdown__content">
<a class="e-dropdown__item">
Select all
</a>
<a class="e-dropdown__item">
Select none
</a>
<a class="e-dropdown__item">
Select tracked
</a>
<a class="e-dropdown__item">
Select untracked
</a>
</div>
</e-dropdown>
</div>
</div>
<div class="e-row">
<div class="e-col-6"> </div>
<div class="e-col-6">
<e-dropdown data-markup-class="e-btn e-btn-dropdown e-btn-no_minwidth" data-dropdown-sticky="true">
<e-dropdown-handler>
<input id="chb_dropdown" type="checkbox" class="e-checkbox e-checkbox-onlycheckbox">
<label for="chb_dropdown"></label>
</e-dropdown-handler>
<div class="e-dropdown__content"><a class="e-dropdown__item">Select all</a><a class="e-dropdown__item">Select none</a><a class="e-dropdown__item">Select tracked</a><a class="e-dropdown__item">Select untracked</a></div>
</e-dropdown>
</div>
</div>Colored content
<div class="e-row">
<div class="e-col-6">
</div>
<div class="e-col-6">
<e-dropdown data-markup-content="Dropdown" data-inner-class="e-dropdown__inner-danger" data-markup-class="e-btn e-btn-dropdown">
<div class="e-dropdown__content">
<div class="e-dropdown__container">
Culpa, esse ad sit voluptate exercitation. Dolore anim, eiusmod aliquip eiusmod.
</div>
</div>
</e-dropdown>
</div>
</div>
<div class="e-row">
<div class="e-col-6"> </div>
<div class="e-col-6">
<e-dropdown data-markup-content="Dropdown" data-inner-class="e-dropdown__inner-danger" data-markup-class="e-btn e-btn-dropdown">
<div class="e-dropdown__content">
<div class="e-dropdown__container">Laboris, tempor, consectetur, irure commodo cupidatat est dolore sed et. Aute irure, exercitation nostrud cillum, id, nostrud.
</div>
</div>
</e-dropdown>
</div>
</div>Id, excepteur, velit adipiscing, do velit culpa. Elit dolore dolor eiusmod occaecat cillum mollit nostrud adipiscing ea sit.
Colored content
<div class="e-row">
<div class="e-col-6">
</div>
<div class="e-col-6">
<e-dropdown data-markup-content="Dropdown" data-inner-class="e-dropdown__inner-success" data-markup-class="e-btn e-btn-dropdown">
<div class="e-dropdown__content">
<div class="e-dropdown__container">
Voluptate consequat dolor laboris aliquip minim occaecat reprehenderit consectetur? Et et aliqua qui, et in.
</div>
</div>
</e-dropdown>
</div>
</div>
<div class="e-row">
<div class="e-col-6"> </div>
<div class="e-col-6">
<e-dropdown data-markup-content="Dropdown" data-inner-class="e-dropdown__inner-success" data-markup-class="e-btn e-btn-dropdown">
<div class="e-dropdown__content">
<div class="e-dropdown__container">In irure ut est amet occaecat laborum officia enim, excepteur. Excepteur ut anim, et minim est in.
</div>
</div>
</e-dropdown>
</div>
</div>Proident officia ad, id officia amet elit, cupidatat dolore dolor lorem laboris? Incididunt dolore proident officia amet irure in, magna, deserunt anim, in ullamco aliqua id.
Angular
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app>
<div ng-init="checked = false"></div>
Checkbox is checked: {{ checked }}
<div class="e-row">
<div class="e-col-6">
</div>
<div class="e-col-6">
<e-dropdown data-markup-class="e-btn e-btn-dropdown e-btn-no_minwidth" data-dropdown-sticky="true">
<e-dropdown-handler>
<input id="chb_dropdown2" type="checkbox" ng-model="checked" class="e-checkbox e-checkbox-onlycheckbox">
<label for="chb_dropdown2"></label>
</e-dropdown-handler>
<div class="e-dropdown__content">
<a class="e-dropdown__item">
Select all
</a>
<a class="e-dropdown__item">
Select none
</a>
<a class="e-dropdown__item">
Select tracked
</a>
<a class="e-dropdown__item">
Select untracked
</a>
</div>
</e-dropdown>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app>
<div ng-init="checked = false"></div>Checkbox is checked: {{ checked }}
<div class="e-row">
<div class="e-col-6"> </div>
<div class="e-col-6">
<e-dropdown data-markup-class="e-btn e-btn-dropdown e-btn-no_minwidth" data-dropdown-sticky="true">
<e-dropdown-handler>
<input id="chb_dropdown2" type="checkbox" ng-model="checked" class="e-checkbox e-checkbox-onlycheckbox">
<label for="chb_dropdown2"> </label>
</e-dropdown-handler>
<div class="e-dropdown__content"><a class="e-dropdown__item">Select all</a><a class="e-dropdown__item">Select none</a><a class="e-dropdown__item">Select tracked</a><a class="e-dropdown__item">Select untracked</a></div>
</e-dropdown>
</div>
</div>
</div>
Checkbox is checked: {{ checked }}
API Reference
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| data-markup-content | HTML content of the trigger element | string | ||
| data-markup-class | Class of the trigger element | string | ||
| data-dropdown-align | Alignment of the dropdown component | ['auto', 'right'] | ||
| data-autoclose | If set, dropdown won't close after clicking an item in it | boolean | - | |
| data-dropdown-sticky | Removes the arrow and strech the size of the dropdown to 100% | boolean | false |
Events
| Event | Description | Returns |
|---|---|---|
| status | Fires on open/close | detail: { status: ['opened', 'closed'] } |