demo: update segmented demo from Space to Flex (#46114)

This commit is contained in:
lijianan 2023-11-28 11:03:22 +08:00 committed by GitHub
parent 5012049923
commit bb40c380da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 1561 additions and 1704 deletions

View File

@ -17,10 +17,9 @@ import {
Tooltip, Tooltip,
} from 'antd'; } from 'antd';
import { createStyles } from 'antd-style'; import { createStyles } from 'antd-style';
import classNames from 'classnames';
import Tilt from './Tilt';
import useLocale from '../../../../hooks/useLocale'; import useLocale from '../../../../hooks/useLocale';
import Tilt from './Tilt';
const { _InternalPanelDoNotUseOrYouWillBeFired: ModalPanel } = Modal; const { _InternalPanelDoNotUseOrYouWillBeFired: ModalPanel } = Modal;
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalTooltip } = Tooltip; const { _InternalPanelDoNotUseOrYouWillBeFired: InternalTooltip } = Tooltip;
@ -73,7 +72,6 @@ const locales = {
const useStyle = createStyles(({ token, css }) => { const useStyle = createStyles(({ token, css }) => {
const gap = token.padding; const gap = token.padding;
return { return {
holder: css` holder: css`
width: 500px; width: 500px;
@ -82,7 +80,6 @@ const useStyle = createStyles(({ token, css }) => {
row-gap: ${gap}px; row-gap: ${gap}px;
opacity: 0.8; opacity: 0.8;
`, `,
flex: css` flex: css`
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -106,29 +103,16 @@ const useStyle = createStyles(({ token, css }) => {
}; };
}); });
export interface ComponentsBlockProps { const ComponentsBlock: React.FC = () => {
className?: string;
style?: React.CSSProperties;
}
const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
const { className, style } = props;
const [locale] = useLocale(locales); const [locale] = useLocale(locales);
const { styles } = useStyle(); const { styles } = useStyle();
return ( return (
<Tilt <Tilt options={{ max: 20, glare: true, scale: 1 }} className={styles.holder}>
options={{ max: 20, glare: true, scale: 1 }}
className={classNames(className, styles.holder)}
style={style}
>
<ModalPanel title="Ant Design 5.0" width="100%"> <ModalPanel title="Ant Design 5.0" width="100%">
{locale.text} {locale.text}
</ModalPanel> </ModalPanel>
<Alert message={locale.infoText} type="info" /> <Alert message={locale.infoText} type="info" />
{/* Line */} {/* Line */}
<div className={styles.flex}> <div className={styles.flex}>
<ColorPicker style={{ flex: 'none' }} /> <ColorPicker style={{ flex: 'none' }} />
@ -144,57 +128,34 @@ const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
{locale.dropdown} {locale.dropdown}
</Dropdown.Button> </Dropdown.Button>
</div> </div>
<Select <Select
style={{ flex: 'auto' }} style={{ flex: 'auto' }}
mode="multiple" mode="multiple"
maxTagCount="responsive" maxTagCount="responsive"
defaultValue={[{ value: 'apple' }, { value: 'banana' }]} defaultValue={[{ value: 'apple' }, { value: 'banana' }]}
options={[ options={[
{ { value: 'apple', label: locale.apple },
value: 'apple', { value: 'banana', label: locale.banana },
label: locale.apple, { value: 'orange', label: locale.orange },
}, { value: 'watermelon', label: locale.watermelon },
{
value: 'banana',
label: locale.banana,
},
{
value: 'orange',
label: locale.orange,
},
{
value: 'watermelon',
label: locale.watermelon,
},
]} ]}
/> />
<Input style={{ flex: 'none', width: 120 }} /> <Input style={{ flex: 'none', width: 120 }} />
</div> </div>
<Progress <Progress
style={{ margin: 0 }} style={{ margin: 0 }}
percent={100} percent={100}
strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }} strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }}
/> />
<Progress style={{ margin: 0 }} percent={33} status="exception" /> <Progress style={{ margin: 0 }} percent={33} status="exception" />
<Steps <Steps
current={1} current={1}
items={[ items={[
{ { title: locale.finished },
title: locale.finished, { title: locale.inProgress },
}, { title: locale.waiting },
{
title: locale.inProgress,
},
{
title: locale.waiting,
},
]} ]}
/> />
{/* Line */} {/* Line */}
<div className={styles.block}> <div className={styles.block}>
<Slider <Slider
@ -205,16 +166,13 @@ const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
26: '26°C', 26: '26°C',
37: '37°C', 37: '37°C',
100: { 100: {
style: { style: { color: '#f50' },
color: '#f50',
},
label: <strong>100°C</strong>, label: <strong>100°C</strong>,
}, },
}} }}
defaultValue={[26, 37]} defaultValue={[26, 37]}
/> />
</div> </div>
{/* Line */} {/* Line */}
<div className={styles.flex}> <div className={styles.flex}>
<Button className={styles.ptg_20} type="primary"> <Button className={styles.ptg_20} type="primary">
@ -231,7 +189,6 @@ const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
{locale.icon} {locale.icon}
</Button> </Button>
</div> </div>
{/* Line */} {/* Line */}
<div className={styles.block}> <div className={styles.block}>
<div className={styles.flex}> <div className={styles.flex}>
@ -241,7 +198,6 @@ const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
checkedChildren={<CheckOutlined />} checkedChildren={<CheckOutlined />}
unCheckedChildren={<CloseOutlined />} unCheckedChildren={<CloseOutlined />}
/> />
<Checkbox.Group <Checkbox.Group
className={styles.ptg_none} className={styles.ptg_none}
options={[locale.apple, locale.banana, locale.orange]} options={[locale.apple, locale.banana, locale.orange]}
@ -249,13 +205,10 @@ const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
/> />
</div> </div>
</div> </div>
<div> <div>
<InternalMessage content={locale.release} type="success" /> <InternalMessage content={locale.release} type="success" />
</div> </div>
<InternalTooltip title={locale.hello} placement="topLeft" className={styles.noMargin} /> <InternalTooltip title={locale.hello} placement="topLeft" className={styles.noMargin} />
<Alert message="Ant Design love you!" type="success" /> <Alert message="Ant Design love you!" type="success" />
</Tilt> </Tilt>
); );

View File

@ -1,12 +1,13 @@
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import VanillaTilt, { type TiltOptions } from 'vanilla-tilt'; import VanillaTilt from 'vanilla-tilt';
import type { TiltOptions } from 'vanilla-tilt';
interface TiltProps extends React.HTMLAttributes<HTMLDivElement> { interface TiltProps extends React.HTMLAttributes<HTMLDivElement> {
options?: TiltOptions; options?: TiltOptions;
} }
// https://micku7zu.github.io/vanilla-tilt.js/index.html // https://micku7zu.github.io/vanilla-tilt.js/index.html
const defaultTiltOptions = { const defaultTiltOptions: TiltOptions = {
scale: 1.02, scale: 1.02,
max: 8, max: 8,
speed: 1500, speed: 1500,

View File

@ -35,7 +35,7 @@ const useStyle = () => {
inset: 0; inset: 0;
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
opacity: 1; opacity: 1;
background: rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.2);
transition: all 1s ease; transition: all 1s ease;
pointer-events: none; pointer-events: none;
`); `);

File diff suppressed because it is too large Load Diff

View File

@ -1,4 +1,8 @@
import React from 'react'; import React from 'react';
import { Segmented } from 'antd'; import { Segmented } from 'antd';
export default () => <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />; const Demo: React.FC = () => (
<Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
);
export default Demo;

View File

@ -1,6 +1,8 @@
import React from 'react'; import React from 'react';
import { Segmented } from 'antd'; import { Segmented } from 'antd';
export default () => ( const Demo: React.FC = () => (
<Segmented block options={[123, 456, 'longtext-longtext-longtext-longtext']} /> <Segmented options={[123, 456, 'longtext-longtext-longtext-longtext']} block />
); );
export default Demo;

View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { ConfigProvider, Segmented } from 'antd'; import { ConfigProvider, Segmented } from 'antd';
export default () => ( const Demo: React.FC = () => (
<ConfigProvider <ConfigProvider
theme={{ theme={{
components: { components: {
@ -19,3 +19,5 @@ export default () => (
<Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} /> <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
</ConfigProvider> </ConfigProvider>
); );
export default Demo;

View File

@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import { UserOutlined } from '@ant-design/icons'; import { UserOutlined } from '@ant-design/icons';
import { Avatar, Segmented, Space } from 'antd'; import { Avatar, Flex, Segmented } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<Space direction="vertical"> <Flex gap="small" align="flex-start" vertical>
<Segmented <Segmented
options={[ options={[
{ {
@ -75,7 +75,7 @@ const App: React.FC = () => (
}, },
]} ]}
/> />
</Space> </Flex>
); );
export default App; export default App;

View File

@ -1,8 +1,8 @@
import React from 'react'; import React from 'react';
import { Segmented, Space } from 'antd'; import { Flex, Segmented } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<Space direction="vertical"> <Flex gap="small" align="flex-start" vertical>
<Segmented options={['Map', 'Transit', 'Satellite']} disabled /> <Segmented options={['Map', 'Transit', 'Satellite']} disabled />
<Segmented <Segmented
options={[ options={[
@ -13,7 +13,7 @@ const App: React.FC = () => (
'Yearly', 'Yearly',
]} ]}
/> />
</Space> </Flex>
); );
export default App; export default App;

View File

@ -1,5 +1,5 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Segmented, Button, Space } from 'antd'; import { Button, Flex, Segmented } from 'antd';
const Demo: React.FC = () => { const Demo: React.FC = () => {
const [options, setOptions] = useState(['Daily', 'Weekly', 'Monthly']); const [options, setOptions] = useState(['Daily', 'Weekly', 'Monthly']);
@ -11,12 +11,12 @@ const Demo: React.FC = () => {
}; };
return ( return (
<Space direction="vertical"> <Flex gap="small" align="flex-start" vertical>
<Segmented options={options} /> <Segmented options={options} />
<Button type="primary" disabled={moreLoaded} onClick={handleLoadOptions}> <Button type="primary" disabled={moreLoaded} onClick={handleLoadOptions}>
Load more options Load more options
</Button> </Button>
</Space> </Flex>
); );
}; };

View File

@ -2,17 +2,13 @@ import React from 'react';
import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons'; import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
import { Segmented } from 'antd'; import { Segmented } from 'antd';
export default () => ( const Demo: React.FC = () => (
<Segmented <Segmented
options={[ options={[
{ { value: 'List', icon: <BarsOutlined /> },
value: 'List', { value: 'Kanban', icon: <AppstoreOutlined /> },
icon: <BarsOutlined />,
},
{
value: 'Kanban',
icon: <AppstoreOutlined />,
},
]} ]}
/> />
); );
export default Demo;

View File

@ -1,8 +1,8 @@
import React from 'react'; import React from 'react';
import { Button, Input, Select, Segmented, Space } from 'antd'; import { Button, Flex, Input, Segmented, Select } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<Space direction="vertical"> <Flex gap="small" vertical>
<div> <div>
<Segmented style={{ marginRight: 6 }} size="large" options={['Daily', 'Weekly', 'Monthly']} /> <Segmented style={{ marginRight: 6 }} size="large" options={['Daily', 'Weekly', 'Monthly']} />
<Button type="primary" size="large"> <Button type="primary" size="large">
@ -19,7 +19,7 @@ const App: React.FC = () => (
<Select.Option value="lucy">Lucy</Select.Option> <Select.Option value="lucy">Lucy</Select.Option>
</Select> </Select>
</div> </div>
</Space> </Flex>
); );
export default App; export default App;

View File

@ -1,12 +1,12 @@
import React from 'react'; import React from 'react';
import { Segmented, Space } from 'antd'; import { Flex, Segmented } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<Space direction="vertical"> <Flex gap="small" align="flex-start" vertical>
<Segmented size="large" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} /> <Segmented size="large" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
<Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} /> <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
<Segmented size="small" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} /> <Segmented size="small" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
</Space> </Flex>
); );
export default App; export default App;

View File

@ -2,19 +2,13 @@ import React from 'react';
import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons'; import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
import { Segmented } from 'antd'; import { Segmented } from 'antd';
export default () => ( const Demo: React.FC = () => (
<Segmented <Segmented
options={[ options={[
{ { label: 'List', value: 'List', icon: <BarsOutlined /> },
label: 'List', { label: 'Kanban', value: 'Kanban', icon: <AppstoreOutlined /> },
value: 'List',
icon: <BarsOutlined />,
},
{
label: 'Kanban',
value: 'Kanban',
icon: <AppstoreOutlined />,
},
]} ]}
/> />
); );
export default Demo;

View File

@ -1,4 +1,5 @@
import type { CSSObject } from '@ant-design/cssinjs'; import type { CSSObject } from '@ant-design/cssinjs';
import { resetComponent, textEllipsis } from '../../style'; import { resetComponent, textEllipsis } from '../../style';
import type { FullToken, GenerateStyle } from '../../theme/internal'; import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal';