-
Get Started
-
React Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
-
Forms
- Icon
- Grid / Layout Grid
-
Lists
- Link
- Messages
- Message Bar
-
Modals
-
Navigation Bars
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View
Picker Modal React Component
Picker Modal is a special overlay type which is similar to Picker/Calendar's overlay. Such modal allows to create custom picker overlays with custom content.
Picker Modal React component represents Picker Modal component.
Usage example
<!-- Picker Modal -->
<PickerModal>
<!-- Picker Modal content goes here -->
</PickerModal>
Renders to:
<!-- Picker Modal -->
<div class="picker-modal">
<div class="picker-modal-inner">
<!-- Picker Modal content goes here -->
</div>
</div>
Properties
Prop | Type | Description |
---|---|---|
overlay | boolean | Enable to render additional picker modal overlay when required |
theme | string | Picker Modal theme color. One of default colors |
layout | string | Picker Modal layout theme. One of default layout themes |
opened | boolean | Allows to open/close Picker Modal and set its initial state |
Event Properties
Event | Description |
---|---|
onPickerOpen | Event will be triggered when Picker Modal starts its opening animation |
onPickerOpened | Event will be triggered after Picker Modal completes its opening animation |
onPickerClose | Event will be triggered when Picker Modal starts its closing animation |
onPickerClosed | Event will be triggered after Picker Modal completes its closing animation |
Open and close Picker Modal
You can control Picker Modal state, open and closing it:
- using its JavaScript API
- by passing true or false to its
opened
prop - by clicking on Link or Button with relevant
openPicker
property (to open it) andclosePicker
property to close it