McuStudioMcuStudio
指南
开发者
组件
API
  • 版本发布
指南
开发者
组件
API
  • 版本发布
    • 概述
    • 快速开始
    • 添加厂商的芯片到平台
    • 进阶
    • 开发
    • 外设配置
    • 扩展
    • 芯片包开发指南
    • 芯片包配置详细操作手册
    • 外设组件元素配置参考
    • VSCODE插件使用
    • 开发常见问题

外设组件元素配置参考

本文档详细介绍了在配置外设Schema时可用的各种UI元素及其属性,可作为工具书查阅。

通用属性

所有配置元素都共享以下基础属性,这些属性定义了元素的核心行为和标识:

基础标识属性

  • ID (必需):元素的唯一标识符,在代码生成中用来获取变量值的。标识示例:"ID": "Mode"
  • 标签 label (必需):界面显示的名称。示例:"label": "I2C Speed Mode"
  • 占位符 placeholder (可选):输入框为空时显示的提示文本。示例:"placeholder": "Enter device name"

值控制属性

  • 默认值:元素的默认值,用于数据绑定和联动。"value": "MyDevice" || "value": 1000
  • 最大值
  • 最小值

状态控制属性

  • 禁用 disabled (可选):默认为 false。示例:"disabled": true
  • 隐藏 visible (可选):默认为 false。示例:"disabled": true

输入类元素

1. 输入框 (Input)

用于输入文本或数字。可以选择十进制、十六进制等格式。 输入框input 输入框input

// 输入框input code 示例
ClockSpeed: {
    label: 'I2C Speed Frequency(Hz)',
    value: '100000',
    disabled: false,
    placeholder: '',
    min: 0,
    max: 400000,
    isformat: true,
    format: 'Decimal',
    type: 'input',
},

I2C输入框input

2. 数字输入框 (Number)

专用于数字输入,带增减按钮。 数字输入框

// 数字输入框number code 示例
NbrOfConversion: {
    label: 'Number Of Conversion',
    value: '1',
    disabled: false,
    placeholder: '',
    min: 1,
    max: 16,
    type: 'number',
},

数字输入框配置

选择类元素

3. 下拉选择 (Select)

用于从多个选项中选择一项。 选择输入框select

  // 下拉选择 (select) code 示例
  I2CSpeedMode: {
      label: 'I2C Speed Mode',
      value: 'StandardMode',
      disabled: false,
      placeholder: '',
      options: [
        {
          label: 'Standard Mode',
          value: 'StandardMode',
          disabled: false,
        },
        {
          label: 'Fast Mode',
          value: 'FastMode',
          disabled: false,
        },
      ],
      type: 'select',
  },

I2C外设的时钟速率模式

4. 复选框 (Checkbox)

用于从多个选项中选择一项。 复选框checkout

  // 复选框 (checkbox) code 示例
  IN0: {
      label: 'IN0',
      value: false,
      disabled: false,
      type: 'checkbox',
  },
  IN0: {
      label: 'IN0',
      value: true,
      disabled: false,
      type: 'checkbox',
  },

复选框Checkbox配置

5. 日期选择 (Datepick)

信息展示

5. 文本Text

5. 标签Span

6. 表格Table

7. 列表List

布局容器

8. Tab面板

9. 折叠面板Collapse

10. 分组框

Prev
芯片包配置详细操作手册
Next
VSCODE插件使用