feat(contextview): add more contextview demo

DTStack · Dec 8, 2020 · 868e190 · 868e190
1 parent 01ab91f
commit 868e190
Showing 1 changed file with 39 additions and 5 deletions.
diff --git a/stories/components/8-ContextView.stories.tsx b/stories/components/8-ContextView.stories.tsx
@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withKnobs } from '@storybook/addon-knobs';
-import { propsTable } from '../common/propsTable';
-
+import { Select, Option } from 'mo/components/select';
 import { useContextView } from 'mo/components/contextview';
+import { Menu, MenuMode, MenuItem, SubMenu } from 'mo/components/menu';
+
+import { propsTable } from '../common/propsTable';
 
 const stories = storiesOf('ContextView', module);
 stories.addDecorator(withKnobs);
@@ -48,8 +50,6 @@ stories.add(
             position: 'relative',
             width: 200,
             height: 200,
-            top: 0,
-            left: 0,
             margin: 'auto',
             background: '#dddddd',
         };
@@ -61,10 +61,44 @@ stories.add(
                     ContextView
                     组件主要是提供了一个可根据指定锚点位置、渲染内容的视图容器。
                 </p>
-                <h2>使用示例</h2>
+                <h2>使用示例 - 1</h2>
                 <div id="topLeft" onClick={show} style={styled}>
                     Click me!
                 </div>
+                <div>
+                    <h2>使用示例 - 2</h2>
+                    <Select
+                        id="demo2"
+                        key="demo2"
+                        style={{
+                            width: 200,
+                            color: 'rgba(255, 255, 255, 0.4)',
+                            background: '#252526',
+                        }}
+                        placeholder="请选择"
+                    >
+                        <Option value="1">option - 1</Option>
+                        <Option value="2">option - 2</Option>
+                        <Option value="3">option - 3</Option>
+                        <Option value="4" description="Test option one">
+                            option - 4
+                        </Option>
+                    </Select>
+                </div>
+                <div>
+                    <h2>使用示例 - 3</h2>
+                    <Menu style={{ width: 200 }}>
+                        <MenuItem>menuItem1</MenuItem>
+                        <MenuItem>menuItem2</MenuItem>
+                        <MenuItem>menuItem3</MenuItem>
+                        <SubMenu mode={MenuMode.Vertical} name={'menuItem4'}>
+                            <MenuItem>subMenuItem1</MenuItem>
+                            <MenuItem>subMenuItem2</MenuItem>
+                            <MenuItem>subMenuItem3</MenuItem>
+                            <MenuItem>subMenuItem4</MenuItem>
+                        </SubMenu>
+                    </Menu>
+                </div>
             </div>
         );
     },