-
Get Started
-
React Components
- App
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button / FAB
- Gauge
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List
Popover React Component
Popover compontent is used to manage the presentation of content in a popover. You use popovers to present information temporarily. The popover remains visible until the user taps outside of the popover window or you explicitly dismiss it.
Popover React component represents Popover component.
Popover Components
There are following components included:
Popover
/F7Popover
Popover Properties
Prop | Type | Default | Description |
---|---|---|---|
<Popover> properties | |||
opened | boolean | false | Allows to open/close Popover and set its initial state |
target | string object |
HTML element or string CSS selector of Popover target element | |
closeByBackdropClick | boolean | true | When enabled, popover will be closed on backdrop click. By default inherits same app parameter value |
closeByOutsideClick | boolean | true | When enabled, popover will be closed on when click outside of it. By default inherits same app parameter value |
Popover Methods
<Popover> methods | |
---|---|
.open(target, animate) | Open popover around target element |
.close(animate) | Close popover |
Popover Events
Event | Description |
---|---|
<Popover> events | |
popoverOpen | Event will be triggered when Popover starts its opening animation |
popoverOpened | Event will be triggered after Popover completes its opening animation |
popoverClose | Event will be triggered when Popover starts its closing animation |
popoverClosed | Event will be triggered after Popover completes its closing animation |
Open And Close Popover
You can control Popover state, open and closing it:
- using Popover API
- by passing
true
orfalse
to itsopened
prop - by clicking on Link or Button with relevant
popoverOpen
property (to open it) andpopoverClose
property to close it
Access To Popover Instance
You can access Popover initialized instance by accessing .f7Popover
component's property.
Examples
export default () => (
<Page>
<Navbar title="Popover"></Navbar>
<Toolbar bottomMd>
<Link>Dummy Link</Link>
<Link popoverOpen=".popover-menu">Open Popover</Link>
</Toolbar>
<Block>
<p><Button raised popoverOpen=".popover-menu">Open popover on me</Button></p>
<p>Mauris fermentum neque et luctus venenatis. Vivamus a sem rhoncus, ornare tellus eu, euismod mauris. In porta turpis at semper convallis. Duis adipiscing leo eu nulla lacinia, quis rhoncus metus condimentum. Etiam nec malesuada nibh. Maecenas quis lacinia nisl, vel posuere dolor. Vestibulum condimentum, nisl ac vulputate egestas, neque enim dignissim elit, rhoncus volutpat magna enim a est. Aenean sit amet ligula neque. Cras suscipit rutrum enim. Nam a odio facilisis, elementum tellus non, <Link popoverOpen=".popover-menu">popover</Link> tortor. Pellentesque felis eros, dictum vitae lacinia quis, lobortis vitae ipsum. Cras vehicula bibendum lorem quis imperdiet.</p>
<p>In hac habitasse platea dictumst. Etiam varius, ante vel ornare facilisis, velit massa rutrum dolor, ac porta magna magna lacinia nunc. Curabitur <Link popoverOpen=".popover-menu">popover!</Link> cursus laoreet. Aenean vel tempus augue. Pellentesque in imperdiet nibh. Mauris rhoncus nulla id sem suscipit volutpat. Pellentesque ac arcu in nisi viverra pulvinar. Nullam nulla orci, bibendum sed ligula non, ullamcorper iaculis mi. In hac habitasse platea dictumst. Praesent varius at nisl eu luctus. Cras aliquet porta est. Quisque elementum quis dui et consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sed laoreet purus. Pellentesque eget ante ante.</p>
<p>Duis et ultricies nibh. Sed facilisis turpis urna, ac imperdiet erat venenatis eu. Proin sit amet faucibus tortor, et varius sem. Etiam vitae lacinia neque. Aliquam nisi purus, interdum in arcu sed, ultrices rutrum arcu. Nulla mi turpis, consectetur vel enim quis, facilisis viverra dui. Aliquam quis convallis tortor, quis semper ligula. Morbi ullamcorper <Link popoverOpen=".popover-menu">one more popover</Link> massa at accumsan. Etiam purus odio, posuere in ligula vitae, viverra ultricies justo. Vestibulum nec interdum nisi. Aenean ac consectetur velit, non malesuada magna. Sed pharetra vehicula augue, vel venenatis lectus gravida eget. Curabitur lacus tellus, venenatis eu arcu in, interdum auctor nunc. Nunc non metus neque. Suspendisse viverra lectus sed risus aliquet, vel accumsan dolor feugiat.</p>
</Block>
<Popover className="popover-menu">
<List>
<ListItem link="#" popoverClose title="Dialog" />
<ListItem link="#" popoverClose title="Tabs" />
<ListItem link="#" popoverClose title="Side Panels" />
<ListItem link="#" popoverClose title="List View" />
<ListItem link="#" popoverClose title="Form Inputs" />
</List>
</Popover>
</Page>
);