Single button dropdowns Sizing Basic exemple Headers Divider Disabled menu items Split button Alignment Multi Select Dropdown
UI Molecules
Button dropdowns
1.2 Sizing
<!-- Extra small Dropdown button -->
<div class="amui-m-btn-dropdown btn-group">
<button type="button" class="amui-a-btn is--default is--xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<!-- Small Dropdown button -->
<div class="amui-m-btn-dropdown btn-group">
<button type="button" class="amui-a-btn is--default is--sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<!-- Default Dropdown button -->
<div class="amui-m-btn-dropdown btn-group">
<button type="button" class="amui-a-btn is--default btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<!-- Large Dropdown button -->
<div class="amui-m-btn-dropdown btn-group">
<button type="button" class="amui-a-btn is--default is--lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<!-- Extra Large Dropdown button -->
<div class="amui-m-btn-dropdown btn-group">
<button type="button" class="amui-a-btn is--default is--xl dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
1.3 Basic exemple
<div class="amui-m-btn-dropdown dropdown">
<button type="button" id="dropdownMenu1" class="amui-a-btn is--hollow btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Modifier</a></li>
<li><a href="#">Supprimer</a></li>
</ul>
</div>
1.4 Headers
<div class="amui-m-btn-dropdown dropdown">
<button type="button" id="dropdownMenu2" class="amui-a-btn is--hollow btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li class="dropdown-header">Dropdown header</li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="dropdown-header">Dropdown header</li>
<li><a href="#">Another link</a></li>
</ul>
</div>
1.5 Divider
<div class="amui-m-btn-dropdown dropdown">
<button type="button" id="dropdownMenuDivider" class="amui-a-btn is--hollow btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
1.8 Button dropdowns alignment
Par défaut, un « dropdown menu » est automatiquement positionné à 100% en haut à gauche de son parent. Ajoutez la class .dropdown-menu-right
à la class .dropdown-menu
pour aligner le « dropdown menu » à droite.
<div class="amui-h-text-right">
<div class="amui-m-btn-dropdown dropdown">
<button type="button" id="dropdownMenu1" class="amui-a-btn is--hollow btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
<li><a href="#">Modifier</a></li>
<li><a href="#">Supprimer</a></li>
</ul>
</div>
</div>
Multi-Select Dropdown
<div class="amui-m-btn-dropdown dropdown amui-h-text-right">
<button type="button" id="dropdownMenuDivider" class="amui-a-btn is--default is--sm btn is--hollow is--icon-only btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons md-24">filter_list</i>
</button>
<ul class="amui-m-btn-dropdown__items dropdown-menu dropdown-menu-right add" aria-labelledby="dropdownMenuDivider">
<li class="amui-m-btn-dropdown__item dropdown-header">Title</li>
<li class="amui-m-btn-dropdown__item">
<label class="amui-a-form-check">
<input type="checkbox" id="item-1" name="item-1" value="Item 1" checked>
<span class="amui-a-form-check__indicator"></span>
<span class="amui-a-form-check__label">Item 1</span>
</label>
</li>
<li class="amui-m-btn-dropdown__item">
<label class="amui-a-form-check">
<input type="checkbox" id="item-2" name="item-2" value="Item 2" checked>
<span class="amui-a-form-check__indicator"></span>
<span class="amui-a-form-check__label">Item 2</span>
</label>
</li>
<li class="amui-m-btn-dropdown__item">
<label class="amui-a-form-check">
<input type="checkbox" id="item-3" name="item-3" value="Item 3" checked>
<span class="amui-a-form-check__indicator"></span>
<span class="amui-a-form-check__label">Item 3</span>
</label>
</li>
<li class="amui-m-btn-dropdown__item">
<label class="amui-a-form-check">
<input type="checkbox" id="item-4" name="item-4" value="Item 4" checked>
<span class="amui-a-form-check__indicator"></span>
<span class="amui-a-form-check__label">Item 4</span>
</label>
</li>
<li class="amui-m-btn-dropdown__item">
<label class="amui-a-form-check">
<input type="checkbox" id="item-5" name="item-5" value="Item 5" checked>
<span class="amui-a-form-check__indicator"></span>
<span class="amui-a-form-check__label">Item 5</span>
</label>
</li>
<li class="amui-m-btn-dropdown__item dropdown-header">Title</li>
<li class="amui-m-btn-dropdown__item">
<label class="amui-a-form-check">
<input type="checkbox" id="item-6" name="item-6" value="Item 6" checked>
<span class="amui-a-form-check__indicator"></span>
<span class="amui-a-form-check__label">Item 6</span>
</label>
</li>
<li class="amui-m-btn-dropdown__item">
<label class="amui-a-form-check">
<input type="checkbox" id="item-7" name="item-7" value="Item 7" checked>
<span class="amui-a-form-check__indicator"></span>
<span class="amui-a-form-check__label">Item 7</span>
</label>
</li>
<li class="amui-m-btn-dropdown__item">
<label class="amui-a-form-check">
<input type="checkbox" id="item-8" name="item-8" value="Item 8" checked>
<span class="amui-a-form-check__indicator"></span>
<span class="amui-a-form-check__label">Item 8</span>
</label>
</li>
<li class="amui-m-btn-dropdown__item dropdown-header">Title</li>
<li class="amui-m-btn-dropdown__item">
<label class="amui-a-form-check">
<input type="checkbox" id="item-9" name="item-9" value="Item 9" checked>
<span class="amui-a-form-check__indicator"></span>
<span class="amui-a-form-check__label">Item 9</span>
</label>
</li>
<li class="amui-m-btn-dropdown__item">
<label class="amui-a-form-check">
<input type="checkbox" id="item-10" name="item-10" value="Item 10" checked>
<span class="amui-a-form-check__indicator"></span>
<span class="amui-a-form-check__label">Item 10</span>
</label>
</li>
<li class="amui-m-btn-dropdown__item amui-h-mb-ms amui-h-mt-ms">
<a id="btn-dropdown-select-all-filters" href="#" class="amui-a-btn is--link btn amui-h-text-lowercase">Select all</a>
<a id="btn-dropdown-clear-filters" href="#" class="amui-a-btn is--link btn amui-h-text-lowercase pull-right">Clear all</a>
</li>
<li role="separator" class="divider"></li>
<li class="amui-m-btn-dropdown__item">
<button id="btn-dropdown-apply-filters" type="button" class="amui-a-btn is--primary btn amui-h-mr-sm">Apply</button>
<button id="btn-dropdown-cancel" type="button" class="amui-a-btn is--link btn pull-right">Cancel</button>
</li>
</ul>
</div>