hptdialog

Введение

hptdialog — это минималистичная библиотека для отображения диалоговых окон, основанная на пользовательском диалоговом окне CustomDialog. Она упрощает вызовы и помогает разработчикам быстро создавать пользовательские диалоговые окна. В настоящее время включает hptdialog и hptBottomSheet.

Установка

npm install @gancao/hptdialog

Описание интерфейсов и параметров

• hptdialog

Интерфейсы

Свойства кнопки диалогового окна (DialogButton свойства)| Свойство | Тип | Описание |

|------------|-------------------------------------------|------------------------------------| | name | string | Текстовое имя кнопки | | style? | DialogButtonStyle | Стиль кнопки, опционально | | onClick? | (controller?: DialogController) => void | Обратный вызов при нажатии кнопки, может принимать опциональный параметр типа DialogController, опционально |

Свойства стиля кнопки диалогового окна (DialogButtonStyle)

• hptBottomSheet

Интерфейс| Метод | Параметры | Описание |

|-------------------------|-----------------------------------------------------------------------------------------------------------------------------|----------| | HPTBottomSheetUtil.show | component: Object текущей this страницы
info: BottomSheetInfo содержимое диалогового окна, включая title, contentList и т.д.
config?: BottomSheetConfig стили диалогового окна | Отображение нижнего диалогового окна |#### BottomSheetInfo свойства (свойства содержимого диалогового окна)| Атрибут | Тип | Описание | |-------------------------------|--------------------------------|--------------------------------------------------------------------| | title | ResourceStr | Заголовок нижнего всплывающего окна | | contentList | ResourceStr[] | Содержимое, отображаемое в виде списка, по умолчанию не предоставляется | | selectedIndex | number | Индекс выбранной строки по умолчанию | | customContent | CustomBuilder | Пользовательское содержимое, используемое для перезаписи поля contentList | | cancel | ResourceStr | Текст кнопки "Отмена", по умолчанию "Отмена" | | disableShowCancel | boolean | Запретить отображение кнопки "Отмена", по умолчанию не запрещено | | cancelOnClick | (controller? ) => void | Обратный вызов при нажатии на кнопку "Отмена", принимает необязательный параметр DialogController для управления логикой закрытия всплывающего окна | | confirmOnClick | (index, controller? ) => void | Обратный вызов при выборе строки, принимает индекс строки index и необязательный параметр DialogController для выполнения соответствующих действий и управления логикой закрытия всплывающего окна || disableClickButtonAutoClose | boolean | Запретить автоматическое закрытие всплывающего окна при нажатии на кнопку, по умолчанию автоматическое закрытие включено | | cancelCallBack | () => void | Обратный вызов при отмене всплывающего окна, связан с нажатием на кнопку "Отмена" или другими действиями отмены |

BottomSheetConfig свойства (описывают стиль всплывающего окна)| Свойство | Тип | Описание |

|-------------------------------|--------------------------------|------------------------| | backgroundColor | ResourceColor | Цвет фона всплывающего окна | | borderRadius | number | Радиус закругления нижней части всплывающего окна | | maxListHeight | number | Максимальная высота всплывающего окна в режиме списка | | itemHeight | number | Высота каждого элемента списка | | itemBackgroundColor | ResourceColor | Цвет фона элемента списка | | itemSelectedBackgroundColor | ResourceColor | Цвет фона выбранного элемента списка | | dividerColor | ResourceColor | Цвет разделительной линии | | dividerHeight | Length | Высота разделительной линии | | cancelSpace | Length | Расстояние между кнопкой отмены и другими элементами | | cancelHeight | Length | Высота кнопки отмены | | titleAlign | TextAlign | Выравнивание заголовка | | titlePadding | Padding | Внутренние отступы заголовка | | titleFontSize | number или string или Resource | Размер шрифта заголовка | | titleFontColor | ResourceColor | Цвет шрифта заголовка | | titleFontWeight | number или FontWeight или string | Толщина шрифта заголовка | | fontSize | number или string или Resource | Размер шрифта текста | | fontColor | ResourceColor | Цвет текста | | fontWeight | number или FontWeight или string | Толщина шрифта текста |# Изменение глобальных значений по умолчанию

HPTDialogUtil.defaultConfig.titlePadding = { bottom: 24 }
HPTDialogUtil.defaultConfig.fontSize = $r("app.float.h3")
HPTDialogUtil.defaultConfig.fontColor = $r("app.color.mainText")
HPTDialogUtil.defaultConfig.messageFontSize = 12
HPTDialogUtil.defaultConfig.messageFontColor = Color.Red
```// BottomSheet
HPTBottomSheetUtil.defaultConfig.itemSelectedBackgroundColor = $r("app.color.primary")

Примеры использования

Пример использования HPTDialog

HPTDialogUtil.show(this, {
  title: 'Подтвердите выход из системы?',
  cancel: "Отмена",
  message: "Выход из системы, описание xxxx",
  confirm: "Подтвердить выход",
  confirmOnClick: () => {
    // Выполнить логику выхода из системы
  }
})

Пользовательские настройки

HPTDialogUtil.show(this, {
  title: 'Подтвердите выход из системы?',
  cancel: "Отмена",
  confirm: "Подтвердить выход",
  messageContent: () => this.buildItem("Выход из системы, описание xxxx", () => {

  }),
  confirmOnClick: () => {

  }
})

HPTBottomSheet

HPTBottomSheetUtil.show(this, {
  contentList: ['Заварить', 'Не заваривать', 'Выбирать каждый раз'],
  disableShowTitle: true
})

Внимание ⚠️

this должен быть текущим компонентом @Component. Если вызов диалогового окна происходит в логической части кода, необходимо передать текущий this компонента в логическую функцию. В противном случае диалоговое окно может не отображаться корректно.# Структура проекта

hptdialog
├── src
│   ├── main
│   │   ├── ets
│   │   │   └── components
│   │   │       └── dialog
│   │   │           └── Dialog.ets
│   │   │           └── Config.ets
│   │   │       └── bottomsheet
│   │   │           └── BottomSheet.ets
│   │   │           └── Config.ets
│   │   │       └── DialogController.ets
│   │   └── resources
└── 
```# Адрес проекта
[Репозиторий](https://gitee.com/iJianbao/gancao-hptdialog.git)