Install

npm install @vf.js/gui

yarn add @vf.js/gui

""""
npm bundle size

此库不能独立使用，需要通过npm i @vf.js/launcher

vf-gui

vf-gui简称gui是基于 VFJS 引擎，使用TypeScript语言开发的开源UI库。为VFJS提供提供基础可靠的UI组件。

学习(Learn)

安装(Setup)

<script src="http://unpkg.com/@vf.js/vf/dist/vf.min.js"></script>
<script src="http://unpkg.com/@vf.js/gui/dist/gui.min.js"></script>

创建方式(Usage)：

let button = new  vf.gui.Button();

如何构建(How build)

git clone https://github.com/vf-js/gui
npm i
setup Visual Studio Code
setup Visual Studio Code Extension (Debugger for Chrome）
setup Visual Studio Code Extension (ESLint）
setup Visual Studio Code Extension (Live Server）
run Live Server
npm run test
view http://127.0.0.1:5501/

组件(Component)

使用示例：https://yunkc.gitee.io/docs/

可使用组件：

导入方式	名称
vf.gui.Stage	UI舞台
vf.gui.Container	容器
vf.gui.ScrollingContainer	可滑动的容器
vf.gui.Image	图片
vf.gui.Label	文本
vf.gui.TextInput	输入文本
vf.gui.Graphics	绘制矢量
vf.gui.Rect	绘制矢量矩形
vf.gui.Circle	绘制矢量圆形
vf.gui.Button	按钮
vf.gui.CheckBox	单选与复选
vf.gui.SpriteAnimated	序列图
vf.gui.Slider	滑动/进度条
vf.gui.FollowLine	跟随鼠标划线与擦除
vf.gui.ConnectLine	连线
vf.gui.Ticker	心跳
vf.gui.Tween	缓动
vf.gui.Timeline	缓动
vf.gui.Utils	工具类
vf.gui.Tracing	笔画临摹组件

计划中：

Recording/Audio - 麦克风
Spine/DB - 龙骨
Video - 视频
Particle - 粒子
DialogueText - 字幕
Sequence - 动画序列图
Accordion - 手风琴
Http/WebSocket - 网络

请提交时进行`eslint`检测

npm run lint

Other

Chrome debug - windows

Right click the Chrome shortcut, and select properties
In the "target" field, append --remote-debugging-port=9222
Or in a command prompt, execute /chrome.exe --remote-debugging-port=9222

Chrome debug - mac

In a terminal, execute /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222