钱包 UI 组件

这个工作空间包含钱包网关的 UI 组件, 用 Web 组件。 。 。 .

概览

这个软件包为钱包相关网络应用程序提供了一套模块化的UI组件和公用设施.

组件:包含可重复使用的可跨不同钱包UI的网页组件(如信头,版式,和窗体等). 这些组件的设计具有灵活性和可调和性.

窗口:提供基于窗口的预定义功能,例如钱包发现对话框. 这些通常被SDK等更高级的软件包用于执行需要弹出或模式交互的用户流.

主题: 包括默认主题(CSS自定义属性和样式),以确保所有组件和窗口的外观和感觉一致. 这一主题可根据需要加以扩展或推翻.

这个软件包结合在一起,可以快速地开发钱包UI,具有一致的用户经验和共享的逻辑.

安装

此软件包需要 节点JS v16 或更高, 可使用 :

npm install @canton-network/core-wallet-ui-components --save

或者说

pnpm add @canton-network/core-wallet-ui-components

运行

要构建软件包, 请运行 :

pnpm build

要启动本地网络开发服务器进行互动测试和开发,请运行:

pnpm dev

使用量

构建钱包 UI 的主要入口是: AppLayout 组件. 这个 AppLayout 提供一致的页面结构(例如封装 AppHeader,并自动包括 诱饵 CSS 框架和 默认主题 为了一个统一的外观和感觉.

基本用途:

  <body>
      <app-layout>
          <you-component></your-component>
      </app-layout>
  </body>

您也可以通过指定自定义图标或样式表来自定义布局 :

  <app-layout iconSrc="images/icon.png" themeSrc="css/custom.css">
      <you-component></your-component>
  </app-layout>

• iconSrc: 页眉中显示的自定义图标的路径.
• themeSrc: 用于自定义主题的替代 CSS 文件的路径 .

这种方法允许您快速地将钱包 UI 配置为一致的结构和外观,同时仍然支持根据需要定制.

他们

部件从 CSS 自定义属性取出颜色、字体、间距和弧度,分为两层(见 themes/default.css:

• --wg-theme-* 是基准符号,例如 --wg-theme-accent-color 财务报告和审定财务报表 --wg-theme-text-rgb覆盖它们 :root 或任何祖先的元素。 它们通过阴影根来继承,因此它们也到达了被嵌入到其他组件内部的组件.
• --wg-* 是所使用的组件的别名。 组件宣布它们 :host,所以不要从一页中覆盖这些:设置基准符号.

用作颜色 rgba(var(--x), alpha) 有个 -rgb 符号 r, g, b (单位:千美元)--wg-theme-accent-rgb, (中文(简体) ), --wg-theme-primary-rgb, (中文(简体) ), --wg-theme-text-rgb (见A/CN.9/WG.III/WP.III/WP.1号文件)。 当您改变这种颜色时, 设置两者. --wg-theme-shade-rgb 是微弱线和边框的颜色.

新组件样式应使用 --wg-* 符号而非字面颜色,这样一页就可以主题化它们.