Actionsheet
A specific type of modal pop-up triggered by user action, presenting a set of two or more options relevant to the current context.
Anatomy
1: Button
Optional, single button, usually the property for the button to close the popup or submit content
2: item
Required, copy must not exceed 1 line, recommended maximum of 8 characters
3: Explanatory text
Optional, text should not exceed 2 lines, displayed centered
Here is the description copy
Button
Button
Cancel
3
1
2
Variant/Type
Subject:
No description available
Button
Button
Button
Cancel
Has description text
Button
Button
Button
Cancel
No button, no description text
Button
Button
Button
Item:
default
Button
Selected
Button
Disable
Button
Delete
Delete
Press
Button
Usage scenario
Button
Button
Button
Button
Cancel
Interaction
appear
Slides up from the bottom after performing an action
Click after trigger
Click the corresponding item to trigger the action.
disappear
Typically, it is closed manually: clicking the mask causes the popup to slide down and disappear from the bottom; clicking a button (such as submitting information, closing, or canceling) performs the panel closing action, sliding down and disappearing from the bottom.
Usage
BTC
PEPE
SOL
USDT
MX
ETH
USDC
Cancel
Do
BTC
PEPE
SOL
USDT
MX
ETH
USDC
Cancel
Don't
It is not recommended to provide too many action items in the action panel. If too many items cause vertical scrolling on small-screen phones, the user experience will be compromised.
BTC
USDT
ETH
SEO
MX
Cancel
Do
BTC
USDT
ETH
SEO
MX
Cancel
Don't
It is not recommended to use icons to assist with information recognition for items in the action panel.
Action panel, panel, popup, bottom, drawer |