docs(*): update docs

v5zz · Apr 23, 2021 · 68adfc3 · 68adfc3
1 parent 172234b
commit 68adfc3
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 51 deletions.
diff --git a/docs/balloon/demo/alignment.md b/docs/balloon/demo/alignment.md
@@ -2,7 +2,7 @@
 
 - order: 3
 
-位置有十二个方向。
+位置有十二个方向。可以通过设置 `needAdjust` 让气泡被遮盖的情况下，选择合适的位置。
 
 
 :::lang=en-us
@@ -45,46 +45,46 @@ const Content = () => (
 const App = () => (
     <div style={{paddingLeft: 320 }}>
         <div style={{marginLeft: 75}}>
-            <Balloon trigger={topLeft} align="tl" alignEdge triggerType="click" style={{width: 300}}>
+            <Balloon needAdjust trigger={topLeft} align="tl" alignEdge triggerType="click" style={{width: 300}}>
                 <Content/>
             </Balloon>
-            <Balloon trigger={top} align="t" alignEdge triggerType="click" style={{width: 300}}>
+            <Balloon needAdjust trigger={top} align="t" alignEdge triggerType="click" style={{width: 300}}>
                 <Content/>
             </Balloon>
-            <Balloon trigger={topRight} align="tr" alignEdge triggerType="click" style={{width: 300}}>
+            <Balloon needAdjust trigger={topRight} align="tr" alignEdge triggerType="click" style={{width: 300}}>
                 <Content/>
             </Balloon>
         </div>
         <div style={{width: 80, float: 'left'}}>
-            <Balloon trigger={leftTop} align="lt" alignEdge triggerType="click" style={{width: 300}}>
+            <Balloon needAdjust trigger={leftTop} align="lt" alignEdge triggerType="click" style={{width: 300}}>
                 <Content/>
             </Balloon>
-            <Balloon trigger={left} align="l" alignEdge triggerType="click" style={{width: 300}}>
+            <Balloon needAdjust trigger={left} align="l" alignEdge triggerType="click" style={{width: 300}}>
                 <Content/>
             </Balloon>
-            <Balloon trigger={leftBottom} align="lb" alignEdge triggerType="click" style={{width: 300}}>
+            <Balloon needAdjust trigger={leftBottom} align="lb" alignEdge triggerType="click" style={{width: 300}}>
                 <Content/>
             </Balloon>
         </div>
         <div style={{width: 80, marginLeft: 290}}>
-            <Balloon trigger={rightTop} align="rt" alignEdge triggerType="click" style={{width: 300}}>
+            <Balloon needAdjust trigger={rightTop} align="rt" alignEdge triggerType="click" style={{width: 300}}>
                 <Content/>
             </Balloon>
-            <Balloon trigger={right} align="r" alignEdge triggerType="click" style={{width: 300}}>
+            <Balloon needAdjust trigger={right} align="r" alignEdge triggerType="click" style={{width: 300}}>
                 <Content/>
             </Balloon>
-            <Balloon trigger={rightBottom} align="rb" alignEdge triggerType="click" style={{width: 300}}>
+            <Balloon needAdjust trigger={rightBottom} align="rb" alignEdge triggerType="click" style={{width: 300}}>
                 <Content/>
             </Balloon>
         </div>
         <div style={{marginLeft: 80, clear: 'both'}}>
-            <Balloon trigger={bottomLeft} align="bl" alignEdge triggerType="click" style={{width: 300}}>
+            <Balloon needAdjust trigger={bottomLeft} align="bl" alignEdge triggerType="click" style={{width: 300}}>
                 <Content/>
             </Balloon>
-            <Balloon trigger={bottom} align="b" alignEdge triggerType="click" style={{width: 300}}>
+            <Balloon needAdjust trigger={bottom} align="b" alignEdge triggerType="click" style={{width: 300}}>
                 <Content/>
             </Balloon>
-            <Balloon trigger={bottomRight} align="br" alignEdge triggerType="click" style={{width: 300}}>
+            <Balloon needAdjust trigger={bottomRight} align="br" alignEdge triggerType="click" style={{width: 300}}>
                 <Content/>
             </Balloon>
         </div>

diff --git a/docs/balloon/demo/tooltip-dir.md b/docs/balloon/demo/tooltip-dir.md
@@ -0,0 +1,71 @@
+# Tooltip的方位
+
+- order: 7
+
+简化的Balloon, 只能设置align, trigger和children, 触发条件是hover.
+
+:::lang=en-us
+# Tooltip position
+
+- order: 7
+
+Simplified Balloon, which can only set align, trigger and children, and triggered by hovering.
+
+:::
+
+---
+
+````jsx
+import { Button, Balloon } from '@alifd/next';
+
+const Tooltip = Balloon.Tooltip;
+
+const top = <Button style={{margin: '5px'}} id="top" className="btrigger">top</Button>;
+const right = <Button style={{margin: '5px'}}id="right" className="btrigger">right</Button>;
+const bottom = <Button style={{margin: '5px'}} id="bottom" className="btrigger">bottom</Button>;
+const left = <Button style={{margin: '5px'}} id="left" className="btrigger">left</Button>;
+const topLeft = <Button style={{margin: '5px'}} id="topLeft" className="btrigger">top left</Button>;
+const topRight = <Button style={{margin: '5px'}} id="topRight" className="btrigger">top right</Button>;
+const rightTop = <Button style={{margin: '5px'}} id="rightTop" className="btrigger">right top</Button>;
+const rightBottom = <Button style={{margin: '5px'}} id="rightBottom" className="btrigger">right bottom</Button>;
+const bottomLeft = <Button style={{margin: '5px'}} id="bottomLeft" className="btrigger">bottom left</Button>;
+const bottomRight = <Button style={{margin: '5px'}} id="bottomRight" className="btrigger">bottom right</Button>;
+const leftTop = <Button style={{margin: '5px'}} id="leftTop" className="btrigger">left top</Button>;
+const leftBottom = <Button style={{margin: '5px'}} id="leftBottom" className="btrigger">left bottom</Button>;
+
+const App = () => (
+    <div style={{paddingLeft: 220}}>
+        <div style={{marginLeft: 75}}>
+            <Tooltip trigger={topLeft} align="tl">text text</Tooltip>
+            <Tooltip trigger={top} align="t">text text</Tooltip>
+            <Tooltip trigger={topRight} align="tr">text text</Tooltip>
+        </div>
+        <div style={{width: 80, float: 'left'}}>
+            <Tooltip trigger={leftTop} align="lt">text text</Tooltip>
+            <Tooltip trigger={left} align="l">text text</Tooltip>
+            <Tooltip trigger={leftBottom} align="lb">text text</Tooltip>
+        </div>
+        <div style={{width: 80, marginLeft: 290}}>
+            <Tooltip trigger={rightTop} align="rt">text text</Tooltip>
+            <Tooltip trigger={right} align="r">text text</Tooltip>
+            <Tooltip trigger={rightBottom} align="rb">text text</Tooltip>
+        </div>
+        <div style={{marginLeft: 80, clear: 'both'}}>
+            <Tooltip trigger={bottomLeft} align="bl">text text</Tooltip>
+            <Tooltip trigger={bottom} align="b">text text</Tooltip>
+            <Tooltip trigger={bottomRight} align="br">text text</Tooltip>
+        </div>
+    </div>
+
+);
+
+ReactDOM.render(<App />, mountNode);
+
+````
+
+````css
+.code-box-demo .sui-btn {
+    margin-right: 1em;
+    margin-bottom: 1em;
+}
+````
diff --git a/docs/balloon/demo/tooltip.md b/docs/balloon/demo/tooltip.md
@@ -2,61 +2,44 @@
 
 - order: 7
 
-简化的Balloon, 只能设置align, trigger和children, 触发条件是hover.
+一般用于文字超长溢出等场景
 
 :::lang=en-us
 # tooltip
 
 - order: 7
 
-Simplified Balloon, which can only set align, trigger and children, and triggered by hovering.
+It is generally used in the scene of text overflow.
 
 :::
 
 ---
 
 ````jsx
-import { Button, Balloon } from '@alifd/next';
+import { Button, Balloon, Table } from '@alifd/next';
 
 const Tooltip = Balloon.Tooltip;
 
-const top = <Button style={{margin: '5px'}} id="top" className="btrigger">top</Button>;
-const right = <Button style={{margin: '5px'}}id="right" className="btrigger">right</Button>;
-const bottom = <Button style={{margin: '5px'}} id="bottom" className="btrigger">bottom</Button>;
-const left = <Button style={{margin: '5px'}} id="left" className="btrigger">left</Button>;
-const topLeft = <Button style={{margin: '5px'}} id="topLeft" className="btrigger">top left</Button>;
-const topRight = <Button style={{margin: '5px'}} id="topRight" className="btrigger">top right</Button>;
-const rightTop = <Button style={{margin: '5px'}} id="rightTop" className="btrigger">right top</Button>;
-const rightBottom = <Button style={{margin: '5px'}} id="rightBottom" className="btrigger">right bottom</Button>;
-const bottomLeft = <Button style={{margin: '5px'}} id="bottomLeft" className="btrigger">bottom left</Button>;
-const bottomRight = <Button style={{margin: '5px'}} id="bottomRight" className="btrigger">bottom right</Button>;
-const leftTop = <Button style={{margin: '5px'}} id="leftTop" className="btrigger">left top</Button>;
-const leftBottom = <Button style={{margin: '5px'}} id="leftBottom" className="btrigger">left bottom</Button>;
+const dataSource = [{
+    name: 'Li Bai',
+    intro: `Li Bai (Chinese: 李白; pinyin: Lǐ Bái; 701–762), also known as Li Bo, courtesy name Taibai (Chinese: 太白), art name Qinglian Jushi (Chinese: 青蓮居士), was a Chinese poet acclaimed from his own day to the present as a genius and a romantic figure who took traditional poetic forms to new heights.`,
+    id: 100306660940,
+}, {
+    name: 'William Shakespeare',
+    intro: `William Shakespeare (bapt. 26 April 1564 – 23 April 1616) was an English playwright, poet, and actor, widely regarded as the greatest writer in the English language and the world's greatest dramatist. He is often called England's national poet and the "Bard of Avon" (or simply "the Bard").`,
+    id: 100306660941,
+}]
+const render = (value, index, record) => {
+    const intro = <div style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}>{value}</div>;
+    return <Tooltip trigger={intro} align="br">{value}</Tooltip>;
+};
 
 const App = () => (
-    <div style={{paddingLeft: 220}}>
-        <div style={{marginLeft: 75}}>
-            <Tooltip trigger={topLeft} align="tl">text text</Tooltip>
-            <Tooltip trigger={top} align="t">text text</Tooltip>
-            <Tooltip trigger={topRight} align="tr">text text</Tooltip>
-        </div>
-        <div style={{width: 80, float: 'left'}}>
-            <Tooltip trigger={leftTop} align="lt">text text</Tooltip>
-            <Tooltip trigger={left} align="l">text text</Tooltip>
-            <Tooltip trigger={leftBottom} align="lb">text text</Tooltip>
-        </div>
-        <div style={{width: 80, marginLeft: 290}}>
-            <Tooltip trigger={rightTop} align="rt">text text</Tooltip>
-            <Tooltip trigger={right} align="r">text text</Tooltip>
-            <Tooltip trigger={rightBottom} align="rb">text text</Tooltip>
-        </div>
-        <div style={{marginLeft: 80, clear: 'both'}}>
-            <Tooltip trigger={bottomLeft} align="bl">text text</Tooltip>
-            <Tooltip trigger={bottom} align="b">text text</Tooltip>
-            <Tooltip trigger={bottomRight} align="br">text text</Tooltip>
-        </div>
-    </div>
-
+    <Table dataSource={dataSource} tableLayout="fixed">
+        <Table.Column title="ID" dataIndex="id" width={100}/>
+        <Table.Column title="Name" dataIndex="name" width={200}/>
+        <Table.Column title="Intro" dataIndex="intro" cell={render} width={400}/>
+    </Table>
 );
 
 ReactDOM.render(<App />, mountNode);