Drop List
Drop lists allow users to select one option from a popover menu.
| Class | Type | |
|---|---|---|
drop
|
Drop List | A class representing a drop list |
Components
Drop Lists consist of four components:
| Class | Type | |
|---|---|---|
drop-wrapper
|
Wrapper | |
drop-section
|
Section | |
drop-list
|
List | |
drop-list-item
|
List item |
Alignment
In the Appwrite console, we use three alignments:
| Class | Type | |
|---|---|---|
| - | Block Start + Inline Start | |
is-block-end
|
Block End | |
is-inline-end
|
Inline End |
Arrow Placement
Use the classes below to control the arrow placement of the drop list:
| Class | Type | |
|---|---|---|
| - | Start | |
is-arrow-center
|
Center | |
is-arrow-end
|
End | |
is-no-arrow
|
No Arrow |
Drop List with Checkboxes
In the Appwrite console, drop list can contain checkboxes:
Item 1
Item 2
Best Practice
We recommend using icons in cases where they have strong universal meaning and aid in the recognition of an action.
Do
Use icons only if they help the user understand the action.
Don't
To avoid confusion, do not use icons if you can’t think of a unique icon for each action.