docs: 优化组件示例

XiaoMi · Sep 26, 2024 · 783e435 · 783e435
1 parent e8e4c44
commit 783e435
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 13 deletions.
diff --git a/packages/ui/date-picker/stories/range.stories.tsx b/packages/ui/date-picker/stories/range.stories.tsx
@@ -71,6 +71,7 @@ export const Range = () => {
         />
 
         <h2>周</h2>
+        {/* 如果遇到周范围选择选值问题，尝试手动引入 import 'moment/locale/zh-cn' */}
         <DatePicker
           style={{ width: 480 }}
           type="weekrange"

diff --git a/packages/ui/date-picker/stories/year-month-week.stories.tsx b/packages/ui/date-picker/stories/year-month-week.stories.tsx
@@ -38,6 +38,7 @@ export const YearMonthWeek = () => {
         />
 
         <h2>周</h2>
+        {/* 如果遇到周选择选值问题，尝试手动引入 import 'moment/locale/zh-cn' */}
         <DatePicker
           style={{ width: 238 }}
           type="week"

diff --git a/packages/ui/notification/stories/custom.stories.tsx b/packages/ui/notification/stories/custom.stories.tsx
@@ -3,10 +3,11 @@ import { createNotification } from '../src'
 import Button from '@hi-ui/button'
 
 /**
- * @title notification 属性自定义
+ * @title notification 属性配置
+ * @desc 支持配置 container 和 zIndex
  */
 export const Custom = () => {
-  const [container, setContainer] = useState<HTMLElement | undefined>()
+  const [container, setContainer] = useState<HTMLElement>()
 
   const notification = useMemo(
     () =>
@@ -20,33 +21,41 @@ export const Custom = () => {
   return (
     <>
       <h1>Custom</h1>
+
       <div
         ref={(e) => {
-          setContainer(e)
+          e && setContainer(e)
         }}
-        id="ddd"
+        className="notification-custom__wrap"
         style={{
-          width: 400,
-          height: 300,
-          background: 'rgb(245, 247, 250)',
+          width: '100%',
+          minWidth: 660,
+          height: 420,
+          marginBottom: 20,
+          background: '#f5f7fa',
+          boxShadow: '1px 2px 8px #ddd',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
 
-          // Need add it
+          // Need add for it
           position: 'relative',
           overflow: 'hidden',
+          zIndex: 0,
         }}
-      ></div>
-
-      <div className="notification-custom__wrap">
+      >
         <Button
+          type="primary"
           onClick={() => {
             notification.open({
+              size: 'sm',
               title: '数据备份通知',
               content:
-                '各位同学请注意，将于2019.08.10 00:00:00 -08:00：00 期间进行系统服务器升级维护，请做好数据备份工作，以防丢失。带来不便，敬请谅解！',
+                '各位同学请注意，将于2019.08.10 00:00:00 -08:00：00 期间进行系统服务器升级维护！',
             })
           }}
         >
-          Notice
+          Open
         </Button>
       </div>
     </>