Advanced

前端组

后端组

设计组

邮件通知

切换禁用

切换只读

Show Code

<z-property-panel columns="2">
  <z-property-group title="基础属性" open>
    <z-property-row label="名称">
      <z-input value="张三"></z-input>
    </z-property-row>
    <z-property-row label="启用">
      <z-switch checked></z-switch>
    </z-property-row>
    <z-property-row label="备注" span>
      <z-input placeholder="跨整行..."></z-input>
    </z-property-row>
  </z-property-group>
  <z-property-group title="高级属性">
    <z-property-row label="接收通知">
      <z-checkbox checked>邮件通知</z-checkbox>
    </z-property-row>
  </z-property-group>
</z-property-panel>

Show Code

<z-property-panel columns="auto"> <!-- 窄屏自动换列 -->
  <z-property-group title="尺寸" open>
    <z-property-row label="宽度"><z-input></z-input></z-property-row>
  </z-property-group>
</z-property-panel>

<z-property-panel disabled> <!-- 禁用全部控件 --></z-property-panel>
<z-property-panel readonly> <!-- 只读：文本只读、开关/选择器 inert --></z-property-panel>

保存

重置

切换查看

Show Code

<!-- fields/value 通过 JS 属性赋值（复杂数据不适合 JSON 属性） -->
<z-detail-form id="detail-form-demo" mode="edit" columns="2">
  <z-button slot="footer" variant="primary">保存</z-button>
  <z-button slot="footer">重置</z-button>
</z-detail-form>

// JS:
form.fields = [
  { name: "name", label: "名称", type: "text", required: true },
  { name: "dept", type: "select", options: [{ value: "frontend", label: "前端组" }] },
  { name: "active", type: "boolean" },
  { name: "joined", type: "date" },
];
form.value = { name: "张三", active: true };
form.addEventListener("z-change", (e) => console.log(e.detail.values));

Show Code

<z-button id="detail-open-modal">在弹窗中新建条目</z-button>
<z-modal id="detail-form-modal" size="md">
  <h3 slot="header">新建条目</h3>
  <z-detail-form id="detail-form-create" mode="create" columns="2"></z-detail-form>
  <div slot="footer">
    <z-button id="detail-modal-cancel">取消</z-button>
    <z-button id="detail-modal-submit" variant="primary">创建</z-button>
  </div>
</z-modal>

Language:

auto

js

ts

css

html

json

markdown

python

lua

plain

切换只读

切换换行

Show Code

<!-- value 通过 JS 属性赋值（代码内容不适合 JSON 属性） -->
<z-code-editor id="editor" language="auto" placeholder="// 输入代码..."
  style="height:220px;display:block;">
</z-code-editor>

// JS:
editor.value = `function greet(name) {\n  return `Hello, ${name}`;\n}`;
editor.language = "js";    // auto 时按内容启发式检测
editor.readonly = true;     // 只读（HTML 属性 readonly 同效）
editor.wrap = true;         // 软换行（隐藏行号 gutter）
editor.addEventListener("z-input",  (e) => console.log(e.detail.value));
editor.addEventListener("z-change", (e) => console.log(e.detail.value));

// 自动补全 + 参数签名提示：
editor.functions = [                        // 函数元数据（补全面板 + 签名提示共用）
  { label: "greet", params: ["name"], desc: "返回问候语" },
  { label: "format", params: ["value", "pattern"] },
];
editor.completions = (code, caret) => ...;  // 完全接管补全数据源（可选，优先级最高）
// 默认数据源：语言关键字 + 当前文档单词；键入词前缀自动弹出补全，
// 输入 "(" 或 "," 弹出签名提示并随逗号推进参数高亮；↑↓/Enter/Tab/Esc/Ctrl+Space 控制。

Property Panel

Auto 列 & 状态面板

Detail Form

Code Editor