menuMDUIDocs
color_lens
Nowy mdui 2 oparty na Material Design 3 i Web Components jest już dostępny, przejdź do dokumentacji mdui 2.

Menu

Menu dzielą się na menu proste i menu kaskadowe. Proste menu są odpowiednie dla telefonów i tabletów, natomiast menu kaskadowe są przeznaczone dla urządzeń stacjonarnych.

Sposób użycia

  1. Wywołanie przez atrybuty
  2. Wywołanie przez JavaScript

Powiązane artykuły

Wytyczne projektowe Material Design: Komponenty - Menu

Styl

Proste menu

Dodanie atrybutu disabled do elementu menu spowoduje jego wyłączenie.

Dodanie elementu <li class="mdui-divider"></li> pozwala na wstawienie separatora.

codeplay_arrow
Przykład
<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>

Proste menu z ikonami

codeplay_arrow
Przykład
<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>

Menu kaskadowe

Dodanie klasy .mdui-menu-cascade do elementu <ul class="mdui-menu"> zamieni menu w menu kaskadowe dla urządzeń stacjonarnych.

Zagnieżdżanie menu można osiągnąć poprzez dodanie kolejnego menu wewnątrz elementu <li class="mdui-menu-item"></li>. Teoretycznie obsługiwane jest nieskończone zagnieżdżanie.

Element <span class="mdui-menu-item-helper"></span> dodaje krótki opis do elementu menu.

Element <span class="mdui-menu-item-more"></span> dodaje strzałkę w prawo do elementu menu, używaną w elementach zawierających podmenu.

codeplay_arrow
Przykład
<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>

Sposób użycia

Wywołanie przez atrybuty

Ta metoda nie wymaga pisania kodu JavaScript. Wystarczy dodać atrybut mdui-menu="options" do elementu sterującego (np. przycisku). Przy wywoływaniu przez atrybuty niestandardowe wymagany jest dodatkowy parametr target, wskazujący na menu docelowe za pomocą selektora CSS.

Uwaga: Aby menu było poprawnie pozycjonowane, menu i element wyzwalający muszą znajdować się na tym samym poziomie w tym samym elemencie nadrzędnym.

codeplay_arrow
Przykład
<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>
codeplay_arrow
Przykład
<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>

Wywołanie przez JavaScript

Instancja komponentu:

// anchorSelector reprezentuje selektor CSS lub element DOM wyzwalający menu
// menuSelector reprezentuje selektor CSS lub element DOM menu
// options reprezentuje parametry konfiguracyjne komponentu, patrz lista parametrów poniżej
var inst = new mdui.Menu(anchorSelector, menuSelector, options);
Uruchom

Parametr

Nazwa parametruTypWartość domyślnaOpis
positionstringautoPozycja menu względem elementu wyzwalającego.
  • top: Menu znajduje się nad elementem wyzwalającym.
  • bottom: Menu znajduje się pod elementem wyzwalającym.
  • center: Menu jest wyśrodkowane pionowo w oknie.
  • auto: Pozycja ustalana automatycznie. Priorytet: bottom > top > center.
alignstringautoWyrównanie menu względem elementu wyzwalającego.
  • left: Menu wyrównane do lewej krawędzi elementu wyzwalającego.
  • right: Menu wyrównane do prawej krawędzi elementu wyzwalającego.
  • center: Menu jest wyśrodkowane poziomo w oknie.
  • auto: Pozycja ustalana automatycznie. Priorytet: left > right > center.
gutterint16Minimalny odstęp menu od krawędzi okna (w px).
fixedbooleanfalseSposób pozycjonowania menu
  • true: Menu używa pozycjonowania fixed. Pozostaje w stałym miejscu okna podczas przewijania strony.
  • false: Menu używa pozycjonowania absolute. Przewija się wraz ze stroną.
coveredbooleanautoCzy menu powinno przykrywać element wyzwalający.
  • true: Menu przykrywa element wyzwalający.
  • false: Menu nie przykrywa elementu wyzwalającego.
  • auto: Proste menu przykrywa element, menu kaskadowe nie.
subMenuTriggerstringhoverSposób wyzwalania podmenu.
  • click: Podmenu pojawia się po kliknięciu.
  • hover: Podmenu pojawia się po najechaniu myszą.
subMenuDelayint200Opóźnienie wyzwalania podmenu (w ms), działa tylko przy subMenuTrigger: hover.

Metoda

Nazwa metodyOpis
open()Otwórz menu.
close()Zamknij menu.
toggle()Przełącz stan otwarcia menu.

Zdarzenie

Nazwa zdarzeniaOpisCelParametry
open.mdui.menuZdarzenie wyzwalane przed rozpoczęciem animacji otwierania.<ul class="mdui-menu"></ul>event._detail.inst: Instancja
opened.mdui.menuZdarzenie wyzwalane po zakończeniu animacji otwierania.
close.mdui.menuZdarzenie wyzwalane przed rozpoczęciem animacji zamykania.
closed.mdui.menuZdarzenie wyzwalane po zakończeniu animacji zamykania.

Lista klas CSS

Nazwa klasyOpis
.mdui-menuZdefiniuj komponent menu.
.mdui-menu-cascadeZdefiniuj menu kaskadowe.
.mdui-menu-itemZdefiniuj element menu.
.mdui-menu-item-iconZdefiniuj ikonę menu.
.mdui-menu-item-helperZdefiniuj tekst pomocniczy menu.
.mdui-menu-item-moreStrzałka w prawo dla elementów z podmenu.
arrow_backPrevious
Okno dialogowe
arrow_forwardNext
Wskaźnik postępu