@ant-design/icons#ReadOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#ReadOutlined.
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: ProfileDrawer.tsx From office-hours with GNU General Public License v3.0 | 5 votes |
|
export default function ProfileDrawer({
courseId,
}: ProfileDrawerProps): ReactElement {
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
const role = useRoleInCourse(courseId);
return (
<>
<NoPaddingPopover
content={
isPopoverOpen && (
<Menu mode="inline">
<Menu.Item icon={<SettingOutlined />}>
<Link
href={{ pathname: "/settings", query: { cid: courseId } }}
>
<a>Settings</a>
</Link>
</Menu.Item>
<Menu.Item
icon={<MacCommandOutlined />}
onClick={() => {
Modal.info({
title: "Queue Page Keyboard Shortcuts",
content: shortcutInfoContent(role),
});
setIsPopoverOpen(false);
}}
>
Keyboard Shortcuts
</Menu.Item>
<Menu.Item
key="1"
icon={<QuestionCircleOutlined />}
onClick={() => {
window.open("https://info.khouryofficehours.com/help");
setIsPopoverOpen(false);
}}
>
Help Guide
</Menu.Item>
<Menu.Item
key="2"
icon={<FileTextOutlined />}
onClick={() => {
window.open(
"https://info.khouryofficehours.com/release-notes-archive"
);
setIsPopoverOpen(false);
}}
>
Release Notes
</Menu.Item>
<Menu.Item key="3" icon={<ReadOutlined />}>
<Link href={"/about"}>
<a>About Us</a>
</Link>
</Menu.Item>
<Menu.Item key="4" icon={<LogoutOutlined />}>
<Link href={"/api/v1/logout"}>
<a data-cy="logout-button">Logout</a>
</Link>
</Menu.Item>
</Menu>
)
}
placement="bottomRight"
trigger="click"
visible={isPopoverOpen}
onVisibleChange={setIsPopoverOpen}
>
<AvatarButton>
<SelfAvatar size={40} />
</AvatarButton>
</NoPaddingPopover>
</>
);
}
Example #2
| Source File: VerificationPanel.tsx From posthog-foss with MIT License | 4 votes |
|
export function VerificationPanel(): JSX.Element {
const { loadCurrentTeam } = useActions(teamLogic)
const { currentTeam } = useValues(teamLogic)
const { setVerify, completeOnboarding } = useActions(ingestionLogic)
const { index, totalSteps } = useValues(ingestionLogic)
const [isPopConfirmShowing, setPopConfirmShowing] = useState(false)
const [isHelpMenuShowing, setHelpMenuShowing] = useState(false)
const { showInviteModal } = useActions(inviteLogic)
useInterval(() => {
if (!currentTeam?.ingested_event && !isPopConfirmShowing && !isHelpMenuShowing) {
loadCurrentTeam()
}
}, 2000)
function HelperButtonRow(): JSX.Element {
function HelpButton(): JSX.Element {
const menu = (
<Menu selectable>
<Menu.Item key="0" data-attr="ingestion-help-item-docs">
<a href="https://posthog.com/docs/integrate/ingest-live-data" target="_blank">
<Button type="link">
<ReadOutlined />
Read the ingestion docs
</Button>
</a>
</Menu.Item>
<Menu.Item key="1" data-attr="ingestion-help-item-invite">
<Button type="link" onClick={showInviteModal}>
<UserAddOutlined />
Invite team member
</Button>
</Menu.Item>
<Menu.Item key="2" data-attr="ingestion-help-item-slack">
<a href="https://posthog.com/slack?s=app" target="_blank">
<Button type="link">
<SlackSquareOutlined />
Ask us in Slack
</Button>
</a>
</Menu.Item>
</Menu>
)
return (
<Dropdown
overlay={menu}
trigger={['click']}
visible={isHelpMenuShowing}
onVisibleChange={(v) => {
setHelpMenuShowing(v)
}}
>
<Button type="primary" data-attr="ingestion-help-button" onClick={() => setHelpMenuShowing(true)}>
Need help? <DownOutlined />
</Button>
</Dropdown>
)
}
const popoverTitle = (
<Space direction="vertical">
<Text strong>Are you sure you want to continue without data?</Text>
<Text>You won't be able to conduct analysis or use most tools without event data.</Text>
<Text>For the best experience, we recommend adding event data before continuing.</Text>
</Space>
)
return (
<Space style={{ float: 'right' }}>
<Popconfirm
title={popoverTitle}
okText="Yes, I know what I'm doing."
okType="danger"
cancelText="No, go back."
onVisibleChange={(v) => {
setPopConfirmShowing(v)
}}
onCancel={() => {
setPopConfirmShowing(false)
}}
visible={isPopConfirmShowing}
onConfirm={completeOnboarding}
cancelButtonProps={{ type: 'primary' }}
>
<Button
type="dashed"
data-attr="ingestion-continue-anyway"
onClick={() => {
setPopConfirmShowing(true)
}}
>
Continue without verifying
</Button>
</Popconfirm>
<HelpButton />
</Space>
)
}
return (
<CardContainer index={index} totalSteps={totalSteps} onBack={() => setVerify(false)}>
{!currentTeam?.ingested_event ? (
<>
<Row className="flex-center">
<Spinner style={{ marginRight: 4 }} />
<h2 className="ml-3" style={{ marginBottom: 0, color: 'var(--primary-alt)' }}>
Listening for events...
</h2>
</Row>
<p className="prompt-text mt-05">
Once you have integrated the snippet and sent an event, we will verify it was properly received
and continue.
</p>
<HelperButtonRow />
</>
) : (
<>
<h2>Successfully sent events!</h2>
<p className="prompt-text">
You will now be able to explore PostHog and take advantage of all its features to understand
your users.
</p>
<Button
data-attr="wizard-complete-button"
type="primary"
style={{ float: 'right' }}
onClick={completeOnboarding}
>
Complete
</Button>
</>
)}
</CardContainer>
)
}
Example #3
| 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 #4
| 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 #5
| Source File: index.tsx From memex with MIT License | 4 votes |
|
OperatorBar: React.FC<OperatorBarProps> = () => {
const dispatch = useDispatch();
const menus = [
{
id: 'inbox',
name: 'Inbox',
icon: <InboxOutlined />,
onClick: () => {
dispatch({
type: 'CHANGE_PAGE',
payload: {
page: 'inbox',
},
});
},
},
{
id: 'notes',
name: 'Notes & Highlights',
icon: <ReadOutlined />,
onClick: () => {
dispatch({
type: 'CHANGE_PAGE',
payload: {
page: 'notes',
},
});
},
},
{
id: 'search',
name: 'Search',
icon: <SearchOutlined />,
},
{
id: 'divider1',
isDivider: true,
},
{
id: 'tag_management',
name: 'Tag Management',
icon: <ApartmentOutlined />,
onClick: () => {
dispatch({
type: 'CHANGE_PAGE',
payload: {
page: 'tag_management',
},
});
},
},
{
id: 'diffuse',
name: 'Knowledge Map',
icon: <DeploymentUnitOutlined />,
onClick: () => {
dispatch({
type: 'CHANGE_PAGE',
payload: {
page: 'graph',
},
});
},
},
{
id: 'divider2',
isDivider: true,
},
{
id: 'save',
name: 'Save',
icon: <SaveOutlined />,
},
{
id: 'clear',
name: 'Delete',
icon: <DeleteOutlined />,
},
{
id: 'setting',
name: 'Settings',
icon: <SettingOutlined />,
},
];
return (
<div>
<ToolBar data={menus} className="operator-bar" />
</div>
);
}
