Mockup Browser 浏览器外框
MockupBrowser 使用 Rue 当前的浏览器外框视觉，同时补上推荐写法所需的地址栏、内容区和快捷工具栏 API。 基础 children 组合方式依然可用，适合需要完全自定义结构的场景。
何时使用
- 需要展示网页、管理台、嵌入式预览或静态产品截图，并且希望外层有统一的浏览器语义。
- 希望快速落一个带地址栏的浏览器框，用少量 props 搭出完整演示。
- 需要保持对工具栏和内容区的完全控制，可以使用基础组合模式。
# 推荐用法
直接通过 url、toolbarEnd、contentClassName 等快捷 props 组出一个完整浏览器预览。
用语义化的快捷 API 组织浏览器壳层，同时把真实页面内容直接塞进内容区。
# browser mockup with border
展示基础示例，不改变基础的 children + Toolbar 组织方式。
# browser mockup with background color
展示基础背景色示例，支持最基础的手写结构。
# 自定义工具栏
Toolbar 的 start / end 插槽适合放站点标签、环境状态或次要动作。
工具栏仍然展示基础组合能力，但通过 start / end 把常见布局槽位做得更顺手。
# 地址栏状态
AddressBar 可单独使用，并支持 success / warning / error 等状态语义。
# 内容容器
Content 用来统一处理上边框、背景色和内边距，避免每个示例 都手写一遍。
Mockup Browser 新增地址栏和内容区语义 API。
用组合页展示不同布局密度和数据卡片编排方式。
# 场景组合
把快捷 props 和子组件混用，可以很快搭出文档、后台、嵌入式预览等组合场景。
在一个浏览器壳层里展示编辑后台会更接近真实产品观感。
文档页场景更适合手动组合 Toolbar、AddressBar 和 Content，让布局更可控。
API
MockupBrowser 现在支持推荐快捷模式和基础组合模式两套写法。
MockupBrowser
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
bordered | 为浏览器外框追加边框 | boolean | false |
background | 为外层容器追加底色 | boolean | false |
showToolbar | 控制是否渲染快捷工具栏 | boolean | true |
url | 快捷生成地址栏内容；适合推荐用法 | any | - |
toolbar | 自定义快捷工具栏主体；通常与 toolbarStart / toolbarEnd 配合 | any | - |
toolbarStart | 快捷工具栏左侧插槽 | any | - |
toolbarEnd | 快捷工具栏右侧插槽 | any | - |
toolbarClassName | 快捷工具栏附加样式 | string | - |
contentClassName | 快捷内容区附加样式；设置后会自动包裹内容区 | string | - |
contentBordered | 快捷内容区是否带上边框 | boolean | true |
contentBackground | 快捷内容区是否带背景色 | boolean | false |
contentPadding | 快捷内容区内边距 | 'none' | 'sm' | 'md' | 'lg' | 'none' |
MockupBrowser.Toolbar
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
start | 工具栏左侧内容 | any | - |
end | 工具栏右侧内容 | any | - |
children | 工具栏主体内容，通常放地址栏 | any | - |
className | 工具栏附加样式 | string | - |
MockupBrowser.AddressBar
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
href | 地址链接；传入后默认渲染为 a | string | - |
prefix | 地址栏前缀内容，例如标签或图标 | any | - |
suffix | 地址栏后缀内容，例如状态或动作 | any | - |
interactive | 强制按可交互链接样式输出 | boolean | false |
status | 地址栏状态色 | 'default' | 'success' | 'warning' | 'error' | 'default' |
MockupBrowser.Content
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
bordered | 内容区上边框 | boolean | true |
background | 内容区背景色 | boolean | false |
padding | 内容区内边距 | 'none' | 'sm' | 'md' | 'lg' | 'none' |
className | 内容区附加样式 | string | - |
推荐写法对照
url适合快速生成地址栏contentClassName适合直接包裹内容区Toolbar + AddressBar + Content适合需要细粒度控制的页面Toolbar结构仍然完全可用FAQ
什么时候用快捷 props，什么时候用子组件？
如果只是想快速放一个带地址栏的浏览器框，优先用url、toolbarEnd、contentClassName这些快捷 props。需要更细的布局控制时，再切到 MockupBrowser.Toolbar、MockupBrowser.AddressBar和 MockupBrowser.Content。
基础示例 写法会失效吗？
不会。基础的children + MockupBrowser.Toolbar结构仍然提供；当前页面里的 “browser mockup with border” 和 “browser mockup with background color” 就是基础写法的直接保持版。
Content 和根节点上的 contentClassName 有什么区别？
contentClassName 适合推荐写法，直接让根组件帮你包一层内容区；如果你还需要分别控制padding、background或自己拆更多节点，就更适合直接使用 MockupBrowser.Content。