Peacock · Rapidly build web applications

Web Component

Usage

New

Open

Save

Disabled

Print (with value)


  <goat-sidenav>
    <goat-sidenav-menu>
      <goat-sidenav-menu-item> New</goat-sidenav-menu-item>
      <goat-sidenav-menu-item> Open</goat-sidenav-menu-item>
      <goat-sidenav-menu-item> Save</goat-sidenav-menu-item>
      <goat-sidenav-menu-item disabled="true"> Disabled</goat-sidenav-menu-item>
      <divider></divider>
      <goat-sidenav-menu-item value="print"> Print (with value)</goat-sidenav-menu-item>
    </goat-sidenav-menu>
  </goat-sidenav>

Icon menu


  <pc-menu class="menu" style="width: 200px">
    <pc-menu-item value="cut">
      <wc-icon name="scissors" slot="start" size="sm"></wc-icon>
      Cut
      <span slot="end">⌘X</span>
    </pc-menu-item>
    <pc-menu-item value="copy">
      <wc-icon name="files" slot="start" size="sm"></wc-icon>
      Copy
      <span slot="end">⌘C</span>
    </pc-menu-item>
    <pc-menu-item value="paste">
      <wc-icon name="clipboard" slot="start" size="sm"></wc-icon>
      Paste
      <span slot="end">⌘X</span>
    </pc-menu-item>
    <pc-divider></pc-divider>
    <pc-menu-item value="delete">
      <wc-icon name="trash" slot="start" size="sm"></wc-icon>
      Delete
      <span slot="end">←</span>
    </pc-menu-item>
  </pc-menu>

  <pc-menu class="menu" style="width: 300px">
    <pc-menu-item value="shivaji" selected="true">
      <pc-avatar src="https://doodleipsum.com/40x40/avatar-3?i=74943b7fc5a9da2affe8c2d8b8558812" size="40px" slot="start"></pc-avatar>
      <div>
        <pc-text size="md">Shivaji Varma</pc-text>
      </div>
      <div>
        <pc-text size="sm" variant="secondary">Software Engineer</pc-text>
      </div>
    </pc-menu-item>
    <pc-menu-item value="john">
      <pc-avatar src="https://doodleipsum.com/40x40/avatar-3?i=6801be2ffb4809eefe713e4fefd7b9ae" size="40px" slot="start"></pc-avatar>
      <div>
        <div>
          <pc-text size="md">John doe</pc-text>
        </div>
        <div>
          <pc-text size="sm" variant="secondary">Manager</pc-text>
        </div>
      </div>
    </pc-menu-item>

    <pc-menu-item value="fred">
      <pc-avatar src="https://doodleipsum.com/40x40/avatar-3?i=5ff278e220eacb10b8e37efefef406a6" size="40px" slot="start"></pc-avatar>
      <div>
        <div>
          <pc-text size="md">Fred</pc-text>
        </div>
        <div>
          <pc-text size="sm" variant="secondary">Director</pc-text>
        </div>
      </div>
    </pc-menu-item>
  </pc-menu>

Events

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