Dropdown

Dropdown

Zobrazuje seznam pro výběr položky nebo jiné informace, které je vhodné zobrazit dočasně.

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-a"></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>