Pop Over Filter

PRO

You can edit 8 Components for free. Get premium for unlimited access.

Choose between Figma, SwiftUI, React Native or Jetpack Compose Documentation.

Figma

The Pop Over Filter component is used to place filter options in a pop over.

1. Reference

This component inherits props from the Pop Over Filter.

Prop
Type
Default
state
default
expand
default

2. State

You can edit the state with the default or expand parameter

Image 2.1 : State default

Image 2.2 : State expand

SwiftUI

The DLPopOverFilter component is used to place filter options in a pop over.

1. Reference

This component inherits props from the Pop Over Filter.

Prop
Type
Default
input
.title
.leftButtonTitle
.rightButtonTitle

-

state
.normal
.expand
.normal
options

?

-

dismissAction

-

-

leftButtonAction

-

-

rightButtonAction

-

-

2. Pop Over Filter

The message component is used to place filter options in a pop over.

Activity type

Art and culture

Entertainment

Food and Drink

Show all

Button
Button

Activity type

Art and culture

Entertainment

Food and Drink

Sports

Tours

Sightseeing

Wellness

Hide activity types

Button
Button
@State var options: [PopOverFilterOption] = [
PopOverFilterOption(title: "Art and culture"),
PopOverFilterOption(title: "Entertainment"),
PopOverFilterOption(title: "Food and Drink"),
PopOverFilterOption(title: "Sports"),
PopOverFilterOption(title: "Tours"),
PopOverFilterOption(title: "Sightseeing"),
PopOverFilterOption(title: "Wellness")
]

DLPopOverFilter(
state: .normal,
input: DLPopOverFilterInput(
title: "Activity type",
leftButtonTitle: "Button",
rightButtonTitle: "Button"
),
options: options
) {
} leftButtonAction: {
} rightButtonAction: { selectedOptions
in
print(selectedOptions)
}

DLPopOverFilter(
state: .expand,
input: DLPopOverFilterInput(
title: "Activity type",
leftButtonTitle: "Button",
rightButtonTitle: "Button"
),
options: options
) {
} leftButtonAction: {
} rightButtonAction: { selectedOptions
in
print(selectedOptions)
}

Jetpack Compose

This component is on the roadmap and in Progress This means that it is currently being edited and will be published in the next few weeks/months. Check back often to stay informed about the latest updates.

🚧

React Native

This component is on the roadmap and in Progress This means that it is currently being edited and will be published in the next few weeks/months. Check back often to stay informed about the latest updates.

🚧

Discover more content

You have questions or need help?

E-Mail

You want to try?

Test for free

Save time and money?

Get Pro Version