示例
直接操作示例，查看组件在具体任务中的状态与反馈。
筛选操作
状态
居中
A居中对齐
两端分布
12 条记录
页面操作
使用建议
默认允许窄屏换行
按钮、标签和筛选条件通常保持 wrap=true，让内容在宽度不足时自然降行而不是撑开页面。
nowrap 必须配套溢出策略
只有工具栏等确实需要单行的场景才关闭 wrap，并由宿主明确提供横向滚动、裁剪或收缩规则。
分布不改变操作顺序
justify 只控制剩余空间；DOM 顺序仍应与阅读、焦点和操作优先级一致。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import { BaseInline } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- Inline 的桌面 gap 与最终浏览器视觉证据仍待 T17/T23 补齐；当前 Beta 仅代表 API、源码与基础状态证据通过，不应解读为响应式视觉认证。
- Inline 不提供容器查询或断点属性；wrap=false 时的窄屏溢出必须由宿主显式处理。
- Automated axe checks and deterministic browser visual evidence are pending T17/T23.
API
查看组件源码export interface BaseInlineProps
extends Omit<
HTMLAttributes<HTMLDivElement>,
'children' | 'className' | 'style'
> {
children?: ReactNode;
gap?: BaseLayoutLength;
align?: BaseLayoutAlign;
justify?: BaseLayoutJustify;
wrap?: boolean;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseInlineClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
children | 在 BaseInline 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。 | ReactNode | — |
gap | 子项之间的间距。 | BaseLayoutLength | — |
align | 内容在对应轴线或单元格中的对齐方式。 | BaseLayoutAlign | 'center' |
justify | 子项在主轴方向上的分布方式。 | BaseLayoutJustify | 'start' |
wrap | 空间不足时子项是否允许换行。 | boolean | true |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseInlineClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |