From ce6dd58c84d323b4795bc0d089adb2d1daa2e423 Mon Sep 17 00:00:00 2001
From: XboxYan <yanwenbin1991@live.com>
Date: Fri, 7 Apr 2023 23:55:29 +0800
Subject: [PATCH] update: doc

---
 docs/components/dialog.md     | 50 ++++++++++++++++++++++++++++++++++-
 docs/components/popconfirm.md |  2 +-
 2 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/docs/components/dialog.md b/docs/components/dialog.md
index 30dd986..7ce6e89 100644
--- a/docs/components/dialog.md
+++ b/docs/components/dialog.md
@@ -41,7 +41,7 @@ import './index.css'
 
 ## dialog[method]
 
-与`xy-message`类似，`dialog`也提供了几个静态`API`方法，其实就是图标不同。
+与[message](./message)类似，`dialog`也提供了几个静态`API`方法，其实就是图标不同。
 
 * `dialog.alert(config)`
 
@@ -204,6 +204,54 @@ dialog.loading = true;
 dialog.setAttribute('loading',true);
 ```
 
+## 自定义样式`::part(dialog)`，`::part(title)`，`::part(footer)`
+
+由于内部结构比较多，这里暴露了弹窗、标题和页脚用来自定义样式
+
+内部结构如下（可查看控制台）：
+
+```html
+<xy-dialog>
+  # shadow-root
+  <dialog part="dialog">
+    <h4 part="title">
+    <slot></slot>
+    <slot name="footer" part="footer">
+```
+
+比如下面是一个标题和按钮居中的弹窗
+
+<style scoped>
+.custom-dialog::part(dialog){
+    width: 400px;
+}
+.custom-dialog::part(title){
+    text-align: center
+}
+.custom-dialog::part(footer){
+    justify-content: center
+}
+</style>
+
+<xy-dialog class="custom-dialog" id="dialog03" title="标题" >
+    这是一个自定义样式的弹窗
+</xy-dialog>
+<div class="wrap">
+<xy-button type="primary" onclick="document.getElementById('dialog03').open = true">自定义样式的弹窗</xy-button>
+</div>
+
+```css
+xy-dialog::part(dialog){
+    width: 400px;
+}
+xy-dialog::part(title){
+    text-align: center
+}
+xy-dialog::part(footer){
+    justify-content: center
+}
+```
+
 ## 事件`event`
 
 ### onsubmit
diff --git a/docs/components/popconfirm.md b/docs/components/popconfirm.md
index 0a7ae15..61eabbf 100644
--- a/docs/components/popconfirm.md
+++ b/docs/components/popconfirm.md
@@ -125,7 +125,7 @@ popconfirm.setAttribute('title','确认要删除吗？');
 
 由于内部结构比较多，这里仅暴露了标题和页脚用来自定义样式
 
- 内部结构如下（可查看控制台）：
+内部结构如下（可查看控制台）：
 
 ```html
 <xy-popconfirm>