Standard Layout — tabSetLayout & Hierarchy Summary

同学们，咱们今天来看一下 Lightning Web Components 里属性编辑器中一种特别常用的布局方式——TabSet，也就是选项卡布局。 你可以这样想，当你去编辑一个组件，属性特别多的时候，如果所有输入框、下拉列表都一股脑堆在同一个面板上，那画面可能又长又乱。这时候选项卡就能帮大忙了。 TabSet 布局，本质上就是把不同的属性，按照编辑时的上下文分组，放到不同的选项卡页签下。每个页签就像一个小抽屉，打开之后只会看到那一组的属性。这样一来，不管属性总量有多少，整个属性面板看起来都始终很紧凑，高度保持不变，不会忽大忽小，使用体验就稳定多了。 比如说，一个组件可能有外观相关的属性，像颜色、尺寸；有行为相关的，像触发方式、自动播放；还有数据相关的，像数据源、过滤条件。如果把它们全叠在一个竖直列表里，你得上下翻着找。但用选项卡，就可以设计成“外观”一个页签，“行为”一个页签，“数据”一个页签，切换页签就能快速找到对应的属性，编辑上下文非常清晰。 在开发时，每个选项卡都是一个布局子集，它自己会有一个标签，里面再包含具体的属性布局项。系统是怎么决定用哪种编辑器来展示某个属性的呢？这里有一个两步走的逻辑：首先，它会检查这个组件有没有自定义的编辑器，也就是通过 componentOverrides 指定的；如果有，就优先使用自定义编辑器；如果没有，就会回退到该属性类型默认的编辑器。这个机制让开发者既能享受到默认的便利，又能在特殊需求时精确控制。 另外你会发现，不仅是选项卡，我们还有竖直排列和手风琴折叠这些布局。怎么选呢？简单说，属性又少、关系又简单的，用竖直排列最直接；如果想让用户按需展开不同分类，手风琴就很合适，但它的面板高度会随着展开和折叠而变大变小；而一旦我们面对属性很多、并且分属于不同编辑模式的场景，选项卡就是最优解，因为它始终保持面板高度固定，切换时不造成布局跳动。 最后，在层次结构上，选项卡布局还有一个一致的特点：不管你怎么组合，它的底部总会有一个引用模式的子属性做结尾，这是元数据定义上的一个固定模式，了解即可。 好，以上就是选项卡布局的核心要点，大家只要记住一句话：按编辑上下文分组，面板紧凑稳定，适合多属性分模式编辑的场景。