快速开始

安装

原生 HTML / CDN

# 不用装，一个 script 标签就够

React

npm i @ptengine/ui-react

Vue

npm i @ptengine/ui-vue

Angular

npm i @ptengine/ui-angular

所有公开包锁步发版、共用一个版本号，你永远不需要查「哪个版本配哪个版本」。

原生 HTML

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@ptengine/ui/dist/ptengine-ui/ptengine-ui.css"
/>
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@ptengine/ui/dist/ptengine-ui/ptengine-ui.esm.js"
></script>

<pt-button variant="brand">开始使用</pt-button>

懒加载：页面上出现哪个标签才下载哪个组件。那行样式表别省：运行时只把设计变量注入各组件的影子树， 页面自己的 var(--pt-*) 和光 DOM 元素（pt-kbd、pt-kbd-group、pt-table、pt-breadcrumb-item、 pt-pagination、pt-pagination-item）的样式都只在这份全局样式表里。

打包器（Vite / webpack / Rollup）

import '@ptengine/ui/dist/ptengine-ui/ptengine-ui.css'; // 设计变量，入口处引一次
import '@ptengine/ui/components/pt-button.js'; // 按需导入，可 tree-shaking

框架项目

各框架的包装包带类型、带框架习惯的事件名与双向绑定，详见各框架接入。

浏览器支持

主流浏览器最近两个大版本。Custom Elements 与 Shadow DOM 在这个范围内全部原生支持， 库里不引入任何 polyfill。

版本承诺

• 0.x 阶段允许 breaking change，组件 API 仍在打磨
• 1.0 起对组件 API（标签、属性、事件、插槽、CSS 变量、part）做兼容承诺

不在承诺范围内的：影子树的内部结构、未在文档中列出的 CSS 类名。 需要定制样式请用 ::part() 与 CSS 变量，不要依赖内部选择器。