Enables native inputs to be used within a Form field.
Usage
Cut
⌘X
Copy
⌘C
Paste
⌘X
Bold
Italic
Delete
<goat-dropdown>
<goat-button color="secondary" icon="overflow-menu--vertical"></goat-button>
<goat-dropdown-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-dropdown-menu>
</goat-dropdown>
Cut
⌘X
Copy
⌘C
Paste
⌘X
Bold
Italic
Delete
<goat-dropdown id="dropdown" placements="bottom-end">
<goat-button color="secondary" variant="ghost" icon="overflow-menu--vertical"></goat-button>
<goat-dropdown-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-dropdown-menu>
</goat-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
Open
...
...