Join 组合容器

Join 用来把一组操作或输入控件拼成连续整体。当前页面展示基础 children + Join.Item组合写法，同时补充了items 数据驱动入口、根节点自定义和基础状态语义，让工具条、筛选器和紧凑表单更容易组织。

何时使用

items 适合快速描述一组顺序稳定的动作，itemClassName 负责公共视觉，单项 className 负责差异。

推荐把公共样式放到 itemClassName，把强调项放到单个 item 的 className。

active、disabled、as、wrap、block 可以组合出筛选条、导航条和窄屏换行布局。

需要响应式方向时，仍然可以直接在 className 里叠加 lg:join-horizontal 这类类名。

展示 children + Join.Item 写法，适合自定义程度更高的场景。

direction 继续控制 Join 主轴方向，基础用法保持不变。

展示基础示例，通过 className 叠加响应式修饰符即可切换方向。

保持当前复杂示例，Join 仍然可以包裹 input、select 和其他额外结构。

new

Join 只负责组合关系，具体圆角和视觉细节仍然交给子项自身控制。

展示 radio 示例，也可以用 as 继续切到其他标签。

Join 当前同时支持组合模式和数据驱动模式，下面分别列出根节点与 Join.Item 的常用能力。

属性	说明	类型	默认值
`as`	指定 Join 根节点标签，默认输出 div	`any`	`'div'`
`direction`	控制 Join 的主轴方向	`'horizontal' \| 'vertical'`	`'horizontal'`
`items`	数据驱动模式；未传 children 时会自动渲染 Join.Item 列表	`JoinItemConfig[]`	`-`
`itemClassName`	数据驱动模式下，为每个 Join.Item 追加公共 className	`string`	`-`
`wrap`	让 Join 容器支持换行，适合标签筛选或窄屏工具条	`boolean`	`false`
`block`	让 Join 根节点撑满容器宽度	`boolean`	`false`
`className`	透传给根节点，用于响应式方向和布局覆盖	`string`	`-`
`children`	组合模式内容；存在 children 时优先渲染 children	`any`	`-`

属性	说明	类型	默认值
`as`	Join.Item 的推荐标签别名，和 tag 二选一即可	`any`	`-`
`tag`	基础标签写法，支持 button、input、select 等原生元素	`any`	`'button'`
`active`	为按钮类项追加 btn-active，适合分段选择器	`boolean`	`false`
`disabled`	禁用当前项；button 会写入 disabled，a 会补 aria-disabled 语义	`boolean`	`false`
`href`	当 as/tag 为 a 时透传链接地址	`string`	`-`
`className`	追加到 join-item 上，通常用来组合 btn、input、select 等视觉类	`string`	`-`
`children`	当前项内容；数据驱动模式也支持用 label 作为内容别名	`any`	`-`

key用于列表稳定渲染

label是数据驱动模式下的内容别名

其余字段使用Join.Item的 props

单项className会和itemClassName自动合并

如果是一组结构稳定、可以直接由数组描述的操作，优先用items。如果内部包含额外布局、指示器、嵌套容器或复杂表单结构，可以使用 children + Join.Item会更直接。

两者都能切换渲染标签。as是当前推荐写法，适合新的调用方式；tag 展示，用来支持项目代码和当前示例。

不会。Join 只负责组合关系和少量容器语义，具体视觉仍然由每个子项自己的 className决定，这样可以继续保持 Rue 当前的视觉风格和可组合性。