mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

demo: improve the use of Segmented (#51324)

Browse Source
This commit is contained in:
thinkasany 2024-10-22 10:09:31 +08:00 committed by GitHub
parent cc85109fb1
commit 6e12a903c7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 9 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/flex/demo/align.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import { Button, Flex, Segmented } from 'antd';
import type { FlexProps, SegmentedProps } from 'antd';
import type { FlexProps } from 'antd';
const boxStyle: React.CSSProperties = {
width: '100%',
@ -26,9 +26,9 @@ const App: React.FC = () => {
return (
<Flex gap="middle" align="start" vertical>
<p>Select justify :</p>
<Segmented options={justifyOptions} onChange={setJustify as SegmentedProps['onChange']} />
<Segmented options={justifyOptions} onChange={setJustify} />
<p>Select align :</p>
<Segmented options={alignOptions} onChange={setAlignItems as SegmentedProps['onChange']} />
<Segmented options={alignOptions} onChange={setAlignItems} />
<Flex style={boxStyle} justify={justify} align={alignItems}>
<Button type="primary">Primary</Button>
<Button type="primary">Primary</Button>

2
components/popover/demo/arrow.tsx
View File

@ -34,7 +34,7 @@ const App: React.FC = () => {
<ConfigProvider button={{ style: { width: buttonWidth, margin: 4 } }}>
<Segmented
options={['Show', 'Hide', 'Center']}
onChange={(val: 'Show' | 'Hide' | 'Center') => setArrow(val)}
onChange={setArrow}
style={{ marginBottom: 24 }}
/>
<Flex vertical justify="center" align="center" className="demo">

5
components/qr-code/demo/download.tsx
View File

@ -32,10 +32,7 @@ const App: React.FC = () => {
const [renderType, setRenderType] = React.useState<QRCodeProps['type']>('canvas');
return (
<Space id="myqrcode" direction="vertical">
<Segmented
options={['canvas', 'svg']}
onChange={(val) => setRenderType(val as QRCodeProps['type'])}
/>
<Segmented options={['canvas', 'svg']} value={renderType} onChange={setRenderType} />
<div>
<QRCode
type={renderType}

2
components/table/demo/virtual-list.tsx
View File

@ -168,7 +168,7 @@ const App: React.FC = () => {
/>
<Segmented
value={count}
onChange={(value: number) => setCount(value)}
onChange={setCount}
options={[
{ label: 'None', value: 0 },
{ label: 'Less', value: 4 },

4
components/tabs/demo/custom-indicator.tsx
View File

@ -19,9 +19,9 @@ const App: React.FC = () => {
return (
<>
<Segmented
defaultValue="center"
value={alignValue}
style={{ marginBottom: 8 }}
onChange={(value) => setAlignValue(value as Align)}
onChange={setAlignValue}
options={['start', 'center', 'end']}
/>
<Tabs

2
components/tooltip/demo/arrow.tsx
View File

@ -28,7 +28,7 @@ const App: React.FC = () => {
<Segmented
value={arrow}
options={['Show', 'Hide', 'Center']}
onChange={(val: 'Show' | 'Hide' | 'Center') => setArrow(val)}
onChange={setArrow}
style={{ marginBottom: 24 }}
/>
<Flex vertical justify="center" align="center" className="demo">