g6/packages/site/examples/tool/toolbar/index.zh.md

---
title: 工具栏
order: 4
---

G6 中内置的 ToolBar 组件，但未默认注册。需要将其引入到代码中，并使用 `extend` 方法注册后，方可在图实例上配置和使用。

## 使用指南

下面的代码演示展示了如何在图上使用 ToolBar。ToolBar 的样式可以使用 G6 内置的，也可以完全自定义 ToolBar 的内容，要修改内置 ToolBar 的样式，只需要修改 g6-component-toolbar 的样式：

```css
.g6-component-toolbar {
  // 自定义 CSS 内容
}
```
chore: commit history cleaning 2023-02-02 10:31:36 +08:00			`---`
			`title: 工具栏`
			`order: 4`
			`---`

chore: export BaseNode; fix: cannot zoom-in with zoom-3d; chore: unify before and afterlayout events 2023-10-07 19:05:08 +08:00			G6 中内置的 ToolBar 组件，但未默认注册。需要将其引入到代码中，并使用 `extend` 方法注册后，方可在图实例上配置和使用。
chore: commit history cleaning 2023-02-02 10:31:36 +08:00
			`## 使用指南`

			`下面的代码演示展示了如何在图上使用 ToolBar。ToolBar 的样式可以使用 G6 内置的，也可以完全自定义 ToolBar 的内容，要修改内置 ToolBar 的样式，只需要修改 g6-component-toolbar 的样式：`

			```css
			`.g6-component-toolbar {`
chore: export BaseNode; fix: cannot zoom-in with zoom-3d; chore: unify before and afterlayout events 2023-10-07 19:05:08 +08:00			`// 自定义 CSS 内容`
			`}`
chore: commit history cleaning 2023-02-02 10:31:36 +08:00			```