@antv/g-web-components v2.0.6
g-web-components
Inspired by LUME which is built on Web Component standards, making it possible to write scenes declaratively using custom HTML elements, regardless of which view layer you prefer.
Getting Started
Import from CDN:
<script src="https://unpkg.com/@antv/g"></script>
<script src="https://unpkg.com/@antv/g-canvas"></script>
<script src="https://unpkg.com/@antv/g-web-components"></script>
Use NPM module:
import from '@antv/g';
import from '@antv/g-canvas';
import from '@antv/g-web-components';
<g-canvas renderer="canvas" width="400" height="400" plugins="rough-canvas-renderer">
<g-rect fill="#2f54eb" radius="0 24 24" x="12" y="24" width="200" height="50">
<g-circle fill="#adc6ff" r="16px" cx="25" cy="25"></g-circle>
<g-text fill="#fff" x="50" y="20">我是一段文字</g-text>
</g-rect>
</g-canvas>
Custom Elements
g-canvas
https://g-next.antv.vision/zh/docs/api/canvas
g-circle
https://g-next.antv.vision/zh/docs/api/basic/circle
<g-circle fill="#adc6ff" r="16px" cx="25" cy="25"></g-circle>
g-ellipse
https://g-next.antv.vision/zh/docs/api/basic/ellipse
g-rect
https://g-next.antv.vision/zh/docs/api/basic/rect
g-image
https://g-next.antv.vision/zh/docs/api/basic/image
g-line
https://g-next.antv.vision/zh/docs/api/basic/line
g-polyline
https://g-next.antv.vision/zh/docs/api/basic/polyline
g-polygon
https://g-next.antv.vision/zh/docs/api/basic/polygon
g-path
https://g-next.antv.vision/zh/docs/api/basic/path
g-html
https://g-next.antv.vision/zh/docs/api/basic/html
Polyfill for Web Component
https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs
Limitations
- Props accept only strings or booleans, eg.
radius='0 20 20'
.
1 day ago
4 days ago
12 days ago
12 days ago
16 days ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago