Popover
A component that included a button to displays a popover with provided children.
Import
import { Popover } from "/imports/plugins/core/ui/client/components";
Usage Example
Popover with default arrow button
import React, { Component } from "react";
import { Popover } from "/imports/plugins/core/ui/client/components";
class MyReactComponent extends Component {
state = {
value: ""
}
handleChange = (event, value) => {
this.setState({
value: value
});
}
render() {
return (
<Popover>
{"My Popover"}
</Popover>
)
}
};
export default MyReactComponent;
Popover with custom Button and arrow button
import React, { Component } from "react";
import { Button, Popover } from "/imports/plugins/core/ui/client/components";
class MyReactComponent extends Component {
state = {
value: ""
}
handleButtonClick = (event) => {
console.log("Button Clicked");
}
render() {
return (
<Popover
buttonElement={
/*
This button does not open the popover, so you can use it to do
other actions. The arrow button to open the popover is always included
if your custom button sets status to, for example, <Button status="warning" />
Then the arrow button will also use the same status.
*/
<Button label="My Button" onClick={this.handleButtonClick}/>
}
>
{"My Popover"}
</Popover>
)
}
};
export default MyReactComponent;
Props
Property | Type | Description |
---|---|---|
attachment | String | Default value: "bottom left" |
buttonElement | Node | Custom button element (optional). Default is a button with a down arrow. Best to use <Button /> component. |
children | Node | Popover contents |
onChange | Function | Show the arrow for the actual popover |
showDropdownButton | Boolean | Shows a dropdown button adjacent the buttonElement as a button group |
targetAttachment | String | Default value "top left"" |