# MaterialDrawer

**Repository Path**: OpenHarmony1/MaterialDrawer

## Basic Information

- **Project Name**: MaterialDrawer
- **Description**: 灵活、易于使用的多合一抽屉库
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-02
- **Last Updated**: 2024-03-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MaterialDrawer

#### 项目介绍
    一个为OpenHarmony工程开发的灵活、易于使用的多抽屉库

#### 项目演示

![输入图片说明](./screenshot/demo_1.gif)
![输入图片说明](./screenshot/demo_2.gif)


##### 基础用法
   ```javascript 
   <element src="../../../../../../../library/src/main/js/components/materialdrawer.hml" name="materialdrawer"></element>
   
   <materialdrawer id="drawerlayout" direction="left">
        <div slot="drawer" class="drawer">
            <text>抽屉菜单</text>
            <button class="button-style" onclick="closeDrawer">关闭抽屉</button>
        </div>

        <div slot="content" class="content">
            <text>显示内容</text>
            <button class="button-style" onclick="openDrawer">打开抽屉</button>
        </div>
   </materialdrawer>
   

   ```   

#### 接口及属性
| **属性**                             | **必填** | **说明**                                                   |
| ------------------------------------ | :------: | --------------------------------------------------------- |
| direction: String               |    否    | 抽屉方向，有四个选项（left,right,top,bottom）,默认left             |
| page-show-rate: Number          |    否    | 抽屉页面显示比例,默认0.65                                 |
| touch-range-rate: Number        |    否    | 抽屉拉出的起始位置比例,默认0.2                             |
| cover-background: String        |    否    | 遮罩层背景颜色，默认#60000000                             |


#### 版权和许可信息

```
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
```