mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

demo(ConfigProvider): replace 'popupPlacement' and 'TabPane' (#48797)

Browse Source
This commit is contained in:
thinkasany 2024-05-07 12:18:24 +08:00 committed by GitHub
parent 01264592a7
commit b6b96d2d1d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/config-provider/demo/direction.tsx
View File

@ -93,7 +93,7 @@ const cascaderOptions = [
type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => {
const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
const [currentStep, setCurrentStep] = useState(0);
const [modalOpen, setModalOpen] = useState(false);
const [badgeCount, setBadgeCount] = useState(5);
@ -169,7 +169,7 @@ const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => {
options={cascaderOptions}
onChange={onCascaderChange}
placeholder="یک مورد انتخاب کنید"
popupPlacement={popupPlacement}
placement={placement}
/>
&nbsp;&nbsp;&nbsp;&nbsp;With search:&nbsp;&nbsp;
<Cascader
@ -177,7 +177,7 @@ const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => {
options={cascaderOptions}
onChange={onCascaderChange}
placeholder="Select an item"
popupPlacement={popupPlacement}
placement={placement}
showSearch={{ filter: cascaderFilter }}
/>
</Col>
@ -495,15 +495,15 @@ const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => {
const App: React.FC = () => {
const [direction, setDirection] = useState<DirectionType>('ltr');
const [popupPlacement, setPopupPlacement] = useState<Placement>('bottomLeft');
const [placement, setPlacement] = useState<Placement>('bottomLeft');
const changeDirection = (e: RadioChangeEvent) => {
const directionValue = e.target.value;
setDirection(directionValue);
if (directionValue === 'rtl') {
setPopupPlacement('bottomRight');
setPlacement('bottomRight');
} else {
setPopupPlacement('bottomLeft');
setPlacement('bottomLeft');
}
};
@ -521,7 +521,7 @@ const App: React.FC = () => {
</Radio.Group>
</div>
<ConfigProvider direction={direction}>
<Page popupPlacement={popupPlacement} />
<Page placement={placement} />
</ConfigProvider>
</>
);

33
components/config-provider/demo/size.tsx
View File

@ -16,8 +16,6 @@ import type { ConfigProviderProps } from 'antd';
type SizeType = ConfigProviderProps['componentSize'];
const { TabPane } = Tabs;
const App: React.FC = () => {
const [componentSize, setComponentSize] = useState<SizeType>('small');
@ -37,17 +35,26 @@ const App: React.FC = () => {
<ConfigProvider componentSize={componentSize}>
<Space size={[0, 16]} style={{ width: '100%' }} direction="vertical">
<Input />
<Tabs defaultActiveKey="1">
<TabPane tab="Tab 1" key="1">
Content of Tab Pane 1
</TabPane>
<TabPane tab="Tab 2" key="2">
Content of Tab Pane 2
</TabPane>
<TabPane tab="Tab 3" key="3">
Content of Tab Pane 3
</TabPane>
</Tabs>
<Tabs
defaultActiveKey="1"
items={[
{
label: 'Tab 1',
key: '1',
children: 'Content of Tab Pane 1',
},
{
label: 'Tab 2',
key: '2',
children: 'Content of Tab Pane 2',
},
{
label: 'Tab 3',
key: '3',
children: 'Content of Tab Pane 3',
},
]}
/>
<Input.Search allowClear />
<Input.TextArea allowClear />
<Select defaultValue="demo" options={[{ value: 'demo' }]} />