Overview API

Usage

Cut ⌘X Copy ⌘C Paste ⌘X Bold Italic Delete 


  <pc-dropdown>
    <wc-button>
      <wc-icon slot="icon" name="menu"></wc-icon>
    </wc-button>

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

  <pc-dropdown id="dropdown" placements="bottom-end">
    <wc-button variant="text"><wc-icon slot="icon" name="menu"></wc-icon></wc-button>

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

Placements

The dropdown can be positioned relative to the trigger element. Possible positions are: top-start, top-end, bottom-end, bottom-start. You can also use the positions attribute to set all preferred position of the dropdown. On scroll, the dropdown will be repositioned to the closest position.
Open Cut ⌘X Copy ⌘C Paste ⌘X Bold Italic Delete Cut ⌘X Copy ⌘C Paste ⌘X Bold Italic Delete 

      <pc-dropdown id="dropdown" item-variant="icon" placements="top-start,bottom-start">
        <wc-button icon="home" variant="outline">Open</wc-button>
        <pc-dropdown-menu>...</pc-dropdown-menu>
      </pc-dropdown>

      <pc-dropdown id="dropdown" item-variant="icon" placements="top-end,bottom-end">
        <wc-button icon="trash-can" color="danger" aria-label="Trash Can"></wc-button>
        <pc-dropdown-menu>...</pc-dropdown-menu>
      </pc-dropdown>

On this page

  • Usage
  • Placements
Sponsor

Properties

Events

Methods

CSS Custom Properties