@ant-design/icons#HomeOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#HomeOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Bread.tsx From react_admin with MIT License | 6 votes |
|
Breads: React.FC<{}> = () => {
return (
<div className="bread">
<Breadcrumb>
<Breadcrumb.Item href="">
<HomeOutlined className="bread-icon" />
</Breadcrumb.Item>
<Breadcrumb.Item href="">
<UserOutlined />
<span>Application List</span>
</Breadcrumb.Item>
<Breadcrumb.Item>Application</Breadcrumb.Item>
</Breadcrumb>
</div>
);
}
Example #2
| Source File: AppMenu.tsx From jmix-frontend with Apache License 2.0 | 6 votes |
|
AppMenu = (props: AppMenuProps) => {
return (
<<%= menuType === 'vertical' ? 'VerticalMenu' : 'HorizontalMenu' %> {...props}>
<MenuItem
screenId="HomePage"
icon={<HomeOutlined />}
caption={"screen.home"}
key={"home"}
/>
<AddonsMenu key={"addonsMenu"}/>
Example #3
| Source File: index.tsx From XFlow with MIT License | 6 votes |
|
NotFoundPage = () => (
<>
<Result
// eslint-disable-next-line @typescript-eslint/no-explicit-any
status={'404' as any}
title="404"
subTitle="Sorry, the page you visited does not exist."
extra={
<Link to="/">
<Button type="primary">
<HomeOutlined />
Back Home
</Button>
</Link>
}
/>
</>
)
Example #4
| Source File: App.tsx From generator-earth with MIT License | 5 votes |
|
render() {
let totalPath = this.props.location.pathname
let prefixPath = (totalPath.match(/^\/[^/]*/) as Array<string>)[0]
let globalLoading = this.props.globalLoading
return (
<Spin spinning={globalLoading} style={{ maxHeight: '100vh' }}>
<Layout style={{ minHeight: '100vh' }}>
<Layout.Sider collapsible>
<div className='ui-logo'>金融</div>
<Menu theme='dark'
defaultSelectedKeys={['/']}
defaultOpenKeys={['/menu1']}
mode='inline'
selectedKeys={[prefixPath]}
>
<Item key='/'>
<HomeOutlined />
<span>首页</span>
<Link to='/'></Link>
</Item>
<Menu.SubMenu key='/menu1' title={<span><DeploymentUnitOutlined />各container模板</span>}>
<Item key='/Standard'>
<span>普通container</span>
<Link to='/Standard' title='(推荐) 自定义reducer和action'></Link>
</Item>
<Item key='/UseFactory'>
<span>使用Factory</span>
<Link to='/UseFactory' title='(推荐) 使用框架提供的Factory生成reducer和action'></Link>
</Item>
<Item key='/Hooks'>
<span>使用hooks</span>
<Link to='/Hooks' title='(推荐) 使用hooks'></Link>
</Item>
<Item key='/DontUseRedux'>
<span>不使用redux</span>
<Link to='/DontUseRedux' title='(不推荐)'></Link>
</Item>
<Item key='/UseSaga'>
<span>使用Saga</span>
<Link to='/UseSaga' title='自定义reducer和action以及redux-saga'></Link>
</Item>
</Menu.SubMenu>
</Menu>
</Layout.Sider>
<Layout>
<Layout.Header style={{ background: '#fff', textAlign: 'center' }}>
<h1>58金融</h1>
</Layout.Header>
<Layout.Content style={{ margin: '12px' }}>
<BaseRoutes routes={routes} />
</Layout.Content>
</Layout>
</Layout>
</Spin>
)
}
Example #5
| Source File: AppBarBreadcrumb.tsx From next-basics with GNU General Public License v3.0 | 5 votes |
|
export function AppBarBreadcrumb(
props: BasicBreadcrumbProps
): React.ReactElement {
const { currentApp, previousWorkspace } = useRecentApps();
const { items: breadcrumbItems } = currentApp?.breadcrumb || {};
const handleGoBackPreviousWorkspace = (): void => {
getRuntime().popWorkspaceStack();
getHistory().push(previousWorkspace.url);
};
return (
<div className={classnames(styles.breadcrumbContainer, props.className)}>
{previousWorkspace && (
<a
role="button"
className={styles.workspaceButton}
onClick={handleGoBackPreviousWorkspace}
>
<GeneralIcon icon={{ lib: "fa", icon: "reply" }} />
<span style={{ marginLeft: 7 }}>
{previousWorkspace.appLocaleName}
</span>
</a>
)}
<Breadcrumb separator={props.separator || ">"}>
{breadcrumbItems &&
breadcrumbItems.map((item: BreadcrumbItemConf, index: number) => {
return (
<Breadcrumb.Item key={index}>
{index === 0 && <HomeOutlined />}
{item.to ? <Link to={item.to}>{item.text}</Link> : item.text}
</Breadcrumb.Item>
);
})}
{currentApp && !props.noCurrentApp ? (
<Breadcrumb.Item>
{!breadcrumbItems?.length &&
(props.showCurrentAppIcon ? (
<GeneralIcon icon={currentApp.menuIcon} />
) : (
<HomeOutlined />
))}
<span>
{props.breadcrumb &&
props.breadcrumb.length > 0 &&
currentApp.homepage &&
!currentApp.internal ? (
<Link to={currentApp.homepage}>{currentApp.localeName}</Link>
) : (
currentApp.localeName
)}
</span>
</Breadcrumb.Item>
) : null}
{props.breadcrumb &&
props.breadcrumb.map((item, index) => (
<Breadcrumb.Item key={String(index)}>
{item.to ? <Link to={item.to}>{item.text}</Link> : item.text}
</Breadcrumb.Item>
))}
</Breadcrumb>
</div>
);
}
Example #6
| Source File: index.tsx From tinyhouse with MIT License | 5 votes |
|
export function MenuItems({ viewer, setViewer }: MenuItemsProps) {
const [logOut] = useMutation<LogOutData>(LOG_OUT, {
onCompleted: (data) => {
if (data && data.logOut) {
setViewer(data.logOut);
sessionStorage.removeItem("token");
displaySuccessNotification("You've successfully logged out!");
}
},
onError: (error) => {
displayErrorMessage(
"Sorry, we weren't able to to log you out. Please try again later!"
);
},
});
const handleLogout = async () => {
await logOut();
};
const subMenuLogin =
viewer.id && viewer.avatar ? (
<SubMenu key={viewer.id} title={<Avatar src={viewer.avatar} />}>
<Item key="/user">
<NavLink to={`/user/${viewer.id}`}>
<UserOutlined></UserOutlined>
Profile
</NavLink>
</Item>
<Item key="/logout" onClick={handleLogout}>
<LogoutOutlined></LogoutOutlined>
Log out
</Item>
</SubMenu>
) : (
<Item>
<NavLink to="/login">
<Button type="primary">Sign In</Button>
</NavLink>
</Item>
);
return (
<Menu mode="horizontal" selectable={false} className="menu">
<Item key="/host">
<NavLink to="/host">
<HomeOutlined />
Host
</NavLink>
</Item>
{subMenuLogin}
</Menu>
);
}
Example #7
| Source File: sidemenu.tsx From ui with GNU Affero General Public License v3.0 | 5 votes |
|
sideMenu: SideMenuElement[] = [
{
key: 'home',
name: 'admin:home',
href: '/admin',
icon: <HomeOutlined />,
},
{
key: 'profile',
name: 'admin:profile',
href: '/admin/profile',
icon: <UserOutlined />,
},
{
key: 'public',
name: 'admin:forms',
group: true,
role: 'admin',
items: [
{
key: 'forms',
name: 'admin:forms',
href: '/admin/forms',
icon: <MessageOutlined />,
},
],
},
{
key: 'administration',
name: 'admin:administration',
group: true,
role: 'superuser',
items: [
{
key: 'users',
name: 'admin:users',
href: '/admin/users',
icon: <TeamOutlined />,
},
],
},
]
Example #8
| Source File: index.tsx From shippo with MIT License | 4 votes |
|
CreationLayout: React.FC = () => {
const [current, setCurrent] = useState('app1')
const handleClick: MenuClickEventHandler = (event) => {
console.log('click ', event)
setCurrent(event.key)
}
const onSearch = (value: string) => console.log(value)
const callback = (key: string) => {
console.log(key)
}
const data = [
{
icon: <FormOutlined />,
title: '投稿',
},
{
icon: <QuestionCircleOutlined />,
title: '帮助',
},
]
return (
<Layout>
<Header>
<div style={{ display: 'flex', backgroundColor: '#fff' }}>
<div style={{ width: '250px', fontSize: '25px', color: '#1890ff', textAlign: 'center' }}>
Shippo 创作中心
</div>
<div style={{ flex: '1 1 0%' }}>
<span style={{ fontSize: '16px', margin: '0 30px', color: '#757575' }}>
<CrownOutlined style={{ marginRight: '5px' }} />
主页
</span>
</div>
<div style={{ padding: '0 50px' }}>
<Dropdown
placement="bottomCenter"
overlay={
<Menu>
<Menu.Item>个人中心</Menu.Item>
<Menu.Item>投稿管理</Menu.Item>
<Menu.Divider />
<Menu.Item>退出登录</Menu.Item>
</Menu>
}
>
<Avatar size={40} icon={<UserOutlined />} />
</Dropdown>
</div>
</div>
</Header>
<Layout>
<Sider width="250px" theme="light" style={{ paddingTop: '20px' }}>
<Affix offsetTop={20} onChange={(affixed) => console.log(affixed)}>
<div style={{ overflow: 'auto', maxHeight: '100vh' }}>
<div style={{ padding: '10px 25px', textAlign: 'center' }}>
<Button type="primary" size="large" style={{ width: '120px' }}>
投稿
</Button>
</div>
<div style={{ padding: '0 25px' }}>
<StyledMenu
style={{ width: '200px', border: 0, backgroundColor: '#fff' }}
defaultSelectedKeys={['1']}
mode="inline"
>
<Menu.Item key="1" icon={<HomeOutlined />}>
首页
</Menu.Item>
<SubMenu key="sub1" icon={<FileTextOutlined />} title="内容管理">
<Menu.Item key="2">稿件管理</Menu.Item>
</SubMenu>
<Menu.Item key="5" icon={<TeamOutlined />}>
粉丝管理
</Menu.Item>
<SubMenu key="sub2" icon={<MessageOutlined />} title="互动管理">
<Menu.Item key="6">评论管理</Menu.Item>
</SubMenu>
<Menu.Item key="7" icon={<SettingOutlined />}>
创作设置
</Menu.Item>
</StyledMenu>
</div>
</div>
</Affix>
</Sider>
<Content>
<div style={{ padding: '30px 50px' }}>
<StyledTabs defaultActiveKey="1" style={{ backgroundColor: '#fff' }}>
<TabPane tab="文章管理" key="1">
<Tinymce></Tinymce>
</TabPane>
<TabPane tab="文章管理" key="2">
Content of Tab Pane 2
</TabPane>
<TabPane tab="文章管理" key="3">
Content of Tab Pane 3
</TabPane>
</StyledTabs>
</div>
</Content>
</Layout>
</Layout>
)
}
Example #9
| Source File: App.tsx From generator-earth with MIT License | 4 votes |
|
/**
* 路由细节
* https://github.com/jiajianrong/documents/blob/master/react/react-router%E9%9B%86%E6%88%90antd%20-%20%E8%B7%AF%E7%94%B1%E6%96%B9%E6%A1%88.md
**/
function App(props: IAppProps) {
let totalPath = props.location.pathname;
let prefixPath = (totalPath.match(/^\/[^/]*/) as Array<string>)[0];
let globalLoading = props.globalLoading;
return (
<Spin spinning={globalLoading} style={{ maxHeight: window.innerHeight }}>
<Layout style={{ minHeight: '100vh' }}>
<Layout.Sider collapsible>
<div className="logo">金融</div>
<Menu theme="dark"
defaultSelectedKeys={['/']}
defaultOpenKeys={['/menu1']}
mode="inline"
selectedKeys={[prefixPath]} >
<Item key="/">
<HomeOutlined />
<span>首页</span>
<Link to="/"></Link>
</Item>
<Menu.SubMenu key="/menu1" title={<span><DeploymentUnitOutlined />各container模板</span>}>
<Item key="/Standard">
<span>(推荐)使用redux的class container</span>
<Link to="/Standard" title="(推荐)使用redux的class container"></Link>
</Item>
<Item key="/HooksWithRedux">
<span>(强烈推荐)使用redux的hooks container</span>
<Link to="/HooksWithRedux" title="(强烈推荐)使用redux的hooks container"></Link>
</Item>
<Item key="/UseFactory">
<span>使用Factory</span>
<Link to="/UseFactory" title="使用框架提供的Factory生成reducer和action"></Link>
</Item>
<Item key="/UseSaga">
<span>使用Saga</span>
<Link to="/UseSaga" title="使用redux的class container"></Link>
</Item>
<Item key="/DontUseRedux">
<span>不使用redux</span>
<Link to="/DontUseRedux" title=""></Link>
</Item>
<Item key="/HooksWithoutRedux">
<span>不使用redux的hooks</span>
<Link to="/HooksWithoutRedux" title="不使用redux的hooks"></Link>
</Item>
</Menu.SubMenu>
</Menu>
</Layout.Sider>
<Layout>
<Layout.Header style={{ background: '#fff', textAlign: 'center' }}>
<h1>58金融</h1>
</Layout.Header>
<Layout.Content style={{ margin: '0 16px' }}>
<Suspense fallback={null}>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/Standard" component={Standard}/>
<Route path="/UseFactory" component={UseFactory}/>
<Route path="/DontUseRedux" component={DontUseRedux}/>
<Route path="/UseSaga" component={UseSaga}/>
<Route path="/HooksWithoutRedux" component={HooksWithoutRedux}/>
<Route path="/HooksWithRedux" component={HooksWithRedux}/>
</Switch>
</Suspense>
</Layout.Content>
</Layout>
</Layout>
</Spin>
)
}
Example #10
| Source File: AppMenu.tsx From jmix-frontend with Apache License 2.0 | 4 votes |
|
AppMenu = (props: AppMenuProps) => {
return (
<VerticalMenu {...props}>
<MenuItem
screenId="HomePage"
icon={<HomeOutlined />}
caption={"screen.home"}
key={"home"}
/>
<MenuItem
screenId={"ExampleCustomScreen"}
icon={<BarsOutlined />}
caption={"screen.ExampleCustomScreen"}
key={"8a31bf50-1575-46cc-a7df-2be02298bcdd"}
/>
<MenuItem
screenId={"CustomEntityFilterTest"}
icon={<BarsOutlined />}
caption={"screen.CustomEntityFilterTest"}
key={"9de55ba6-aa6b-4dba-ac8d-293651687a62"}
/>
<MenuItem
screenId={"CustomFormControls"}
icon={<BarsOutlined />}
caption={"screen.CustomFormControls"}
key={"bf274c85-336e-4037-9908-f859f858cf05"}
/>
<MenuItem
screenId={"CustomDataDisplayComponents"}
icon={<BarsOutlined />}
caption={"screen.CustomDataDisplayComponents"}
key={"9bc14b20-091c-4092-b6ae-9f8a5c4d04bc"}
/>
<MenuItem
screenId={"CustomAppLayouts"}
icon={<BarsOutlined />}
caption={"screen.CustomAppLayouts"}
key={"655856cc-106c-4fa4-b7ef-c54eaea5bc37"}
/>
<MenuItem
screenId={"CustomControls"}
icon={<BarsOutlined />}
caption={"screen.CustomControls"}
key={"6b265007-4a61-4cb4-870f-763ca29c8aa1"}
/>
<MenuItem
screenId={"ErrorBoundaryTests"}
icon={<BarsOutlined />}
caption={"screen.ErrorBoundaryTests"}
key={"2e446840-e85b-43e6-94b8-01924e8f541e"}
/>
<MenuItem
screenId={"TestBlankScreen"}
icon={<BarsOutlined />}
caption={"screen.TestBlankScreen"}
key={"37dc1151-e43f-45b6-9f6b-894f014ab902"}
/>
<MenuItem
screenId={"StructureComponent"}
icon={<BarsOutlined />}
caption={"screen.StructureComponent"}
key={"7644d625-0f96-482b-9c50-5b88da7c01c1"}
/>
<MenuItem
screenId={"CarEditor"}
icon={<BarsOutlined />}
caption={"screen.CarEditor"}
key={"09187e02-9fee-4c88-93c5-7340badc0372"}
/>
<MenuItem
screenId={"CarBrowserCards"}
icon={<BarsOutlined />}
caption={"screen.CarBrowserCards"}
key={"70960295-00ab-4f35-ab80-024059c51da6"}
/>
<MenuItem
screenId={"CarBrowserList"}
icon={<BarsOutlined />}
caption={"screen.CarBrowserList"}
key={"40ed2fbb-146e-4bac-a919-4954bb834bb5"}
/>
<MenuItem
screenId={"CarBrowserTable"}
icon={<BarsOutlined />}
caption={"screen.CarBrowserTable"}
key={"0ae3f1a1-a4a5-442a-8c8e-d39cd0041c89"}
/>
<MenuItem
screenId={"CarCardsGrid"}
icon={<BarsOutlined />}
caption={"screen.CarCardsGrid"}
key={"31c0634b-a26f-41be-b43e-97b90c499f09"}
/>
<MenuItem
screenId={"FavoriteCars"}
icon={<BarsOutlined />}
caption={"screen.FavoriteCars"}
key={"8c1d4f99-f962-4ff7-939c-719a05e38f06"}
/>
<MenuItem
screenId={"CarCardsWithDetails"}
icon={<BarsOutlined />}
caption={"screen.CarCardsWithDetails"}
key={"806125b6-9577-43c3-bd06-21664f3b3466"}
/>
<MenuItem
screenId={"CarTableWithFilters"}
icon={<BarsOutlined />}
caption={"screen.CarTableWithFilters"}
key={"fd780d02-ecbe-49ad-8d46-9bab887d447f"}
/>
<MenuItem
screenId={"CarMasterDetail"}
icon={<BarsOutlined />}
caption={"screen.CarMasterDetail"}
key={"dd05d903-fb62-4448-9759-6d329f75755c"}
/>
<MenuItem
screenId={"FormWizardEditor"}
icon={<BarsOutlined />}
caption={"screen.FormWizardEditor"}
key={"7ea4b263-a82a-4692-9362-f8266aed2a23"}
/>
<MenuItem
screenId={"FormWizardBrowserTable"}
icon={<BarsOutlined />}
caption={"screen.FormWizardBrowserTable"}
key={"9a529190-671d-491b-b273-2ff569e650fe"}
/>
<MenuItem
screenId={"CarMultiSelectionTable"}
icon={<BarsOutlined />}
caption={"screen.CarMultiSelectionTable"}
key={"ddbdcf25-d569-4ce2-8849-469ac256970b"}
/>
<MenuItem
screenId={"DatatypesCalendar"}
icon={<BarsOutlined />}
caption={"screen.DatatypesCalendar"}
key={"fdf738e8-755a-4ab3-9057-3083d1d720a5"}
/>
<MenuItem
screenId={"DatatypesTestBrowserCards"}
icon={<BarsOutlined />}
caption={"screen.DatatypesTestBrowserCards"}
key={"da65e076-8d92-4338-a915-e84a2f02e40d"}
/>
<MenuItem
screenId={"DatatypesTestBrowserList"}
icon={<BarsOutlined />}
caption={"screen.DatatypesTestBrowserList"}
key={"1dc6e26a-b4c0-4e36-ad02-1a096200d9e4"}
/>
<MenuItem
screenId={"DatatypesTestBrowserTable"}
icon={<BarsOutlined />}
caption={"screen.DatatypesTestBrowserTable"}
key={"04471835-0ddb-45c9-a364-a32b75ab7052"}
/>
<MenuItem
screenId={"DatatypesTestCards"}
icon={<BarsOutlined />}
caption={"screen.DatatypesTestCards"}
key={"d5014f58-d83a-47a4-a2f3-ba38b7f4e449"}
/>
<MenuItem
screenId={"AssociationO2OBrowserTable"}
icon={<BarsOutlined />}
caption={"screen.AssociationO2OBrowserTable"}
key={"1094080e-96f9-41af-9f87-d3998a0f00b0"}
/>
<MenuItem
screenId={"AssociationO2MBrowserTable"}
icon={<BarsOutlined />}
caption={"screen.AssociationO2MBrowserTable"}
key={"03063bca-dda8-48e9-8d88-31e52221f63e"}
/>
<MenuItem
screenId={"AssociationM2OBrowserTable"}
icon={<BarsOutlined />}
caption={"screen.AssociationM2OBrowserTable"}
key={"8c8800f8-ca22-44ba-9278-e269e24f6fab"}
/>
<MenuItem
screenId={"AssociationM2MBrowserTable"}
icon={<BarsOutlined />}
caption={"screen.AssociationM2MBrowserTable"}
key={"bda73deb-ec35-462c-a26a-3a00a14521cb"}
/>
<MenuItem
screenId={"CompositionO2OBrowserTable"}
icon={<BarsOutlined />}
caption={"screen.CompositionO2OBrowserTable"}
key={"18606a05-fd3b-4128-a914-d73460867e40"}
/>
<MenuItem
screenId={"CompositionO2MBrowserTable"}
icon={<BarsOutlined />}
caption={"screen.CompositionO2MBrowserTable"}
key={"1b5bd338-11d7-4e6b-bda2-a65d0934b624"}
/>
<MenuItem
screenId={"DeeplyNestedO2MTestEntityTable"}
icon={<BarsOutlined />}
caption={"screen.DeeplyNestedO2MTestEntityTable"}
key={"61472f1f-0529-4cf6-aebf-a85128a98d98"}
/>
<MenuItem
screenId={"IntIdBrowserTable"}
icon={<BarsOutlined />}
caption={"screen.IntIdBrowserTable"}
key={"bbdcd55c-72af-401c-99fa-abc7193e962b"}
/>
<MenuItem
screenId={"IntIdBrowserCards"}
icon={<BarsOutlined />}
caption={"screen.IntIdBrowserCards"}
key={"2566dde0-8025-49d9-86b3-c02595608482"}
/>
<MenuItem
screenId={"IntIdBrowserList"}
icon={<BarsOutlined />}
caption={"screen.IntIdBrowserList"}
key={"faeb03cd-d233-42b5-831f-05fbbf805dd7"}
/>
<MenuItem
screenId={"IntIdentityIdCards"}
icon={<BarsOutlined />}
caption={"screen.IntIdentityIdCards"}
key={"8cc0fbb6-fec5-43cc-bda3-0391fd14a43d"}
/>
<MenuItem
screenId={"IntIdentityIdBrowserTable"}
icon={<BarsOutlined />}
caption={"screen.IntIdentityIdBrowserTable"}
key={"0b509745-9544-480b-8152-e52254d91a85"}
/>
<MenuItem
screenId={"IntIdentityIdBrowserCards"}
icon={<BarsOutlined />}
caption={"screen.IntIdentityIdBrowserCards"}
key={"7e2c1dcf-0c36-42bd-b1d0-b7f44cbdcab2"}
/>
<MenuItem
screenId={"IntIdentityIdBrowserList"}
icon={<BarsOutlined />}
caption={"screen.IntIdentityIdBrowserList"}
key={"7d77cc67-2a70-403e-90ae-71936d5f6104"}
/>
<MenuItem
screenId={"StringIdCards"}
icon={<BarsOutlined />}
caption={"screen.StringIdCards"}
key={"979a3eab-f9dc-4c83-808b-6169cb436492"}
/>
<MenuItem
screenId={"StringIdBrowserCards"}
icon={<BarsOutlined />}
caption={"screen.StringIdBrowserCards"}
key={"fb580cdd-2995-4037-973c-c95ab55809ac"}
/>
<MenuItem
screenId={"StringIdBrowserList"}
icon={<BarsOutlined />}
caption={"screen.StringIdBrowserList"}
key={"c8bbee9f-5b03-4362-a82c-fd4fe693c921"}
/>
<MenuItem
screenId={"StringIdBrowserTable"}
icon={<BarsOutlined />}
caption={"screen.StringIdBrowserTable"}
key={"7f02fdae-1088-439c-bf3e-fb7ca02e2eae"}
/>
<MenuItem
screenId={"WeirdStringIdBrowserCards"}
icon={<BarsOutlined />}
caption={"screen.WeirdStringIdBrowserCards"}
key={"2936891e-6fd5-44b0-96bd-9877e5c15c8c"}
/>
<MenuItem
screenId={"WeirdStringIdBrowserList"}
icon={<BarsOutlined />}
caption={"screen.WeirdStringIdBrowserList"}
key={"1a03976a-4b8b-4776-a8f9-edaa1bfa8fc5"}
/>
<MenuItem
screenId={"WeirdStringIdBrowserTable"}
icon={<BarsOutlined />}
caption={"screen.WeirdStringIdBrowserTable"}
key={"362860d8-a6e4-4093-85b9-f314c21aa5eb"}
/>
<MenuItem
screenId={"BoringStringIdBrowserTable"}
icon={<BarsOutlined />}
caption={"screen.BoringStringIdBrowserTable"}
key={"70c28466-e939-43f7-ba63-3e074166e9c1"}
/>
<MenuItem
screenId={"TrickyIdBrowserTable"}
icon={<BarsOutlined />}
caption={"screen.TrickyIdBrowserTable"}
key={"0ac137fe-5ad8-4826-8c72-57d06565adbc"}
/>
<AddonsMenu key={"addonsMenu"} />
</VerticalMenu>
);
}
Example #11
| Source File: palette.tsx From jmix-frontend with Apache License 2.0 | 4 votes |
|
palette = () => (
<Palette>
<Category name="Text">
<Component name="Formatted Message">
<Variant>
<FormattedMessage />
</Variant>
</Component>
<Component name="Heading">
<Variant name="h1">
<Typography.Title></Typography.Title>
</Variant>
<Variant name="h2">
<Typography.Title level={2}></Typography.Title>
</Variant>
<Variant name="h3">
<Typography.Title level={3}></Typography.Title>
</Variant>
<Variant name="h4">
<Typography.Title level={4}></Typography.Title>
</Variant>
<Variant name="h5">
<Typography.Title level={5}></Typography.Title>
</Variant>
</Component>
<Component name="Text">
<Variant>
<Typography.Text></Typography.Text>
</Variant>
<Variant name="Secondary">
<Typography.Text type="secondary"></Typography.Text>
</Variant>
<Variant name="Success">
<Typography.Text type="success"></Typography.Text>
</Variant>
<Variant name="Warning">
<Typography.Text type="warning"></Typography.Text>
</Variant>
<Variant name="Danger">
<Typography.Text type="danger"></Typography.Text>
</Variant>
<Variant name="Disabled">
<Typography.Text disabled></Typography.Text>
</Variant>
</Component>
</Category>
<Category name="Layout">
<Component name="Divider">
<Variant>
<Divider />
</Variant>
</Component>
<Component name="Grid">
<Variant name="Simple Row">
<Row></Row>
</Variant>
<Variant name="Two columns">
<Row>
<Col span={12}></Col>
<Col span={12}></Col>
</Row>
</Variant>
<Variant name="Three columns">
<Row>
<Col span={8}></Col>
<Col span={8}></Col>
<Col span={8}></Col>
</Row>
</Variant>
</Component>
<Component name="Space">
<Variant>
<Space />
</Variant>
<Variant name="Small">
<Space size={"small"} />
</Variant>
<Variant name="Large">
<Space size={"large"} />
</Variant>
</Component>
</Category>
<Category name="Controls">
<Component name="Autocomplete">
<Variant>
<AutoComplete placeholder="input here" />
</Variant>
</Component>
<Component name="Button">
<Variant>
<Button></Button>
</Variant>
<Variant name="Primary">
<Button type="primary"></Button>
</Variant>
<Variant name="Link">
<Button type="link"></Button>
</Variant>
<Variant name="Dropdown">
<Dropdown
trigger={["click"]}
overlay={
<Menu>
<Menu.Item></Menu.Item>
<Menu.Item></Menu.Item>
<Menu.Item></Menu.Item>
</Menu>
}
>
<Button></Button>
</Dropdown>
</Variant>
</Component>
<Component name="Checkbox">
<Variant>
<Checkbox />
</Variant>
</Component>
<Component name="Switch">
<Variant>
<Switch />
</Variant>
</Component>
<Component name="Radio Group">
<Variant>
<Radio.Group>
<Radio value={1}>A</Radio>
<Radio value={2}>B</Radio>
<Radio value={3}>C</Radio>
<Radio value={4}>D</Radio>
</Radio.Group>
</Variant>
<Variant name="Button">
<Radio.Group>
<Radio.Button value={1}>A</Radio.Button>
<Radio.Button value={2}>B</Radio.Button>
<Radio.Button value={3}>C</Radio.Button>
<Radio.Button value={4}>D</Radio.Button>
</Radio.Group>
</Variant>
</Component>
<Component name="DatePicker">
<Variant>
<DatePicker />
</Variant>
<Variant name="Range">
<DatePicker.RangePicker />
</Variant>
</Component>
<Component name="TimePicker">
<Variant>
<TimePicker />
</Variant>
<Variant name="Range">
<TimePicker.RangePicker />
</Variant>
</Component>
<Component name="Input">
<Variant>
<Input />
</Variant>
<Variant name="Number">
<InputNumber />
</Variant>
</Component>
<Component name="Select">
<Variant>
<Select defaultValue="1">
<Select.Option value="1">1</Select.Option>
<Select.Option value="2">2</Select.Option>
</Select>
</Variant>
<Variant name="Multiple">
<Select defaultValue={["1"]} mode="multiple" allowClear>
<Select.Option value="1">1</Select.Option>
<Select.Option value="2">2</Select.Option>
</Select>
</Variant>
</Component>
<Component name="Link">
<Variant>
<Typography.Link href="" target="_blank"></Typography.Link>
</Variant>
</Component>
<Component name="Slider">
<Variant>
<Slider defaultValue={30} />
</Variant>
<Variant name="Range">
<Slider range defaultValue={[20, 50]} />
</Variant>
</Component>
</Category>
<Category name="Data Display">
<Component name="Field">
<Variant>
<Field
entityName={ENTITY_NAME}
disabled={readOnlyMode}
propertyName=""
formItemProps={{
style: { marginBottom: "12px" }
}}
/>
</Variant>
</Component>
<Component name="Card">
<Variant>
<Card />
</Variant>
<Variant name="With Title">
<Card>
<Card title="Card title">
<p>Card content</p>
</Card>
</Card>
</Variant>
<Variant name="My custom card">
<Card>
<Card title="Card title">
<p>Card content</p>
<Avatar />
</Card>
</Card>
</Variant>
</Component>
<Component name="Tabs">
<Variant>
<Tabs defaultActiveKey="1">
<Tabs.TabPane tab="Tab 1" key="1">
Content of Tab Pane 1
</Tabs.TabPane>
<Tabs.TabPane tab="Tab 2" key="2">
Content of Tab Pane 2
</Tabs.TabPane>
<Tabs.TabPane tab="Tab 3" key="3">
Content of Tab Pane 3
</Tabs.TabPane>
</Tabs>
</Variant>
<Variant name="Tab Pane">
<Tabs.TabPane></Tabs.TabPane>
</Variant>
</Component>
<Component name="Collapse">
<Variant>
<Collapse defaultActiveKey="1">
<Collapse.Panel
header="This is panel header 1"
key="1"
></Collapse.Panel>
<Collapse.Panel
header="This is panel header 2"
key="2"
></Collapse.Panel>
<Collapse.Panel
header="This is panel header 3"
key="3"
></Collapse.Panel>
</Collapse>
</Variant>
</Component>
<Component name="Image">
<Variant>
<Image width={200} src="" />
</Variant>
</Component>
<Component name="Avatar">
<Variant>
<Avatar icon={<UserOutlined />} />
</Variant>
<Variant name="Image">
<Avatar src="https://joeschmoe.io/api/v1/random" />
</Variant>
</Component>
<Component name="Badge">
<Variant>
<Badge count={1}></Badge>
</Variant>
</Component>
<Component name="Statistic">
<Variant>
<Statistic title="Title" value={112893} />
</Variant>
</Component>
<Component name="Alert">
<Variant name="Success">
<Alert message="Text" type="success" />
</Variant>
<Variant name="Info">
<Alert message="Text" type="info" />
</Variant>
<Variant name="Warning">
<Alert message="Text" type="warning" />
</Variant>
<Variant name="Error">
<Alert message="Text" type="error" />
</Variant>
</Component>
<Component name="List">
<Variant>
<List
bordered
dataSource={[]}
renderItem={item => <List.Item></List.Item>}
/>
</Variant>
</Component>
</Category>
<Category name="Icons">
<Component name="Arrow">
<Variant name="Up">
<ArrowUpOutlined />
</Variant>
<Variant name="Down">
<ArrowDownOutlined />
</Variant>
<Variant name="Left">
<ArrowLeftOutlined />
</Variant>
<Variant name="Right">
<ArrowRightOutlined />
</Variant>
</Component>
<Component name="Question">
<Variant>
<QuestionOutlined />
</Variant>
<Variant name="Circle">
<QuestionCircleOutlined />
</Variant>
</Component>
<Component name="Plus">
<Variant>
<PlusOutlined />
</Variant>
<Variant name="Circle">
<PlusCircleOutlined />
</Variant>
</Component>
<Component name="Info">
<Variant>
<InfoOutlined />
</Variant>
<Variant name="Circle">
<InfoCircleOutlined />
</Variant>
</Component>
<Component name="Exclamation">
<Variant>
<ExclamationOutlined />
</Variant>
<Variant name="Circle">
<ExclamationCircleOutlined />
</Variant>
</Component>
<Component name="Close">
<Variant>
<CloseOutlined />
</Variant>
<Variant name="Circle">
<CloseCircleOutlined />
</Variant>
</Component>
<Component name="Check">
<Variant>
<CheckOutlined />
</Variant>
<Variant name="Circle">
<CheckCircleOutlined />
</Variant>
</Component>
<Component name="Edit">
<Variant>
<EditOutlined />
</Variant>
</Component>
<Component name="Copy">
<Variant>
<CopyOutlined />
</Variant>
</Component>
<Component name="Delete">
<Variant>
<DeleteOutlined />
</Variant>
</Component>
<Component name="Bars">
<Variant>
<BarsOutlined />
</Variant>
</Component>
<Component name="Bell">
<Variant>
<BellOutlined />
</Variant>
</Component>
<Component name="Clear">
<Variant>
<ClearOutlined />
</Variant>
</Component>
<Component name="Download">
<Variant>
<DownloadOutlined />
</Variant>
</Component>
<Component name="Upload">
<Variant>
<UploadOutlined />
</Variant>
</Component>
<Component name="Sync">
<Variant>
<SyncOutlined />
</Variant>
</Component>
<Component name="Save">
<Variant>
<SaveOutlined />
</Variant>
</Component>
<Component name="Search">
<Variant>
<SearchOutlined />
</Variant>
</Component>
<Component name="Settings">
<Variant>
<SettingOutlined />
</Variant>
</Component>
<Component name="Paperclip">
<Variant>
<PaperClipOutlined />
</Variant>
</Component>
<Component name="Phone">
<Variant>
<PhoneOutlined />
</Variant>
</Component>
<Component name="Mail">
<Variant>
<MailOutlined />
</Variant>
</Component>
<Component name="Home">
<Variant>
<HomeOutlined />
</Variant>
</Component>
<Component name="Contacts">
<Variant>
<ContactsOutlined />
</Variant>
</Component>
<Component name="User">
<Variant>
<UserOutlined />
</Variant>
<Variant name="Add">
<UserAddOutlined />
</Variant>
<Variant name="Remove">
<UserDeleteOutlined />
</Variant>
</Component>
<Component name="Team">
<Variant>
<TeamOutlined />
</Variant>
</Component>
</Category>
<Category name="Screens">
<Component name="ExampleCustomScreen">
<Variant>
<ExampleCustomScreen />
</Variant>
</Component>
<Component name="CustomEntityFilterTest">
<Variant>
<CustomEntityFilterTest />
</Variant>
</Component>
<Component name="CustomFormControls">
<Variant>
<CustomFormControls />
</Variant>
</Component>
<Component name="CustomDataDisplayComponents">
<Variant>
<CustomDataDisplayComponents />
</Variant>
</Component>
<Component name="CustomAppLayouts">
<Variant>
<CustomAppLayouts />
</Variant>
</Component>
<Component name="CustomControls">
<Variant>
<CustomControls />
</Variant>
</Component>
<Component name="ErrorBoundaryTests">
<Variant>
<ErrorBoundaryTests />
</Variant>
</Component>
<Component name="TestBlankScreen">
<Variant>
<TestBlankScreen />
</Variant>
</Component>
<Component name="CarEditor">
<Variant>
<CarEditor />
</Variant>
</Component>
<Component name="CarBrowserCards">
<Variant>
<CarBrowserCards />
</Variant>
</Component>
<Component name="CarBrowserList">
<Variant>
<CarBrowserList />
</Variant>
</Component>
<Component name="CarBrowserTable">
<Variant>
<CarBrowserTable />
</Variant>
</Component>
<Component name="CarCardsGrid">
<Variant>
<CarCardsGrid />
</Variant>
</Component>
<Component name="FavoriteCars">
<Variant>
<FavoriteCars />
</Variant>
</Component>
<Component name="CarCardsWithDetails">
<Variant>
<CarCardsWithDetails />
</Variant>
</Component>
<Component name="CarTableWithFilters">
<Variant>
<CarTableWithFilters />
</Variant>
</Component>
<Component name="CarMasterDetail">
<Variant>
<CarMasterDetail />
</Variant>
</Component>
<Component name="FormWizardCompositionO2O">
<Variant>
<FormWizardCompositionO2O />
</Variant>
</Component>
<Component name="FormWizardEditor">
<Variant>
<FormWizardEditor />
</Variant>
</Component>
<Component name="FormWizardBrowserTable">
<Variant>
<FormWizardBrowserTable />
</Variant>
</Component>
<Component name="CarMultiSelectionTable">
<Variant>
<CarMultiSelectionTable />
</Variant>
</Component>
<Component name="DatatypesTestEditor">
<Variant>
<DatatypesTestEditor />
</Variant>
</Component>
<Component name="DatatypesTestBrowserCards">
<Variant>
<DatatypesTestBrowserCards />
</Variant>
</Component>
<Component name="DatatypesTestBrowserList">
<Variant>
<DatatypesTestBrowserList />
</Variant>
</Component>
<Component name="DatatypesTestBrowserTable">
<Variant>
<DatatypesTestBrowserTable />
</Variant>
</Component>
<Component name="DatatypesTestCards">
<Variant>
<DatatypesTestCards />
</Variant>
</Component>
<Component name="AssociationO2OEditor">
<Variant>
<AssociationO2OEditor />
</Variant>
</Component>
<Component name="AssociationO2OBrowserTable">
<Variant>
<AssociationO2OBrowserTable />
</Variant>
</Component>
<Component name="AssociationO2MEditor">
<Variant>
<AssociationO2MEditor />
</Variant>
</Component>
<Component name="AssociationO2MBrowserTable">
<Variant>
<AssociationO2MBrowserTable />
</Variant>
</Component>
<Component name="AssociationM2OEditor">
<Variant>
<AssociationM2OEditor />
</Variant>
</Component>
<Component name="AssociationM2OBrowserTable">
<Variant>
<AssociationM2OBrowserTable />
</Variant>
</Component>
<Component name="AssociationM2MEditor">
<Variant>
<AssociationM2MEditor />
</Variant>
</Component>
<Component name="AssociationM2MBrowserTable">
<Variant>
<AssociationM2MBrowserTable />
</Variant>
</Component>
<Component name="CompositionO2OEditor">
<Variant>
<CompositionO2OEditor />
</Variant>
</Component>
<Component name="CompositionO2OBrowserTable">
<Variant>
<CompositionO2OBrowserTable />
</Variant>
</Component>
<Component name="CompositionO2MEditor">
<Variant>
<CompositionO2MEditor />
</Variant>
</Component>
<Component name="CompositionO2MBrowserTable">
<Variant>
<CompositionO2MBrowserTable />
</Variant>
</Component>
<Component name="DeeplyNestedTestEntityEditor">
<Variant>
<DeeplyNestedTestEntityEditor />
</Variant>
</Component>
<Component name="DeeplyNestedO2MTestEntityTable">
<Variant>
<DeeplyNestedO2MTestEntityTable />
</Variant>
</Component>
<Component name="DeeplyNestedO2MTestEntityEditor">
<Variant>
<DeeplyNestedO2MTestEntityEditor />
</Variant>
</Component>
<Component name="IntIdEditor">
<Variant>
<IntIdEditor />
</Variant>
</Component>
<Component name="IntIdBrowserTable">
<Variant>
<IntIdBrowserTable />
</Variant>
</Component>
<Component name="IntIdBrowserCards">
<Variant>
<IntIdBrowserCards />
</Variant>
</Component>
<Component name="IntIdBrowserList">
<Variant>
<IntIdBrowserList />
</Variant>
</Component>
<Component name="IntIdentityIdCards">
<Variant>
<IntIdentityIdCards />
</Variant>
</Component>
<Component name="IntIdentityIdEditor">
<Variant>
<IntIdentityIdEditor />
</Variant>
</Component>
<Component name="IntIdentityIdBrowserTable">
<Variant>
<IntIdentityIdBrowserTable />
</Variant>
</Component>
<Component name="IntIdentityIdBrowserCards">
<Variant>
<IntIdentityIdBrowserCards />
</Variant>
</Component>
<Component name="IntIdentityIdBrowserList">
<Variant>
<IntIdentityIdBrowserList />
</Variant>
</Component>
<Component name="StringIdCards">
<Variant>
<StringIdCards />
</Variant>
</Component>
<Component name="StringIdMgtCardsEdit">
<Variant>
<StringIdMgtCardsEdit />
</Variant>
</Component>
<Component name="StringIdBrowserCards">
<Variant>
<StringIdBrowserCards />
</Variant>
</Component>
<Component name="StringIdBrowserList">
<Variant>
<StringIdBrowserList />
</Variant>
</Component>
<Component name="StringIdBrowserTable">
<Variant>
<StringIdBrowserTable />
</Variant>
</Component>
<Component name="WeirdStringIdEditor">
<Variant>
<WeirdStringIdEditor />
</Variant>
</Component>
<Component name="WeirdStringIdBrowserCards">
<Variant>
<WeirdStringIdBrowserCards />
</Variant>
</Component>
<Component name="WeirdStringIdBrowserList">
<Variant>
<WeirdStringIdBrowserList />
</Variant>
</Component>
<Component name="WeirdStringIdBrowserTable">
<Variant>
<WeirdStringIdBrowserTable />
</Variant>
</Component>
<Component name="BoringStringIdEditor">
<Variant>
<BoringStringIdEditor />
</Variant>
</Component>
<Component name="BoringStringIdBrowserTable">
<Variant>
<BoringStringIdBrowserTable />
</Variant>
</Component>
<Component name="TrickyIdEditor">
<Variant>
<TrickyIdEditor />
</Variant>
</Component>
<Component name="TrickyIdBrowserTable">
<Variant>
<TrickyIdBrowserTable />
</Variant>
</Component>
</Category>
</Palette>
)
Example #12
| Source File: palette.tsx From jmix-frontend with Apache License 2.0 | 4 votes |
|
palette = () =>
<Palette>
<Category name="Text">
<Component name="Formatted Message">
<Variant>
<FormattedMessage />
</Variant>
</Component>
<Component name="Heading">
<Variant name='h1'>
<Typography.Title></Typography.Title>
</Variant>
<Variant name='h2'>
<Typography.Title level = {2}></Typography.Title>
</Variant>
<Variant name='h3'>
<Typography.Title level = {3}></Typography.Title>
</Variant>
<Variant name='h4'>
<Typography.Title level = {4}></Typography.Title>
</Variant>
<Variant name='h5'>
<Typography.Title level = {5}></Typography.Title>
</Variant>
</Component>
<Component name='Text'>
<Variant>
<Typography.Text></Typography.Text>
</Variant>
<Variant name = 'Secondary'>
<Typography.Text type="secondary"></Typography.Text>
</Variant>
<Variant name = 'Success'>
<Typography.Text type="success"></Typography.Text>
</Variant>
<Variant name = 'Warning'>
<Typography.Text type="warning"></Typography.Text>
</Variant>
<Variant name = 'Danger'>
<Typography.Text type="danger"></Typography.Text>
</Variant>
<Variant name = 'Disabled'>
<Typography.Text disabled></Typography.Text>
</Variant>
</Component>
</Category>
<Category name="Layout">
<Component name="Divider">
<Variant>
<Divider />
</Variant>
</Component>
<Component name="Grid">
<Variant name="Simple Row">
<Row></Row>
</Variant>
<Variant name="Two columns">
<Row>
<Col span={12}></Col>
<Col span={12}></Col>
</Row>
</Variant>
<Variant name="Three columns">
<Row>
<Col span={8}></Col>
<Col span={8}></Col>
<Col span={8}></Col>
</Row>
</Variant>
</Component>
<Component name="Space">
<Variant>
<Space />
</Variant>
<Variant name="Small">
<Space size={"small"} />
</Variant>
<Variant name="Large">
<Space size={"large"} />
</Variant>
</Component>
</Category>
<Category name="Controls">
<Component name="Autocomplete">
<Variant>
<AutoComplete placeholder="input here" />
</Variant>
</Component>
<Component name="Button">
<Variant>
<Button></Button>
</Variant>
<Variant name="Primary">
<Button type="primary" ></Button>
</Variant>
<Variant name="Link">
<Button type="link" ></Button>
</Variant>
<Variant name="Dropdown">
<Dropdown
trigger={['click']}
overlay={<Menu>
<Menu.Item>
</Menu.Item>
<Menu.Item>
</Menu.Item>
<Menu.Item>
</Menu.Item>
</Menu>}
>
<Button></Button>
</Dropdown>
</Variant>
</Component>
<Component name="Checkbox">
<Variant>
<Checkbox />
</Variant>
</Component>
<Component name='Switch'>
<Variant>
<Switch />
</Variant>
</Component>
<Component name='Radio Group'>
<Variant>
<Radio.Group>
<Radio value={1}>A</Radio>
<Radio value={2}>B</Radio>
<Radio value={3}>C</Radio>
<Radio value={4}>D</Radio>
</Radio.Group>
</Variant>
<Variant name = 'Button'>
<Radio.Group>
<Radio.Button value={1}>A</Radio.Button>
<Radio.Button value={2}>B</Radio.Button>
<Radio.Button value={3}>C</Radio.Button>
<Radio.Button value={4}>D</Radio.Button>
</Radio.Group>
</Variant>
</Component>
<Component name="DatePicker">
<Variant>
<DatePicker />
</Variant>
<Variant name="Range">
<DatePicker.RangePicker />
</Variant>
</Component>
<Component name="TimePicker">
<Variant>
<TimePicker />
</Variant>
<Variant name="Range">
<TimePicker.RangePicker />
</Variant>
</Component>
<Component name="Input">
<Variant>
<Input />
</Variant>
<Variant name='Number'>
<InputNumber />
</Variant>
</Component>
<Component name='Select'>
<Variant>
<Select defaultValue="1">
<Select.Option value="1">1</Select.Option>
<Select.Option value="2">2</Select.Option>
</Select>
</Variant>
<Variant name='Multiple'>
<Select
defaultValue={["1"]}
mode="multiple"
allowClear
>
<Select.Option value="1">1</Select.Option>
<Select.Option value="2">2</Select.Option>
</Select>
</Variant>
</Component>
<Component name="Link">
<Variant>
<Typography.Link href="" target="_blank">
</Typography.Link>
</Variant>
</Component>
<Component name='Slider'>
<Variant>
<Slider defaultValue={30} />
</Variant>
<Variant name = 'Range'>
<Slider range defaultValue={[20, 50]}/>
</Variant>
</Component>
</Category>
<Category name="Data Display">
<Component name="Field">
<Variant>
<Field
entityName={ENTITY_NAME}
disabled={readOnlyMode}
propertyName=''
formItemProps={{
style: { marginBottom: "12px" }
}}
/>
</Variant>
</Component>
<Component name="Card">
<Variant>
<Card />
</Variant>
<Variant name="With Title">
<Card>
<Card title="Card title">
<p>Card content</p>
</Card>
</Card>
</Variant>
<Variant name="My custom card">
<Card>
<Card title="Card title">
<p>Card content</p>
<Avatar />
</Card>
</Card>
</Variant>
</Component>
<Component name="Tabs">
<Variant>
<Tabs defaultActiveKey="1">
<Tabs.TabPane tab="Tab 1" key="1">
Content of Tab Pane 1
</Tabs.TabPane>
<Tabs.TabPane tab="Tab 2" key="2">
Content of Tab Pane 2
</Tabs.TabPane>
<Tabs.TabPane tab="Tab 3" key="3">
Content of Tab Pane 3
</Tabs.TabPane>
</Tabs>
</Variant>
<Variant name = "Tab Pane">
<Tabs.TabPane>
</Tabs.TabPane>
</Variant>
</Component>
<Component name="Collapse">
<Variant>
<Collapse defaultActiveKey='1'>
<Collapse.Panel header="This is panel header 1" key="1">
</Collapse.Panel>
<Collapse.Panel header="This is panel header 2" key="2">
</Collapse.Panel>
<Collapse.Panel header="This is panel header 3" key="3">
</Collapse.Panel>
</Collapse>
</Variant>
</Component>
<Component name="Image">
<Variant>
<Image
width={200}
src=""
/>
</Variant>
</Component>
<Component name="Avatar">
<Variant>
<Avatar icon={<UserOutlined />} />
</Variant>
<Variant name="Image">
<Avatar src="https://joeschmoe.io/api/v1/random" />
</Variant>
</Component>
<Component name="Badge">
<Variant>
<Badge count={1}>
</Badge>
</Variant>
</Component>
<Component name="Statistic">
<Variant>
<Statistic title="Title" value={112893} />
</Variant>
</Component>
<Component name="Alert">
<Variant name="Success">
<Alert message="Text" type="success" />
</Variant>
<Variant name="Info">
<Alert message="Text" type="info" />
</Variant>
<Variant name="Warning">
<Alert message="Text" type="warning" />
</Variant>
<Variant name="Error">
<Alert message="Text" type="error" />
</Variant>
</Component>
<Component name='List'>
<Variant>
<List
bordered
dataSource={[]}
renderItem={item => (
<List.Item>
</List.Item>
)}
/>
</Variant>
</Component>
</Category>
<Category name="Icons">
<Component name="Arrow">
<Variant name = 'Up'>
<ArrowUpOutlined />
</Variant>
<Variant name = 'Down'>
<ArrowDownOutlined />
</Variant>
<Variant name = 'Left'>
<ArrowLeftOutlined />
</Variant>
<Variant name = 'Right'>
<ArrowRightOutlined />
</Variant>
</Component>
<Component name = 'Question'>
<Variant>
<QuestionOutlined />
</Variant>
<Variant name = 'Circle'>
<QuestionCircleOutlined />
</Variant>
</Component>
<Component name = 'Plus'>
<Variant>
<PlusOutlined />
</Variant>
<Variant name = 'Circle'>
<PlusCircleOutlined />
</Variant>
</Component>
<Component name = 'Info'>
<Variant>
<InfoOutlined />
</Variant>
<Variant name = 'Circle'>
<InfoCircleOutlined />
</Variant>
</Component>
<Component name = 'Exclamation'>
<Variant>
<ExclamationOutlined />
</Variant>
<Variant name = 'Circle'>
<ExclamationCircleOutlined />
</Variant>
</Component>
<Component name = 'Close'>
<Variant>
<CloseOutlined />
</Variant>
<Variant name = 'Circle'>
<CloseCircleOutlined />
</Variant>
</Component>
<Component name = 'Check'>
<Variant>
<CheckOutlined />
</Variant>
<Variant name = 'Circle'>
<CheckCircleOutlined />
</Variant>
</Component>
<Component name = 'Edit'>
<Variant>
<EditOutlined />
</Variant>
</Component>
<Component name = 'Copy'>
<Variant>
<CopyOutlined />
</Variant>
</Component>
<Component name = 'Delete'>
<Variant>
<DeleteOutlined />
</Variant>
</Component>
<Component name = 'Bars'>
<Variant>
<BarsOutlined />
</Variant>
</Component>
<Component name = 'Bell'>
<Variant>
<BellOutlined />
</Variant>
</Component>
<Component name = 'Clear'>
<Variant>
<ClearOutlined />
</Variant>
</Component>
<Component name = 'Download'>
<Variant>
<DownloadOutlined />
</Variant>
</Component>
<Component name = 'Upload'>
<Variant>
<UploadOutlined />
</Variant>
</Component>
<Component name = 'Sync'>
<Variant>
<SyncOutlined />
</Variant>
</Component>
<Component name = 'Save'>
<Variant>
<SaveOutlined />
</Variant>
</Component>
<Component name = 'Search'>
<Variant>
<SearchOutlined />
</Variant>
</Component>
<Component name = 'Settings'>
<Variant>
<SettingOutlined />
</Variant>
</Component>
<Component name = 'Paperclip'>
<Variant>
<PaperClipOutlined />
</Variant>
</Component>
<Component name = 'Phone'>
<Variant>
<PhoneOutlined />
</Variant>
</Component>
<Component name = 'Mail'>
<Variant>
<MailOutlined />
</Variant>
</Component>
<Component name = 'Home'>
<Variant>
<HomeOutlined />
</Variant>
</Component>
<Component name = 'Contacts'>
<Variant>
<ContactsOutlined />
</Variant>
</Component>
<Component name = 'User'>
<Variant>
<UserOutlined />
</Variant>
<Variant name = 'Add'>
<UserAddOutlined />
</Variant>
<Variant name = 'Remove'>
<UserDeleteOutlined />
</Variant>
</Component>
<Component name = 'Team'>
<Variant>
<TeamOutlined />
</Variant>
</Component>
</Category>
</Palette>
Example #13
| Source File: Icon.tsx From html2sketch with MIT License | 4 votes |
|
IconSymbol: FC = () => {
return (
<Row>
{/*<CaretUpOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/1.CaretUpOutlined'}*/}
{/*/>*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.MailOutlined'}*/}
{/*/>*/}
{/*<StepBackwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
{/*<StepForwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
<StepForwardOutlined />
<ShrinkOutlined />
<ArrowsAltOutlined />
<DownOutlined />
<UpOutlined />
<LeftOutlined />
<RightOutlined />
<CaretUpOutlined />
<CaretDownOutlined />
<CaretLeftOutlined />
<CaretRightOutlined />
<VerticalAlignTopOutlined />
<RollbackOutlined />
<FastBackwardOutlined />
<FastForwardOutlined />
<DoubleRightOutlined />
<DoubleLeftOutlined />
<VerticalLeftOutlined />
<VerticalRightOutlined />
<VerticalAlignMiddleOutlined />
<VerticalAlignBottomOutlined />
<ForwardOutlined />
<BackwardOutlined />
<EnterOutlined />
<RetweetOutlined />
<SwapOutlined />
<SwapLeftOutlined />
<SwapRightOutlined />
<ArrowUpOutlined />
<ArrowDownOutlined />
<ArrowLeftOutlined />
<ArrowRightOutlined />
<LoginOutlined />
<LogoutOutlined />
<MenuFoldOutlined />
<MenuUnfoldOutlined />
<BorderBottomOutlined />
<BorderHorizontalOutlined />
<BorderInnerOutlined />
<BorderOuterOutlined />
<BorderLeftOutlined />
<BorderRightOutlined />
<BorderTopOutlined />
<BorderVerticleOutlined />
<PicCenterOutlined />
<PicLeftOutlined />
<PicRightOutlined />
<RadiusBottomleftOutlined />
<RadiusBottomrightOutlined />
<RadiusUpleftOutlined />
<RadiusUprightOutlined />
<FullscreenOutlined />
<FullscreenExitOutlined />
<QuestionOutlined />
<PauseOutlined />
<MinusOutlined />
<PauseCircleOutlined />
<InfoOutlined />
<CloseOutlined />
<ExclamationOutlined />
<CheckOutlined />
<WarningOutlined />
<IssuesCloseOutlined />
<StopOutlined />
<EditOutlined />
<CopyOutlined />
<ScissorOutlined />
<DeleteOutlined />
<SnippetsOutlined />
<DiffOutlined />
<HighlightOutlined />
<AlignCenterOutlined />
<AlignLeftOutlined />
<AlignRightOutlined />
<BgColorsOutlined />
<BoldOutlined />
<ItalicOutlined />
<UnderlineOutlined />
<StrikethroughOutlined />
<RedoOutlined />
<UndoOutlined />
<ZoomInOutlined />
<ZoomOutOutlined />
<FontColorsOutlined />
<FontSizeOutlined />
<LineHeightOutlined />
<SortAscendingOutlined />
<SortDescendingOutlined />
<DragOutlined />
<OrderedListOutlined />
<UnorderedListOutlined />
<RadiusSettingOutlined />
<ColumnWidthOutlined />
<ColumnHeightOutlined />
<AreaChartOutlined />
<PieChartOutlined />
<BarChartOutlined />
<DotChartOutlined />
<LineChartOutlined />
<RadarChartOutlined />
<HeatMapOutlined />
<FallOutlined />
<RiseOutlined />
<StockOutlined />
<BoxPlotOutlined />
<FundOutlined />
<SlidersOutlined />
<AndroidOutlined />
<AppleOutlined />
<WindowsOutlined />
<IeOutlined />
<ChromeOutlined />
<GithubOutlined />
<AliwangwangOutlined />
<DingdingOutlined />
<WeiboSquareOutlined />
<WeiboCircleOutlined />
<TaobaoCircleOutlined />
<Html5Outlined />
<WeiboOutlined />
<TwitterOutlined />
<WechatOutlined />
<AlipayCircleOutlined />
<TaobaoOutlined />
<SkypeOutlined />
<FacebookOutlined />
<CodepenOutlined />
<CodeSandboxOutlined />
<AmazonOutlined />
<GoogleOutlined />
<AlipayOutlined />
<AntDesignOutlined />
<AntCloudOutlined />
<ZhihuOutlined />
<SlackOutlined />
<SlackSquareOutlined />
<BehanceSquareOutlined />
<DribbbleOutlined />
<DribbbleSquareOutlined />
<InstagramOutlined />
<YuqueOutlined />
<AlibabaOutlined />
<YahooOutlined />
<RedditOutlined />
<SketchOutlined />
<AccountBookOutlined />
<AlertOutlined />
<ApartmentOutlined />
<ApiOutlined />
<QqOutlined />
<MediumWorkmarkOutlined />
<GitlabOutlined />
<MediumOutlined />
<GooglePlusOutlined />
<AppstoreAddOutlined />
<AppstoreOutlined />
<AudioOutlined />
<AudioMutedOutlined />
<AuditOutlined />
<BankOutlined />
<BarcodeOutlined />
<BarsOutlined />
<BellOutlined />
<BlockOutlined />
<BookOutlined />
<BorderOutlined />
<BranchesOutlined />
<BuildOutlined />
<BulbOutlined />
<CalculatorOutlined />
<CalendarOutlined />
<CameraOutlined />
<CarOutlined />
<CarryOutOutlined />
<CiCircleOutlined />
<CiOutlined />
<CloudOutlined />
<ClearOutlined />
<ClusterOutlined />
<CodeOutlined />
<CoffeeOutlined />
<CompassOutlined />
<CompressOutlined />
<ContactsOutlined />
<ContainerOutlined />
<ControlOutlined />
<CopyrightCircleOutlined />
<CopyrightOutlined />
<CreditCardOutlined />
<CrownOutlined />
<CustomerServiceOutlined />
<DashboardOutlined />
<DatabaseOutlined />
<DeleteColumnOutlined />
<DeleteRowOutlined />
<DisconnectOutlined />
<DislikeOutlined />
<DollarCircleOutlined />
<DollarOutlined />
<DownloadOutlined />
<EllipsisOutlined />
<EnvironmentOutlined />
<EuroCircleOutlined />
<EuroOutlined />
<ExceptionOutlined />
<ExpandAltOutlined />
<ExpandOutlined />
<ExperimentOutlined />
<ExportOutlined />
<EyeOutlined />
<FieldBinaryOutlined />
<FieldNumberOutlined />
<FieldStringOutlined />
<DesktopOutlined />
<DingtalkOutlined />
<FileAddOutlined />
<FileDoneOutlined />
<FileExcelOutlined />
<FileExclamationOutlined />
<FileOutlined />
<FileImageOutlined />
<FileJpgOutlined />
<FileMarkdownOutlined />
<FilePdfOutlined />
<FilePptOutlined />
<FileProtectOutlined />
<FileSearchOutlined />
<FileSyncOutlined />
<FileTextOutlined />
<FileUnknownOutlined />
<FileWordOutlined />
<FilterOutlined />
<FireOutlined />
<FlagOutlined />
<FolderAddOutlined />
<FolderOutlined />
<FolderOpenOutlined />
<ForkOutlined />
<FormatPainterOutlined />
<FrownOutlined />
<FunctionOutlined />
<FunnelPlotOutlined />
<GatewayOutlined />
<GifOutlined />
<GiftOutlined />
<GlobalOutlined />
<GoldOutlined />
<GroupOutlined />
<HddOutlined />
<HeartOutlined />
<HistoryOutlined />
<HomeOutlined />
<HourglassOutlined />
<IdcardOutlined />
<ImportOutlined />
<InboxOutlined />
<InsertRowAboveOutlined />
<InsertRowBelowOutlined />
<InsertRowLeftOutlined />
<InsertRowRightOutlined />
<InsuranceOutlined />
<InteractionOutlined />
<KeyOutlined />
<LaptopOutlined />
<LayoutOutlined />
<LikeOutlined />
<LineOutlined />
<LinkOutlined />
<Loading3QuartersOutlined />
<LoadingOutlined />
<LockOutlined />
<MailOutlined />
<ManOutlined />
<MedicineBoxOutlined />
<MehOutlined />
<MenuOutlined />
<MergeCellsOutlined />
<MessageOutlined />
<MobileOutlined />
<MoneyCollectOutlined />
<MonitorOutlined />
<MoreOutlined />
<NodeCollapseOutlined />
<NodeExpandOutlined />
<NodeIndexOutlined />
<NotificationOutlined />
<NumberOutlined />
<PaperClipOutlined />
<PartitionOutlined />
<PayCircleOutlined />
<PercentageOutlined />
<PhoneOutlined />
<PictureOutlined />
<PoundCircleOutlined />
<PoundOutlined />
<PoweroffOutlined />
<PrinterOutlined />
<ProfileOutlined />
<ProjectOutlined />
<PropertySafetyOutlined />
<PullRequestOutlined />
<PushpinOutlined />
<QrcodeOutlined />
<ReadOutlined />
<ReconciliationOutlined />
<RedEnvelopeOutlined />
<ReloadOutlined />
<RestOutlined />
<RobotOutlined />
<RocketOutlined />
<SafetyCertificateOutlined />
<SafetyOutlined />
<ScanOutlined />
<ScheduleOutlined />
<SearchOutlined />
<SecurityScanOutlined />
<SelectOutlined />
<SendOutlined />
<SettingOutlined />
<ShakeOutlined />
<ShareAltOutlined />
<ShopOutlined />
<ShoppingCartOutlined />
<ShoppingOutlined />
<SisternodeOutlined />
<SkinOutlined />
<SmileOutlined />
<SolutionOutlined />
<SoundOutlined />
<SplitCellsOutlined />
<StarOutlined />
<SubnodeOutlined />
<SyncOutlined />
<TableOutlined />
<TabletOutlined />
<TagOutlined />
<TagsOutlined />
<TeamOutlined />
<ThunderboltOutlined />
<ToTopOutlined />
<ToolOutlined />
<TrademarkCircleOutlined />
<TrademarkOutlined />
<TransactionOutlined />
<TrophyOutlined />
<UngroupOutlined />
<UnlockOutlined />
<UploadOutlined />
<UsbOutlined />
<UserAddOutlined />
<UserDeleteOutlined />
<UserOutlined />
<UserSwitchOutlined />
<UsergroupAddOutlined />
<UsergroupDeleteOutlined />
<VideoCameraOutlined />
<WalletOutlined />
<WifiOutlined />
<BorderlessTableOutlined />
<WomanOutlined />
<BehanceOutlined />
<DropboxOutlined />
<DeploymentUnitOutlined />
<UpCircleOutlined />
<DownCircleOutlined />
<LeftCircleOutlined />
<RightCircleOutlined />
<UpSquareOutlined />
<DownSquareOutlined />
<LeftSquareOutlined />
<RightSquareOutlined />
<PlayCircleOutlined />
<QuestionCircleOutlined />
<PlusCircleOutlined />
<PlusSquareOutlined />
<MinusSquareOutlined />
<MinusCircleOutlined />
<InfoCircleOutlined />
<ExclamationCircleOutlined />
<CloseCircleOutlined />
<CloseSquareOutlined />
<CheckCircleOutlined />
<CheckSquareOutlined />
<ClockCircleOutlined />
<FormOutlined />
<DashOutlined />
<SmallDashOutlined />
<YoutubeOutlined />
<CodepenCircleOutlined />
<AliyunOutlined />
<PlusOutlined />
<LinkedinOutlined />
<AimOutlined />
<BugOutlined />
<CloudDownloadOutlined />
<CloudServerOutlined />
<CloudSyncOutlined />
<CloudUploadOutlined />
<CommentOutlined />
<ConsoleSqlOutlined />
<EyeInvisibleOutlined />
<FileGifOutlined />
<DeliveredProcedureOutlined />
<FieldTimeOutlined />
<FileZipOutlined />
<FolderViewOutlined />
<FundProjectionScreenOutlined />
<FundViewOutlined />
<MacCommandOutlined />
<PlaySquareOutlined />
<OneToOneOutlined />
<RotateLeftOutlined />
<RotateRightOutlined />
<SaveOutlined />
<SwitcherOutlined />
<TranslationOutlined />
<VerifiedOutlined />
<VideoCameraAddOutlined />
<WhatsAppOutlined />
{/*</Col>*/}
</Row>
);
}
Example #14
| Source File: getProducts.tsx From XFlow with MIT License | 4 votes |
|
getProducts = ({
t,
language,
}: {
t: (key: string) => string;
language: string;
rootDomain?: string;
isChinaMirrorHost?: boolean;
}): ProductItem[] => {
const hosts: { [name: string]: string } = {};
['g2', 'g2plot', 'g6', 'l7', 'f2', 'graphin', 'g', 'x6', 'ava'].forEach((name: string) => {
hosts[name] = `${name}.${ANTV_DOMAIN}`;
});
const products = [
{
title: 'G2',
icon: 'https://gw.alipayobjects.com/zos/antfincdn/trEfLRh5pc/G2%252520keshihuatuxingyufa.svg',
slogan: t('可视化引擎'),
description: t('数据驱动，高度易用，可扩展的可视化图形语法。'),
category: Categories[0],
links: [
{
icon: <HomeOutlined />,
title: t('产品首页'),
url: `https://${hosts.g2}/${language}`,
},
{
icon: <PieChartOutlined />,
title: t('图表示例'),
url: `https://${hosts.g2}/${language}/examples`,
},
{
icon: <ReadOutlined />,
title: t('使用文档'),
url: `https://${hosts.g2}/${language}/docs/manual`,
},
{
icon: <ReadOutlined />,
title: t('API 文档'),
url: `https://${hosts.g2}/${language}/docs/api`,
},
{
icon: <HistoryOutlined />,
title: t('更新日志'),
url: `https://github.com/antvis/g2/blob/master/CHANGELOG.md`,
openExternal: true,
},
{
icon: <GithubOutlined />,
title: t('GitHub 仓库'),
url: `https://github.com/antvis/g2`,
openExternal: true,
},
{
icon: '??',
title: t('国内镜像'),
url: `https://antv-g2.gitee.io`,
openExternal: true,
},
],
},
{
title: 'G6',
icon: 'https://gw.alipayobjects.com/zos/antfincdn/zS1wZZJVcJ/G6%252520tukeshihuayinqing.svg',
slogan: t('图可视化引擎'),
description: t('便捷的关系数据可视化引擎与图分析工具。'),
category: Categories[0],
links: [
{
icon: <HomeOutlined />,
title: t('产品首页'),
url: `https://${hosts.g6}/${language}`,
},
{
icon: <PieChartOutlined />,
title: t('图表示例'),
url: `https://${hosts.g6}/${language}/examples`,
},
{
icon: <ReadOutlined />,
title: t('使用文档'),
url: `https://${hosts.g6}/${language}/docs/manual`,
},
{
icon: <ReadOutlined />,
title: t('API 文档'),
url: `https://${hosts.g6}/${language}/docs/api`,
},
{
icon: <HistoryOutlined />,
title: t('更新日志'),
url: `https://github.com/antvis/g6/blob/master/CHANGELOG.md`,
openExternal: true,
},
{
icon: <GithubOutlined />,
title: t('GitHub 仓库'),
url: `https://github.com/antvis/g6`,
openExternal: true,
},
{
icon: '??',
title: t('国内镜像'),
url: `https://antv-g6.gitee.io`,
openExternal: true,
},
],
},
{
title: 'F2',
icon: 'https://gw.alipayobjects.com/zos/antfincdn/D%26fDbWqVkv/F2%252520yidongduankeshihuafangan.svg',
slogan: t('移动可视化方案'),
description: t('专注于移动端的可视化解决方案，兼容 H5/小程序/Weex 等多端环境'),
category: Categories[0],
links: [
{
icon: <HomeOutlined />,
title: t('产品首页'),
url: `https://${hosts.f2}/${language}`,
},
{
icon: <PieChartOutlined />,
title: t('图表示例'),
url: `https://${hosts.f2}/${language}/examples`,
},
{
icon: <ReadOutlined />,
title: t('使用文档'),
url: `https://${hosts.f2}/${language}/docs/tutorial/getting-started`,
},
{
icon: <ReadOutlined />,
title: t('API 文档'),
url: `https://${hosts.f2}/${language}/docs/api`,
},
{
icon: <HistoryOutlined />,
title: t('更新日志'),
url: `https://github.com/antvis/f2/blob/master/CHANGELOG.md`,
openExternal: true,
},
{
icon: <GithubOutlined />,
title: t('GitHub 仓库'),
url: `https://github.com/antvis/f2`,
openExternal: true,
},
{
icon: '??',
title: t('国内镜像'),
url: `https://antv-f2.gitee.io`,
openExternal: true,
},
],
},
{
title: 'L7',
icon: 'https://gw.alipayobjects.com/zos/antfincdn/OI%26h7HXH33/L7%252520dilikongjianshujukeshihua.svg',
slogan: t('地理空间数据可视化'),
description: t('高性能/高渲染质量的地理空间数据可视化框架。'),
category: Categories[0],
links: [
{
icon: <HomeOutlined />,
title: t('产品首页'),
url: `https://${hosts.l7}/${language}`,
},
{
icon: <PieChartOutlined />,
title: t('图表示例'),
url: `https://${hosts.l7}/${language}/examples`,
},
{
icon: <ReadOutlined />,
title: t('使用文档'),
url: `https://${hosts.l7}/${language}/docs/tutorial`,
},
{
icon: <ReadOutlined />,
title: t('API 文档'),
url: `https://${hosts.l7}/${language}/docs/api/l7`,
},
{
icon: <HistoryOutlined />,
title: t('更新日志'),
url: `https://github.com/antvis/L7/blob/master/CHANGELOG.md`,
openExternal: true,
},
{
icon: <GithubOutlined />,
title: t('GitHub 仓库'),
url: `https://github.com/antvis/L7`,
openExternal: true,
},
{
icon: '??',
title: t('国内镜像'),
url: `https://antv-l7.gitee.io`,
openExternal: true,
},
],
},
{
title: 'G2Plot',
icon: 'https://gw.alipayobjects.com/zos/antfincdn/SlbIagEvT7/G2plot.svg',
slogan: t('开箱即用的图表库'),
description: t('开箱即用、易于配置、极致体验的通用图表库。'),
category: Categories[1],
links: [
{
icon: <HomeOutlined />,
title: t('产品首页'),
url: `https://${hosts.g2plot}/${language}`,
},
{
icon: <PieChartOutlined />,
title: t('图表示例'),
url: `https://${hosts.g2plot}/${language}/examples`,
},
{
icon: <ReadOutlined />,
title: t('使用文档'),
url: `https://${hosts.g2plot}/${language}/docs/manual`,
},
{
icon: <HistoryOutlined />,
title: t('更新日志'),
url: `https://github.com/antvis/g2plot/blob/master/CHANGELOG.md`,
openExternal: true,
},
{
icon: <GithubOutlined />,
title: t('GitHub 仓库'),
url: `https://github.com/antvis/g2plot`,
openExternal: true,
},
{
icon: '??',
title: t('国内镜像'),
url: `https://antv-g2plot.gitee.io`,
openExternal: true,
},
],
},
{
title: 'Graphin',
icon: 'https://gw.alipayobjects.com/zos/antfincdn/0b4HzOcEJY/Graphin.svg',
slogan: t(''),
description: t('基于 G6 封装的图分析应用组件。'),
category: Categories[1],
links: [
{
icon: <HomeOutlined />,
title: t('产品首页'),
url: `https://${hosts.graphin}/${language}`,
},
{
icon: <ReadOutlined />,
title: t('使用文档'),
url: `https://${hosts.graphin}/${language}/docs/manual/introduction`,
},
{
icon: <ReadOutlined />,
title: t('API 文档'),
url: `https://${hosts.graphin}/${language}/docs/api/graphin`,
},
{
icon: <HistoryOutlined />,
title: t('更新日志'),
url: `https://github.com/antvis/graphin/blob/master/CHANGELOG.md`,
openExternal: true,
},
{
icon: <GithubOutlined />,
title: t('GitHub 仓库'),
url: `https://github.com/antvis/graphin`,
openExternal: true,
},
{
icon: '??',
title: t('国内镜像'),
url: `https://antv-graphin.gitee.io`,
openExternal: true,
},
],
},
{
title: 'ChartCube',
icon: 'https://gw.alipayobjects.com/zos/antfincdn/Zr74jx8YNX/chartcube.svg',
slogan: t('图表魔方'),
description: t('AntV 在线图表制作利器。'),
category: Categories[1],
links: [
{
icon: <HomeOutlined />,
title: t('产品首页'),
url: `https://chartcube.alipay.com`,
openExternal: true,
},
{
icon: <AreaChartOutlined />,
title: t('生成图表'),
url: `https://chartcube.alipay.com/guide`,
openExternal: true,
},
{
icon: <YuqueOutlined />,
title: t('语雀社区'),
url: `https://www.yuque.com/chartcube`,
openExternal: true,
},
{
icon: <DingdingOutlined />,
title: t('钉钉服务群'),
url: `dingtalk://dingtalkclient/action/joingroup?cid=8305538734`,
openExternal: true,
},
],
},
{
title: t('墨者学院'),
icon: 'https://gw.alipayobjects.com/zos/antfincdn/12j36RPVldO/mozhexueyuan.svg',
description: t('数据可视化社团'),
category: Categories[2],
links: [
{
title: t('学院首页'),
url: `https://www.yuque.com/mo-college`,
openExternal: true,
},
],
},
{
title: 'BizCharts',
icon: 'https://gw.alipayobjects.com/zos/antfincdn/Q1pbg%26O2TM/BizCharts.svg',
description: t('基于商业场景下的数据可视化解决方案'),
category: Categories[2],
links: [
{
title: t('产品首页'),
url: 'https://bizcharts.net',
openExternal: true,
},
],
},
{
title: 'Viser',
icon: 'https://gw.alipayobjects.com/zos/antfincdn/QAyW5h99HVa/Viser.svg',
description: t('基于 G2 实现的可视化解决方案'),
category: Categories[2],
links: [
{
title: t('产品首页'),
url: `https://viserjs.github.io/`,
openExternal: true,
},
],
},
];
return products;
}
Example #15
| Source File: CustomerForm.tsx From mayoor with MIT License | 4 votes |
|
CustomerForm: React.FC<Props> = (props) => {
const { t } = useTranslation();
return (
<Formik<UserFormValues>
initialValues={props.initialValues}
onSubmit={async (values, { resetForm }) => {
await props.onSubmit(values, resetForm);
}}
validate={(values) => {
const errors: FormikErrors<UserFormValues> = {};
if (!values.name) {
errors.name = t('missing_company_name');
}
return errors;
}}
>
{({ values, setFieldValue, handleChange, handleSubmit }) => (
<StyledForm onSubmit={handleSubmit}>
<Row gutter={32}>
<Col xs={24} md={12}>
<FormInput
name="name"
label={t('Company name')}
icon={<ContactsOutlined />}
/>
<Row gutter={16}>
<Col span={12}>
<IdentificationNumberInput />
</Col>
<Col span={12}>
<FormInput
name="taxIdentificationNumber"
label={t('Tax identification number')}
icon={<HddOutlined />}
/>
</Col>
</Row>
<StyledDivider orientation="left">{t('Contact person')}</StyledDivider>
<FormInput
name="personName"
label={t('Contact person name')}
icon={<UserOutlined />}
/>
<Row gutter={16}>
<Col span={12}>
<FormInput
name="email"
label={t('Email')}
icon={<MailOutlined />}
/>
</Col>
<Col span={12}>
<FormInput
name="phone"
label={t('Phone')}
icon={<PhoneOutlined />}
/>
</Col>
</Row>
</Col>
<Col xs={24} md={12}>
<Checkbox
name="allowedBankPayments"
onClick={() =>
setFieldValue(
'allowedBankPayments',
!values.allowedBankPayments,
)
}
checked={values.allowedBankPayments}
>
{t('Allow bank payments')}
</Checkbox>
<StyledFormItem label={t('Note')}>
<Input.TextArea
rows={4}
name="note"
placeholder={t('customer_note_placeholder')}
onChange={handleChange}
value={values.note || ''}
/>
</StyledFormItem>
</Col>
</Row>
<Row gutter={32}>
{values.addresses
.sort(({ isPrimary }) => (isPrimary ? -1 : 1))
.map((_, i) => (
<Col xs={24} md={12} key={i}>
<StyledDivider orientation="left">
{i === 0 ? t('Shipping address') : t('Billing address')}
</StyledDivider>
<StyledFormItem>
<Input
name={`addresses.${i}.street`}
prefix={<EnvironmentOutlined />}
placeholder={t('Street')}
onChange={handleChange}
value={values.addresses[i].street || ''}
/>
</StyledFormItem>
<Row gutter={12}>
<Col span={16}>
<StyledFormItem>
<Input
name={`addresses.${i}.city`}
prefix={<HomeOutlined />}
placeholder={t('City')}
onChange={handleChange}
value={values.addresses[i].city || ''}
/>
</StyledFormItem>
</Col>
<Col span={8}>
<StyledFormItem>
<Input
name={`addresses.${i}.postNumber`}
prefix={<NumberOutlined />}
placeholder={t('Post Number')}
onChange={handleChange}
value={values.addresses[i].postNumber || ''}
/>
</StyledFormItem>
</Col>
</Row>
</Col>
))}
</Row>
{props.submitButton}
</StyledForm>
)}
</Formik>
);
}
Example #16
| Source File: FileManager.tsx From anew-server with MIT License | 4 votes |
|
FileManager: React.FC<FileManagerProps> = (props) => {
const { modalVisible, handleChange, connectId } = props;
const [columnData, setColumnData] = useState<API.SSHFileList[]>([]);
const [showHidden, setShowHidden] = useState<boolean>(false);
const [childrenDrawer, setChildrenDrawer] = useState<boolean>(false);
const [currentPathArr, setCurrentPathArr] = useState<string[]>([]);
const [initPath, setInitPath] = useState<string>('');
const _dirSort = (item: API.SSHFileList) => {
return item.isDir;
};
const getFileData = (key: string, path: string) => {
querySSHFile(key, path).then((res) => {
const obj = lds.orderBy(res.data, [_dirSort, 'name'], ['desc', 'asc']);
showHidden ? setColumnData(obj) : setColumnData(obj.filter((x) => !x.name.startsWith('.')));
try {
// 获取服务器的当前路径
let pathb = obj[0].path;
const index = pathb.lastIndexOf('/');
pathb = pathb.substring(0, index + 1);
setCurrentPathArr(pathb.split('/').filter((x: any) => x !== ''));
setInitPath(pathb); // 保存当前路径，刷新用
} catch (exception) {
setCurrentPathArr(path.split('/').filter((x) => x !== ''));
setInitPath(path);
}
});
};
const getChdirDirData = (key: string, path: string) => {
const index = currentPathArr.indexOf(path);
const currentDir = '/' + currentPathArr.splice(0, index + 1).join('/');
getFileData(key, currentDir);
};
const handleDelete = (key: string, path: string) => {
if (!path) return;
const index = path.lastIndexOf('/');
const currentDir = path.substring(0, index + 1);
const currentFile = path.substring(index + 1, path.length);
const content = `您是否要删除 ${currentFile}？`;
Modal.confirm({
title: '注意',
content,
onOk: () => {
deleteSSHFile(key, path).then((res) => {
if (res.code === 200 && res.status === true) {
message.success(res.message);
getFileData(key, currentDir);
}
});
},
onCancel() { },
});
};
const handleDownload = (key: string, path: string) => {
if (!path) return;
const index = path.lastIndexOf('/');
const currentFile = path.substring(index + 1, path.length);
const content = `您是否要下载 ${currentFile}？`;
Modal.confirm({
title: '注意',
content,
onOk: () => {
const token = localStorage.getItem('token');
const link = document.createElement('a');
link.href = `/api/v1/host/ssh/download?key=${key}&path=${path}&token=${token}`;
document.body.appendChild(link);
const evt = document.createEvent('MouseEvents');
evt.initEvent('click', false, false);
link.dispatchEvent(evt);
document.body.removeChild(link);
},
onCancel() { },
});
};
const uploadProps = {
name: 'file',
action: `/api/v1/host/ssh/upload?key=${connectId}&path=${initPath}`,
multiple: true,
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`,
},
// showUploadList: {
// removeIcon: false,
// showRemoveIcon: false,
// },
onChange(info: any) {
// if (info.file.status !== 'uploading') {
// console.log(info.file, info.fileList);
// }
//console.log(info);
if (info.file.status === 'done') {
message.success(`${info.file.name} file uploaded successfully`);
getFileData(connectId, initPath as string); // 刷新数据
} else if (info.file.status === 'error') {
message.error(`${info.file.name} file upload failed.`);
}
},
progress: {
strokeColor: {
'0%': '#108ee9',
'100%': '#87d068',
},
strokeWidth: 3,
format: (percent: any) => `${parseFloat(percent.toFixed(2))}%`,
},
};
const columns: ProColumns<API.SSHFileList>[] = [
{
title: '名称',
dataIndex: 'name',
render: (_, record) =>
record.isDir ? (
<div onClick={() => getFileData(connectId, record.path)} style={{ cursor: 'pointer' }}>
<FolderTwoTone />
<span style={{ color: '#1890ff', paddingLeft: 5 }}>{record.name}</span>
</div>
) : (
<React.Fragment>
{record.isLink ? (
<div>
<LinkOutlined />
<Tooltip title="Is Link">
<span style={{ color: '#3cb371', paddingLeft: 5 }}>{record.name}</span>
</Tooltip>
</div>
) : (
<div>
<FileOutlined />
<span style={{ paddingLeft: 5 }}>{record.name}</span>
</div>
)}
</React.Fragment>
),
},
{
title: '大小',
dataIndex: 'size',
},
{
title: '修改时间',
dataIndex: 'mtime',
},
{
title: '属性',
dataIndex: 'mode',
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
render: (_, record) =>
!record.isDir && !record.isLink ? (
<>
<Tooltip title="下载文件">
<DownloadOutlined
style={{ fontSize: '17px', color: 'blue' }}
onClick={() => handleDownload(connectId, record.path)}
/>
</Tooltip>
<Divider type="vertical" />
<Tooltip title="删除文件">
<DeleteOutlined
style={{ fontSize: '17px', color: 'red' }}
onClick={() => handleDelete(connectId, record.path)}
/>
</Tooltip>
</>
) : null,
},
];
useEffect(() => {
// 是否显示隐藏文件
getFileData(connectId, initPath as string); // 刷新数据
}, [showHidden]);
const { Dragger } = Upload;
return (
<Drawer
title="文件管理器"
placement="right"
width={800}
visible={modalVisible}
onClose={()=>handleChange(false)}
getContainer={false}
>
{/* <input style={{ display: 'none' }} type="file" ref={(ref) => (this.input = ref)} /> */}
<div className={styles.drawerHeader}>
<Breadcrumb>
<Breadcrumb.Item href="#" onClick={() => getFileData(connectId, '/')}>
<ApartmentOutlined />
</Breadcrumb.Item>
<Breadcrumb.Item href="#" onClick={() => getFileData(connectId, '')}>
<HomeOutlined />
</Breadcrumb.Item>
{currentPathArr.map((item) => (
<Breadcrumb.Item key={item} href="#" onClick={() => getChdirDirData(connectId, item)}>
<span>{item}</span>
</Breadcrumb.Item>
))}
</Breadcrumb>
<div style={{ display: 'flex', alignItems: 'center' }}>
<span>显示隐藏文件：</span>
<Switch
checked={showHidden}
checkedChildren="开启"
unCheckedChildren="关闭"
onChange={(v) => {
setShowHidden(v);
}}
/>
<Button
style={{ marginLeft: 10 }}
size="small"
type="primary"
icon={<UploadOutlined />}
onClick={() => setChildrenDrawer(true)}
>
上传文件
</Button>
</div>
</div>
<Drawer
title="上传文件"
width={320}
closable={false}
onClose={() => setChildrenDrawer(false)}
visible={childrenDrawer}
>
<div style={{ height: 150 }}>
<Dragger {...uploadProps}>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">单击或拖入上传</p>
<p className="ant-upload-hint">支持多文件</p>
</Dragger>
</div>
</Drawer>
<ProTable
pagination={false}
search={false}
toolBarRender={false}
rowKey="name"
dataSource={columnData}
columns={columns}
/>
</Drawer>
);
}
