mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-11 11:32:52 +08:00
79 lines
1.7 KiB
TypeScript
79 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { Cascader } from 'antd';
|
|
|
|
import SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';
|
|
import useLocale from '../../../.dumi/hooks/useLocale';
|
|
|
|
const locales = {
|
|
cn: {
|
|
root: '根元素',
|
|
'popup.root': '弹出菜单元素',
|
|
},
|
|
en: {
|
|
root: 'Root element',
|
|
'popup.root': 'Popup element',
|
|
},
|
|
};
|
|
const options = [
|
|
{
|
|
value: 'contributors',
|
|
label: 'contributors',
|
|
children: [
|
|
{
|
|
value: 'aojunhao123',
|
|
label: 'aojunhao123',
|
|
},
|
|
{
|
|
value: 'thinkasany',
|
|
label: 'thinkasany',
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
const Block = (props: any) => {
|
|
const divRef = React.useRef<HTMLDivElement>(null);
|
|
const [value, setValue] = React.useState<string[]>(['contributors', 'aojunhao123']);
|
|
const onChange = (newValue: string[]) => {
|
|
setValue(newValue);
|
|
};
|
|
return (
|
|
<div ref={divRef} style={{ marginBottom: 60 }}>
|
|
<Cascader
|
|
{...props}
|
|
open
|
|
styles={{
|
|
popup: {
|
|
root: {
|
|
zIndex: 1,
|
|
height: 70,
|
|
},
|
|
},
|
|
}}
|
|
getPopupContainer={() => divRef.current}
|
|
value={value}
|
|
onChange={onChange}
|
|
options={options}
|
|
placement="bottomLeft"
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
const App: React.FC = () => {
|
|
const [locale] = useLocale(locales);
|
|
|
|
return (
|
|
<SemanticPreview
|
|
componentName="Cascader"
|
|
semantics={[
|
|
{ name: 'root', desc: locale.root, version: '5.25.0' },
|
|
{ name: 'popup.root', desc: locale['popup.root'], version: '5.25.0' },
|
|
]}
|
|
>
|
|
<Block />
|
|
</SemanticPreview>
|
|
);
|
|
};
|
|
|
|
export default App;
|