import React from 'react'; import { Button } from '@douyinfe/semi-ui'; function ButtonDemo() { return ( <div className="btn-margin-right"> <Button>主要按钮</Button> <Button type="secondary">次要按钮</Button> <Button type="tertiary">第三按钮</Button> <Button type="warning">警告按钮</Button> <Button type="danger">危险按钮</Button> </div> ); }

import React from 'react'; function ButtonDemo() { const types = [['primary', '主要'], ['secondary', '次要'], ['tertiary', '第三'], ['warning', '警告'], ['danger', '危险']]; return ( <article> {types.map((type, index) => ( <strong key={index} style={{ color: `var(--semi-color-${Array.isArray(type) ? type[0] : type})`, marginRight: 10 }}>{Array.isArray(type) ? type[1]: type}</strong> ))} </article> ); }

import React from 'react'; import { Button } from '@douyinfe/semi-ui'; function ButtonDemo() { return ( <> <Button theme='light' type='primary' style={{ marginRight: 8 }}>浅色主要</Button> <Button theme='light' type='secondary' style={{ marginRight: 8 }}>浅色次要</Button> <Button theme='light' type='tertiary' style={{ marginRight: 8 }}>浅色第三</Button> <Button theme='light' type='warning' style={{ marginRight: 8 }}>浅色警告</Button> <Button theme='light' type='danger' style={{ marginRight: 8 }}>浅色危险</Button> </> ); }

import React from 'react'; import { Button } from '@douyinfe/semi-ui'; function ButtonDemo() { return ( <> <Button theme='solid' type='primary' style={{ marginRight: 8 }}>深色主要</Button> <Button theme='solid' type='secondary' style={{ marginRight: 8 }}>深色次要</Button> <Button theme='solid' type='tertiary' style={{ marginRight: 8 }}>深色第三</Button> <Button theme='solid' type='warning' style={{ marginRight: 8 }}>深色警告</Button> <Button theme='solid' type='danger' style={{ marginRight: 8 }}>深色危险</Button> </> ); }

import React from 'react'; import { Button } from '@douyinfe/semi-ui'; function ButtonDemo() { return ( <> <Button theme='borderless' type='primary' style={{ marginRight: 8 }}>主要</Button> <Button theme='borderless' type='secondary' style={{ marginRight: 8 }}>次要</Button> <Button theme='borderless' type='tertiary' style={{ marginRight: 8 }}>第三</Button> <Button theme='borderless' type='warning' style={{ marginRight: 8 }}>警告</Button> <Button theme='borderless' type='danger' style={{ marginRight: 8 }}>危险</Button> </> ); }

import React from 'react'; import { Button } from '@douyinfe/semi-ui'; function ButtonDemo() { return ( <> <Button theme='outline' type='primary' style={{ marginRight: 8 }}>主要</Button> <Button theme='outline' type='secondary' style={{ marginRight: 8 }}>次要</Button> <Button theme='outline' type='tertiary' style={{ marginRight: 8 }}>第三</Button> <Button theme='outline' type='warning' style={{ marginRight: 8 }}>警告</Button> <Button theme='outline' type='danger' style={{ marginRight: 8 }}>危险</Button> </> ); }

import React from 'react'; import { Button } from '@douyinfe/semi-ui'; function ButtonDemo() { return ( <div> <Button size='large' style={{ marginRight: 8 }}>大尺寸</Button> <Button size='default' style={{ marginRight: 8 }}>默认尺寸</Button> <Button size='small'>小尺寸</Button> </div> ); }

import React from 'react'; import { Button } from '@douyinfe/semi-ui'; function ButtonDemo() { return ( <div> <Button block>块级按钮</Button> </div> ); }

import React from 'react'; import { Button } from '@douyinfe/semi-ui'; import { IconCamera, IconSidebar, IconChevronDown } from '@douyinfe/semi-icons'; function ButtonDemo() { return ( <div> <strong>默认状态：</strong> <Button icon={<IconCamera />} aria-label="截屏" /> <br/><br/> <strong>禁用状态：</strong> <Button disabled icon={<IconCamera />} aria-label="截屏"/> <br/><br/> <strong>复合类型：</strong> <span className="btn-margin-right"> <Button type="primary" icon={<IconCamera />} aria-label="截屏"/> <Button type="secondary" icon={<IconCamera />} aria-label="截屏" /> <Button type="warning" icon={<IconCamera />} aria-label="截屏" /> <Button type="danger" icon={<IconCamera />} aria-label="截屏" /> </span> <br/><br/> <strong>更改主题：</strong> <Button icon={<IconCamera />} theme="solid" style={{ marginRight: 10 }} aria-label="截屏" /> <Button icon={<IconCamera />} theme="light" aria-label="截屏" /> <br/><br/> <strong>更改图标位置：</strong> <Button icon={<IconSidebar />} theme="solid" style={{ marginRight: 10 }}>收起</Button> <Button icon={<IconChevronDown />} theme="solid" iconPosition="right">展开选项</Button> <br/><br/> </div> ); }

import React from 'react'; import { Typography } from '@douyinfe/semi-ui'; import { IconLink } from '@douyinfe/semi-icons'; function Demo() { const { Text } = Typography; return ( <div> <Text link={{ href: 'https://semi.design/' }}>链接文本</Text> <br /> <br /> <Text link={{ href: 'https://semi.design/' }}>打开网站</Text> <br /> <br /> <Text link icon={<IconLink />} underline>带下划线的网页链接</Text> </div> ); }

import React from 'react'; import { Button } from '@douyinfe/semi-ui'; function ButtonDemo() { return ( <div> <Button disabled>禁用</Button> <Button disabled theme="borderless">无背景禁用</Button> <Button disabled theme="light">浅色禁用</Button> <Button disabled theme="borderless" type="primary">无背景主要禁用</Button> <Button disabled theme="solid" type="warning">深色警告禁用</Button> </div> ); }

import React, { useState } from 'react'; import { Button } from '@douyinfe/semi-ui'; import { IconDelete } from '@douyinfe/semi-icons'; function ButtonDemo() { const [saveLoading, setSaveLoading] = useState(false); const [delLoading, setDelLoading] = useState(true); const [repLoading, setRepLoading] = useState(true); const reset = status => { status = !!status; setSaveLoading(status); setDelLoading(status); setRepLoading(status); }; return ( <div> <div> <div className="btn-margin-right" style={{ display: 'inline-flex', alignItems: 'center', paddingBottom: 14 }}> <Button onClick={() => reset(false)}>关闭加载态</Button> <Button onClick={() => reset(true)}>开启加载态</Button> </div> </div> <hr/> <Button loading={saveLoading} onClick={() => setSaveLoading(true)} style={{ marginRight: 14 }}>保存</Button> <Button loading={delLoading} icon={<IconDelete />} type="danger" onClick={() => setDelLoading(true)} style={{ marginRight: 14 }}>删除</Button> <div style={{ width: 200, display: 'inline-block' }}> <Button loading={repLoading} type="warning" block theme="solid" onClick={() => setRepLoading(true)}>撤销</Button> </div> </div> ); }

import React from 'react'; import { ButtonGroup, Button } from '@douyinfe/semi-ui'; function ButtonDemo() { const sizes = ['large', 'default', 'small']; return ( <div style={{ display: 'flex' }}> {sizes.map(size => ( <div style={{ marginRight: 10 }} key={size}> <ButtonGroup size={size}> <Button>拷贝</Button> <Button>查询</Button> <Button>剪切</Button> </ButtonGroup> </div> ))} </div> ); }

import React from 'react'; import { ButtonGroup, Button } from '@douyinfe/semi-ui'; function ButtonDemo() { return ( <div style={{ display: 'flex' }}> <div style={{ marginRight: 10 }}> <ButtonGroup disabled> <Button>拷贝</Button> <Button>查询</Button> <Button>剪切</Button> </ButtonGroup> </div> </div> ); }

import React from 'react'; import { ButtonGroup, Button } from '@douyinfe/semi-ui'; function ButtonDemo() { const types = ['primary', 'secondary', 'tertiary', 'warning', 'danger']; return ( <div style={{ display: 'flex' }}> {types.map(type => ( <div style={{ marginRight: 10 }} key={type}> <ButtonGroup type={type} aria-label="操作按钮组"> <Button>拷贝</Button> <Button>查询</Button> <Button>剪切</Button> </ButtonGroup> </div> ))} </div> ); }

import React, { useState } from 'react'; import { SplitButtonGroup, Dropdown, Button } from '@douyinfe/semi-ui'; import { IconTreeTriangleDown } from '@douyinfe/semi-icons'; function SplitButtonDemo(){ const menu = [ { node: 'item', name: '编辑项目', onClick: () => console.log('编辑项目点击') }, { node: 'item', name: '重置项目' }, { node: 'divider' }, { node: 'item', name: '复制项目' }, { node: 'item', name: '从项目创建模版' }, { node: 'divider' }, { node: 'item', name: '删除项目', type: 'danger' }, ]; const [btnVisible, setBtnVisible] = useState({ 1: false, 2: false, 3: false }); const handleVisibleChange = (key, visible)=>{ newBtnVisible = { ...btnVisible }; newBtnVisible[key] = visible; setBtnVisible(newBtnVisible); }; return ( <div> <SplitButtonGroup style={{ marginRight: 10 }} aria-label="项目操作按钮组"> <Button theme="solid" type="primary">分裂按钮</Button> <Dropdown onVisibleChange={(v)=>handleVisibleChange(1, v)} menu={menu} trigger="click" position="bottomRight"> <Button style={btnVisible[1] ? { background: 'var(--semi-color-primary-hover)', padding: '8px 4px' } : { padding: '8px 4px' }} theme="solid" type="primary" icon={<IconTreeTriangleDown />}></Button> </Dropdown> </SplitButtonGroup> <SplitButtonGroup style={{ marginRight: 10 }} aria-label="项目操作按钮组"> <Button theme="light" type="primary">分裂按钮</Button> <Dropdown onVisibleChange={(v)=>handleVisibleChange(2, v)} menu={menu} trigger="click" position="bottomRight"> <Button style={btnVisible[2]?{ background: 'var(--semi-color-fill-1)', padding: '8px 4px' }:{ padding: '8px 4px' }} theme="light" type="primary" icon={<IconTreeTriangleDown />}></Button> </Dropdown> </SplitButtonGroup> <SplitButtonGroup aria-label="项目操作按钮组"> <Button style={btnVisible[3]?{ background: 'var(--semi-color-fill-0)' }:{}} theme="borderless" type="primary">分裂按钮</Button> <Dropdown onVisibleChange={(v)=>handleVisibleChange(3, v)} menu={menu} trigger="click" position="bottomRight"> <Button style={btnVisible[3]?{ background: 'var(--semi-color-fill-1)', padding: '8px 4px' }:{ padding: '8px 4px' }} theme="borderless" type="primary" icon={<IconTreeTriangleDown />}></Button> </Dropdown> </SplitButtonGroup> </div> ); }