组件库

基于 Element Plus 设计语言，使用 builder 模式链式调用。

搭建步骤

bash

git clone https://atomgit.com/ystyle/cjxt.git
cd cjxt
./scripts/build-css.sh
cjpm build
cd examples && cjpm build
./target/release/bin/main

浏览器打开 http://localhost:8080，点击 "组件库" tab 查看全部交互演示。IPV6演示站：https://cjxt.mini.ystyle.top:2024/

在自己的项目中使用

cangjie

import cjxt.*
import cjxt.components.*

main() {
    App()
        .UseComponent()        // EP 样式 + 前端 JS：@EmbedString 编译期嵌入，内部 addCSS
        .addCSS(siteCss())     // 页面自己的样式模块（@importCSS 返回值的 "_css" 全文）
        .serve()
}

样式只有一条通道：App.addCSS → cssBlobs。框架按承载方式自动交付： HTTP 走 /_cjxt/css/{hash}.css 路由，无 HTTP（file://）则内联 <style>。不要用 cssBundle + serveStatic —— 与 addCSS 重复，且 file:// 下会静默丢样式。
Element Plus 样式通过 @EmbedString 编译时嵌入二进制，无需额外下载。

基础

组件	API
Button	`kind(ButtonKind)` `size(ButtonSize)` `round()` `circle()` `plain()` `text()` `link()` `bg()` `loading()` `disabled()` `icon(name)` `nativeType(ButtonNativeType)` `autofocus()` `onClick(h)`
ButtonGroup	`direction(SpaceDirection)` `size(ButtonSize)` `kind(ButtonKind)`
Text	`kind(ComponentKind)` `size(TextSize)` `truncated()` `lineClamp(n)` `tag(name)`
Link	`kind(ComponentKind)` `underline(LinkUnderline)` `noUnderline()` `disabled()` `href(url)` `target(t)` `icon(name)` `onClick(h)`
Icon	`name`(26 内置图标) `size(String)` `color(String)`

布局

组件	API
Row	`gutter(Int64)` `justify(RowJustify)` `align(RowAlign)`
Col	`span(Int64)` `offset(Int64)` `pull(Int64)` `push(Int64)` `gutter(Int64)`
Card	`header(s)` `footer(s)` `shadow(CardShadow)` `bodyStyle(s)` `bodyClass(s)`
Divider	`direction(DividerDirection)` `contentPosition(ContentPosition)`
Space	`size(Int64)` `direction(SpaceDirection)` `wrap()`

表单

组件	API	绑定类型
Input	`placeholder(s)` `size(ComponentSize)` `clearable()` `disabled()` `password()` `prefixIcon(n)` `suffixIcon(n)`	`Signal<String>`
InputNumber	`min(n)` `max(n)` `step(n)` `size(ComponentSize)` `disabled()` `noControls()`	`Signal<Int64>`
Switch	`activeText(s)` `inactiveText(s)` `activeValue(Bool)` `inactiveValue(Bool)` `disabled()` `size(ComponentSize)`	`Signal<Bool>`
Radio	`value` 标识字符串 `disabled()`	—
RadioGroup	`bind(Signal<String>)`	`Signal<String>`
Checkbox	`value` 标识字符串 `disabled()`	—
CheckboxGroup	`bind(Signal<ArrayList<String>>)`	`Signal<ArrayList<String>>`
Select	`placeholder(s)` `disabled()` `clearable()` `filterable()` `multiple()`	`Signal<String>` / `bindMulti`
SelectOption	`value` `disabled()`	—
SelectOptionGroup	`label` 分组标题	—
Slider	`min(n)` `max(n)` `step(n)` `showStops()` `disabled()`	`Signal<Int64>`
Rate	`max(n)` `allowHalf()` `showText()` `disabled()` `texts(Array<String>)`	`Signal<Int64>`

数据展示

组件	API
Tag	`kind(ComponentKind)` `size(TagSize)` `effect(TagEffect)` `closable()` `hit()` `round()` `color(s)` `onClose(h)` `onClick(h)`
Badge	`value(n
Table	`data(signal)` `add(TableColumn)` `stripe()` `border()` `height(v)` `maxHeight(v)` `size(s)` `highlight()` `showSummary()` `sortColumn(s)` `sortOrder(s)` `selectedRows(s)` `currentRow(s)` `rowClassName(fn)` `rowStyle(fn)` `cellClassName(fn)` `cellStyle(fn)` `headerRowClassName(fn)` `headerCellClassName(fn)` `headerRowStyle(fn)` `headerCellStyle(fn)`
Progress / Avatar / Empty / Descriptions / Statistic / Result	详见合并文档

组件	API
Menu	`mode(MenuMode)` `add(MenuItem)`
MenuItem	`disabled(Bool)` `active(Bool)` `onClick(h)`

表单容器

组件	API
Form	`validate()` `clearValidate()` `add(FormItem)`
FormItem	`label(s)` `setProp(s)` `required()` `error(s)` `rule(FormRule)` `bind(Signal<String>)` `errorSignal(Signal<String>)` `validate()` `clearValidate()`

FormRule

cangjie

FormRule(
    required: Bool = false,   // 必填
    message: String = "",     // 错误提示
    min: Int64 = 0,           // 最小长度
    max: Int64 = 0,           // 最大长度
    pattern: String = "",     // 正则（std.regex）
)

FormItem 校验

cangjie

let item = FormItem([Input().bind(this.state.email)])
    .label("邮箱")
    .bind(this.state.email)                    // 校验读取 Signal
    .rule(FormRule(required: true, message: "必填"))
    .rule(FormRule(min: 5, message: "至少5个字符"))
    .rule(FormRule(pattern: "^\\w+@\\w+\\.\\w+$", message: "格式错误"))
    .errorSignal(this.state.emailError)        // 错误状态持久化

// 手动校验
item.validate()

// Form 统一校验（自动识别子 FormItem）
let form = Form([itemUser, itemPwd, itemEmail])
form.validate()
form.clearValidate()

校验状态 class

class	条件
`is-error`	`validate()` 返回 `false`
`is-success`	`validate()` 返回 `true`
`is-required`	`required()` 或 `FormRule(required: true)`

枚举类型

cangjie

ButtonKind:       Default | Primary | Success | Warning | Danger | Info
ComponentKind:    Default | Primary | Success | Warning | Danger | Info | Plain
ButtonSize:       Large | Default | Small
ButtonNativeType: Button | Submit | Reset
ComponentSize:    Large | Default | Small
TextSize:         Default | Large | Small
TagSize:          Default | Large | Medium | Small | Mini
TagEffect:        Dark | Light | Plain
CardShadow:       Always | Hover | Never
RowJustify:       Start | End | Center | SpaceAround | SpaceBetween | SpaceEvenly
RowAlign:         Top | Middle | Bottom
DividerDirection: Horizontal | Vertical
ContentPosition:  Left | Center | Right
SpaceDirection:   Horizontal | Vertical
MenuMode:         Horizontal | Vertical
LinkUnderline:    Always | Hover | Never

组件库 ​

搭建步骤 ​

在自己的项目中使用 ​

基础 ​

布局 ​

表单 ​

数据展示 ​

导航 ​

表单容器 ​

FormRule ​

FormItem 校验 ​

校验状态 class ​

枚举类型 ​

组件库

搭建步骤

在自己的项目中使用

基础

布局

表单

数据展示

导航

表单容器

FormRule

FormItem 校验

校验状态 class

枚举类型