antvis / component

🍱 AntV UI component based on G render engine.
https://github.com/antvis/component
MIT License
59 stars 39 forks source link
component g hacktoberfest visualization

@antv/component

Visualization components for AntV, based on [G](https://github.com/antvis/g) which is a flexible rendering engine for visualization. [![build](https://github.com/antvis/component/actions/workflows/build.yml/badge.svg)](https://github.com/antvis/component/actions/workflows/build.yml) [![Coverage Status](https://coveralls.io/repos/github/antvis/component/badge.svg?branch=master)](https://coveralls.io/github/antvis/component?branch=master) [![npm Version](https://img.shields.io/npm/v/@antv/component.svg)](https://www.npmjs.com/package/@antv/component) [![npm Download](https://img.shields.io/npm/dm/@antv/component.svg)](https://www.npmjs.com/package/@antv/component) [![npm License](https://img.shields.io/npm/l/@antv/component.svg)](https://www.npmjs.com/package/@antv/component)

✨ Features

📦 Installation

$ npm install @antv/component
$ yarn add @antv/component

🔨 Getting Started

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

📮 Contribution

$ 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.