|
|
@@ -26,7 +26,7 @@ brief: Internationalized components to provide multilingual support for Semi com
|
|
|
|
|
|
## Components supported
|
|
|
|
|
|
-> DatePicker、TimePicker、Modal、Pagination、Select、Table、Cascader、Calendar、TreeSelect、List、Typography、Transfer、Nav、Upload
|
|
|
+> DatePicker、TimePicker、Modal、Pagination、Select、Table、Cascader、Calendar、TreeSelect、List、Typography、Transfer、Nav、Upload、Form、Navigation、Image
|
|
|
|
|
|
## How to use
|
|
|
|
|
|
@@ -192,7 +192,7 @@ import it from '@douyinfe/semi-ui/lib/es/locale/source/it';
|
|
|
import de from '@douyinfe/semi-ui/lib/es/locale/source/de';
|
|
|
import fr from '@douyinfe/semi-ui/lib/es/locale/source/fr';
|
|
|
import ro from '@douyinfe/semi-ui/lib/es/locale/source/ro';
|
|
|
-import { LocaleProvider, ConfigProvider, Pagination, Modal, Button, Select, Cascader, DatePicker, TreeSelect, Table, TimePicker, List, Calendar, Typography } from '@douyinfe/semi-ui';
|
|
|
+import { LocaleProvider, ConfigProvider, Pagination, Modal, Button, Select, Cascader, DatePicker, TreeSelect, Table, TimePicker, List, Calendar, Typography, Transfer, ImagePreview, Image, Form, Nav } from '@douyinfe/semi-ui';
|
|
|
|
|
|
class I18nDemo extends React.Component {
|
|
|
constructor(props) {
|
|
|
@@ -282,6 +282,22 @@ class I18nDemo extends React.Component {
|
|
|
}
|
|
|
return data;
|
|
|
});
|
|
|
+ const transferData = useMemo(() => {
|
|
|
+ return Array.from({ length: 100 }, (v, i) => {
|
|
|
+ return {
|
|
|
+ label: `选项名称 ${i}`,
|
|
|
+ value: i,
|
|
|
+ disabled: false,
|
|
|
+ key: i,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ })
|
|
|
+ const srcList = useMemo(() => ([
|
|
|
+ "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg",
|
|
|
+ "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/sky.jpg",
|
|
|
+ "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/greenleaf.jpg",
|
|
|
+ "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/colorful.jpg",
|
|
|
+ ]), []);
|
|
|
const style = { margin: 10 };
|
|
|
return (
|
|
|
<>
|
|
|
@@ -336,6 +352,48 @@ class I18nDemo extends React.Component {
|
|
|
<Table columns={columns} dataSource={dataSource} scroll={{ y: 320 }} />
|
|
|
<h5>Table - Empty</h5>
|
|
|
<Table columns={columns} dataSource={[]} scroll={{ y: 320 }} />
|
|
|
+ <h5>List - Empty</h5>
|
|
|
+ <List header={<div>List</div>} dataSource={[]}/>
|
|
|
+ <h5>Calendar</h5>
|
|
|
+ <Calendar mode='month' />
|
|
|
+ <h5>Typography - Copyable</h5>
|
|
|
+ <Typography.Paragraph copyable>Click to copy text.</Typography.Paragraph>
|
|
|
+ <h5>Typography - Collapsible</h5>
|
|
|
+ <Typography.Paragraph ellipsis={{ rows: 3, expandable: true, collapsible: true}} style={{ width: 300 }}>
|
|
|
+ {`Expandable and collapsible: Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`}
|
|
|
+ </Typography.Paragraph>
|
|
|
+ <h5>Transfer</h5>
|
|
|
+ <Transfer
|
|
|
+ style={{ width: 568, height: 416 }}
|
|
|
+ dataSource={transferData}
|
|
|
+ />
|
|
|
+ <h5>Image</h5>
|
|
|
+ <ImagePreview showTooltip>
|
|
|
+ {srcList.map((src, index) => {
|
|
|
+ return (
|
|
|
+ <Image
|
|
|
+ key={index}
|
|
|
+ src={src}
|
|
|
+ width={200}
|
|
|
+ alt={`lamp${index + 1}`}
|
|
|
+ style={{ marginRight: 5 }}
|
|
|
+ />
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </ImagePreview>
|
|
|
+ <h5>Form</h5>
|
|
|
+ <Form layout='horizontal' onValueChange={values=>console.log(values)}>
|
|
|
+ <Form.Input field='UserName' label={{ text: '角色', optional: true }} style={{ width: 200 }} />
|
|
|
+ </Form>
|
|
|
+ <h5>Navigation</h5>
|
|
|
+ <Nav
|
|
|
+ bodyStyle={{ height: 320 }}
|
|
|
+ items={[]}
|
|
|
+ onSelect={key => console.log(key)}
|
|
|
+ footer={{
|
|
|
+ collapseButton: true,
|
|
|
+ }}
|
|
|
+ />
|
|
|
</>
|
|
|
);
|
|
|
};
|
Jacob