Jigsaw 七巧板开源项目最佳实践-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01103/article/details/148244516

Jigsaw 七巧板开源项目最佳实践

jigsaw Jigsaw七巧板 provides a set of web components based on Angular5/8/9+. The main purpose of Jigsaw is to help the application developers to construct complex & intensive interacting & user friendly web pages. Jigsaw is supporting the development of all applications of Big Data Product of ZTE. 项目地址: https://gitcode.com/gh_mirrors/jigs/jigsaw

1. 项目介绍

Jigsaw（七巧板）是一个基于Angular的Web组件库，提供了丰富的组件、容器、服务和指令，覆盖了Web应用开发的大部分需求。Jigsaw的特点在于其强大的功能和优秀的性能，它不仅拥有其他组件库的所有功能，还具备同时支持多种UX规范的能力，使得开发者能够在一个项目中实现不同的用户界面规范。

2. 项目快速启动

首先，确保你已经安装了Node.js环境。接下来，按照以下步骤快速启动Jigsaw项目：

# 克隆项目
git clone https://github.com/rdkmaster/jigsaw.git

# 进入项目目录
cd jigsaw

# 安装依赖
npm install

# 启动开发服务器
ng serve

启动成功后，你可以在浏览器中访问 http://localhost:4200 查看示例。

3. 应用案例和最佳实践

案例一：创建一个简单的表单

使用Jigsaw组件创建一个包含输入框、选择框和提交按钮的表单：

<form>
  <jigsaw-input placeholder="请输入您的名字"></jigsaw-input>
  <jigsaw-select>
    <jigsaw-option value="male">男</jigsaw-option>
    <jigsaw-option value="female">女</jigsaw-option>
  </jigsaw-select>
  <jigsaw-button theme="primary">提交</jigsaw-button>
</form>

案例二：使用图表展示数据

通过Jigsaw的图表组件，你可以轻松地将数据以图表的形式展示出来：

<jigsaw-chart [data]="chartData"></jigsaw-chart>

在组件的 TypeScript 类中，定义 chartData：

chartData = {
  labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
  datasets: [{
    label: '销量',
    data: [65, 59, 80, 81, 56, 55],
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
    tension: 0.1
  }]
};