From 98b5c6869a65499d0562962767e1dcbff88ab90e Mon Sep 17 00:00:00 2001 From: Pilotager Date: Wed, 25 Dec 2024 13:03:19 +0800 Subject: [PATCH] =?UTF-8?q?doc:=20=E6=B7=BB=E5=8A=A0=E5=B1=9E=E6=80=A7?= =?UTF-8?q?=E6=96=B0=E7=89=B9=E6=80=A7=E7=89=88=E6=9C=AC=E5=8F=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/core/src/dialog/README.md | 232 ++++++++++++++--------------- packages/core/src/notify/README.md | 83 ++++++----- 2 files changed, 155 insertions(+), 160 deletions(-) diff --git a/packages/core/src/dialog/README.md b/packages/core/src/dialog/README.md index 1ff2b13c..0d5758ab 100644 --- a/packages/core/src/dialog/README.md +++ b/packages/core/src/dialog/README.md @@ -18,7 +18,9 @@ function ImperativeDialog() { clickable bordered isLink - onClick={() => Dialog.alert({ title: "标题", message: "代码是写出来给人看的，附带能在机器上运行" })} + onClick={() => + Dialog.alert({ title: "标题", message: "代码是写出来给人看的，附带能在机器上运行" }) + } /> ) @@ -37,7 +39,8 @@ function ImperativeDialog() { messageAlign="left" confirm="ok" cancel="cancel" - onConfirm={() => console.log("confirm")} onCancel={() => console.log("cancel")} + onConfirm={() => console.log("confirm")} + onCancel={() => console.log("cancel")} /> ``` @@ -46,13 +49,7 @@ function TextDialog() { const [open, setOpen] = useState(false) return ( <> - setOpen(true)} - /> + setOpen(true)} /> 标题 代码是写出来给人看的，附带能在机器上运行 @@ -71,21 +68,17 @@ function TextDialog() { ### 消息提示 用于提示一些消息，只包含一个确认按钮。 + ```ts Dialog.alert("生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。") ``` + ```tsx function BasicDialog() { const [open, setOpen] = useState(false) return ( <> - setOpen(true)} - /> + setOpen(true)} /> 标题 代码是写出来给人看的，附带能在机器上运行 @@ -101,21 +94,17 @@ function BasicDialog() { ### 消息确认 用于确认消息，包含取消和确认按钮。 + ```ts Dialog.confirm({ title: "标题", message: "代码是写出来给人看的，附带能在机器上运行" }) ``` + ```tsx function ConfirmDialog() { const [open, setOpen] = useState(false) return ( <> - setOpen(true)} - /> + setOpen(true)} /> 标题 代码是写出来给人看的，附带能在机器上运行 @@ -130,27 +119,25 @@ function ConfirmDialog() { ``` ### 圆角按钮风格 + 设置 `theme` 为 `rounded` 可以展示圆角按钮风格的弹窗 + ```ts -Dialog.confirm({ - theme: "rounded", - title: "标题", - message: "代码是写出来给人看的，附带能在机器上运行" +Dialog.confirm({ + theme: "rounded", + title: "标题", + message: "代码是写出来给人看的，附带能在机器上运行", }) ``` + 将 `actions.variant ` 选项设置为 `rounded` 可以展示圆角按钮风格的弹窗。 + ```tsx function RoundedDialog() { const [open, setOpen] = useState(false) return ( <> - setOpen(true)} - /> + setOpen(true)} /> 标题 代码是写出来给人看的，附带能在机器上运行 @@ -165,6 +152,7 @@ function RoundedDialog() { ``` ### 异步关闭 + ```tsx function AsyncCloseDialog() { return ( @@ -174,24 +162,26 @@ function AsyncCloseDialog() { clickable bordered isLink - onClick={() => Dialog.confirm({ - title: "标题", - message: "如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。", - async onBeforeClose(action) { - return new Promise((resolve) => { - setTimeout(() => { - // action !== 'confirm' 拦截取消操作 - resolve(action === "confirm"); - }, 1000); - }); - }, - onCancel() { - console.log("cancel") - }, - onConfirm() { - console.log("confirm") - }, - })} + onClick={() => + Dialog.confirm({ + title: "标题", + message: "如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。", + async onBeforeClose(action) { + return new Promise((resolve) => { + setTimeout(() => { + // action !== 'confirm' 拦截取消操作 + resolve(action === "confirm") + }, 1000) + }) + }, + onCancel() { + console.log("cancel") + }, + onConfirm() { + console.log("confirm") + }, + }) + } /> ) @@ -202,68 +192,68 @@ function AsyncCloseDialog() { ### Dialog Props -| 参数 | 说明 | 类型 | 默认值 | -|-------------|----------|-------------|-----| -| defaultOpen | 默认是否显示弹窗 | _boolean_ | - | -| open | 是否显示弹窗 | _boolean_ | - | -| children | 组件内容 | _ReactNode_ | - | -| backdrop | 遮罩层相关配置 | _boolean \| Omit_ | - | -| title | 标题 | _ReactNode_ | - | -| message | 文本内容，支持通过 `\n` 换行 | _ReactNode_ | - | -| messageAlign| 内容对齐方式，可选值为 `left` `right` | _string_ | `center` | -| confirm | 确认按钮 | _string \| ButtonProps_ | - | -| cancel | 取消按钮 | _string \| ButtonProps_ | - | +| 参数 | 说明 | 类型 | 默认值 | +| ----------------------------- | ------------------------------------- | --------------------------------------------- | -------- | +| defaultOpen | 默认是否显示弹窗 | _boolean_ | - | +| open | 是否显示弹窗 | _boolean_ | - | +| children | 组件内容 | _ReactNode_ | - | +| backdrop `v0.6.0-alpha.0` | 遮罩层相关配置 | _boolean \| Omit_ | - | +| title `v0.6.0-alpha.0` | 标题 | _ReactNode_ | - | +| message `v0.6.0-alpha.0` | 文本内容，支持通过 `\n` 换行 | _ReactNode_ | - | +| messageAlign `v0.6.0-alpha.0` | 内容对齐方式，可选值为 `left` `right` | _string_ | `center` | +| confirm `v0.6.0-alpha.0` | 确认按钮 | _string \| ButtonProps_ | - | +| cancel `v0.6.0-alpha.0` | 取消按钮 | _string \| ButtonProps_ | - | ### Dialog Event -| 事件名 | 说明 | 回调参数 | -| ------ | -------------- | ------------------- | -| onConfirm | 点击确认时触发 | - | -| onCancel | 点击取消时触发 | - | +| 事件名 | 说明 | 回调参数 | +| --------- | -------------- | -------- | +| onConfirm | 点击确认时触发 | - | +| onCancel | 点击取消时触发 | - | ### Dialog.Header Props -| 参数 | 说明 | 类型 | 默认值 | -|----------|------|-------------|-----| -| children | 标题内容 | _ReactNode_ | - | +| 参数 | 说明 | 类型 | 默认值 | +| -------- | -------- | ----------- | ------ | +| children | 标题内容 | _ReactNode_ | - | ### Dialog.Content Props -| 参数 | 说明 | 类型 | 默认值 | -|----------|----------------------------|-------------|----------| +| 参数 | 说明 | 类型 | 默认值 | +| -------- | ------------------------------------- | ----------- | -------- | | align | 文本对齐方式，可选值为 `left` `right` | _string_ | `center` | -| children | 文本内容 | _ReactNode_ | - | +| children | 文本内容 | _ReactNode_ | - | ### Dialog.Actions Props -| 参数 | 说明 | 类型 | 默认值 | -|----------|---------------------|-------------|-----------| +| 参数 | 说明 | 类型 | 默认值 | +| -------- | ---------------------------- | ----------- | --------- | | variant | 样式风格，可选值为 `rounded` | _string_ | `default` | -| children | 按钮内容 | _ReactNode_ | - | +| children | 按钮内容 | _ReactNode_ | - | ### Dialog Options -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| selector | 自定义节点选择器 | _string_ | `toast` | -| className | 自定义类名 | _string_ | - | -| style | 自定义样式 | _CSSProperties_ | - | -| title | 标题 | _ReactNode_ | - | -| message | 文本内容，支持通过 `\n` 换行 | _ReactNode_ | - | -| messageAlign | 内容对齐方式，可选值为 `left` `right` | _string_ | `center` | -| backdrop | 遮罩层相关配置 | _boolean \| Omit_ | - | -| confirm | 确认按钮 | _string \| ButtonProps_ | - | -| cancel | 取消按钮 | _string \| ButtonProps_ | - | -| onConfirm | 确认事件 | _() => void_ | - | -| onCancel | 取消事件 | _() => void_ | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------------------------- | ------------------------------------- | --------------------------------------------- | -------- | +| selector | 自定义节点选择器 | _string_ | `toast` | +| className | 自定义类名 | _string_ | - | +| style | 自定义样式 | _CSSProperties_ | - | +| title | 标题 | _ReactNode_ | - | +| message | 文本内容，支持通过 `\n` 换行 | _ReactNode_ | - | +| messageAlign | 内容对齐方式，可选值为 `left` `right` | _string_ | `center` | +| backdrop `v0.6.0-alpha.0` | 遮罩层相关配置 | _boolean \| Omit_ | - | +| confirm | 确认按钮 | _string \| ButtonProps_ | - | +| cancel | 取消按钮 | _string \| ButtonProps_ | - | +| onConfirm | 确认事件 | _() => void_ | - | +| onCancel | 取消事件 | _() => void_ | - | ### Dialog Methods -| 方法名 | 参数 | 返回值 | 介绍 | -| --- | --- | --- | --- | -| Dialog.open | _options \| message_ | - | 展示弹窗 | -| Dialog.alert | _options \| message_ | - | 展示消息提示弹窗 | -| Dialog.confirm | _options \| message_ | - | 展示消息确认弹窗 | +| 方法名 | 参数 | 返回值 | 介绍 | +| -------------- | -------------------- | ------ | ---------------- | +| Dialog.open | _options \| message_ | - | 展示弹窗 | +| Dialog.alert | _options \| message_ | - | 展示消息提示弹窗 | +| Dialog.confirm | _options \| message_ | - | 展示消息确认弹窗 | ## 主题定制 @@ -271,30 +261,30 @@ function AsyncCloseDialog() { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。 -| 名称 | 默认值 | 描述 | -|--------------------------------------------------|---------------------------------------------------------|-----| -| --dialog-width | _320px * $hd_ | - | -| --dialog-small-screen-width | _90%_ | - | -| --dialog-font-size | _var(--font-size-lg)_ | - | -| --dialog-transition | _var(--animation-duration-base)_ | - | -| --dialog-border-radius | _16px * $hd_ | - | -| --dialog-background-color | _var(--white)_ | - | -| --dialog-header-font-weight | _var(--font-weight-bold)_ | - | -| --dialog-header-line-height | _24px * $hd_ | - | -| --dialog-header-padding-top | _26px * $hd_ | - | -| --dialog-header-isolated-padding | _var(--padding-lg) 0_ | - | -| --dialog-message-padding | _26px * $hd var(--padding-lg)_ | - | -| --dialog-message-font-size | _var(--font-size-md)_ | - | -| --dialog-message-line-height | _var(--line-height-md)_ | - | -| --dialog-message-max-height | _60vh_ | - | -| --dialog-has-title-message-color | _var(--gray-7)_ | - | -| --dialog-has-title-message-padding-top | _var(--padding-xs)_ | - | -| --dialog-button-height | _48px * $hd_ | - | -| --dialog-confirm-button-color | _var(--red)_ | - | -| --dialog-footer-rounded-padding | _var(--padding-xs) var(--padding-lg) var(--padding-md)_ | - | -| --dialog-rounded-button-active-color | _var(--white)_ | - | -| --dialog-rounded-button-font-size | _var(--font-size-md)_ | - | -| --dialog-rounded-button-height | _36px * $hd_ | - | -| --dialog-rounded-button-border-radius | _var(--border-radius-max)_ | - | -| --dialog-rounded-confirm-button-background-color | _var(--gradient-red)_ | - | -| --dialog-rounded-cancel-button-background-color | _var(--gradient-orange)_ | - | +| 名称 | 默认值 | 描述 | +| ------------------------------------------------ | ------------------------------------------------------- | ---- | +| --dialog-width | _320px \* $hd_ | - | +| --dialog-small-screen-width | _90%_ | - | +| --dialog-font-size | _var(--font-size-lg)_ | - | +| --dialog-transition | _var(--animation-duration-base)_ | - | +| --dialog-border-radius | _16px \* $hd_ | - | +| --dialog-background-color | _var(--white)_ | - | +| --dialog-header-font-weight | _var(--font-weight-bold)_ | - | +| --dialog-header-line-height | _24px \* $hd_ | - | +| --dialog-header-padding-top | _26px \* $hd_ | - | +| --dialog-header-isolated-padding | _var(--padding-lg) 0_ | - | +| --dialog-message-padding | _26px \* $hd var(--padding-lg)_ | - | +| --dialog-message-font-size | _var(--font-size-md)_ | - | +| --dialog-message-line-height | _var(--line-height-md)_ | - | +| --dialog-message-max-height | _60vh_ | - | +| --dialog-has-title-message-color | _var(--gray-7)_ | - | +| --dialog-has-title-message-padding-top | _var(--padding-xs)_ | - | +| --dialog-button-height | _48px \* $hd_ | - | +| --dialog-confirm-button-color | _var(--red)_ | - | +| --dialog-footer-rounded-padding | _var(--padding-xs) var(--padding-lg) var(--padding-md)_ | - | +| --dialog-rounded-button-active-color | _var(--white)_ | - | +| --dialog-rounded-button-font-size | _var(--font-size-md)_ | - | +| --dialog-rounded-button-height | _36px \* $hd_ | - | +| --dialog-rounded-button-border-radius | _var(--border-radius-max)_ | - | +| --dialog-rounded-confirm-button-background-color | _var(--gradient-red)_ | - | +| --dialog-rounded-cancel-button-background-color | _var(--gradient-orange)_ | - | diff --git a/packages/core/src/notify/README.md b/packages/core/src/notify/README.md index 48516d56..0148bbed 100644 --- a/packages/core/src/notify/README.md +++ b/packages/core/src/notify/README.md @@ -15,18 +15,14 @@ function ImperativeNotify() { return ( <> {/* */} - Notify.open("通知内容")} - /> + Notify.open("通知内容")} /> ) } ``` ### 组件调用 + ```tsx import { Cell, Notify } from "@taroify/core" @@ -35,7 +31,9 @@ function BasicNotify() { return ( <> - 通知内容 + + 通知内容 + setOpen(true)} /> ) @@ -45,23 +43,28 @@ function BasicNotify() { ## 代码演示 ### 基础用法 + ```ts Notify.open("通知内容") ``` + ```tsx -通知内容 + + 通知内容 + ``` ### 通知颜色 预设 `primary`、`success`、`warning`、`danger` 四种通知颜色，默认为 `danger`。 + ```ts Notify.open({ type: "primary", message: "通知内容" }) Notify.open({ type: "success", message: "通知内容" }) Notify.open({ type: "danger", message: "通知内容" }) Notify.open({ type: "warning", message: "通知内容" }) - ``` + ```tsx 通知内容 通知内容 @@ -72,6 +75,7 @@ Notify.open({ type: "warning", message: "通知内容" }) ### 自定义通知 自定义消息通知的颜色和展示时长。 + ```ts Notify.open({ color: "#ad0000", @@ -83,6 +87,7 @@ Notify.open({ message: "自定义时长", }) ``` + ```tsx 自定义颜色 自定义时长 @@ -92,30 +97,30 @@ Notify.open({ ### Props -| 参数 | 说明 | 类型 | 默认值 | -|-------------|---------------------------------------|----------------------------|----------| -| className | 自定义类名 | _string_ | - | -| style | 组件样式 | _CSSProperties_ | - | -| defaultOpen | 默认是否显示消息提示 | _boolean_ | - | -| open | 是否显示消息提示 | _boolean_ | - | -| type | 类型，可选值为 `primary` `success` `warning` | _string_ | `danger` | -| color | 字体颜色 | _string_ | - | -| background | 背景颜色 | _string_ | - | -| duration | 展示时长(ms)，值为 0 时，notify 不会消失 | _number_ | `3000` | -| children | 展示文案，支持通过`\n`换行 | _ReactNode_ | - | -| onClose | 关闭时的回调函数 | _(open : boolean) => void_ | - | +| 参数 | 说明 | 类型 | 默认值 | +| --------------------------- | -------------------------------------------- | -------------------------- | -------- | +| className | 自定义类名 | _string_ | - | +| style | 组件样式 | _CSSProperties_ | - | +| defaultOpen | 默认是否显示消息提示 | _boolean_ | - | +| open | 是否显示消息提示 | _boolean_ | - | +| type | 类型，可选值为 `primary` `success` `warning` | _string_ | `danger` | +| color `v0.6.0-alpha.0` | 字体颜色 | _string_ | - | +| background `v0.6.0-alpha.0` | 背景颜色 | _string_ | - | +| duration | 展示时长(ms)，值为 0 时，notify 不会消失 | _number_ | `3000` | +| children | 展示文案，支持通过`\n`换行 | _ReactNode_ | - | +| onClose | 关闭时的回调函数 | _(open : boolean) => void_ | - | ### Options -| 参数 | 说明 | 类型 | 默认值 | -|-----------|---------------------------------------|----------------------------|----------| -| selector | 自定义节点选择器 | _string_ | `notify` | -| className | 自定义类名 | _string_ | - | -| style | 组件样式 | _CSSProperties_ | - | +| 参数 | 说明 | 类型 | 默认值 | +| --------- | -------------------------------------------- | -------------------------- | -------- | +| selector | 自定义节点选择器 | _string_ | `notify` | +| className | 自定义类名 | _string_ | - | +| style | 组件样式 | _CSSProperties_ | - | | color | 类型，可选值为 `primary` `success` `warning` | _string_ | `danger` | -| duration | 展示时长(ms)，值为 0 时，notify 不会消失 | _number_ | `3000` | -| message | 展示文案，支持通过`\n`换行 | _ReactNode_ | - | -| onClose | 关闭时的回调函数 | _(open : boolean) => void_ | - | +| duration | 展示时长(ms)，值为 0 时，notify 不会消失 | _number_ | `3000` | +| message | 展示文案，支持通过`\n`换行 | _ReactNode_ | - | +| onClose | 关闭时的回调函数 | _(open : boolean) => void_ | - | ## 主题定制 @@ -123,13 +128,13 @@ Notify.open({ 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。 -| 名称 | 默认值 | 描述 | -|-----------------------------------|---------------------------------------|-----| -| --notify-color | _var(--white)_ | - | -| --notify-padding | _var(--padding-xs) var(--padding-md)_ | - | -| --notify-font-size | _var(--font-size-md)_ | - | -| --notify-line-height | _var(--line-height-md)_ | - | -| --notify-primary-background-color | _var(--primary-color)_ | - | -| --notify-success-background-color | _var(--success-color)_ | - | -| --notify-warning-background-color | _var(--warning-color)_ | - | -| --notify-danger-background-color | _var(--danger-color)_ | - | +| 名称 | 默认值 | 描述 | +| --------------------------------- | ------------------------------------- | ---- | +| --notify-color | _var(--white)_ | - | +| --notify-padding | _var(--padding-xs) var(--padding-md)_ | - | +| --notify-font-size | _var(--font-size-md)_ | - | +| --notify-line-height | _var(--line-height-md)_ | - | +| --notify-primary-background-color | _var(--primary-color)_ | - | +| --notify-success-background-color | _var(--success-color)_ | - | +| --notify-warning-background-color | _var(--warning-color)_ | - | +| --notify-danger-background-color | _var(--danger-color)_ | - |