You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.6 KiB
97 lines
2.6 KiB
4 months ago
|
<h1 align="center">
|
||
|
|
<b>@antv/component</b>
|
||
|
|
</h1>
|
||
|
|
|
||
|
|
<div align="center">
|
||
|
|
|
||
|
|
Visualization components for AntV, based on [G](https://github.com/antvis/g) which is a flexible rendering engine for visualization.
|
||
|
|
|
||
|
|
[](https://github.com/antvis/component/actions/workflows/build.yml)
|
||
|
|
[](https://coveralls.io/github/antvis/component?branch=master)
|
||
|
|
[](https://www.npmjs.com/package/@antv/component)
|
||
|
|
[](https://www.npmjs.com/package/@antv/component)
|
||
|
|
[](https://www.npmjs.com/package/@antv/component)
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
## ✨ Features
|
||
|
|
|
||
|
|
- **Rich** - Contains 20+ Visualization components, for AntV [G2](https://github.com/antvis/G2), [G6](https://github.com/antvis/G6), [L7](https://github.com/antvis/L7).
|
||
|
|
- **Powerful** - Each component has powerful abilities and flexible scalability.
|
||
|
|
- **Well Design** - Continuous optimization and iteration.
|
||
|
|
- **Powerful Renderer** - Based on the powerful renderer [G](https://github.com/antvis/G), we can render the components using `Canvas`, `SVG` or `WebGL` with same code.
|
||
|
|
|
||
|
|
|
||
|
|
## 📦 Installation
|
||
|
|
|
||
|
|
```bash
|
||
|
|
$ npm install @antv/component
|
||
|
|
```
|
||
|
|
|
||
|
|
```bash
|
||
|
|
$ yarn add @antv/component
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
## 🔨 Getting Started
|
||
|
|
|
||
|
|
```ts
|
||
|
|
import { Canvas } from '@antv/g';
|
||
|
|
import { Renderer } from '@antv/g-canvas';
|
||
|
|
import { Button } from '@antv/component';
|
||
|
|
|
||
|
|
// 1. New a canvas.
|
||
|
|
const canvas = new Canvas({
|
||
|
|
container: 'container',
|
||
|
|
width: 600,
|
||
|
|
height: 600,
|
||
|
|
renderer: new Renderer(),
|
||
|
|
});
|
||
|
|
|
||
|
|
// 2. Create a button with configure.
|
||
|
|
const button = new Button({
|
||
|
|
/* ... */
|
||
|
|
});
|
||
|
|
|
||
|
|
// 3. Append into G canvas.
|
||
|
|
canvas.appendChild(button);
|
||
|
|
|
||
|
|
// 4. Render.
|
||
|
|
canvas.render();
|
||
|
|
```
|
||
|
|
|
||
|
|
## 📎 Documents
|
||
|
|
|
||
|
|
- [API](./docs/api.md)
|
||
|
|
- UI components
|
||
|
|
- [Axis](./docs/components/axis.md)
|
||
|
|
- [Legend](./docs/components/legend.md)
|
||
|
|
- [Tooltip](./docs/components/tooltip.md)
|
||
|
|
- [Slider](./docs/components/slider.md)
|
||
|
|
- [Scrollbar](./docs/components/scrollbar.md)
|
||
|
|
- [Button](./docs/components/button.md)
|
||
|
|
- [Checkbox](./docs/components/checkbox.md)
|
||
|
|
- [Navigator](./docs/components/navigator.md)
|
||
|
|
- [Breadcrumb](./docs/components/breadcrumb.md)
|
||
|
|
- [Sparkline](./docs/components/sparkline.md)
|
||
|
|
|
||
|
|
|
||
|
|
## 📮 Contribution
|
||
|
|
|
||
|
|
```bash
|
||
|
|
$ git clone git@github.com:antvis/component.git
|
||
|
|
|
||
|
|
$ cd component
|
||
|
|
|
||
|
|
$ npm install
|
||
|
|
|
||
|
|
$ npm run dev
|
||
|
|
```
|
||
|
|
|
||
|
|
Then send a pull request on GitHub.
|
||
|
|
|
||
|
|
## 📄 License
|
||
|
|
|
||
|
|
MIT@[AntV](https://github.com/antvis).
|