组件：面包屑
面包屑组件用于显示当前页面在系统层级结构中的位置，支持设置分隔符、分隔符颜色、添加项目、置路径数组、置项目被单击回调等特性，常用于页面层级导航、当前位置展示、面包屑导航等场景，最后一个项目不可点击。
典型使用场景：
- 文章导航（首页 > 分类 > 文章标题）
- 产品导航（首页 > 产品分类 > 产品详情）
- 电商导航（首页 > 商品分类 > 商品详情）
- 管理后台（首页 > 用户管理 > 用户列表）
- 文件路径（首页 > 文件夹 > 子文件夹 > 文件）
📌 继承自视图的成员速查
本组件继承自 视图 类，可直接使用以下属性和方法：
属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用
方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边 顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)
事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)
💡 完整成员列表及详细说明请参考：
视图类
常用操作速查
| 操作 | 属性/方法 | 示例 |
|---|---|---|
| 添加面包屑项目 | 添加项目(文本) | 面包屑1.添加项目("首页") |
| 设置分隔符 | 分隔符 | 面包屑1.分隔符 = "/" |
| 设置分隔符颜色 | 分隔符颜色 | 面包屑1.分隔符颜色 = "#d9d9d9" |
| 设置路径数组 | 置路径数组(数组) | 面包屑1.置路径数组(["首页", "分类", "详情"]) |
| 设置项目点击回调 | 置项目被单击回调(回调) | 面包屑1.置项目被单击回调((源对象, 文本, 标记值, 索引) => { ... }) |
| 清空所有项目 | 清空() | 面包屑1.清空() |
样式美化参考
面包屑样式变体：
- 简约样式：
背景颜色 = "#ffffff"，边框 = "none"，分隔符颜色 = "#d9d9d9" - 卡片样式：
背景颜色 = "#f8f9fa"，边框 = "1px solid #e8e8e8"，边框圆角 = "4px" - 导航样式：
背景颜色 = "#ffffff"，边框 = "none"，阴影 = "0 1px 3px rgba(0,0,0,0.1)"
项目样式：
- 当前项目：
文本颜色 = "#666666"，字体粗细 = "粗体"，光标样式 = "default" - 可点击项目：
文本颜色 = "#1890ff"，光标样式 = "pointer"，下划线 = "none" - 悬停项目：
文本颜色 = "#40a9ff"，下划线 = "underline"
分隔符样式：
- 默认分隔符：
分隔符 = "/"，分隔符颜色 = "#d9d9d9"，外边距 = "4px" - 箭头分隔符：
分隔符 = "›"，分隔符颜色 = "#666666"，外边距 = "8px" - 圆点分隔符：
分隔符 = "·"，分隔符颜色 = "#cccccc"，外边距 = "6px"
布局样式：
- 水平布局：
显示模式 = "行内"，外边距 = "0 4px" - 垂直布局：
显示模式 = "块级"，外边距 = "4px 0" - 响应式布局：
宽度 = "100%"，外边距 = "8px 0"，文本对齐 = "左对齐"
状态样式：
- 静态状态：
背景颜色 = "#ffffff"，边框 = "none"，外边距 = "0" - 动态状态：
背景颜色 = "#fafafa"，边框 = "1px solid #f0f0f0"，外边距 = "4px" - 悬浮状态：
背景颜色 = "#f0f0f0"，边框 = "1px solid #e8e8e8"，边框圆角 = "4px"
示例代码
' 示例：完整的面包屑使用演示
' 1. 创建面包屑
变量 面包屑1 = 创建 面包屑()
' 2. 设置属性
面包屑1.左边 = 100
面包屑1.顶边 = 100
面包屑1.分隔符 = "/"
' 3. 添加项目
面包屑1.添加项目("首页")
面包屑1.添加项目("列表")
面包屑1.添加项目("详情")
' 4. 设置事件回调
面包屑1.置项目被单击回调((源对象, 文本, 标记值, 索引) => {
调试输出("跳转到：" + 文本)
})
' 5. 添加到父容器
添加组件(面包屑1)
属性：分隔符
- 类型：
文本型 - 说明： 设置或获取层级项之间的分隔符，默认为 /。
属性：分隔符颜色
- 类型：
文本型 - 说明： 设置或获取分隔符颜色。
函数：添加项目(文本, 标记值)
添加一个层级项，可指定文本和标记值，返回添加的索引位置，标记值可省略。
函数：置路径(路径数组)
设置整个路径，参数为对象数组 [{text, tag}]。
函数：置项目被单击回调(回调函数)
设置非末项被单击时的回调函数，回调函数返回四个参数：(源对象,项目文本,标记值,索引)。
事件：项目被单击(源对象,项目文本,标记值,索引)
当非末项被单击时触发该事件。