Zcela nové mdui 2 založené na Material Design 3 a Web Components bylo vydáno, přejděte na dokumentaci mdui 2.

Nabídka

Nabídka se dělí na jednoduchou nabídku a kaskádovou nabídku. Jednoduchá nabídka je vhodná pro telefony a tablety, zatímco kaskádová nabídka je vhodná pro stolní zařízení.

Způsob volání

Volání přes atributy
Volání přes JavaScript

Související čtení

Designové zásady Material Design: Komponenty - Nabídka

Styl

Jednoduchá nabídka

Přidáním atributu disabled na položku nabídky ji můžete zakázat.

Přidáním prvku <li class="mdui-divider"></li> můžete přidat oddělovač.

Příklad

<ul class="mdui-menu">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Refresh</a>
  </li>
  <li class="mdui-menu-item" disabled>
    <a href="javascript:;">Help & feedback</a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Settings</a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Sign out</a>
  </li>
</ul>

Jednoduchá nabídka s ikonami

Příklad

<ul class="mdui-menu">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >remove_red_eye</i
      >Preview
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >file_download</i
      >Download
    </a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons">delete</i
      >Remove
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon"></i>Empty
    </a>
  </li>
</ul>

Kaskádová nabídka

Přidáním třídy .mdui-menu-cascade na prvek <ul class="mdui-menu"> se nabídka změní na kaskádovou nabídku vhodnou pro stolní zařízení.

Vnořením nabídky do prvku <li class="mdui-menu-item"></li> je možné implementovat vnořování nabídky, teoreticky lze podporovat neomezené vnořování.

Prvek <span class="mdui-menu-item-helper"></span> přidává ke položce nabídky krátký popis.

Prvek <span class="mdui-menu-item-more"></span> přidává ke položce nabídky šipku směřující doprava, která se používá u položek nabídky s podnabídkou.

Příklad

<ul class="mdui-menu mdui-menu-cascade">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >format_bold</i
      >
      Bold
      <span class="mdui-menu-item-helper">Ctrl+B</span>
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >format_italic</i
      >
      Italic
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon"></i>
      Superscript
      <span class="mdui-menu-item-helper">Ctrl+.</span>
    </a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      Paragraph style
      <span class="mdui-menu-item-more"></span>
    </a>
    <ul class="mdui-menu mdui-menu-cascade">
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Single
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons"
            >check</i
          >1.15
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Double
        </a>
      </li>
    </ul>
  </li>
</ul>

Způsob volání

Volání přes atributy

Tímto způsobem není potřeba psát kód v JavaScriptu. Stačí přidat atribut mdui-menu="options" na prvek, který menu ovládá (například: tlačítko). Při volání přes vlastní atribut je potřeba přidat další parametr target k určení ovládaného menu, jehož hodnotou je CSS selektor tohoto menu.

Poznámka: Aby se nabídka správně umístila, musí se menu a prvek, který ho spouští, nacházet pod stejným nadřazeným prvkem na stejné úrovni.

Příklad

<button
  class="mdui-btn mdui-color-theme-accent"
  mdui-menu="{target: '#example-attr'}"
>
  open
</button>

<ul class="mdui-menu" id="example-attr">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Refresh</a>
  </li>
  <li class="mdui-menu-item" disabled>
    <a href="javascript:;">Help & feedback</a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Settings</a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Sign out</a>
  </li>
</ul>

Příklad

<button
  class="mdui-btn mdui-color-theme-accent"
  mdui-menu="{target: '#demo-attr-cascade'}"
>
  cascade menu
</button>

<ul class="mdui-menu mdui-menu-cascade" id="demo-attr-cascade">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >format_bold</i
      >
      Bold
      <span class="mdui-menu-item-helper">Ctrl+B</span>
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >format_italic</i
      >
      Italic
      <span class="mdui-menu-item-helper">Ctrl+I</span>
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon"></i>
      Superscript
      <span class="mdui-menu-item-helper">Ctrl+.</span>
    </a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      Paragraph style
      <span class="mdui-menu-item-more"></span>
    </a>
    <ul class="mdui-menu mdui-menu-cascade">
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Single
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>1.15
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Double
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons"
            >check</i
          >Custom: 1.2
        </a>
      </li>
      <li class="mdui-divider"></li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple"
          >Add space before paragraph</a
        >
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple"
          >Add space after paragraph</a
        >
      </li>
      <li class="mdui-divider"></li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">Custom spacing...</a>
      </li>
    </ul>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      Line spacing
      <span class="mdui-menu-item-more"></span>
    </a>
    <ul class="mdui-menu mdui-menu-cascade">
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>
          Single
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>
          1.15
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>
          Double
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons"
            >check</i
          >
          Custom: 1.2
          <span class="mdui-menu-item-more"></span>
        </a>
        <ul class="mdui-menu mdui-menu-cascade">
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">
              Line spacing
              <span class="mdui-menu-item-helper">1.2</span>
            </a>
          </li>
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">
              Paragraph spacing before
              <span class="mdui-menu-item-helper">1.2</span>
            </a>
          </li>
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">
              Paragraph spacing after
              <span class="mdui-menu-item-helper">1.5</span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Volání přes JavaScript

Inicializace komponenty:

// anchorSelector představuje CSS selektor nebo DOM prvek prvku, který menu spouští
// menuSelector představuje CSS selektor nebo DOM prvek menu
// options představuje konfigurační parametry komponenty, viz seznam parametrů níže
var inst = new mdui.Menu(anchorSelector, menuSelector, options);

Spustit

Parametr

Název parametru	Typ	Výchozí hodnota	Popis
`position`	`string`	`auto`	Poloha menu vzhledem k prvku, který ho spouští. `top`: Menu je nad prvkem, který ho spouští. `bottom`: Menu je pod prvkem, který ho spouští. `center`: Menu je svisle vycentrované v okně. `auto`: Automatické určení polohy. Priorita: `bottom` > `top` > `center`.
`align`	`string`	`auto`	Způsob zarovnání menu s prvkem, který ho spouští. `left`: Menu je zarovnané vlevo s prvkem, který ho spouští. `right`: Menu je zarovnané vpravo s prvkem, který ho spouští. `center`: Menu je vodorovně vycentrované v okně. `auto`: Automatické určení polohy, priorita: `left` > `right` > `center`.
`gutter`	`int`	`16`	Minimální mezera mezi menu a okrajem okna v px.
`fixed`	`boolean`	`false`	Způsob pozicování menu `true`: Menu používá fixní pozicování (fixed). Při rolování stránky zůstane menu na fixní pozici v okně a nebude se posouvat s obsahem. `false`: Menu používá absolutní pozicování (absolute). Při rolování stránky se menu posouvá spolu se stránkou.
`covered`	`boolean`	`auto`	Zda menu překrývá prvek, který ho spouští. `true`: Menu překrývá prvek, který ho spouští. `false`: Menu nepřekrývá prvek, který ho spouští. `auto`: Jednoduché menu překrývá prvek, který ho spouští. Kaskádové menu ho nepřekrývá.
`subMenuTrigger`	`string`	`hover`	Způsob spouštění podnabídky. `click`: Podnabídka se otevře při kliknutí. `hover`: Podnabídka se otevře při přejetí myší.
`subMenuDelay`	`int`	`200`	Zpoždění spuštění podnabídky (v milisekundách). Tento parametr je účinný pouze pokud je subMenuTrigger: hover.

Metoda

Název metody	Popis
`open()`	Otevře menu.
`close()`	Zavře menu.
`toggle()`	Přepne stav otevření menu.

Událost

Název události	Popis	Cíl	Parametry
`open.mdui.menu`	Událost bude spuštěna, když menu začne animaci otevírání.	`<ul class="mdui-menu"></ul>`	`event._detail.inst`: Instance
`opened.mdui.menu`	Událost bude spuštěna, když menu dokončí animaci otevírání.
`close.mdui.menu`	Událost bude spuštěna, když menu začne animaci zavírání.
`closed.mdui.menu`	Událost bude spuštěna, když menu dokončí animaci zavírání.

Seznam CSS tříd

Název třídy	Popis
`.mdui-menu`	Definuje komponentu menu.
`.mdui-menu-cascade`	Definuje kaskádové menu.
`.mdui-menu-item`	Definuje položku menu.
`.mdui-menu-item-icon`	Definuje ikonu menu.
`.mdui-menu-item-helper`	Definuje pomocný text menu.
`.mdui-menu-item-more`	Šipka směřující doprava u položky menu s podnabídkou.

Dialog

Indikátor průběhu