1
0

tooltip.stories.tsx 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. import React from 'react';
  2. import { storiesOf } from '@storybook/react';
  3. import Tooltip from '../index';
  4. import Checkbox from '../../checkbox';
  5. import Icon from '../../icons';
  6. import Button from '../../button';
  7. import Radio from '../../radio';
  8. import { IconList, IconSidebar } from '@douyinfe/semi-icons';
  9. const stories = storiesOf('Tooltip', module);
  10. stories.add('复合组件', () => (
  11. <div
  12. style={{
  13. padding: 50,
  14. }}
  15. >
  16. <Tooltip
  17. content={
  18. <article>
  19. <p>hi bytedance</p> <p>hi bytedance</p>
  20. </article>
  21. }
  22. position="top"
  23. >
  24. <Icon type={<IconList />} />
  25. </Tooltip>
  26. <Tooltip content={'收起'} position="top">
  27. <Button icon={<IconSidebar />} />
  28. </Tooltip>
  29. {/* <Tooltip content={'开关'} position="top">
  30. <Switch />
  31. </Tooltip> */}
  32. <Tooltip content={'选择框'} position="top">
  33. <Checkbox
  34. style={{
  35. display: 'inline-flex',
  36. }}
  37. >
  38. 选择框
  39. </Checkbox>
  40. </Tooltip>
  41. <Tooltip content={'单选'} position="top">
  42. <Radio
  43. style={{
  44. display: 'inline-flex',
  45. }}
  46. >
  47. 单选
  48. </Radio>
  49. </Tooltip>
  50. <Tooltip content={'单选'} position="top" getPopupContainer={() => document.body}>
  51. <Radio style={{ display: 'inline-flex' }}>单选</Radio>
  52. </Tooltip>
  53. </div>
  54. ));