# harmonyStylesDialog

**Repository Path**: StephenTom/harmony-styles-dialog

## Basic Information

- **Project Name**: harmonyStylesDialog
- **Description**: 发布初始版本，可以根据XDialogStyleType枚举【ALERT, SHEET】显示alert样式或者sheet样式的弹窗。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-07-30
- **Last Updated**: 2025-03-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# harmonyStylesDialog

#### 介绍
    发布初始版本，可以根据XDialogStyleType枚举【ALERT, SHEET】显示alert样式或者sheet样式的弹窗。支持API 12


#### 安装教程
    1. ohpm install @hong/harmonystylesdialog

#### 属性说明
```typescript
interface XDialogTheme {
  // 蒙版颜色
  maskColor?: ResourceColor
  // 动画时长
  duration?: number
  // 是否点击 mask 消失
  hideOnTouchMask?: boolean
  // 点击系统返回时，是否消失
  hideOnTouchSystemBack?: boolean
}
```

#### 使用说明

1. 初始化 XDialog
````typescript
windowStage.loadContent(INDEX_URL, (err) => {
  if (err.code) {
    hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
    return;
  } 
   
  // 初始化 xDialog
  XDialog.setUIContext(windowStage.getMainWindowSync().getUIContext())
		 
  hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
});
````

2. 显示 Alert
````typescript
XDialog.show({ 
  type: XDialogStyleType.ALERT,
  builder: wrapBuilder(xAlert),
  theme: {
    hideOnTouchSystemBack: false,
  },
  extras: {
    closeDialog: () => {
      console.log('关闭 dialog 回调')
    } 
  },
})
````

3. 显示 Sheet
````typescript
XDialog.show({
  type: XDialogStyleType.SHEET,
  builder: wrapBuilder(xSheet),
  theme: {
    hideOnTouchMask: false,
    hideOnTouchSystemBack: false,
  },
  extras: {
    closeDialog: () => {
      console.log('关闭 dialog 回调')
    }
  },
})
````

4. 关于 xAlert 以及 xSheet的Builder
````typescript
import { XDialogExtras } from './xStylesDialog/XDialogTheme'

@Builder
function xAlert(params: XDialogExtras) {
  Column({ space: 24 }) {
    Text('Dialog 测试 Alert')
      .margin({ top: 24 })

    Row() {
      Button({ stateEffect: false }) {
        Text('不同意')
          .fontColor(Color.Blue)
          .fontSize(16)
      }
      .backgroundColor(Color.White)
      .onClick(() => {
          params.closeDialog!()
      })
    }
    .width('90%')
    .justifyContent(FlexAlign.Center)
  }
  .width('90%')
  .height(250)
  .backgroundColor(Color.White)
  .borderRadius(16)
}

@Builder
function xSheet(params: XDialogExtras) {
  Column({ space: 24 }) {
    Row() { Button({ stateEffect: false }) {
        Image($r('app.media.icon_close'))
          .width(48)
          .height(48)
      }
      .backgroundColor(Color.White)
      .onClick(() => {
         params.closeDialog!()
      })
    }
    .width('100%')
    .justifyContent(FlexAlign.End)
    .margin({ top: 24, right: 24 })

    Divider()

    Text('Dialog 测试 Sheet')
      .margin({ top: 24 })
  }
  .width('100%')
  .height('60%')
  .backgroundColor(Color.White)
  .borderRadius({ topLeft: 16, topRight: 16 })
}

export { xAlert, xSheet, }
````

### alert图样:

![img.png](preview/alert.png)

### sheet图样:
![img.png](preview/sheet.png)