Dropdown

Akce

Nabídku akcí daného elementu, obdobně jako na položkách seznamu, lze uspořádat do dropdown menu. Aby byl vzhled a chování konzistentní, využijte strukturu níže.

Prioritizujte

Při velkém množství položek se snažte vytipovat nejčastěji používané a zařaďte je na začátek. Méně používané naopak schovejte do uzlu.

Rozdělujte

Související položky shlukněte k sobě pomocí oddělovače.

<div class="PopupMenu" style="width: auto; height: auto; overflow: visible;">
    <tsc-dropdownmenu class="CustomControl DropDownMenu">
        <div class="DropDownScrollUp disabled"></div>
        <div class="DropDownMenuContent" style="height: auto;">
            <tsc-dropdownmenuitembutton class="CustomControl DropDownMenuItem button-item">
                <button class="dropdown-menu-button">
                    <div class="Icon menuIcon copy"></div>
                    <div class="Text">
                        <div class="Caption">Kopírovat</div>
                    </div>
                </button>
            </tsc-dropdownmenuitembutton>
            ...
            <tsc-separatormenuitem class="CustomControl Separator">
                <div class="Icon"></div>
                <div class="Line"></div>
            </tsc-separatormenuitem>
            <tsc-dropdownmenuitembutton class="CustomControl DropDownMenuItem button-item">
                <button class="dropdown-menu-button">
                    <div class="Icon menuIcon ui-check"></div>
                    <div class="Text">
                        <div class="Caption">Schválit</div>
                    </div>
                </button>
            </tsc-dropdownmenuitembutton>
            ...
            <tsc-dropdownmenuitembutton class="CustomControl DropDownMenuItem button-item">
                <button class="dropdown-menu-button">
                    <div class="Icon menuIcon export"></div>
                    <div class="Text">
                        <div class="Caption">Exportovat</div>
                    </div>
                </button>
         </div>
         <div class="DropDownScrollDown"></div>
     </tsc-dropdownmenu>
 </div>

dev

Akce