MNotes/components-wiki/figures/select/usage.html

34 lines
1.1 KiB
HTML

<div class="figure-wrapper">
<style>
main > .figure-wrapper {
/* prevent scrolling bars on dropdown menu open */
overflow: visible;
/* unset page styles */
--md-list-item-container-shape: 0px;
}
</style>
<figure
style="justify-content: center; gap: 8px"
title="Example usage of an outlined dropdown menu and a filled dropdown menu."
aria-label="An outlined dropdown menu filled with Apple, and a filled dropdown menu."
>
<md-outlined-select>
<md-select-option aria-label="blank"></md-select-option>
<md-select-option selected value="apple">
<div slot="headline">Apple</div>
</md-select-option>
<md-select-option value="apricot">
<div slot="headline">Apricot</div>
</md-select-option>
</md-outlined-select>
<md-filled-select>
<md-select-option aria-label="blank"></md-select-option>
<md-select-option value="apple">
<div slot="headline">Apple</div>
</md-select-option>
<md-select-option value="apricot">
<div slot="headline">Apricot</div>
</md-select-option>
</md-filled-select>
</figure>
</div>