mirror of
https://github.com/Tencent/tdesign-react.git
synced 2024-10-23 08:33:49 +08:00
chore: remove exist jsx demo file and generate when site build (#2976)
* chore: remove exist jsx demo file and generate when site build * chore: update snapshot
This commit is contained in:
wū yāng
GitHub
parent
24ee77eda0
commit
c7c70aeb5c
3
babel.config.demo.js
Normal file
3
babel.config.demo.js
Normal file
@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
presets: ['@babel/preset-typescript'],
|
||||
};
|
||||
10
package.json
10
package.json
@ -37,15 +37,17 @@
|
||||
"init": "git submodule init && git submodule update",
|
||||
"start": "cd site && vite",
|
||||
"dev": "cd site && vite",
|
||||
"site": "cd site && vite build",
|
||||
"site:intranet": "cd site && vite build --mode intranet",
|
||||
"site:preview": "cd site && vite build --mode preview",
|
||||
"site": "npm run build:jsx-demo && cd site && vite build",
|
||||
"site:intranet": "npm run build:jsx-demo && cd site && vite build --mode intranet",
|
||||
"site:preview": "npm run build:jsx-demo && cd site && vite build --mode preview",
|
||||
"postsite:preview": "cp _site/index.html _site/404.html",
|
||||
"lint": "npm run lint:tsc && eslint --ext .ts,.tsx ./ --max-warnings 0",
|
||||
"lint:fix": "eslint --ext .ts,.tsx ./src --ignore-pattern src/__tests__ --max-warnings 0 --fix",
|
||||
"lint:tsc": "tsc -p ./tsconfig.dev.json ",
|
||||
"generate:usage": "node script/generate-usage/index.js",
|
||||
"generate:coverage-badge": "npm run test:coverage && node script/generate-coverage.js",
|
||||
"generate:jsx-demo":"npx babel src/**/_example --extensions '.tsx' --config-file ./babel.config.demo.js --relative --out-dir ../_example-js --out-file-extension=.jsx",
|
||||
"format:jsx-demo": "npx eslint src/**/_example-js/*.jsx --fix && npx prettier --write src/**/_example-js/*.jsx",
|
||||
"test": "vitest run && npm run test:snap",
|
||||
"test:ui": "vitest --ui",
|
||||
"test:snap": "cross-env NODE_ENV=test-snap vitest run",
|
||||
@ -59,6 +61,7 @@
|
||||
"build:tsc-esm": "tsc --emitDeclarationOnly -d -p ./tsconfig.build.json --outDir esm/",
|
||||
"build:tsc-cjs": "tsc --emitDeclarationOnly -d -p ./tsconfig.build.json --outDir cjs/",
|
||||
"build:tsc-lib": "tsc --emitDeclarationOnly -d -p ./tsconfig.build.json --outDir lib/",
|
||||
"build:jsx-demo":"npm run generate:jsx-demo && npm run format:jsx-demo",
|
||||
"changelog": "node script/generate-changelog.js",
|
||||
"init:component": "node script/init-component",
|
||||
"robot": "publish-cli robot-msg",
|
||||
@ -97,6 +100,7 @@
|
||||
"react-popper": "~2.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.24.7",
|
||||
"@babel/core": "^7.16.5",
|
||||
"@babel/plugin-transform-runtime": "^7.21.4",
|
||||
"@babel/plugin-transform-typescript": "^7.18.10",
|
||||
|
||||
@ -1 +1 @@
|
||||
Subproject commit 04cd5155dca3e44d264d82fe3d0a632a8dc2a019
|
||||
Subproject commit 13dbba032124b2dd6194f0b6433d75b21027366c
|
||||
@ -1,16 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Affix, Button } from 'tdesign-react';
|
||||
|
||||
export default function BaseExample() {
|
||||
const [top, setTop] = useState(150);
|
||||
|
||||
const handleClick = () => {
|
||||
setTop(top + 10);
|
||||
};
|
||||
|
||||
return (
|
||||
<Affix offsetTop={top} offsetBottom={10}>
|
||||
<Button onClick={handleClick}>固钉</Button>
|
||||
</Affix>
|
||||
);
|
||||
}
|
||||
@ -1,59 +0,0 @@
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { Affix, Button } from 'tdesign-react';
|
||||
|
||||
export default function ContainerExample() {
|
||||
const [container, setContainer] = useState(null);
|
||||
const [affixed, setAffixed] = useState(false);
|
||||
const affixRef = useRef(null);
|
||||
|
||||
const handleFixedChange = (affixed, { top }) => {
|
||||
console.log('top', top);
|
||||
setAffixed(affixed);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (affixRef.current) {
|
||||
const { handleScroll } = affixRef.current;
|
||||
// 防止 affix 移动到容器外
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const backgroundStyle = {
|
||||
height: '1500px',
|
||||
paddingTop: '700px',
|
||||
backgroundColor: '#eee',
|
||||
backgroundImage:
|
||||
'linear-gradient(45deg,#bbb 25%,transparent 0),linear-gradient(45deg,transparent 75%,#bbb 0),linear-gradient(45deg,#bbb 25%,transparent 0),linear-gradient(45deg,transparent 75%,#bbb 0)',
|
||||
backgroundSize: '30px 30px',
|
||||
backgroundPosition: '0 0,15px 15px,15px 15px,0 0',
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid var(--component-stroke)',
|
||||
borderRadius: '3px',
|
||||
height: '400px',
|
||||
overflowX: 'hidden',
|
||||
overflowY: 'auto',
|
||||
overscrollBehavior: 'none',
|
||||
}}
|
||||
ref={setContainer}
|
||||
>
|
||||
<div style={backgroundStyle}>
|
||||
<Affix
|
||||
offsetTop={50}
|
||||
offsetBottom={50}
|
||||
container={container}
|
||||
zIndex={5}
|
||||
onFixedChange={handleFixedChange}
|
||||
ref={affixRef}
|
||||
>
|
||||
<Button>affixed: {`${affixed}`}</Button>
|
||||
</Affix>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Alert, Space } from 'tdesign-react';
|
||||
|
||||
export default function AlertBase() {
|
||||
return (
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Alert theme="success" message="这是一条成功的消息提示" />
|
||||
<Alert theme="info" message="这是一条普通的消息提示" />
|
||||
<Alert theme="warning" message="这是一条警示消息" />
|
||||
<Alert theme="error" message="高危操作/出错信息提示" />
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Alert, Space } from 'tdesign-react';
|
||||
|
||||
export default function AlertClose() {
|
||||
return (
|
||||
<Space direction="vertical">
|
||||
<Alert theme="success" message="这是一条成功的消息提示" close />
|
||||
<Alert theme="info" message="这是一条普通的消息提示" close="关闭" />
|
||||
<Alert theme="warning" message="这是一条警示消息" close="知道了" />
|
||||
<Alert theme="error" message="高危操作/出错信息提示" close={<span>自定义关闭</span>} />
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Alert } from 'tdesign-react';
|
||||
|
||||
export default function AlertCollapsed() {
|
||||
const message = [
|
||||
'1.这是一条普通的消息提示描述，',
|
||||
'2.这是一条普通的消息提示描述，',
|
||||
'3.这是一条普通的消息提示描述，',
|
||||
'4.这是一条普通的消息提示描述，',
|
||||
'5.这是一条普通的消息提示描述，',
|
||||
];
|
||||
return <Alert message={message} maxLine={2} close />;
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Alert, Space } from 'tdesign-react';
|
||||
|
||||
export default function AlertIcon() {
|
||||
return (
|
||||
<Space direction="vertical">
|
||||
<Alert theme="success" message="这是一条成功的消息提示" />
|
||||
<Alert theme="info" message="这是一条普通的消息提示" />
|
||||
<Alert theme="warning" message="这是一条警示消息" />
|
||||
<Alert theme="error" message="高危操作/出错信息提示" />
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Alert, Space } from 'tdesign-react';
|
||||
|
||||
export default function AlertOperation() {
|
||||
const operation = <span>相关操作</span>;
|
||||
return (
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Alert
|
||||
theme="success"
|
||||
message="这是一条成功的消息提示"
|
||||
operation={operation}
|
||||
close
|
||||
onClosed={() => {
|
||||
console.log('onClosed');
|
||||
}}
|
||||
/>
|
||||
<Alert theme="info" message="这是一条普通的消息提示" operation={operation} close />
|
||||
<Alert theme="warning" message="这是一条警示消息" operation={operation} close />
|
||||
<Alert theme="error" message="高危操作/出错信息提示" operation={operation} close />
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Alert, Space } from 'tdesign-react';
|
||||
|
||||
export default function AlertBase() {
|
||||
return (
|
||||
<Space direction="vertical">
|
||||
<Alert theme="success" message="这是一条成功的消息提示" />
|
||||
<Alert theme="info" message="这是一条普通的消息提示" />
|
||||
<Alert theme="warning" message="这是一条警示消息" />
|
||||
<Alert theme="error" message="高危操作/出错信息提示" />
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Alert } from 'tdesign-react';
|
||||
|
||||
export default function AlertDescription() {
|
||||
const operation = <span>相关操作</span>;
|
||||
return (
|
||||
<Alert
|
||||
message="这是一条普通的消息提示描述，这是一条普通的消息提示描述"
|
||||
title="这是一条普通的消息提示"
|
||||
operation={operation}
|
||||
close
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Anchor } from 'tdesign-react';
|
||||
|
||||
const { AnchorItem } = Anchor;
|
||||
|
||||
export default function AnchorBase() {
|
||||
const handleClick = ({ e, href, title }) => {
|
||||
console.log('handleClick', e, href, title);
|
||||
};
|
||||
const handleChange = (currentLink, prevLink) => {
|
||||
console.log('currentLink', currentLink, 'prevLink', prevLink);
|
||||
};
|
||||
return (
|
||||
<div style={{ display: 'flex' }}>
|
||||
<div style={{ flex: '1' }}></div>
|
||||
<Anchor onClick={handleClick} onChange={handleChange} targetOffset={150} affixProps={{ offsetTop: 150 }}>
|
||||
<AnchorItem href="#基础锚点" title="基础锚点" />
|
||||
<AnchorItem href="#多级锚点" title="多级锚点" />
|
||||
<AnchorItem href="#指定容器锚点" title="指定容器锚点" />
|
||||
<AnchorItem href="#特定交互锚点" title="特定交互锚点" />
|
||||
<AnchorItem href="#尺寸" title="尺寸"></AnchorItem>
|
||||
</Anchor>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Anchor } from 'tdesign-react';
|
||||
|
||||
const { AnchorItem } = Anchor;
|
||||
|
||||
export default function AnchorAttach() {
|
||||
const handleClick = ({ e, href, title }) => {
|
||||
e.preventDefault();
|
||||
console.log('handleClick', href, title);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ display: 'flex' }} id="attach" className="anchor-demo-attach">
|
||||
<Anchor container="#anchor-container" onClick={handleClick}>
|
||||
<AnchorItem href="#content-1" title="content-1" />
|
||||
<AnchorItem href="#content-2" title="content-2" />
|
||||
<AnchorItem href="#content-3" title="content-3" />
|
||||
<AnchorItem href="#content-4" title="content-4" />
|
||||
</Anchor>
|
||||
<div
|
||||
id="anchor-container"
|
||||
style={{ width: '100%', height: '200px', overflow: 'auto', textAlign: 'center', fontSize: '22px' }}
|
||||
>
|
||||
<div id="content-1" style={{ background: '#DFEFFF', lineHeight: '100px' }}>
|
||||
content-1
|
||||
</div>
|
||||
<div id="content-2" style={{ background: '#BFDBF7', lineHeight: '100px' }}>
|
||||
content-2
|
||||
</div>
|
||||
<div id="content-3" style={{ background: '#9BC5F2', lineHeight: '100px' }}>
|
||||
content-3
|
||||
</div>
|
||||
<div id="content-4" style={{ background: '#7BAFED', lineHeight: '100px' }}>
|
||||
content-4
|
||||
</div>
|
||||
<div id="content-5" style={{ background: '#5C99EB', lineHeight: '100px' }}>
|
||||
content-5
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Anchor } from 'tdesign-react';
|
||||
|
||||
const { AnchorItem } = Anchor;
|
||||
|
||||
const cursorStyle = {
|
||||
width: '10px',
|
||||
height: '10px',
|
||||
backgroundColor: '#0052D9',
|
||||
position: 'absolute',
|
||||
borderRadius: '50%',
|
||||
left: '50%',
|
||||
marginLeft: '-5px',
|
||||
top: '50%',
|
||||
marginTop: '-5px',
|
||||
};
|
||||
|
||||
export default function AnchorBase() {
|
||||
return (
|
||||
<div style={{ display: 'flex' }}>
|
||||
<Anchor targetOffset={150} cursor={<div style={cursorStyle}></div>}>
|
||||
<AnchorItem href="#基础锚点" title="基础锚点" />
|
||||
<AnchorItem href="#多级锚点" title="多级锚点" />
|
||||
<AnchorItem href="#指定容器锚点" title="指定容器锚点" />
|
||||
<AnchorItem href="#特定交互锚点" title="特定交互锚点" />
|
||||
<AnchorItem href="#尺寸" title="尺寸"></AnchorItem>
|
||||
</Anchor>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Anchor } from 'tdesign-react';
|
||||
|
||||
const { AnchorItem } = Anchor;
|
||||
|
||||
export default function AnchorBase() {
|
||||
return (
|
||||
<div style={{ display: 'flex' }}>
|
||||
<div style={{ flex: '1' }}></div>
|
||||
<Anchor getCurrentAnchor={() => '#基础锚点'}>
|
||||
<AnchorItem href="#基础锚点" title="基础锚点" />
|
||||
<AnchorItem href="#多级锚点" title="多级锚点" />
|
||||
<AnchorItem href="#自定义游标锚点" title="自定义游标锚点" />
|
||||
<AnchorItem href="#指定容器锚点" title="指定容器锚点" />
|
||||
<AnchorItem href="#特定交互锚点" title="特定交互锚点" />
|
||||
<AnchorItem href="#不同尺寸的锚点" title="不同尺寸的锚点" />
|
||||
<AnchorItem href="#自定义锚点高亮" title="自定义锚点高亮" />
|
||||
</Anchor>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Anchor } from 'tdesign-react';
|
||||
|
||||
const { AnchorItem } = Anchor;
|
||||
|
||||
export default function AnchorSizeLarge() {
|
||||
return (
|
||||
<div id="size-large">
|
||||
<Anchor bounds={100} targetOffset={50} size="large">
|
||||
<AnchorItem href="#default" title="基础锚点" />
|
||||
<AnchorItem href="#multiple" title="多级锚点" />
|
||||
<AnchorItem href="#size" title="尺寸大小">
|
||||
<AnchorItem href="#size" title="size-medium"></AnchorItem>
|
||||
<AnchorItem href="#size-large" title="size-large"></AnchorItem>
|
||||
</AnchorItem>
|
||||
<AnchorItem href="#attach" title="指定容器" />
|
||||
</Anchor>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Anchor } from 'tdesign-react';
|
||||
|
||||
const { AnchorItem } = Anchor;
|
||||
|
||||
export default function AnchorMultiple() {
|
||||
return (
|
||||
<>
|
||||
<Anchor bounds={100} targetOffset={50}>
|
||||
<AnchorItem href="#基础锚点" title="基础锚点" />
|
||||
<AnchorItem href="#多级锚点" title="多级锚点" />
|
||||
<AnchorItem href="#指定容器锚点" title="指定容器锚点" />
|
||||
<AnchorItem href="#特定交互锚点" title="特定交互锚点" />
|
||||
<AnchorItem href="#尺寸" title="尺寸">
|
||||
<AnchorItem href="#size" title="size-medium"></AnchorItem>
|
||||
<AnchorItem href="#size-large" title="size-large"></AnchorItem>
|
||||
</AnchorItem>
|
||||
</Anchor>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Anchor } from 'tdesign-react';
|
||||
|
||||
const { AnchorItem } = Anchor;
|
||||
|
||||
export default function AnchorSize() {
|
||||
return (
|
||||
<div id="size-small">
|
||||
<Anchor bounds={100} targetOffset={50} size="small">
|
||||
<AnchorItem href="#default" title="基础锚点" />
|
||||
<AnchorItem href="#multiple" title="多级锚点" />
|
||||
<AnchorItem href="#size" title="尺寸大小">
|
||||
<AnchorItem href="#size" title="size-medium"></AnchorItem>
|
||||
<AnchorItem href="#size-large" title="size-large"></AnchorItem>
|
||||
</AnchorItem>
|
||||
<AnchorItem href="#attach" title="指定容器" />
|
||||
</Anchor>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Anchor } from 'tdesign-react';
|
||||
|
||||
const { AnchorTarget } = Anchor;
|
||||
|
||||
export default function AnchorTargetExample() {
|
||||
return (
|
||||
<div id="/components/anchor/#anchor-target" className="anchor-demo">
|
||||
<AnchorTarget id="/components/anchor/#default" tag="h1">
|
||||
基础锚点
|
||||
</AnchorTarget>
|
||||
<AnchorTarget id="/components/anchor/#multiple" tag="h1">
|
||||
多级锚点
|
||||
</AnchorTarget>
|
||||
<AnchorTarget id="/components/anchor/#size" tag="h1">
|
||||
尺寸大小
|
||||
</AnchorTarget>
|
||||
<AnchorTarget id="/components/anchor/#attach" tag="h1">
|
||||
指定容器
|
||||
</AnchorTarget>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,78 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Space, AutoComplete, Button } from 'tdesign-react';
|
||||
import { SearchIcon } from 'tdesign-icons-react';
|
||||
|
||||
const classStyles = `
|
||||
<style>
|
||||
.t-demo-autocomplete__search .t-input {
|
||||
padding-right: 0;
|
||||
}
|
||||
.t-demo-auto-complete__base .t-button svg {
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
|
||||
let timer = null;
|
||||
const AutoCompleteBase = () => {
|
||||
const [value, setValue] = useState('');
|
||||
const [value2, setValue2] = useState('');
|
||||
const [options, setOptions] = useState(['第一个默认联想词', '第二个默认联想词', '第三个默认联想词']);
|
||||
const [options2] = useState(['第一个默认联想词', '第二个默认联想词', '第三个默认联想词']);
|
||||
|
||||
// 输入框内容发生变化时进行搜索，100ms 搜索一次
|
||||
const onChange = (val) => {
|
||||
setValue(val);
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => {
|
||||
const text = '搜索联想词';
|
||||
const pureValue = val.replace(`第一个${text}`, '').replace(`第二个${text}`, '').replace(`第三个${text}`, '');
|
||||
setOptions([`${pureValue}第一个${text}`, `${pureValue}第二个${text}`, `${pureValue}第三个${text}`]);
|
||||
clearTimeout(timer);
|
||||
}, 100);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// 添加示例代码所需样式
|
||||
document.head.insertAdjacentHTML('beforeend', classStyles);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Space direction="vertical" className="t-demo-auto-complete__base" style={{ width: '100%' }}>
|
||||
<AutoComplete
|
||||
value={value}
|
||||
options={options}
|
||||
onChange={onChange}
|
||||
highlightKeyword
|
||||
filterable={false}
|
||||
clearable
|
||||
placeholder="请输入关键词搜索"
|
||||
onBlur={() => {
|
||||
console.log('blur');
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 左侧图标可以使用 label，同 input */}
|
||||
<AutoComplete
|
||||
value={value2}
|
||||
options={options2}
|
||||
onChange={setValue2}
|
||||
highlightKeyword
|
||||
filterable
|
||||
placeholder="请输入关键词搜索（自定义右侧图标）"
|
||||
className="t-demo-autocomplete__search"
|
||||
inputProps={{
|
||||
suffix: (
|
||||
<Button shape="square">
|
||||
<SearchIcon />
|
||||
</Button>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
AutoCompleteBase.displayName = 'AutoCompleteBase';
|
||||
|
||||
export default AutoCompleteBase;
|
||||
@ -1,43 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Space, AutoComplete } from 'tdesign-react';
|
||||
import escapeRegExp from 'lodash/escapeRegExp';
|
||||
|
||||
const LIST = ['第一个 AutoComplete 默认联想词', '第二个 AutoComplete 默认联想词', '第三个 AutoComplete 默认联想词'];
|
||||
|
||||
const AutoCompleteBaseFilter = () => {
|
||||
const [value1, setValue1] = useState('');
|
||||
const [value2, setValue2] = useState('');
|
||||
|
||||
function filterWords(keyword, option) {
|
||||
const regExp = new RegExp(escapeRegExp(keyword));
|
||||
return regExp.test(option.text);
|
||||
}
|
||||
|
||||
return (
|
||||
<Space style={{ width: '100%' }}>
|
||||
<AutoComplete
|
||||
value={value1}
|
||||
options={[...LIST]}
|
||||
onChange={setValue1}
|
||||
highlightKeyword
|
||||
filterable
|
||||
placeholder="组件默认过滤规则（不区分大小写）"
|
||||
style={{ width: '280px' }}
|
||||
/>
|
||||
|
||||
<AutoComplete
|
||||
value={value2}
|
||||
options={[...LIST]}
|
||||
onChange={setValue2}
|
||||
highlightKeyword
|
||||
filter={filterWords}
|
||||
placeholder="组件默认过滤规则（不区分大小写）"
|
||||
style={{ width: '280px' }}
|
||||
/>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
AutoCompleteBaseFilter.displayName = 'AutoCompleteBaseFilter';
|
||||
|
||||
export default AutoCompleteBaseFilter;
|
||||
@ -1,69 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { AutoComplete, HighlightOption } from 'tdesign-react';
|
||||
|
||||
const classStyles = `
|
||||
<style>
|
||||
.t-demo-autocomplete-option-list .t-select-option {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.t-demo-autocomplete-option-list .custom-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.t-demo-autocomplete-option-list .custom-option > img {
|
||||
max-height: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.t-demo-autocomplete-option-list .custom-option__main {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.t-demo-autocomplete-option-list .custom-option .description {
|
||||
color: var(--td-gray-color-9);
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
|
||||
const TEXTS = ['第一个默认联想词', '第二个默认联想词', '第三个默认联想词'];
|
||||
|
||||
const AutoCompleteOption = () => {
|
||||
const [value, setValue] = useState('');
|
||||
|
||||
const options = TEXTS.map(text => ({
|
||||
text,
|
||||
label: (
|
||||
<div className="custom-option">
|
||||
<img src="https://tdesign.gtimg.com/site/avatar.jpg" />
|
||||
<div className="custom-option__main">
|
||||
<HighlightOption content={text} keyword={value} />
|
||||
<small className="description">这是关于联想词的描述，使用 label 渲染</small>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
// 添加示例代码所需样式
|
||||
document.head.insertAdjacentHTML('beforeend', classStyles);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="t-demo-autocomplete-option">
|
||||
<AutoComplete
|
||||
value={value}
|
||||
options={options}
|
||||
onChange={setValue}
|
||||
highlightKeyword
|
||||
placeholder="请输入关键词搜索"
|
||||
popupProps={{ overlayClassName: 't-demo-autocomplete-option-list' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
AutoCompleteOption.displayName = 'AutoCompleteOption';
|
||||
|
||||
export default AutoCompleteOption;
|
||||
@ -1,39 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { AutoComplete, Space } from 'tdesign-react';
|
||||
|
||||
const options = ['第一个联想词', '第二个联想词', '第三个联想词'];
|
||||
|
||||
const AutoCompleteSize = () => {
|
||||
const [value1, setValue1] = useState('');
|
||||
const [value2, setValue2] = useState('');
|
||||
const [value3, setValue3] = useState('');
|
||||
|
||||
return (
|
||||
<Space direction='vertical' style={{ width: '100%' }}>
|
||||
<AutoComplete
|
||||
value={value1}
|
||||
options={options}
|
||||
onChange={setValue1}
|
||||
size="small"
|
||||
inputProps={{ label: '小尺寸：' }}
|
||||
/>
|
||||
<AutoComplete
|
||||
value={value2}
|
||||
options={options}
|
||||
onChange={setValue2}
|
||||
inputProps={{ label: '中尺寸：' }}
|
||||
/>
|
||||
<AutoComplete
|
||||
value={value3}
|
||||
options={options}
|
||||
onChange={setValue3}
|
||||
size="large"
|
||||
inputProps={{ label: '大尺寸：' }}
|
||||
/>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
AutoCompleteSize.displayName = 'AutoCompleteSize';
|
||||
|
||||
export default AutoCompleteSize;
|
||||
@ -1,64 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { AutoComplete, Space } from 'tdesign-react';
|
||||
|
||||
const options = ['第一个联想词', '第二个联想词', '第三个联想词'];
|
||||
|
||||
const AutoCompleteStatus = () => {
|
||||
const [value, setValue] = useState('');
|
||||
|
||||
return (
|
||||
<Space direction='vertical' style={{ width: '100%' }} size="32px">
|
||||
<AutoComplete
|
||||
value={value}
|
||||
options={options}
|
||||
onChange={setValue}
|
||||
disabled
|
||||
tips="这是禁用状态"
|
||||
placeholder="请输入关键词搜索"
|
||||
/>
|
||||
<AutoComplete
|
||||
value={value}
|
||||
options={options}
|
||||
onChange={setValue}
|
||||
readonly
|
||||
tips="这是只读状态"
|
||||
placeholder="请输入关键词搜索"
|
||||
/>
|
||||
<AutoComplete
|
||||
value={value}
|
||||
options={options}
|
||||
onChange={setValue}
|
||||
tips="这是普通状态"
|
||||
placeholder="请输入关键词搜索"
|
||||
/>
|
||||
<AutoComplete
|
||||
value={value}
|
||||
options={options}
|
||||
onChange={setValue}
|
||||
tips="这是告警状态"
|
||||
status="warning"
|
||||
placeholder="请输入关键词搜索"
|
||||
/>
|
||||
<AutoComplete
|
||||
value={value}
|
||||
options={options}
|
||||
onChange={setValue}
|
||||
tips="这是错误状态"
|
||||
status="error"
|
||||
placeholder="请输入关键词搜索"
|
||||
/>
|
||||
<AutoComplete
|
||||
value={value}
|
||||
options={options}
|
||||
onChange={setValue}
|
||||
tips="这是成功状态"
|
||||
status="success"
|
||||
placeholder="请输入关键词搜索"
|
||||
/>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
AutoCompleteStatus.displayName = 'AutoCompleteStatus';
|
||||
|
||||
export default AutoCompleteStatus;
|
||||
@ -1,44 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { AutoComplete, Textarea } from 'tdesign-react';
|
||||
|
||||
let timer = null;
|
||||
|
||||
const AutoCompleteTriggerElement = () => {
|
||||
const [value, setValue] = useState('');
|
||||
const [options, setOptions] = useState([
|
||||
'First AutoComplete Textarea',
|
||||
'Second AutoComplete Textarea',
|
||||
'Third AutoComplete Textarea',
|
||||
]);
|
||||
|
||||
// 输入框内容发生变化时进行搜索，200ms 搜索一次
|
||||
function onChange(val) {
|
||||
setValue(val);
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => {
|
||||
const text = 'AutoComplete Textarea';
|
||||
const pureValue = val.replace(`First ${text}`, '').replace(`Second ${text}`, '').replace(`Third ${text}`, '');
|
||||
setOptions([`${pureValue}First ${text}`, `${pureValue}Second ${text}`, `${pureValue}Third ${text}`]);
|
||||
clearTimeout(timer);
|
||||
}, 200);
|
||||
}
|
||||
|
||||
return (
|
||||
<AutoComplete
|
||||
value={value}
|
||||
options={options}
|
||||
onChange={onChange}
|
||||
highlightKeyword
|
||||
>
|
||||
<Textarea
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
placeholder="自定义联想词触发元素"
|
||||
/>
|
||||
</AutoComplete>
|
||||
);
|
||||
};
|
||||
|
||||
AutoCompleteTriggerElement.displayName = 'AutoCompleteTriggerElement';
|
||||
|
||||
export default AutoCompleteTriggerElement;
|
||||
@ -1,12 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Avatar, Space } from 'tdesign-react';
|
||||
|
||||
export default function AdjustAvatar() {
|
||||
return (
|
||||
<Space>
|
||||
<Avatar style={{ marginRight: '40px' }}>王</Avatar>
|
||||
<Avatar style={{ marginRight: '40px' }}>王亿</Avatar>
|
||||
<Avatar style={{ marginRight: '40px' }}>王亿亿</Avatar>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Avatar, Space } from 'tdesign-react';
|
||||
import { UserIcon } from 'tdesign-icons-react';
|
||||
|
||||
export default function BasicAvatar() {
|
||||
return (
|
||||
<Space>
|
||||
<Avatar icon={<UserIcon />} style={{ marginRight: '40px' }} />
|
||||
<Avatar
|
||||
image="https://tdesign.gtimg.com/site/avatar.jpg"
|
||||
hideOnLoadFailed={false}
|
||||
style={{ marginRight: '40px' }}
|
||||
/>
|
||||
<Avatar style={{ marginRight: '40px' }}>W</Avatar>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Avatar, Space } from 'tdesign-react';
|
||||
import { UserIcon } from 'tdesign-icons-react';
|
||||
|
||||
const { Group: AvatarGroup } = Avatar;
|
||||
|
||||
export default function GroupCascadingAvatar() {
|
||||
return (
|
||||
<Space direction="vertical">
|
||||
<AvatarGroup>
|
||||
<Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
|
||||
<Avatar>W</Avatar>
|
||||
<Avatar icon={<UserIcon />}></Avatar>
|
||||
</AvatarGroup>
|
||||
|
||||
<AvatarGroup cascading="left-up">
|
||||
<Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
|
||||
<Avatar>W</Avatar>
|
||||
<Avatar icon={<UserIcon />}></Avatar>
|
||||
</AvatarGroup>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Avatar, Space } from 'tdesign-react';
|
||||
import { UserIcon, EllipsisIcon } from 'tdesign-icons-react';
|
||||
|
||||
const { Group: AvatarGroup } = Avatar;
|
||||
|
||||
export default function GroupMaxAvatar() {
|
||||
return (
|
||||
<Space direction="vertical">
|
||||
<AvatarGroup size="large" max={2}>
|
||||
<Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
|
||||
<Avatar>Avatar</Avatar>
|
||||
<Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
|
||||
</AvatarGroup>
|
||||
|
||||
<AvatarGroup size="large" max={2} collapseAvatar={<EllipsisIcon />}>
|
||||
<Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
|
||||
<Avatar>Avatar</Avatar>
|
||||
<Avatar icon={<UserIcon />}></Avatar>
|
||||
</AvatarGroup>
|
||||
|
||||
<AvatarGroup size="large" max={2} collapseAvatar="more">
|
||||
<Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
|
||||
<Avatar>Avatar</Avatar>
|
||||
<Avatar icon={<UserIcon />}></Avatar>
|
||||
</AvatarGroup>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Avatar, Space } from 'tdesign-react';
|
||||
import { UserIcon } from 'tdesign-icons-react';
|
||||
|
||||
const { Group: AvatarGroup } = Avatar;
|
||||
|
||||
export default function GroupAvatar() {
|
||||
return (
|
||||
<Space direction="vertical">
|
||||
<AvatarGroup>
|
||||
<Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
|
||||
<Avatar>W</Avatar>
|
||||
<Avatar icon={<UserIcon />}></Avatar>
|
||||
</AvatarGroup>
|
||||
|
||||
<AvatarGroup size="large">
|
||||
<Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
|
||||
<Avatar>W</Avatar>
|
||||
<Avatar icon={<UserIcon />}></Avatar>
|
||||
</AvatarGroup>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Avatar, Space } from 'tdesign-react';
|
||||
|
||||
export default function ShapeAvatar() {
|
||||
return (
|
||||
<Space>
|
||||
<Avatar style={{ marginRight: '40px' }}>W</Avatar>
|
||||
<Avatar shape="round" style={{ marginRight: '40px' }}>
|
||||
W
|
||||
</Avatar>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,47 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Avatar, Space } from 'tdesign-react';
|
||||
|
||||
export default function SizeAvatar() {
|
||||
return (
|
||||
<Space direction="vertical" size="large">
|
||||
<Space align="center">
|
||||
<Avatar size="small" style={{ marginRight: '40px' }}>
|
||||
W
|
||||
</Avatar>
|
||||
<Avatar size="medium" style={{ marginRight: '40px' }}>
|
||||
W
|
||||
</Avatar>
|
||||
<Avatar size="large" style={{ marginRight: '40px' }}>
|
||||
W
|
||||
</Avatar>
|
||||
<Avatar size="100px" style={{ marginRight: '40px' }}>
|
||||
W
|
||||
</Avatar>
|
||||
</Space>
|
||||
<Space align="center">
|
||||
<Avatar shape="round" size="small" style={{ marginRight: '40px' }}>
|
||||
W
|
||||
</Avatar>
|
||||
<Avatar shape="round" size="medium" style={{ marginRight: '40px' }}>
|
||||
W
|
||||
</Avatar>
|
||||
<Avatar shape="round" size="large" style={{ marginRight: '40px' }}>
|
||||
W
|
||||
</Avatar>
|
||||
<Avatar shape="round" size="100px" style={{ marginRight: '40px' }}>
|
||||
W
|
||||
</Avatar>
|
||||
</Space>
|
||||
<Space align="center">
|
||||
<Avatar alt='test' image="https://tdesign.gtimg.com/site/avatar.jpg" shape="round" size="small" style={{ marginRight: '40px' }}>
|
||||
</Avatar>
|
||||
<Avatar image="https://tdesign.gtimg.com/site/avatar.jpg" shape="round" size="medium" style={{ marginRight: '40px' }}>
|
||||
</Avatar>
|
||||
<Avatar image="https://tdesign.gtimg.com/site/avatar.jpg" shape="round" size="large" style={{ marginRight: '40px' }}>
|
||||
</Avatar>
|
||||
<Avatar image="https://tdesign.gtimg.com/site/avatar.jpg" shape="round" size="100px" style={{ marginRight: '40px' }}>
|
||||
</Avatar>
|
||||
</Space>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,34 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { BackTop, List } from 'tdesign-react';
|
||||
|
||||
export default function BasicBackTop() {
|
||||
const [container, setContainer] = useState(null);
|
||||
|
||||
const style = {
|
||||
position: 'absolute',
|
||||
insetInlineEnd: 24,
|
||||
insetBlockEnd: 80,
|
||||
};
|
||||
|
||||
const listWrapStyle = {
|
||||
width: '100%',
|
||||
height: '280px',
|
||||
position: 'relative',
|
||||
overflowY: 'scroll',
|
||||
overflowX: 'hidden',
|
||||
border: '1px solid #dcdcdcff',
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div id="demo_1" style={listWrapStyle} ref={setContainer}>
|
||||
<List>
|
||||
{Array.from(Array(50), () => '列表内容').map((item, index) => (
|
||||
<List.ListItem key={index}>{item}</List.ListItem>
|
||||
))}
|
||||
</List>
|
||||
</div>
|
||||
<BackTop container={() => container} visibleHeight={46} style={style}></BackTop>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,34 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { BackTop, List } from 'tdesign-react';
|
||||
|
||||
export default function BasicBackTop() {
|
||||
const [container, setContainer] = useState(null);
|
||||
|
||||
const style = {
|
||||
position: 'absolute',
|
||||
insetInlineEnd: 24,
|
||||
insetBlockEnd: 80,
|
||||
};
|
||||
|
||||
const listWrapStyle = {
|
||||
width: '100%',
|
||||
height: '280px',
|
||||
position: 'relative',
|
||||
overflowY: 'scroll',
|
||||
overflowX: 'hidden',
|
||||
border: '1px solid #dcdcdcff',
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div id="demo_1" style={listWrapStyle} ref={setContainer}>
|
||||
<List>
|
||||
{Array.from(Array(50), () => '列表内容').map((item, index) => (
|
||||
<List.ListItem key={index}>{item}</List.ListItem>
|
||||
))}
|
||||
</List>
|
||||
</div>
|
||||
<BackTop container={() => container} visibleHeight={46} style={style} size="small" duration={500}></BackTop>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,32 +0,0 @@
|
||||
import React from 'react';
|
||||
import { BackTop, Space } from 'tdesign-react';
|
||||
|
||||
export default function BasicBackTop() {
|
||||
const style = {
|
||||
position: 'relative',
|
||||
insetInlineEnd: 0,
|
||||
insetBlockEnd: 0,
|
||||
};
|
||||
|
||||
return (
|
||||
<Space size={24}>
|
||||
<BackTop style={style} visibleHeight={0} offset={['24px', '500px']} container={() => document}>
|
||||
<span className="custom-node">返回</span>
|
||||
</BackTop>
|
||||
<BackTop
|
||||
style={style}
|
||||
visibleHeight={0}
|
||||
default={<span>TOP</span>}
|
||||
offset={['124px', '500px']}
|
||||
container={() => document}
|
||||
/>
|
||||
<BackTop
|
||||
style={style}
|
||||
visibleHeight={0}
|
||||
content={<span>UP</span>}
|
||||
offset={['224px', '500px']}
|
||||
container={() => document}
|
||||
/>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
import React from 'react';
|
||||
import { BackTop, Space } from 'tdesign-react';
|
||||
|
||||
export default function BasicBackTop() {
|
||||
const style = {
|
||||
position: 'relative',
|
||||
insetInlineEnd: 0,
|
||||
insetBlockEnd: 0,
|
||||
};
|
||||
|
||||
return (
|
||||
<Space direction="vertical" size={32}>
|
||||
<Space size={24}>
|
||||
<BackTop style={style} visibleHeight={0} shape="circle" container={() => document} />
|
||||
<BackTop style={style} visibleHeight={0} shape="square" container={() => document} />
|
||||
</Space>
|
||||
<Space size={24}>
|
||||
<BackTop style={style} visibleHeight={0} shape="circle" theme="primary" container={() => document} />
|
||||
<BackTop style={style} visibleHeight={0} shape="square" theme="primary" container={() => document} />
|
||||
</Space>
|
||||
<Space size={24}>
|
||||
<BackTop style={style} visibleHeight={0} shape="circle" theme="dark" container={() => document} />
|
||||
<BackTop style={style} visibleHeight={0} shape="square" theme="dark" container={() => document} />
|
||||
</Space>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,56 +0,0 @@
|
||||
// @ts-nocheck
|
||||
import React from 'react';
|
||||
import { BackTop, Space } from 'tdesign-react';
|
||||
|
||||
export default function BasicBackTop() {
|
||||
const style = {
|
||||
position: 'relative',
|
||||
insetInlineEnd: 0,
|
||||
insetBlockEnd: 0,
|
||||
};
|
||||
|
||||
return (
|
||||
<Space direction="vertical" size={32}>
|
||||
<Space size={24}>
|
||||
<BackTop style={style} visibleHeight={0} size="small" offset={['24px', '300px']} container={() => document} />
|
||||
<BackTop style={style} visibleHeight={0} size="medium" offset={['124px', '300px']} container={() => document} />
|
||||
</Space>
|
||||
<Space size={24}>
|
||||
<BackTop
|
||||
style={style}
|
||||
visibleHeight={0}
|
||||
size="small"
|
||||
theme="primary"
|
||||
offset={['24px', '300px']}
|
||||
container={() => document}
|
||||
/>
|
||||
<BackTop
|
||||
style={style}
|
||||
visibleHeight={0}
|
||||
size="medium"
|
||||
theme="primary"
|
||||
offset={['124px', '300px']}
|
||||
container={() => document}
|
||||
/>
|
||||
</Space>
|
||||
<Space size={24}>
|
||||
<BackTop
|
||||
style={style}
|
||||
visibleHeight={0}
|
||||
size="small"
|
||||
theme="dark"
|
||||
offset={['24px', '300px']}
|
||||
container={() => document}
|
||||
/>
|
||||
<BackTop
|
||||
style={style}
|
||||
visibleHeight={0}
|
||||
size="medium"
|
||||
theme="dark"
|
||||
offset={['124px', '300px']}
|
||||
container={() => document}
|
||||
/>
|
||||
</Space>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,43 +0,0 @@
|
||||
// @ts-nocheck
|
||||
import React from 'react';
|
||||
import { BackTop, Space } from 'tdesign-react';
|
||||
|
||||
export default function BasicBackTop() {
|
||||
const style = {
|
||||
position: 'relative',
|
||||
insetInlineEnd: 0,
|
||||
insetBlockEnd: 0,
|
||||
};
|
||||
|
||||
return (
|
||||
<Space direction="vertical" size={32}>
|
||||
<Space size={24}>
|
||||
<BackTop style={style} visibleHeight={0} container={() => document} />
|
||||
<BackTop style={style} visibleHeight={0} theme="primary" container={() => document} />
|
||||
<BackTop style={style} visibleHeight={0} theme="dark" container={() => document} />
|
||||
</Space>
|
||||
<Space size={24}>
|
||||
<BackTop style={style} shape="circle" visibleHeight={0} container={() => document} />
|
||||
<BackTop style={style} shape="circle" visibleHeight={0} theme="primary" container={() => document} />
|
||||
<BackTop style={style} shape="circle" visibleHeight={0} theme="dark" container={() => document} />
|
||||
</Space>
|
||||
<Space size={24}>
|
||||
<BackTop style={style} size="small" visibleHeight={0} container={() => document} />
|
||||
<BackTop style={style} size="small" visibleHeight={0} theme="primary" container={() => document} />
|
||||
<BackTop style={style} size="small" visibleHeight={0} theme="dark" container={() => document} />
|
||||
</Space>
|
||||
<Space size={24}>
|
||||
<BackTop style={style} shape="circle" size="small" visibleHeight={0} container={() => document} />
|
||||
<BackTop
|
||||
style={style}
|
||||
shape="circle"
|
||||
size="small"
|
||||
visibleHeight={0}
|
||||
theme="primary"
|
||||
container={() => document}
|
||||
/>
|
||||
<BackTop style={style} shape="circle" size="small" visibleHeight={0} theme="dark" container={() => document} />
|
||||
</Space>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Badge, Button } from 'tdesign-react';
|
||||
import { UserIcon } from 'tdesign-icons-react';
|
||||
|
||||
export default function BadgeExample() {
|
||||
return (
|
||||
<>
|
||||
<Badge dot count={2}>
|
||||
<Button size="large"> </Button>
|
||||
</Badge>
|
||||
<Badge dot count={99}>
|
||||
解锁新徽章
|
||||
</Badge>
|
||||
<Badge dot count={100}>
|
||||
<UserIcon size={24} />
|
||||
</Badge>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Badge, Checkbox } from 'tdesign-react';
|
||||
|
||||
const colors = [
|
||||
'#f44336',
|
||||
'#e91e63',
|
||||
'#9c27b0',
|
||||
'#3f51b5',
|
||||
'#2196f3',
|
||||
'#03a9f4',
|
||||
'#00bcd4',
|
||||
'#009688',
|
||||
'#4caf50',
|
||||
'#8bc34a',
|
||||
'#cddc39',
|
||||
'#ffeb3b',
|
||||
'#ffc107',
|
||||
'#ff9800',
|
||||
'#ff5722',
|
||||
'#795548',
|
||||
'#9e9e9e',
|
||||
'#607d8b',
|
||||
];
|
||||
|
||||
export default function BadgeExample() {
|
||||
const [dot, setDot] = useState(true);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Checkbox value={dot} onChange={setDot}>
|
||||
红点样式
|
||||
</Checkbox>
|
||||
<div>
|
||||
{colors.map((color) => (
|
||||
<Badge color={color} dot={dot} key={color} count={100} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Badge, Space } from 'tdesign-react';
|
||||
|
||||
export default function BadgeExample() {
|
||||
const badgeBlockStyle = {
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
background: '#EEEEEE',
|
||||
border: '1px solid #DCDCDC',
|
||||
borderRadius: '3px',
|
||||
};
|
||||
|
||||
return (
|
||||
<Space direction="vertical">
|
||||
<Space size={24}>
|
||||
<Badge count="2" dot>
|
||||
<div style={badgeBlockStyle}></div>
|
||||
</Badge>
|
||||
<Badge count="hot">
|
||||
<div style={badgeBlockStyle}></div>
|
||||
</Badge>
|
||||
<Badge count="new" color="var(--td-success-color)">
|
||||
<div style={badgeBlockStyle}></div>
|
||||
</Badge>
|
||||
<Badge count="100" color="var(--brand-main)" shape="round">
|
||||
<div style={badgeBlockStyle}></div>
|
||||
</Badge>
|
||||
</Space>
|
||||
|
||||
<Space size={24}>
|
||||
<Badge count="2" dot>
|
||||
<div style={badgeBlockStyle}></div>
|
||||
</Badge>
|
||||
<Badge count={<span style={{ color: 'var(--td-error-color)' }}>hot</span>} color="var(--td-error-color-1)">
|
||||
<div style={badgeBlockStyle}></div>
|
||||
</Badge>
|
||||
<Badge count={<span style={{ color: 'var(--td-success-color)' }}>new</span>} color="var(--td-success-color-1)">
|
||||
<div style={badgeBlockStyle}></div>
|
||||
</Badge>
|
||||
<Badge count={<span style={{ color: 'var(--td-brand-color)' }}>new</span>} color="var(--td-brand-color-1)">
|
||||
<div style={badgeBlockStyle}></div>
|
||||
</Badge>
|
||||
</Space>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Badge, Button } from 'tdesign-react';
|
||||
|
||||
export default function BadgeExample() {
|
||||
return (
|
||||
<>
|
||||
<Badge count={2}>
|
||||
<Button size="large"> </Button>
|
||||
</Badge>
|
||||
<Badge count={99}>
|
||||
<Button size="large"> </Button>
|
||||
</Badge>
|
||||
<Badge count={100}>
|
||||
<Button size="large"> </Button>
|
||||
</Badge>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Badge, Button } from 'tdesign-react';
|
||||
|
||||
export default function BadgeExample() {
|
||||
return (
|
||||
<>
|
||||
<Badge count={2}>
|
||||
<Button>默认</Button>
|
||||
</Badge>
|
||||
<Badge count={2} offset={[10, 10]}>
|
||||
<Button>[10,10]</Button>
|
||||
</Badge>
|
||||
<Badge count={2} offset={[-10, 10]}>
|
||||
<Button>[-10,10]</Button>
|
||||
</Badge>
|
||||
<Badge count={2} offset={[-10, -10]}>
|
||||
<Button>[-10,-10]</Button>
|
||||
</Badge>
|
||||
<Badge count={2} offset={[10, -10]}>
|
||||
<Button>[10,-10]</Button>
|
||||
</Badge>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Badge, Button } from 'tdesign-react';
|
||||
|
||||
export default function BadgeExample() {
|
||||
return (
|
||||
<>
|
||||
<Badge shape={'circle'} count={2}>
|
||||
<Button> circle</Button>
|
||||
</Badge>
|
||||
<Badge shape={'round'} count={99}>
|
||||
<Button>round</Button>
|
||||
</Badge>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Badge, Button } from 'tdesign-react';
|
||||
|
||||
export default function BadgeExample() {
|
||||
return (
|
||||
<>
|
||||
<h3 style={{ marginBottom: 16 }}>1.默认大小</h3>
|
||||
<Badge count={2}>
|
||||
<Button>按钮</Button>
|
||||
</Badge>
|
||||
<Badge count={99}>
|
||||
<Button>按钮</Button>
|
||||
</Badge>
|
||||
<Badge count={999}>
|
||||
<Button>按钮</Button>
|
||||
</Badge>
|
||||
<h3 style={{ marginBottom: 16, marginTop: 32 }}>2.小</h3>
|
||||
<Badge count={2} size="small">
|
||||
<Button>按钮</Button>
|
||||
</Badge>
|
||||
<Badge count={99} size="small">
|
||||
<Button>按钮</Button>
|
||||
</Badge>
|
||||
<Badge count={999} size="small">
|
||||
<Button>按钮</Button>
|
||||
</Badge>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Breadcrumb } from 'tdesign-react';
|
||||
|
||||
const { BreadcrumbItem } = Breadcrumb;
|
||||
|
||||
export default function BreadcrumbExample() {
|
||||
return (
|
||||
<Breadcrumb maxItemWidth="200px">
|
||||
<BreadcrumbItem>页面1</BreadcrumbItem>
|
||||
<BreadcrumbItem>页面2页面2页面2页面2页面2页面2页面2页面2</BreadcrumbItem>
|
||||
<BreadcrumbItem maxWidth="120px">
|
||||
页面3页面3页面3页面3页面3页面3页面3页面3页面3页面3页面3页面3页面3页面3页面3
|
||||
</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
);
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Breadcrumb } from 'tdesign-react';
|
||||
|
||||
const { BreadcrumbItem } = Breadcrumb;
|
||||
|
||||
export default function BreadcrumbExample() {
|
||||
return (
|
||||
<>
|
||||
<Breadcrumb maxItemWidth="150" separator={'>>'}>
|
||||
<BreadcrumbItem>页面1</BreadcrumbItem>
|
||||
<BreadcrumbItem>页面2</BreadcrumbItem>
|
||||
<BreadcrumbItem maxItemWidth="160">页面3</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
<Breadcrumb maxItemWidth="150" separator={'/////'}>
|
||||
<BreadcrumbItem>页面1</BreadcrumbItem>
|
||||
<BreadcrumbItem>页面2</BreadcrumbItem>
|
||||
<BreadcrumbItem maxItemWidth="160">页面3</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Breadcrumb } from 'tdesign-react';
|
||||
|
||||
const { BreadcrumbItem } = Breadcrumb;
|
||||
|
||||
export default function BreadcrumbExample() {
|
||||
const [count, setCount] = useState(0);
|
||||
return (
|
||||
<div>
|
||||
<Breadcrumb maxItemWidth="150">
|
||||
<BreadcrumbItem href="/" target="_blank">
|
||||
页面1
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbItem href="/react/components/button" disabled>
|
||||
页面2
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbItem maxItemWidth="160" onClick={() => setCount(count + 1)}>
|
||||
页面3
|
||||
</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
|
||||
<div style={{ marginTop: 20 }}>点击计数器：{count}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Breadcrumb } from 'tdesign-react';
|
||||
import { BookmarkIcon } from 'tdesign-icons-react';
|
||||
|
||||
const { BreadcrumbItem } = Breadcrumb;
|
||||
|
||||
export default function BreadcrumbExample() {
|
||||
return (
|
||||
<Breadcrumb>
|
||||
<BreadcrumbItem icon={<BookmarkIcon />}>页面1</BreadcrumbItem>
|
||||
<BreadcrumbItem icon={<BookmarkIcon />}>页面2</BreadcrumbItem>
|
||||
<BreadcrumbItem icon={<BookmarkIcon />}>页面3</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
);
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Breadcrumb } from 'tdesign-react';
|
||||
|
||||
export default function BreadcrumbExample() {
|
||||
const options = [{ content: '页面1' }, { content: '页面2' }, { content: '页面3', href: 'https://github.com/' }];
|
||||
return <Breadcrumb options={options} />;
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Breadcrumb } from 'tdesign-react';
|
||||
|
||||
const { BreadcrumbItem } = Breadcrumb;
|
||||
|
||||
export default function BreadcrumbExample() {
|
||||
return (
|
||||
<Breadcrumb>
|
||||
<BreadcrumbItem to={{ path: '/' }}>首页</BreadcrumbItem>
|
||||
<BreadcrumbItem to={{ path: '/' }}>页面1</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
);
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Breadcrumb } from 'tdesign-react';
|
||||
|
||||
const { BreadcrumbItem } = Breadcrumb;
|
||||
|
||||
export default function BreadcrumbExample() {
|
||||
return (
|
||||
<Breadcrumb maxItemWidth="100px">
|
||||
<BreadcrumbItem>父级设置100px父级设置100px</BreadcrumbItem>
|
||||
<BreadcrumbItem maxWidth="160px">设置最大宽度160px设置最大宽度160px设置最大宽度160px</BreadcrumbItem>
|
||||
<BreadcrumbItem maxWidth="240px">
|
||||
设置最大宽度240px设置最大宽度240px设置最大宽度240px设置最大宽度240px设置最大宽度240px
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbItem>父级设置100px父级设置100px</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
);
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Button, Space } from 'tdesign-react';
|
||||
|
||||
export default function ButtonExample() {
|
||||
return (
|
||||
<Space>
|
||||
<Button theme="default" variant="base">
|
||||
填充按钮
|
||||
</Button>
|
||||
<Button theme="default" variant="outline">
|
||||
描边按钮
|
||||
</Button>
|
||||
<Button theme="default" variant="dashed">
|
||||
虚框按钮
|
||||
</Button>
|
||||
<Button theme="default" variant="text">
|
||||
文字按钮
|
||||
</Button>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Button, Space } from 'tdesign-react';
|
||||
|
||||
export default function ButtonExample() {
|
||||
return (
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Button block variant="base">
|
||||
填充按钮
|
||||
</Button>
|
||||
<Button block variant="outline">
|
||||
描边按钮
|
||||
</Button>
|
||||
<Button block variant="dashed">
|
||||
虚框按钮
|
||||
</Button>
|
||||
<Button block variant="text">
|
||||
文字按钮
|
||||
</Button>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Button, Space } from 'tdesign-react';
|
||||
|
||||
export default function ButtonExample() {
|
||||
return (
|
||||
<Space size={24}>
|
||||
<Button tag="div">div</Button>
|
||||
<Button tag="a">a</Button>
|
||||
<Button href="#">a:href</Button>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,64 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Button, Space } from 'tdesign-react';
|
||||
|
||||
export default function ButtonExample() {
|
||||
return (
|
||||
<Space direction="vertical">
|
||||
<Space>
|
||||
<Button variant="outline" ghost>
|
||||
幽灵按钮
|
||||
</Button>
|
||||
<Button variant="dashed" ghost>
|
||||
幽灵按钮
|
||||
</Button>
|
||||
<Button variant="text" ghost>
|
||||
幽灵按钮
|
||||
</Button>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button variant="outline" theme="primary" ghost>
|
||||
幽灵按钮
|
||||
</Button>
|
||||
<Button variant="dashed" theme="primary" ghost>
|
||||
幽灵按钮
|
||||
</Button>
|
||||
<Button variant="text" theme="primary" ghost>
|
||||
幽灵按钮
|
||||
</Button>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button variant="outline" theme="success" ghost>
|
||||
幽灵按钮
|
||||
</Button>
|
||||
<Button variant="dashed" theme="success" ghost>
|
||||
幽灵按钮
|
||||
</Button>
|
||||
<Button variant="text" theme="success" ghost>
|
||||
幽灵按钮
|
||||
</Button>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button variant="outline" theme="warning" ghost>
|
||||
幽灵按钮
|
||||
</Button>
|
||||
<Button variant="dashed" theme="warning" ghost>
|
||||
幽灵按钮
|
||||
</Button>
|
||||
<Button variant="text" theme="warning" ghost>
|
||||
幽灵按钮
|
||||
</Button>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button variant="outline" theme="danger" ghost>
|
||||
幽灵按钮
|
||||
</Button>
|
||||
<Button variant="dashed" theme="danger" ghost>
|
||||
幽灵按钮
|
||||
</Button>
|
||||
<Button variant="text" theme="danger" ghost>
|
||||
幽灵按钮
|
||||
</Button>
|
||||
</Space>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Button, Space } from 'tdesign-react';
|
||||
import { SearchIcon, AddIcon, CloudUploadIcon, DiscountIcon, CloudDownloadIcon } from 'tdesign-icons-react';
|
||||
|
||||
export default function ButtonExample() {
|
||||
return (
|
||||
<Space>
|
||||
<Button icon={<AddIcon />}>新建</Button>
|
||||
<Button variant="outline" icon={<CloudUploadIcon />}>
|
||||
上传文件
|
||||
</Button>
|
||||
<Button shape="circle" icon={<DiscountIcon />} />
|
||||
<Button shape="circle" icon={<CloudDownloadIcon />} />
|
||||
<Button theme="default" variant="outline" icon={<SearchIcon />}>
|
||||
Function Icon
|
||||
</Button>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,66 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Button, Space } from 'tdesign-react';
|
||||
import { CalendarIcon } from 'tdesign-icons-react';
|
||||
|
||||
export default function ButtonExample() {
|
||||
return (
|
||||
<Space direction="vertical">
|
||||
<Space>
|
||||
<Button shape="rectangle" variant="base">
|
||||
填充按钮
|
||||
</Button>
|
||||
<Button shape="square" variant="base">
|
||||
<CalendarIcon />
|
||||
</Button>
|
||||
<Button shape="round" variant="base">
|
||||
填充按钮
|
||||
</Button>
|
||||
<Button shape="circle" variant="base">
|
||||
<CalendarIcon />
|
||||
</Button>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button shape="rectangle" variant="outline">
|
||||
描边按钮
|
||||
</Button>
|
||||
<Button shape="square" variant="outline">
|
||||
<CalendarIcon />
|
||||
</Button>
|
||||
<Button shape="round" variant="outline">
|
||||
描边按钮
|
||||
</Button>
|
||||
<Button shape="circle" variant="outline">
|
||||
<CalendarIcon />
|
||||
</Button>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button shape="rectangle" variant="dashed">
|
||||
虚框按钮
|
||||
</Button>
|
||||
<Button shape="square" variant="dashed">
|
||||
<CalendarIcon />
|
||||
</Button>
|
||||
<Button shape="round" variant="dashed">
|
||||
虚框按钮
|
||||
</Button>
|
||||
<Button shape="circle" variant="dashed">
|
||||
<CalendarIcon />
|
||||
</Button>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button shape="rectangle" variant="text">
|
||||
文字按钮
|
||||
</Button>
|
||||
<Button shape="square" variant="text">
|
||||
<CalendarIcon />
|
||||
</Button>
|
||||
<Button shape="round" variant="text">
|
||||
文字按钮
|
||||
</Button>
|
||||
<Button shape="circle" variant="text">
|
||||
<CalendarIcon />
|
||||
</Button>
|
||||
</Space>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,51 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Button, Space } from 'tdesign-react';
|
||||
|
||||
export default function ButtonExample() {
|
||||
return (
|
||||
<Space direction="vertical">
|
||||
<Space>
|
||||
<Button size="small" variant="base">
|
||||
填充按钮
|
||||
</Button>
|
||||
<Button size="small" variant="outline">
|
||||
描边按钮
|
||||
</Button>
|
||||
<Button size="small" variant="dashed">
|
||||
虚框按钮
|
||||
</Button>
|
||||
<Button size="small" variant="text">
|
||||
文字按钮
|
||||
</Button>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button size="medium" variant="base">
|
||||
填充按钮
|
||||
</Button>
|
||||
<Button size="medium" variant="outline">
|
||||
描边按钮
|
||||
</Button>
|
||||
<Button size="medium" variant="dashed">
|
||||
虚框按钮
|
||||
</Button>
|
||||
<Button size="medium" variant="text">
|
||||
文字按钮
|
||||
</Button>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button size="large" variant="base">
|
||||
填充按钮
|
||||
</Button>
|
||||
<Button size="large" variant="outline">
|
||||
描边按钮
|
||||
</Button>
|
||||
<Button size="large" variant="dashed">
|
||||
虚框按钮
|
||||
</Button>
|
||||
<Button size="large" variant="text">
|
||||
文字按钮
|
||||
</Button>
|
||||
</Space>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Button, Space } from 'tdesign-react';
|
||||
|
||||
export default function ButtonExample() {
|
||||
return (
|
||||
<Space>
|
||||
<Button disabled>填充按钮</Button>
|
||||
<Button loading>加载中</Button>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,77 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Button, Space } from 'tdesign-react';
|
||||
|
||||
export default function ButtonExample() {
|
||||
return (
|
||||
<Space direction="vertical">
|
||||
<Space>
|
||||
<Button theme="default">填充按钮</Button>
|
||||
<Button variant="outline" theme="default">
|
||||
描边按钮
|
||||
</Button>
|
||||
<Button variant="dashed" theme="default">
|
||||
虚框按钮
|
||||
</Button>
|
||||
<Button variant="text" theme="default">
|
||||
文字按钮
|
||||
</Button>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button theme="primary" variant="base">
|
||||
填充按钮
|
||||
</Button>
|
||||
<Button theme="primary" variant="outline">
|
||||
描边按钮
|
||||
</Button>
|
||||
<Button theme="primary" variant="dashed">
|
||||
虚框按钮
|
||||
</Button>
|
||||
<Button theme="primary" variant="text">
|
||||
文字按钮
|
||||
</Button>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button theme="danger" variant="base">
|
||||
填充按钮
|
||||
</Button>
|
||||
<Button theme="danger" variant="outline">
|
||||
描边按钮
|
||||
</Button>
|
||||
<Button theme="danger" variant="dashed">
|
||||
虚框按钮
|
||||
</Button>
|
||||
<Button theme="danger" variant="text">
|
||||
文字按钮
|
||||
</Button>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button theme="warning" variant="base">
|
||||
填充按钮
|
||||
</Button>
|
||||
<Button theme="warning" variant="outline">
|
||||
描边按钮
|
||||
</Button>
|
||||
<Button theme="warning" variant="dashed">
|
||||
虚框按钮
|
||||
</Button>
|
||||
<Button theme="warning" variant="text">
|
||||
文字按钮
|
||||
</Button>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button theme="success" variant="base">
|
||||
填充按钮
|
||||
</Button>
|
||||
<Button theme="success" variant="outline">
|
||||
描边按钮
|
||||
</Button>
|
||||
<Button theme="success" variant="dashed">
|
||||
虚框按钮
|
||||
</Button>
|
||||
<Button theme="success" variant="text">
|
||||
文字按钮
|
||||
</Button>
|
||||
</Space>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Calendar } from 'tdesign-react';
|
||||
|
||||
export default function CalendarExample() {
|
||||
return <Calendar />;
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Button, Calendar, Select, Switch, Space } from 'tdesign-react';
|
||||
|
||||
export default function CalendarExample() {
|
||||
const ref = React.useRef(null);
|
||||
const [theme, setTheme] = React.useState('card');
|
||||
const [fillWithZero, setFillWithZero] = React.useState(false);
|
||||
const toCurrent = React.useCallback(() => {
|
||||
ref.current.toCurrent();
|
||||
}, [ref]);
|
||||
|
||||
return (
|
||||
<Space direction="vertical" size="large">
|
||||
<Space align="center">
|
||||
<label>请选择风格：</label>
|
||||
<Select
|
||||
style={{
|
||||
width: '200px',
|
||||
display: 'inline-block',
|
||||
margin: '0 10px 0 0',
|
||||
}}
|
||||
value={theme}
|
||||
options={[
|
||||
{ label: '卡片风格', value: 'card' },
|
||||
{ label: '全屏风格', value: 'full' },
|
||||
]}
|
||||
onChange={(value) => setTheme(value)}
|
||||
/>
|
||||
<Button theme="primary" style={{ marginLeft: '12px' }} onClick={toCurrent}>
|
||||
回到今天
|
||||
</Button>
|
||||
</Space>
|
||||
<Space align="center">
|
||||
<label>日期补零：</label>
|
||||
<Switch size="large" value={fillWithZero} onChange={(val) => setFillWithZero(val)}></Switch>
|
||||
</Space>
|
||||
<Calendar ref={ref} theme={theme} isShowWeekendDefault={true} fillWithZero={fillWithZero} />
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Calendar, Tag } from 'tdesign-react';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
export default function CalendarExample() {
|
||||
const getShow = (data) =>
|
||||
data.mode === 'month'
|
||||
? dayjs().format('YYYY-MM-DD') === data.formattedDate
|
||||
: data.date.getMonth() === new Date().getMonth();
|
||||
|
||||
return (
|
||||
<Calendar
|
||||
cellAppend={(cellData) =>
|
||||
getShow(cellData) && (
|
||||
<div className="cell-append-demo-outer">
|
||||
<Tag theme="success" variant="light" size="small" className="activeTag" style={{ width: '100%' }}>
|
||||
{cellData.mode == 'month' ? '我们的纪念日' : '我们的纪念月'}
|
||||
</Tag>
|
||||
<Tag theme="warning" variant="light" size="small" className="activeTag" style={{ width: '100%' }}>
|
||||
{cellData.mode == 'month' ? '家庭聚会' : '家庭聚会'}
|
||||
</Tag>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -1,49 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Calendar, Tag, Space } from 'tdesign-react';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
export default function CalendarExample() {
|
||||
const displayNum = React.useCallback((date) => {
|
||||
if (date.mode === 'month') {
|
||||
return date.date.getDate();
|
||||
}
|
||||
return date.date.getMonth() + 1;
|
||||
}, []);
|
||||
|
||||
const isShow = (data) =>
|
||||
data.mode === 'month' ? dayjs(data.formattedDate).date() === 15 : dayjs(data.formattedDate).month() === 7;
|
||||
|
||||
const dataList = [
|
||||
{
|
||||
value: 'danger',
|
||||
label: '错误事件',
|
||||
},
|
||||
{
|
||||
value: 'warning',
|
||||
label: '警告事件',
|
||||
},
|
||||
{
|
||||
value: 'success',
|
||||
label: '正常事件',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Calendar
|
||||
cell={(cellData) => (
|
||||
<div style={{ width: '100%' }}>
|
||||
<div>{displayNum(cellData)}</div>
|
||||
{isShow(cellData) && (
|
||||
<Space direction="vertical" size={2}>
|
||||
{dataList.map((item, index) => (
|
||||
<Tag key={index} theme={item.value}>
|
||||
{item.label}
|
||||
</Tag>
|
||||
))}
|
||||
</Space>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -1,204 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { Calendar, Switch } from 'tdesign-react';
|
||||
|
||||
const classStyles = `
|
||||
<style>
|
||||
.controllerConfig-demo fieldset {
|
||||
border: solid 1px #eee;
|
||||
padding: 10px 20px 10px 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.controllerConfig-demo fieldset legend {
|
||||
margin-left: 20px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.controllerConfig-demo fieldset p {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.controllerConfig-demo fieldset p label {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.outerWarper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.shadow {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
bottom: 0;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
|
||||
}
|
||||
.number {
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
span {
|
||||
display: block;
|
||||
left: 1px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 10px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
.error {
|
||||
background: #e34d59;
|
||||
}
|
||||
.warning {
|
||||
background: #ed7b2f;
|
||||
}
|
||||
.success {
|
||||
background: #00a870;
|
||||
}
|
||||
|
||||
.slotWarper {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 5px;
|
||||
}
|
||||
}
|
||||
.cellAppend {
|
||||
margin: 10px;
|
||||
background-color: #ebf2ff;
|
||||
color: #888;
|
||||
border-radius: 3px;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
.cellAppend.belongCurrent {
|
||||
color: #0052d9;
|
||||
}
|
||||
.cellAppend.actived {
|
||||
background-color: #0052d9;
|
||||
color: #ebf2ff;
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
|
||||
export default function CalendarExample() {
|
||||
const [visible, setVisible] = React.useState(true);
|
||||
const [disabled, setDisabled] = React.useState(false);
|
||||
const [modeVisible, setModeVisible] = React.useState(true);
|
||||
const [modeDisabled, setModeDisabled] = React.useState(false);
|
||||
const [yearVisible, setYearVisible] = React.useState(true);
|
||||
const [yearDisabled, setYearDisabled] = React.useState(false);
|
||||
const [monthVisible, setMonthVisible] = React.useState(true);
|
||||
const [monthDisabled, setMonthDisabled] = React.useState(false);
|
||||
const [weekendToggleVisible, setWeekendToggleVisible] = React.useState(true);
|
||||
const [weekendShowButtonDisabled, setWeekendShowButtonDisabled] = React.useState(false);
|
||||
const [weekendHideButtonDisabled, setWeekendHideButtonDisabled] = React.useState(false);
|
||||
const [currentVisible, setCurrentVisible] = React.useState(true);
|
||||
const [currentDayButtonDisabled, setCurrentDayButtonDisabled] = React.useState(false);
|
||||
const [currentMonthButtonDisabled, setCurrentMonthButtonDisabled] = React.useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// 添加示例代码所需样式
|
||||
document.head.insertAdjacentHTML('beforeend', classStyles);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="controllerConfig-demo">
|
||||
<div style={{ margin: '12px 0' }}>
|
||||
<fieldset>
|
||||
<legend>控件全局</legend>
|
||||
<p>
|
||||
<label>是否显示（全部控件）：</label>
|
||||
<Switch value={visible} onChange={setVisible} />
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
<label>是否禁用（全部控件）：</label>
|
||||
<Switch value={disabled} onChange={setDisabled} />
|
||||
</p>
|
||||
<br />
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>控件局部</legend>
|
||||
<p>
|
||||
<label>是否显示“模式切换”控件：</label>
|
||||
<Switch value={modeVisible} onChange={setModeVisible} />
|
||||
<label>是否禁用“模式切换”控件：</label>
|
||||
<Switch value={modeDisabled} onChange={setModeDisabled} />
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
<label>是否显示“年份选择”控件：</label>
|
||||
<Switch value={yearVisible} onChange={setYearVisible} />
|
||||
<label>是否禁用“年份选择”控件：</label>
|
||||
<Switch value={yearDisabled} onChange={setYearDisabled} />
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
<label>是否显示“月份选择”控件：</label>
|
||||
<Switch value={monthVisible} onChange={setMonthVisible} />
|
||||
<label>是否禁用“月份选择”控件：</label>
|
||||
<Switch value={monthDisabled} onChange={setMonthDisabled} />
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
<label>是否禁用“隐藏周末”控件：</label>
|
||||
<Switch value={weekendHideButtonDisabled} onChange={setWeekendHideButtonDisabled} />
|
||||
<label>是否禁用“显示周末”控件：</label>
|
||||
<Switch value={weekendShowButtonDisabled} onChange={setWeekendShowButtonDisabled} />
|
||||
<label>是否显示“隐藏\显示周末”控件：</label>
|
||||
<Switch value={weekendToggleVisible} onChange={setWeekendToggleVisible} />
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
<label>是否显示“今天\本月”控件：</label>
|
||||
<Switch value={currentVisible} onChange={setCurrentVisible} />
|
||||
<label>是否禁用“今天”按钮控件：</label>
|
||||
<Switch value={currentDayButtonDisabled} onChange={setCurrentDayButtonDisabled} />
|
||||
<label>是否禁用“本月”按钮控件：</label>
|
||||
<Switch value={currentMonthButtonDisabled} onChange={setCurrentMonthButtonDisabled} />
|
||||
</p>
|
||||
<br />
|
||||
<Calendar
|
||||
controllerConfig={
|
||||
visible
|
||||
? {
|
||||
disabled,
|
||||
mode: {
|
||||
visible: modeVisible,
|
||||
radioGroupProps: { disabled: modeDisabled, variant: 'default-filled' },
|
||||
},
|
||||
year: {
|
||||
visible: yearVisible,
|
||||
selectProps: {
|
||||
disabled: yearDisabled,
|
||||
},
|
||||
},
|
||||
month: {
|
||||
visible: monthVisible,
|
||||
selectProps: {
|
||||
disabled: monthDisabled,
|
||||
},
|
||||
},
|
||||
weekend: {
|
||||
visible: weekendToggleVisible,
|
||||
showWeekendButtonProps: { disabled: weekendShowButtonDisabled },
|
||||
hideWeekendButtonProps: { disabled: weekendHideButtonDisabled },
|
||||
},
|
||||
current: {
|
||||
visible: currentVisible,
|
||||
currentDayButtonProps: { disabled: currentDayButtonDisabled },
|
||||
currentMonthButtonProps: { disabled: currentMonthButtonDisabled },
|
||||
},
|
||||
}
|
||||
: false
|
||||
}
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,79 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Alert, Switch, Calendar, List } from 'tdesign-react';
|
||||
|
||||
const { ListItem } = List;
|
||||
|
||||
export default function CalendarExample() {
|
||||
const [preventCellContextmenu, setPreventCellContextmenu] = React.useState(false);
|
||||
const [histories, setHistories] = React.useState([]);
|
||||
|
||||
const getDateStr = React.useCallback((calendarCell) => {
|
||||
const y = calendarCell.date.getFullYear();
|
||||
const m = calendarCell.date.getMonth() + 1;
|
||||
const d = calendarCell.date.getDate();
|
||||
const output = `${y}-${m}-${d}`;
|
||||
return output;
|
||||
}, []);
|
||||
|
||||
const appendHistories = React.useCallback(
|
||||
(content, data) => {
|
||||
histories.unshift(`${content}`);
|
||||
setHistories([...histories]);
|
||||
console.info(data);
|
||||
},
|
||||
[histories, setHistories],
|
||||
);
|
||||
|
||||
const onCellClick = React.useCallback(
|
||||
(cellEmitData) => {
|
||||
const output = getDateStr(cellEmitData.cell);
|
||||
appendHistories(`鼠标左键单击单元格 ${output}`, cellEmitData.cell);
|
||||
},
|
||||
[getDateStr, appendHistories],
|
||||
);
|
||||
|
||||
const onCellDoubleClick = React.useCallback(
|
||||
(cellEmitData) => {
|
||||
const output = getDateStr(cellEmitData.cell);
|
||||
appendHistories(`鼠标双击单元格 ${output}`, cellEmitData.cell);
|
||||
},
|
||||
[getDateStr, appendHistories],
|
||||
);
|
||||
|
||||
const onCellRightClick = React.useCallback(
|
||||
(cellEmitData) => {
|
||||
const output = getDateStr(cellEmitData.cell);
|
||||
appendHistories(`鼠标右键单击单元格 ${output}`, cellEmitData.cell);
|
||||
},
|
||||
[getDateStr, appendHistories],
|
||||
);
|
||||
|
||||
const onControllerChange = React.useCallback((data) => {
|
||||
appendHistories('控件值变化', data);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ margin: '12px 0' }}>
|
||||
<label>禁用单元格右键菜单：</label>
|
||||
<Switch value={preventCellContextmenu} onChange={setPreventCellContextmenu} />
|
||||
</div>
|
||||
<Calendar
|
||||
preventCellContextmenu={preventCellContextmenu}
|
||||
onCellClick={onCellClick}
|
||||
onCellDoubleClick={onCellDoubleClick}
|
||||
onCellRightClick={onCellRightClick}
|
||||
onControllerChange={onControllerChange}
|
||||
/>
|
||||
{histories.length === 0 ? (
|
||||
<Alert theme="warning" message={['暂无数据，您可以点击一下日历的单元格看看 :)']} />
|
||||
) : (
|
||||
<List style={{ maxHeight: '130px' }}>
|
||||
{histories.map((item, index) => (
|
||||
<ListItem key={String(index)}>{item}，并得到组件传出的参数（您看控制台）...</ListItem>
|
||||
))}
|
||||
</List>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,43 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Switch, Calendar } from 'tdesign-react';
|
||||
|
||||
export default function CalendarExample() {
|
||||
const [preventCellContextmenu, setPreventCellContextmenu] = React.useState(false);
|
||||
|
||||
const cellClick = (options) => {
|
||||
console.log(`鼠标左键单击单元格 ${options.cell.formattedDate}`);
|
||||
};
|
||||
|
||||
const cellDoubleClick = (options) => {
|
||||
console.log(`鼠标双击单元格 ${options.cell.formattedDate}`);
|
||||
};
|
||||
|
||||
const cellRightClick = (options) => {
|
||||
console.log(`鼠标右键点击元格 ${options.cell.formattedDate}`);
|
||||
};
|
||||
|
||||
const controllerChange = (data) => {
|
||||
console.log('控件值变化', data);
|
||||
};
|
||||
|
||||
const monthChange = (data) => {
|
||||
console.log('月份变化', data);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ margin: '12px 0' }}>
|
||||
<label>禁用单元格右键菜单：</label>
|
||||
<Switch value={preventCellContextmenu} onChange={setPreventCellContextmenu} />
|
||||
</div>
|
||||
<Calendar
|
||||
preventCellContextmenu={preventCellContextmenu}
|
||||
onCellClick={cellClick}
|
||||
onCellDoubleClick={cellDoubleClick}
|
||||
onCellRightClick={cellRightClick}
|
||||
onControllerChange={controllerChange}
|
||||
onMonthChange={monthChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Switch, Calendar } from 'tdesign-react';
|
||||
|
||||
export default function CalendarExample() {
|
||||
const [isShowWeekendDefault, setIsShowWeekendDefault] = React.useState(true);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ margin: '12px 0' }}>
|
||||
<label>{`${isShowWeekendDefault ? '显示' : '隐藏'}周末`}</label>
|
||||
<Switch value={isShowWeekendDefault} onChange={setIsShowWeekendDefault} />
|
||||
</div>
|
||||
<Calendar isShowWeekendDefault={isShowWeekendDefault} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,33 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Select, Calendar, Space } from 'tdesign-react';
|
||||
|
||||
export default function CalendarExample() {
|
||||
const [firstDayOfWeek, setFirstDayOfWeek] = React.useState(3);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Space align="center" style={{ margin: '12px 0' }}>
|
||||
<label>日历的第一列为：</label>
|
||||
<Select
|
||||
style={{
|
||||
width: '200px',
|
||||
display: 'inline-block',
|
||||
margin: '0 10px 0 0',
|
||||
}}
|
||||
value={firstDayOfWeek}
|
||||
options={[
|
||||
{ label: '周一', value: 1 },
|
||||
{ label: '周二', value: 2 },
|
||||
{ label: '周三', value: 3 },
|
||||
{ label: '周四', value: 4 },
|
||||
{ label: '周五', value: 5 },
|
||||
{ label: '周六', value: 6 },
|
||||
{ label: '周日', value: 7 },
|
||||
]}
|
||||
onChange={(value) => setFirstDayOfWeek(value)}
|
||||
/>
|
||||
</Space>
|
||||
<Calendar firstDayOfWeek={firstDayOfWeek} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Calendar } from 'tdesign-react';
|
||||
|
||||
export default function CalendarExample() {
|
||||
return <Calendar head={<div>🗓 TDesign开发计划</div>} />;
|
||||
}
|
||||
@ -1,28 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Select, Calendar, Space } from 'tdesign-react';
|
||||
|
||||
export default function CalendarExample() {
|
||||
const [mode, setMode] = React.useState('year');
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Space align="center" style={{ margin: '12px 0' }}>
|
||||
<label>可以在组件外切换成：</label>
|
||||
<Select
|
||||
style={{
|
||||
width: '200px',
|
||||
display: 'inline-block',
|
||||
margin: '0 10px 0 0',
|
||||
}}
|
||||
value={mode}
|
||||
options={[
|
||||
{ label: '月历', value: 'year' },
|
||||
{ label: '日历', value: 'month' },
|
||||
]}
|
||||
onChange={(value) => setMode(value)}
|
||||
/>
|
||||
</Space>
|
||||
<Calendar mode={mode} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Calendar } from 'tdesign-react';
|
||||
|
||||
export default function CalendarExample() {
|
||||
const range = [
|
||||
'2018-08', // new Date(2018, 7),
|
||||
'2027-04', // new Date(2027, 3),
|
||||
];
|
||||
return <Calendar range={range} />;
|
||||
}
|
||||
@ -1,61 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Calendar, Space, Tag } from 'tdesign-react';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
export default function CalendarExample() {
|
||||
const displayNum = React.useCallback((date) => {
|
||||
if (date.mode === 'month') {
|
||||
return date.date.getDate();
|
||||
}
|
||||
return date.date.getMonth() + 1;
|
||||
}, []);
|
||||
|
||||
const isShow = (data) =>
|
||||
data.mode === 'month' ? dayjs(data.formattedDate).date() === 15 : dayjs(data.formattedDate).month() === 7;
|
||||
|
||||
const dataList = [
|
||||
{
|
||||
value: 'danger',
|
||||
label: '错误事件',
|
||||
},
|
||||
{
|
||||
value: 'warning',
|
||||
label: '警告事件',
|
||||
},
|
||||
{
|
||||
value: 'success',
|
||||
label: '正常事件',
|
||||
},
|
||||
];
|
||||
|
||||
const renderHead = (params) => {
|
||||
let title = params.filterDate.getFullYear();
|
||||
if (params.mode === 'month') {
|
||||
title += `-${params.filterDate.getMonth() + 1}`;
|
||||
}
|
||||
title += ' 工作安排';
|
||||
return <div>{title}</div>;
|
||||
};
|
||||
|
||||
return (
|
||||
<Calendar
|
||||
head={renderHead}
|
||||
cell={(cellData) => (
|
||||
<>
|
||||
<div style={{ width: '100%' }}>
|
||||
<div>{displayNum(cellData)}</div>
|
||||
{isShow(cellData) && (
|
||||
<Space direction="vertical" size={2}>
|
||||
{dataList.map((item, index) => (
|
||||
<Tag key={index} theme={item.value}>
|
||||
{item.label}
|
||||
</Tag>
|
||||
))}
|
||||
</Space>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Calendar } from 'tdesign-react';
|
||||
|
||||
export default function CalendarExample() {
|
||||
const value = '1998-11-11'; // new Date(1998, 10, 11)
|
||||
return <Calendar value={value} />;
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Calendar } from 'tdesign-react';
|
||||
|
||||
export default function CalendarExample() {
|
||||
const getWeekText = React.useCallback((calendarWeek) => {
|
||||
const output = `星期${calendarWeek.day}`;
|
||||
return output;
|
||||
}, []);
|
||||
|
||||
return <Calendar week={(calendarWeek) => <div>{getWeekText(calendarWeek)}</div>} />;
|
||||
}
|
||||
@ -1,83 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Alert, Switch, Calendar, List } from 'tdesign-react';
|
||||
import type { CalendarProps, CalendarCell } from 'tdesign-react';
|
||||
|
||||
const { ListItem } = List;
|
||||
|
||||
export default function CalendarExample() {
|
||||
const [preventCellContextmenu, setPreventCellContextmenu] = React.useState(false);
|
||||
const [histories, setHistories] = React.useState([]);
|
||||
|
||||
const getDateStr = React.useCallback((calendarCell: CalendarCell) => {
|
||||
const y = calendarCell.date.getFullYear();
|
||||
const m = calendarCell.date.getMonth() + 1;
|
||||
const d = calendarCell.date.getDate();
|
||||
const output = `${y}-${m}-${d}`;
|
||||
return output;
|
||||
}, []);
|
||||
|
||||
const appendHistories = React.useCallback(
|
||||
(content: string, data: CalendarCell) => {
|
||||
histories.unshift(`${content}`);
|
||||
setHistories([...histories]);
|
||||
console.info(data);
|
||||
},
|
||||
[histories, setHistories],
|
||||
);
|
||||
|
||||
const onCellClick = React.useCallback<CalendarProps['onCellClick']>(
|
||||
(cellEmitData) => {
|
||||
const output = getDateStr(cellEmitData.cell);
|
||||
appendHistories(`鼠标左键单击单元格 ${output}`, cellEmitData.cell);
|
||||
},
|
||||
[getDateStr, appendHistories],
|
||||
);
|
||||
|
||||
const onCellDoubleClick = React.useCallback<CalendarProps['onCellDoubleClick']>(
|
||||
(cellEmitData) => {
|
||||
const output = getDateStr(cellEmitData.cell);
|
||||
appendHistories(`鼠标双击单元格 ${output}`, cellEmitData.cell);
|
||||
},
|
||||
[getDateStr, appendHistories],
|
||||
);
|
||||
|
||||
const onCellRightClick = React.useCallback<CalendarProps['onCellRightClick']>(
|
||||
(cellEmitData) => {
|
||||
const output = getDateStr(cellEmitData.cell);
|
||||
appendHistories(`鼠标右键单击单元格 ${output}`, cellEmitData.cell);
|
||||
},
|
||||
[getDateStr, appendHistories],
|
||||
);
|
||||
|
||||
const onControllerChange = React.useCallback<CalendarProps['onControllerChange']>(
|
||||
(data) => {
|
||||
appendHistories('控件值变化', data);
|
||||
},
|
||||
[appendHistories],
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ margin: '12px 0' }}>
|
||||
<label>禁用单元格右键菜单：</label>
|
||||
<Switch value={preventCellContextmenu} onChange={(value) => setPreventCellContextmenu(value)} />
|
||||
</div>
|
||||
<Calendar
|
||||
preventCellContextmenu={preventCellContextmenu}
|
||||
onCellClick={onCellClick}
|
||||
onCellDoubleClick={onCellDoubleClick}
|
||||
onCellRightClick={onCellRightClick}
|
||||
onControllerChange={onControllerChange}
|
||||
/>
|
||||
{histories.length === 0 ? (
|
||||
<Alert theme="warning" message={['暂无数据，您可以点击一下日历的单元格看看 :)']} />
|
||||
) : (
|
||||
<List style={{ maxHeight: '130px' }}>
|
||||
{histories.map((item, index) => (
|
||||
<ListItem key={String(index)}>{item}，并得到组件传出的参数（您看控制台）...</ListItem>
|
||||
))}
|
||||
</List>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card } from 'tdesign-react';
|
||||
|
||||
export default function BasicCard() {
|
||||
return (
|
||||
<Card title="标题" actions="操作" bordered hoverShadow style={{ width: '400px' }}>
|
||||
仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card, MessagePlugin } from 'tdesign-react';
|
||||
|
||||
const clickHandler = () => {
|
||||
MessagePlugin.success('操作');
|
||||
};
|
||||
|
||||
export default function BorderedNoneCard() {
|
||||
return (
|
||||
<div style={{ padding: '16px', backgroundColor: 'var(--td-bg-color-container-hover)' }}>
|
||||
<Card
|
||||
title="标题"
|
||||
actions={
|
||||
<a href={null} onClick={clickHandler} style={{ cursor: 'pointer' }}>
|
||||
操作
|
||||
</a>
|
||||
}
|
||||
hoverShadow
|
||||
style={{ width: '400px' }}
|
||||
>
|
||||
仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card } from 'tdesign-react';
|
||||
|
||||
export default function BorderedCard() {
|
||||
return (
|
||||
<Card bordered style={{ width: '400px' }}>
|
||||
仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card } from 'tdesign-react';
|
||||
|
||||
export default function CustomLoadingProps() {
|
||||
const customProps = {
|
||||
text: 'TDesign努力加载中...',
|
||||
};
|
||||
|
||||
return (
|
||||
<Card title="自定义loadingProps Card" loading bordered style={{ width: '400px' }} loadingProps={customProps}>
|
||||
仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@ -1,105 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card, Avatar, Row, Col, Button, Divider, Dropdown, MessagePlugin, Space } from 'tdesign-react';
|
||||
import { UserIcon, ChatIcon, ShareIcon, ThumbUpIcon, HeartIcon, MoreIcon } from 'tdesign-icons-react';
|
||||
|
||||
const { Group: AvatarGroup } = Avatar;
|
||||
|
||||
const options = [
|
||||
{
|
||||
content: '操作一',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
content: '操作二',
|
||||
value: 2,
|
||||
},
|
||||
];
|
||||
|
||||
const clickHandler = (data) => {
|
||||
MessagePlugin.success(`选中【${data.value}】`);
|
||||
};
|
||||
|
||||
export default function FooterActionsCard() {
|
||||
return (
|
||||
<Space direction="vertical">
|
||||
<Card
|
||||
bordered
|
||||
theme="poster2"
|
||||
cover="https://tdesign.gtimg.com/site/source/card-demo.png"
|
||||
style={{ width: '400px' }}
|
||||
footer={
|
||||
<Row align="middle" justify="center">
|
||||
<Col flex="auto" align="middle">
|
||||
<Button variant="text" shape="square">
|
||||
<ThumbUpIcon></ThumbUpIcon>
|
||||
</Button>
|
||||
</Col>
|
||||
<Divider layout="vertical"></Divider>
|
||||
<Col flex="auto" align="middle">
|
||||
<Button variant="text" shape="square">
|
||||
<ChatIcon></ChatIcon>
|
||||
</Button>
|
||||
</Col>
|
||||
<Divider layout="vertical"></Divider>
|
||||
<Col flex="auto" align="middle">
|
||||
<Button variant="text" shape="square">
|
||||
<ShareIcon></ShareIcon>
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
}
|
||||
></Card>
|
||||
<Card
|
||||
bordered
|
||||
theme="poster2"
|
||||
cover="https://tdesign.gtimg.com/site/source/card-demo.png"
|
||||
style={{ width: '400px' }}
|
||||
actions={
|
||||
<Col flex="auto" align="middle">
|
||||
<Dropdown options={options} onClick={clickHandler}>
|
||||
<Button variant="text" shape="square">
|
||||
<MoreIcon></MoreIcon>
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</Col>
|
||||
}
|
||||
footer={
|
||||
<Row align="middle" justify="center">
|
||||
<Col flex="auto">
|
||||
<Button variant="text" shape="square" style={{ marginRight: '8px' }}>
|
||||
<HeartIcon size={16}></HeartIcon>
|
||||
</Button>
|
||||
<Button variant="text" shape="square">
|
||||
<ShareIcon size={16}></ShareIcon>
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
}
|
||||
></Card>
|
||||
<Card
|
||||
bordered
|
||||
theme="poster2"
|
||||
cover="https://tdesign.gtimg.com/site/source/card-demo.png"
|
||||
style={{ width: '400px' }}
|
||||
actions={
|
||||
<Col flex="auto" align="middle">
|
||||
<Dropdown options={options} onClick={clickHandler}>
|
||||
<Button variant="text" shape="square">
|
||||
<MoreIcon></MoreIcon>
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</Col>
|
||||
}
|
||||
footer={
|
||||
<AvatarGroup max={2} cascading="left-up">
|
||||
<Avatar image="https://tdesign.gtimg.com/site/avatar-boy.jpg"></Avatar>
|
||||
<Avatar>Q</Avatar>
|
||||
<Avatar>C</Avatar>
|
||||
<Avatar>G</Avatar>
|
||||
<Avatar icon={<UserIcon />}></Avatar>
|
||||
</AvatarGroup>
|
||||
}
|
||||
></Card>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,39 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card, Button, Dropdown, MessagePlugin, Comment } from 'tdesign-react';
|
||||
import { Icon } from 'tdesign-icons-react';
|
||||
|
||||
const options = [
|
||||
{
|
||||
content: '操作一',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
content: '操作二',
|
||||
value: 2,
|
||||
},
|
||||
];
|
||||
|
||||
const clickHandler = (data) => {
|
||||
MessagePlugin.success(`选中【${data.value}】`);
|
||||
};
|
||||
|
||||
export default function FooterContentActionsCard() {
|
||||
return (
|
||||
<Card
|
||||
actions={
|
||||
<Dropdown options={options} onClick={clickHandler} minColumnWidth="112">
|
||||
<Button variant="text" shape="square">
|
||||
<Icon name="more" />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
}
|
||||
bordered
|
||||
theme="poster2"
|
||||
cover="https://tdesign.gtimg.com/site/source/card-demo.png"
|
||||
style={{ width: '400px' }}
|
||||
footer={
|
||||
<Comment author="标题" content="卡片内容" avatar="https://tdesign.gtimg.com/site/avatar-boy.jpg"></Comment>
|
||||
}
|
||||
></Card>
|
||||
);
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card, Comment } from 'tdesign-react';
|
||||
|
||||
export default function FooterContentCard() {
|
||||
return (
|
||||
<Card
|
||||
bordered
|
||||
theme="poster2"
|
||||
cover="https://tdesign.gtimg.com/site/source/card-demo.png"
|
||||
style={{ width: '400px' }}
|
||||
footer={
|
||||
<Comment author="标题" content="卡片内容" avatar="https://tdesign.gtimg.com/site/avatar-boy.jpg"></Comment>
|
||||
}
|
||||
></Card>
|
||||
);
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card, Tag, Avatar, Row, Col, Button, Divider } from 'tdesign-react';
|
||||
import { UserIcon, ChatIcon, ShareIcon, ThumbUpIcon } from 'tdesign-icons-react';
|
||||
|
||||
export default function FooterCard() {
|
||||
return (
|
||||
<Card
|
||||
actions={<Tag theme="success">默认标签</Tag>}
|
||||
bordered
|
||||
cover="https://tdesign.gtimg.com/site/source/card-demo.png"
|
||||
style={{ width: '400px' }}
|
||||
avatar={
|
||||
<Avatar size="56px">
|
||||
<UserIcon></UserIcon>
|
||||
</Avatar>
|
||||
}
|
||||
footer={
|
||||
<Row align="middle" justify="center">
|
||||
<Col flex="auto" align="middle">
|
||||
<Button variant="text">
|
||||
<ThumbUpIcon></ThumbUpIcon>
|
||||
</Button>
|
||||
</Col>
|
||||
<Divider layout="vertical"></Divider>
|
||||
<Col flex="auto" align="middle">
|
||||
<Button variant="text">
|
||||
<ChatIcon></ChatIcon>
|
||||
</Button>
|
||||
</Col>
|
||||
<Divider layout="vertical"></Divider>
|
||||
<Col flex="auto" align="middle">
|
||||
<Button variant="text">
|
||||
<ShareIcon></ShareIcon>
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
}
|
||||
></Card>
|
||||
);
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card } from 'tdesign-react';
|
||||
|
||||
export default function HeaderAllPropsCard() {
|
||||
return (
|
||||
<Card
|
||||
title="标题"
|
||||
subtitle="副标题"
|
||||
description="描述"
|
||||
actions="操作"
|
||||
bordered
|
||||
hoverShadow
|
||||
style={{ width: '400px' }}
|
||||
>
|
||||
卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card, MessagePlugin } from 'tdesign-react';
|
||||
|
||||
const clickHandler = () => {
|
||||
MessagePlugin.success('操作');
|
||||
};
|
||||
|
||||
export default function HeaderBorderedCard() {
|
||||
return (
|
||||
<Card
|
||||
title="标题"
|
||||
actions={
|
||||
<a href={null} onClick={clickHandler} style={{ cursor: 'pointer' }}>
|
||||
操作
|
||||
</a>
|
||||
}
|
||||
bordered
|
||||
headerBordered
|
||||
style={{ width: '400px' }}
|
||||
>
|
||||
卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card } from 'tdesign-react';
|
||||
|
||||
export default function HeaderDescriptionCard() {
|
||||
return (
|
||||
<Card title="标题" description="描述" actions="操作" bordered hoverShadow style={{ width: '400px' }}>
|
||||
卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@ -1,59 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card, Row, Col, Button, Divider, Avatar, Dropdown, MessagePlugin } from 'tdesign-react';
|
||||
import { ChatIcon, ShareIcon, ThumbUpIcon, Icon } from 'tdesign-icons-react';
|
||||
|
||||
const options = [
|
||||
{
|
||||
content: '操作一',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
content: '操作二',
|
||||
value: 2,
|
||||
},
|
||||
];
|
||||
|
||||
const clickHandler = (data) => {
|
||||
MessagePlugin.success(`选中【${data.value}】`);
|
||||
};
|
||||
|
||||
export default function HeaderFooterActionsCard() {
|
||||
return (
|
||||
<Card
|
||||
title="标题"
|
||||
description="卡片内容"
|
||||
actions={
|
||||
<Dropdown options={options} onClick={clickHandler} minColumnWidth="112">
|
||||
<Button variant="text" shape="square">
|
||||
<Icon name="more" />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
}
|
||||
bordered
|
||||
cover="https://tdesign.gtimg.com/site/source/card-demo.png"
|
||||
style={{ width: '400px' }}
|
||||
avatar={<Avatar size="40px" image="https://tdesign.gtimg.com/site/avatar-boy.jpg"></Avatar>}
|
||||
footer={
|
||||
<Row align="middle" justify="center">
|
||||
<Col flex="auto" align="middle">
|
||||
<Button variant="text">
|
||||
<ThumbUpIcon></ThumbUpIcon>
|
||||
</Button>
|
||||
</Col>
|
||||
<Divider layout="vertical"></Divider>
|
||||
<Col flex="auto" align="middle">
|
||||
<Button variant="text">
|
||||
<ChatIcon></ChatIcon>
|
||||
</Button>
|
||||
</Col>
|
||||
<Divider layout="vertical"></Divider>
|
||||
<Col flex="auto" align="middle">
|
||||
<Button variant="text">
|
||||
<ShareIcon></ShareIcon>
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
}
|
||||
></Card>
|
||||
);
|
||||
}
|
||||
@ -1,58 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card, Row, Col, Button, Divider, Dropdown, MessagePlugin } from 'tdesign-react';
|
||||
import { ChatIcon, ShareIcon, ThumbUpIcon, Icon } from 'tdesign-icons-react';
|
||||
|
||||
const options = [
|
||||
{
|
||||
content: '操作一',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
content: '操作二',
|
||||
value: 2,
|
||||
},
|
||||
];
|
||||
|
||||
const clickHandler = (data) => {
|
||||
MessagePlugin.success(`选中【${data.value}】`);
|
||||
};
|
||||
|
||||
export default function HeaderSubtitleFooterActionsCard() {
|
||||
return (
|
||||
<Card
|
||||
title="标题"
|
||||
subtitle="副标题"
|
||||
actions={
|
||||
<Dropdown options={options} onClick={clickHandler} minColumnWidth="112">
|
||||
<Button variant="text" shape="square">
|
||||
<Icon name="more" />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
}
|
||||
bordered
|
||||
cover="https://tdesign.gtimg.com/site/source/card-demo.png"
|
||||
style={{ width: '400px' }}
|
||||
footer={
|
||||
<Row align="middle" justify="center">
|
||||
<Col flex="auto" align="middle">
|
||||
<Button variant="text">
|
||||
<ThumbUpIcon></ThumbUpIcon>
|
||||
</Button>
|
||||
</Col>
|
||||
<Divider layout="vertical"></Divider>
|
||||
<Col flex="auto" align="middle">
|
||||
<Button variant="text">
|
||||
<ChatIcon></ChatIcon>
|
||||
</Button>
|
||||
</Col>
|
||||
<Divider layout="vertical"></Divider>
|
||||
<Col flex="auto" align="middle">
|
||||
<Button variant="text">
|
||||
<ShareIcon></ShareIcon>
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
}
|
||||
></Card>
|
||||
);
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card } from 'tdesign-react';
|
||||
|
||||
export default function HeaderSubtitleCard() {
|
||||
return (
|
||||
<Card title="标题" subtitle="副标题" actions="操作" bordered hoverShadow style={{ width: '400px' }}>
|
||||
卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card, MessagePlugin } from 'tdesign-react';
|
||||
|
||||
const clickHandler = () => {
|
||||
MessagePlugin.success('操作');
|
||||
};
|
||||
|
||||
export default function HeaderCard() {
|
||||
return (
|
||||
<Card
|
||||
title="标题"
|
||||
actions={
|
||||
<a href={null} onClick={clickHandler} style={{ cursor: 'pointer' }}>
|
||||
操作
|
||||
</a>
|
||||
}
|
||||
bordered
|
||||
hoverShadow
|
||||
style={{ width: '400px' }}
|
||||
>
|
||||
卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Cascader } from 'tdesign-react';
|
||||
|
||||
export default function Example() {
|
||||
const [value, setValue] = useState([]);
|
||||
const [options] = useState([
|
||||
{
|
||||
label: '选项一',
|
||||
value: '1',
|
||||
children: [
|
||||
{
|
||||
label: '子选项一',
|
||||
value: '1.1',
|
||||
},
|
||||
{
|
||||
label: '子选项二',
|
||||
value: '1.2',
|
||||
},
|
||||
{
|
||||
label: '子选项三',
|
||||
value: '1.3',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '选项二',
|
||||
value: '2',
|
||||
children: [
|
||||
{
|
||||
label: '子选项一',
|
||||
value: '2.1',
|
||||
},
|
||||
{
|
||||
label: '子选项二',
|
||||
value: '2.2',
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
const onChange = (value) => {
|
||||
setValue(value);
|
||||
};
|
||||
|
||||
return <Cascader options={options} onChange={onChange} value={value} size="medium" clearable />;
|
||||
}
|
||||
@ -1,111 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Cascader, Space } from 'tdesign-react';
|
||||
|
||||
export default function Example() {
|
||||
const [value1, setValue1] = useState('1.2.2');
|
||||
const [value2, setValue2] = useState(['1.1.2.1', '2']);
|
||||
const options = [
|
||||
{
|
||||
value: '1',
|
||||
label: '1',
|
||||
children: [
|
||||
{
|
||||
value: '1.1',
|
||||
label: '1.1',
|
||||
children: [
|
||||
{
|
||||
value: '1.1.1',
|
||||
label: '1.1.1',
|
||||
children: [
|
||||
{
|
||||
value: '1.1.1.1',
|
||||
label: '1.1.1.1',
|
||||
},
|
||||
{
|
||||
value: '1.1.1.2',
|
||||
label: '1.1.1.2',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: '1.1.2',
|
||||
label: '1.1.2',
|
||||
children: [
|
||||
{
|
||||
value: '1.1.2.1',
|
||||
label: '1.1.2.1',
|
||||
},
|
||||
{
|
||||
value: '1.1.2.2',
|
||||
label: '1.1.2.2',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: '1.2',
|
||||
label: '1.2',
|
||||
children: [
|
||||
{
|
||||
value: '1.2.1',
|
||||
label: '1.2.1',
|
||||
children: [
|
||||
{
|
||||
value: '1.2.1.1',
|
||||
label: '1.2.1.1',
|
||||
},
|
||||
{
|
||||
value: '1.2.1.2',
|
||||
label: '1.2.1.2',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: '1.2.2',
|
||||
label: '1.2.2',
|
||||
children: [
|
||||
{
|
||||
value: '1.2.2.1',
|
||||
label: '1.2.2.1',
|
||||
},
|
||||
{
|
||||
value: '1.2.2.2',
|
||||
label: '1.2.2.2',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '2',
|
||||
children: [
|
||||
{
|
||||
value: '2.1',
|
||||
label: '2.1',
|
||||
},
|
||||
{
|
||||
value: '2.2',
|
||||
label: '2.2',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const onChange1 = (value) => {
|
||||
setValue1(value);
|
||||
};
|
||||
const onChange2 = (value) => {
|
||||
setValue2(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<Space direction="vertical">
|
||||
<Cascader options={options} value={value1} onChange={onChange1} checkStrictly />
|
||||
<Cascader options={options} value={value2} onChange={onChange2} checkStrictly multiple />
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,68 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Cascader, Space } from 'tdesign-react';
|
||||
|
||||
export default function Example() {
|
||||
const [value, setValue] = useState(['1.1', '1.2', '1.3']);
|
||||
const options = [
|
||||
{
|
||||
label: '选项一',
|
||||
value: '1',
|
||||
children: [
|
||||
{
|
||||
label: '子选项一',
|
||||
value: '1.1',
|
||||
},
|
||||
{
|
||||
label: '子选项二',
|
||||
value: '1.2',
|
||||
},
|
||||
{
|
||||
label: '子选项三',
|
||||
value: '1.3',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '选项二',
|
||||
value: '2',
|
||||
children: [
|
||||
{
|
||||
label: '子选项一',
|
||||
value: '2.1',
|
||||
},
|
||||
{
|
||||
label: '子选项二',
|
||||
value: '2.2',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const onChange = (value) => {
|
||||
setValue(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<Space direction="vertical">
|
||||
<Cascader options={options} value={value} onChange={onChange} multiple minCollapsedNum={1} />
|
||||
<Cascader
|
||||
options={options}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
multiple
|
||||
minCollapsedNum={1}
|
||||
collapsedItems={({ count }) =>
|
||||
count > 0 && (
|
||||
<span
|
||||
style={{
|
||||
color: '#00a870',
|
||||
}}
|
||||
>
|
||||
+{count - 1}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,48 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Cascader, Space } from 'tdesign-react';
|
||||
|
||||
export default function Example() {
|
||||
const value1 = '1.1';
|
||||
const value2 = ['1.1'];
|
||||
const [options] = useState([
|
||||
{
|
||||
label: '选项一',
|
||||
value: '1',
|
||||
children: [
|
||||
{
|
||||
label: '子选项一',
|
||||
value: '1.1',
|
||||
},
|
||||
{
|
||||
label: '子选项二',
|
||||
value: '1.2',
|
||||
},
|
||||
{
|
||||
label: '子选项三',
|
||||
value: '1.3',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '选项二',
|
||||
value: '2',
|
||||
children: [
|
||||
{
|
||||
label: '子选项一',
|
||||
value: '2.1',
|
||||
},
|
||||
{
|
||||
label: '子选项二',
|
||||
value: '2.2',
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
return (
|
||||
<Space direction="vertical">
|
||||
<Cascader options={options} value={value1} disabled />
|
||||
<Cascader options={options} value={value2} disabled multiple />
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Cascader } from 'tdesign-react';
|
||||
|
||||
export default function Example() {
|
||||
const [value1, setValue1] = useState('');
|
||||
const options = [
|
||||
{
|
||||
label: '当选项一数据展示文本过长时',
|
||||
value: '1',
|
||||
children: [
|
||||
{
|
||||
label: '子选项一',
|
||||
value: '1.1',
|
||||
},
|
||||
{
|
||||
label: '子选项二',
|
||||
value: '1.2',
|
||||
},
|
||||
{
|
||||
label: '当选项数据展示文本过长时',
|
||||
value: '1.3',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '选项二',
|
||||
value: '2',
|
||||
children: [
|
||||
{
|
||||
label: '子选项一',
|
||||
value: '2.1',
|
||||
},
|
||||
{
|
||||
label: '当选项数据展示文本过长时',
|
||||
value: '2.2',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const onChange1 = (value) => {
|
||||
setValue1(value);
|
||||
};
|
||||
|
||||
return <Cascader options={options} value={value1} onChange={onChange1} filterable />;
|
||||
}
|
||||
@ -1,56 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Cascader, Space } from 'tdesign-react';
|
||||
|
||||
export default function Example() {
|
||||
const [value1, setValue1] = useState('');
|
||||
const [value2, setValue2] = useState(['1.1']);
|
||||
const options = [
|
||||
{
|
||||
label: '当选项一数据展示文本过长时',
|
||||
value: '1',
|
||||
children: [
|
||||
{
|
||||
label: '子选项一',
|
||||
value: '1.1',
|
||||
},
|
||||
{
|
||||
label: '子选项二',
|
||||
value: '1.2',
|
||||
},
|
||||
{
|
||||
label: '当选项数据展示文本过长时',
|
||||
value: '1.3',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '选项二',
|
||||
value: '2',
|
||||
children: [
|
||||
{
|
||||
label: '子选项一',
|
||||
value: '2.1',
|
||||
},
|
||||
{
|
||||
label: '当选项数据展示文本过长时',
|
||||
value: '2.2',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const onChange1 = (value) => {
|
||||
setValue1(value);
|
||||
};
|
||||
|
||||
const onChange2 = (value) => {
|
||||
setValue2(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<Space direction="vertical">
|
||||
<Cascader options={options} value={value1} onChange={onChange1} filterable />
|
||||
<Cascader options={options} value={value2} multiple onChange={onChange2} filterable />
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,58 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Cascader, Space } from 'tdesign-react';
|
||||
|
||||
export default function Example() {
|
||||
const [value1, setValue1] = useState('');
|
||||
const [value2, setValue2] = useState([]);
|
||||
const options = [
|
||||
{
|
||||
name: '选项一',
|
||||
code: '1',
|
||||
items: [
|
||||
{
|
||||
name: '子选项一',
|
||||
code: '1.1',
|
||||
},
|
||||
{
|
||||
name: '子选项二',
|
||||
code: '1.2',
|
||||
},
|
||||
{
|
||||
name: '子选项三',
|
||||
code: '1.3',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '选项二',
|
||||
code: '2',
|
||||
items: [
|
||||
{
|
||||
name: '子选项一',
|
||||
code: '2.1',
|
||||
},
|
||||
{
|
||||
name: '子选项二',
|
||||
code: '2.2',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const onChange1 = (value) => {
|
||||
setValue1(value);
|
||||
};
|
||||
|
||||
const onChange2 = (value) => {
|
||||
setValue2(value);
|
||||
};
|
||||
|
||||
const keys = { label: 'name', value: 'code', children: 'items' };
|
||||
|
||||
return (
|
||||
<Space direction="vertical">
|
||||
<Cascader keys={keys} options={options} value={value1} onChange={onChange1} />
|
||||
<Cascader keys={keys} options={options} value={value2} multiple onChange={onChange2} />
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user