mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
demo(ConfigProvider): replace 'popupPlacement' and 'TabPane' (#48797)
This commit is contained in:
parent
01264592a7
commit
b6b96d2d1d
@ -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}
|
||||
/>
|
||||
With search:
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
|
@ -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' }]} />
|
||||
|
Loading…
Reference in New Issue
Block a user