Get Started
React Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
- Forms
  - Checkboxes & Radios
  - Form Elements
  - Smart Select
- Icon
- Grid / Layout Grid
- Lists
  - List
  - List Item
  - List Button
  - Accordion List
  - Contacts List
  - Sortable List
  - Swipeout List
  - Virtual List
- Link
- Messages
- Message Bar
- Modals
  - Action Sheet
  - Login Screen
  - Picker Modal
  - Popover
  - Popup
- Navigation Bars
  - Navbar
  - Toolbar/Tabbar
  - Sub Navbar
- 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) and closePicker property to close it