# harmonyXSlidePanel

**Repository Path**: StephenTom/harmony-xslide-panel

## Basic Information

- **Project Name**: harmonyXSlidePanel
- **Description**: 提供简单的slider panel效果的轻量小组件。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-24
- **Last Updated**: 2025-04-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# harmonyXSlidePanel

#### 介绍
简单的slider panel效果的轻量小组件


#### 安装教程

ohpm install @hong/harmonyxslidepanel

#### 使用说明

```
import { XSlidePanel } from '@hong/harmonyxslidepanel'
import { NormalNavBarView } from '../NormalNavBarView/NormalNavBarView'

@Entry
@Component
struct XSlidePanelPage {
	build() {
		Column() {
			// 顶部导航栏
			NormalNavBarView({ title: 'XSlidePanelPage' })

			// panel
			XSlidePanel({
				minHeight: 300,
				maxHeight: 500,
				contentBuilder: () => {
					this.builderContentView()
				},
				panelContentBuilder: () => {
					this.builderPanelContentView()
				}
			})
		}
		.width('100%')
		.height('100%')
		.backgroundColor(0xfff3f3f3)
	}

	@Builder
	builderContentView() {
		Column({space: 20}) {
			Text('底部内容1')
				.fontSize(22)

			Text('底部内容2')
				.fontSize(22)

			Text('底部内容3')
				.fontSize(22)

			Text('底部内容4')
				.fontSize(22)
		}
	}

	@Builder
	builderPanelContentView() {
		Column({space: 10}) {
			Text('panel内容组件1')
				.fontSize(22)

			Text('panel内容组件2')
				.fontSize(22)

			Text('panel内容组件3')
				.fontSize(22)

			Text('panel内容组件4')
				.fontSize(22)

		}
	}
}
```