mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-04 04:58:55 +08:00
demo: update segmented demo from Space to Flex (#46114)
This commit is contained in:
parent
5012049923
commit
bb40c380da
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -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,
|
||||||
|
@ -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
File diff suppressed because it is too large
Load Diff
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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';
|
Loading…
Reference in New Issue
Block a user