Menu · goat/ui

Usage


  <goat-menu class="menu">
    <goat-menu-item value="cut">
      Cut
      <span slot="end">⌘X</span>
    </goat-menu-item>
    <goat-menu-item value="copy">
      Copy
      <span slot="end">⌘C</span>
    </goat-menu-item>
    <goat-menu-item value="paste">
      Paste
      <span slot="end">⌘X</span>
    </goat-menu-item>
    <goat-menu-divider></goat-menu-divider>
    <goat-menu-item value="bold" selected="true">
      Bold
    </goat-menu-item>
    <goat-menu-item value="italic">
      Italic
    </goat-menu-item>
    <goat-menu-divider></goat-menu-divider>
    <goat-menu-item value="delete" color="danger">
      Delete
      <goat-icon name="delete" slot="end"></goat-icon>
    </goat-menu-item>
  </goat-menu>

Slots


    <goat-menu class="menu">
      <goat-menu-item value="cut">
        <goat-icon name="cut" slot="start" size="sm"></goat-icon>
        Cut
        <span slot="end">⌘X</span>
      </goat-menu-item>
      <goat-menu-item value="copy">
        <goat-icon name="copy" slot="start" size="sm"></goat-icon>
        Copy
        <span slot="end">⌘C</span>
      </goat-menu-item>
      <goat-menu-item value="paste">
        <goat-icon name="paste" slot="start" size="sm"></goat-icon>
        Paste
        <span slot="end">⌘X</span>
      </goat-menu-item>
      <goat-menu-divider></goat-menu-divider>
      <goat-menu-item value="delete">
        <goat-icon name="trash-can" slot="start" size="sm"></goat-icon>
        Delete
        <span slot="end">←</span>
      </goat-menu-item>
    </goat-menu>


  <goat-menu class="menu" style="width: 300px">
    <goat-menu-item value="shivaji" selected="true">
      <goat-avatar src="https://doodleipsum.com/40x40/avatar-3?i=74943b7fc5a9da2affe8c2d8b8558812" size="40px" slot="start"></goat-avatar>

      <div class="user-info">
        <goat-text type="heading" heading-size="2" class="no-margin">Shivaji Varma</goat-text>
        <goat-text type="body-compact" color="secondary">Software Engineer</goat-text>
      </div>
    </goat-menu-item>
    <goat-menu-item value="john">
      <goat-avatar src="https://doodleipsum.com/40x40/avatar-3?i=6801be2ffb4809eefe713e4fefd7b9ae" size="40px" slot="start"></goat-avatar>
      <div class="user-info">
        <goat-text type="heading" heading-size="2" class="no-margin">John doe</goat-text>
        <goat-text type="body-compact" color="secondary">Manager</goat-text>
      </div>
    </goat-menu-item>

    <goat-menu-item value="fred">
      <goat-avatar src="https://doodleipsum.com/40x40/avatar-3?i=5ff278e220eacb10b8e37efefef406a6" size="40px" slot="start"></goat-avatar>

      <div class="user-info">
        <goat-text type="heading" heading-size="2" class="no-margin">Fred</goat-text>
        <goat-text type="body-compact" color="secondary">Director</goat-text>
      </div>

    </goat-menu-item>
  </goat-menu>

Events

 const $list = document.querySelector('.menu');
      $list.addEventListener('goat-menu-item--click',
      function(evt) {
       console.log('' + JSON.stringify(evt.detail.value, null, 4) + '');
      });