## Drawer
### Semantic Parts
- root（`semantic-mark-root`）: Root element with fixed positioning, z-index control, pointer events, color and other basic styles and layout control for drawer container
- mask（`semantic-mark-mask`）: Mask element with absolute positioning, z-index, background color, pointer events and other mask layer styles and interaction controls
- section（`semantic-mark-section`）: Drawer container element with flex layout, width/height, overflow control, background color, pointer events and other drawer body styles
- header（`semantic-mark-header`）: Header element with flex layout, alignment, padding, font size, line height, bottom border and other header area styles
- body（`semantic-mark-body`）: Body element with flex ratio, minimum size, padding, overflow scroll and other content area display and layout styles
- footer（`semantic-mark-footer`）: Footer element with flex shrink, padding, top border and other bottom operation area styles
- title（`semantic-mark-title`）: Title element with flex ratio, margin, font weight, font size, line height and other title text styles
- extra（`semantic-mark-extra`）: Extra element with flex fixed layout and other additional operation content style controls
- dragger（`semantic-mark-dragger`）: Dragger element used to resize the drawer, with absolute positioning, transparent background, pointer events control, hover state styles, and dragging state styles
- close（`semantic-mark-close`）: Close button element with basic button styling
### Usage Example
```tsx
```
### Abstract DOM Structure
```html