PopoverButton
A button designed to be used as the Popover
content.
Showcase
Source
<script>
import { PopoverPositions } from 'attractions/popover';
</script>
<Popover position={PopoverPositions.BOTTOM}>
<Button>hover or focus me</Button>
<div slot="popover-content">
<PopoverButton>copy</PopoverButton>
</div>
</Popover>
Properties #
Functional Properties
Name | Default | Type | Description |
---|---|---|---|
... | any | Everything will be passed to the underlying <button> element. |
Class Properties
All <PopoverButton>
components use the .popover-button
class.
Falsy values passed to classes will be disregarded.
Name | Default | Type | Description |
---|---|---|---|
class | null | string | A class string to add to the component. |
Events #
Name | Event Detail | Description |
---|---|---|
click | { nativeEvent } | Fired when the button is clicked. |
Slots #
Default slot
The content of the button.
SCSS Variables #
Name | Description | Default |
---|---|---|
$font | The font family used for the button. | 'Ubuntu' |
$shadow-raised | The shadow of the button. | hover me 0 2px 4px -1px rgba(0, 0, 0, .2), 0 3px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12); |
$bold-font-weight | The bold font weight of the button. | 500 |