import React from 'react'; import { FloatButton } from '@douyinfe/semi-ui'; import { IconAIEditLevel1 } from '@douyinfe/semi-icons'; () => { const onClick = () => { console.log('float button clicked'); }; return (<> <span>基本使用：页面右下第三列 1 </span> <FloatButton icon={<IconAIEditLevel1 />} style={{ bottom: '270px' }} onClick={onClick}/> </> ); };

import React from 'react'; import { FloatButton } from '@douyinfe/semi-ui'; import { IconAIEditLevel1 } from '@douyinfe/semi-icons'; () => { const onClick = () => { console.log('float button clicked'); }; return (<> <span>大尺寸：页面右下第三列 2</span> <FloatButton size="large" icon={<IconAIEditLevel1 />} style={{ bottom: '200px' }} onClick={onClick}/> </>); };

import React from 'react'; import { FloatButton } from '@douyinfe/semi-ui'; import { IconAIEditLevel1 } from '@douyinfe/semi-icons'; () => { const onClick = () => { console.log('float button clicked'); }; return (<> <span>方形：页面右下第三列 3</span> <FloatButton shape="square" icon={<IconAIEditLevel1 />} style={{ bottom: '150px' }} onClick={onClick}/> </>); };

import React from 'react'; import { FloatButton } from '@douyinfe/semi-ui'; import { IconAIEditLevel1 } from '@douyinfe/semi-icons'; () => { const onClick = () => { console.log('float button clicked'); }; return (<> <span>点击跳转：页面右下第三列 4</span> <FloatButton icon={<IconAIEditLevel1 />} style={{ bottom: '100px' }} href={'https://semi.design'} target={'_blank'} /> </>); };

import React from 'react'; import { FloatButton } from '@douyinfe/semi-ui'; import { IconAIEditLevel1 } from '@douyinfe/semi-icons'; () => { const onClick = () => { console.log('float button clicked'); }; return (<> <span>多彩按钮：页面右下第一列</span> <FloatButton colorful icon={<IconAIEditLevel1 />} style={{ bottom: '110px', insetInlineEnd: '150px' }} href={'https://semi.design'} target={'_blank'} /> </>); };

import React from 'react'; import { FloatButton } from '@douyinfe/semi-ui'; import { IconAIEditLevel1 } from '@douyinfe/semi-icons'; () => { return (<> <span>带徽章：页面右下第二列</span> <FloatButton disabled icon={<IconAIEditLevel1 />} badge={{ dot: true, type: 'danger' }} style={{ bottom: 270, insetInlineEnd: '100px' }} /> <FloatButton badge={{ count: 1000, overflowCount: 999 }} size={"large"} icon={<IconAIEditLevel1 />} style={{ bottom: 210, insetInlineEnd: 100 }} /> <FloatButton icon={<IconAIEditLevel1 />} badge={{ dot: true }} colorful style={{ bottom: 170, insetInlineEnd: 100 }} /> <FloatButton icon={<IconAIEditLevel1 />} colorful size="large" badge={{ count: 'VIP', type: "danger" }} style={{ bottom: 110, insetInlineEnd: 100 }} /> </>); };

import React from 'react'; import { FloatButtonGroup } from '@douyinfe/semi-ui'; import { IconAIEditLevel1, IconAIStrokedLevel3, IconSearchStroked, IconHelpCircleStroked } from '@douyinfe/semi-icons'; () => { return (<> <span>The last row at the bottom right of the page</span> <FloatButtonGroup style={{ insetInlineEnd: 24, bottom: 50, }} items={[ { icon: <IconAIStrokedLevel3 />, content: "编辑" }, { icon: <IconSearchStroked />, content: "搜索" }, { icon: <IconHelpCircleStroked />, content: "帮助" } ]} /> </>); };