Bottom sheets

Showcasing MICL bottom sheets

Showcase

Click a button to open one of the MICL bottom sheets.

Send

John
John Reeves
Carol
Carol Glass
Bill
Bill Graves
Knut
Knut Steen
City Album

City Sleepers Various artists

pause skip_next
  • share Share
  • link Get link
  • edit Edit name
  • share Share
  • link Get link
  • edit Edit name

Send

John
John Reeves
Carol
Carol Glass
Bill
Bill Graves
Knut
Knut Steen

Code example


<dialog id="id0" class="micl-bottomsheet" popover data-miclsnapheights="0,400">
    <div class="micl-bottomsheet__headline">
        <button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"></button>
    </div>
    <div class="micl-bottomsheet__content">
        <ul class="micl-list" role="listbox">
            <li class="micl-list-item-one" tabindex="0">
                <span class="material-symbols-outlined micl-list-item__icon">share</span>
                <span class="micl-list-item__text">
                    <span class="micl-list-item__headline">Share</span>
                </span>
            </li>
            <li class="micl-list-item-one" tabindex="0">
                <span class="material-symbols-outlined micl-list-item__icon">edit</span>
                <span class="micl-list-item__text">
                    <span class="micl-list-item__headline">Edit name</span>
                </span>
            </li>
        </ul>
    </div>
</dialog>