How to use @antv/x6-components - 10 common examples
To help you get started, we’ve selected a few @antv/x6-components examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
antvis / x6 / examples / x6-example-components / src / pages / menu.tsx View on Github 
import React from 'react'
import { message } from 'antd'
import { Menu } from '@antv/x6-components'
const MenuItem = Menu.Item
const SubMenu = Menu.SubMenu
const Divider = Menu.Divider
export default class MenuExample extends React.PureComponent {
onMenuClick = (name: string) => {
message.success(`${name} clicked`, 10)
}
onMenuItemClick = () => {
this.onMenuClick('undo')
}
render() {
return (
<div style="{{">
<div style="{{"></div></div>renderZoomDropdown() {
const MenuItem = Menu.Item
const Divider = Menu.Divider
return (
<menu>
<menuitem name="resetView">
Reset View
</menuitem>
<menuitem name="fitWindow">
Fit Window
</menuitem>
<menuitem name="25">25%</menuitem>
<menuitem name="50">50%</menuitem>
<menuitem name="75">75%</menuitem>
<menuitem name="100">100%</menuitem>
<menuitem name="125">125%</menuitem></menu>renderZoomDropdown() {
const MenuItem = Menu.Item
return (
<menu>
<menuitem name="25">25%</menuitem>
<menuitem name="50">50%</menuitem>
<menuitem name="75">75%</menuitem>
<menuitem name="100">100%</menuitem>
<menuitem name="125">125%</menuitem>
<menuitem name="150">150%</menuitem>
<menuitem name="200">200%</menuitem>
<menuitem name="400">400%</menuitem>
</menu>
)
}renderColorPicker(
name: string,
value: string,
onChange: (value: ColorResult) => void,
) {
const MenuItem = Menu.Item
return (
<menu>
<menuitem name="{name}">
</menuitem>
</menu>
)
}import React from 'react'
import { Menubar, Menu } from '@antv/x6-components'
const MenuItem = Menu.Item
const SubMenu = Menu.SubMenu
const Divider = Menu.Divider
const MenubarItem = Menubar.Item
export class GraphMenubar extends React.PureComponent {
render() {
return (
<menu>
<menuitem>New...</menuitem>
<menuitem>Open...</menuitem>
<menuitem>Save</menuitem>
<menuitem>Save as...</menuitem>
</menu>import React from 'react'
import { message } from 'antd'
import { Menubar, Menu } from '@antv/x6-components'
const MenuItem = Menu.Item
const SubMenu = Menu.SubMenu
const Divider = Menu.Divider
const MenubarItem = Menubar.Item
export default class MenuExample extends React.PureComponent {
onMenuClick = (name: string) => {
message.success(`${name} clicked`, 10)
}
onMenuItemClick = () => {
this.onMenuClick('undo')
}
render() {
return (
<div style="{{"></div>import React from 'react'
import { Menubar, Menu } from '@antv/x6-components'
const MenuItem = Menu.Item
const SubMenu = Menu.SubMenu
const Divider = Menu.Divider
const MenubarItem = Menubar.Item
export class GraphMenubar extends React.PureComponent {
render() {
return (
<menu>
<menuitem>New...</menuitem>
<menuitem>Open...</menuitem>
<menuitem>Save</menuitem>
<menuitem>Save as...</menuitem>
<menuitem>Import...</menuitem>
<menuitem>Export...</menuitem></menu>import React from 'react'
import { message } from 'antd'
import { Menu } from '@antv/x6-components'
const MenuItem = Menu.Item
const SubMenu = Menu.SubMenu
const Divider = Menu.Divider
export default class MenuExample extends React.PureComponent {
onMenuClick = (name: string) => {
message.success(`${name} clicked`, 10)
}
onMenuItemClick = () => {
this.onMenuClick('undo')
}
render() {
return (
<div style="{{">
<div style="{{">
<menu>
<menuitem name="undo"></menuitem></menu></div></div>renderZoomDropdown() {
const MenuItem = Menu.Item
const Divider = Menu.Divider
return (
<menu>
<menuitem name="resetView">
Reset View
</menuitem>
<menuitem name="fitWindow">
Fit Window
</menuitem>
<menuitem name="25">25%</menuitem>
<menuitem name="50">50%</menuitem>
<menuitem name="75">75%</menuitem>
<menuitem name="100">100%</menuitem>
<menuitem name="125">125%</menuitem>
<menuitem name="150">150%</menuitem></menu>import React from 'react'
import { message } from 'antd'
import { Menubar, Menu } from '@antv/x6-components'
const MenuItem = Menu.Item
const SubMenu = Menu.SubMenu
const Divider = Menu.Divider
const MenubarItem = Menubar.Item
export default class MenuExample extends React.PureComponent {
onMenuClick = (name: string) => {
message.success(`${name} clicked`, 10)
}
onMenuItemClick = () => {
this.onMenuClick('undo')
}
render() {
return (
<div style="{{">
</div>@antv/x6-components
React components for building x6 editors
