Introduction

The fs-drawer component is used to display a drawer that slides out from the side of the page. It supports left and right positions, menus, titles, close buttons, slot content, and more. It is suitable for navigation, function menus, content display, and other scenarios.

Usage

Import it locally by configuring it in the index.json of the page or component where it is needed:

"usingComponents": {
  "fs-drawer": "ava-ui/fxui/fs-drawer/index"
}

Code Demo

1. Basic Usage

API

Properties

Property	Description	Type	Options/Format	Default
show	Whether to display the drawer	boolean	true/false	false
position	Drawer position	string	left/right	left
title	Drawer title	string	—	''
menu	Menu items	array	[{icon, text, showArrow}]	[]
showClose	Display close button	boolean	true/false	false
width	Drawer width	string	For example, '355px'	90% of the maximum screen width
extStyle	External style	string	—	''

Slot

Name	Description
Default	Drawer content area

Events

Event	Description	Callback Parameters
close	Close the drawer	event
menuClick	Click a menu item

Design Notes

• Supports sliding out from the left or right side, with configurable border radius, shadow, and width.
• Menu items support icon plus text, showArrow controls whether to display an arrow, and slot supports custom content.
• The close button is optional, and menu clicks provide highlighted feedback.
• All variables use var.wxss for a consistent style.

打开预览