Browser 浏览器

在带地址栏的浏览器窗口模型中显示内容。

引入

import { Browser } from 'asterui'

示例

基本用法

带 URL 栏的浏览器窗口。

</>

https://daisyui.com

Hello!

import { Browser } from 'asterui'

function App() {
  return (
      <Browser url="https://daisyui.com" className="w-full">
        <div className="grid place-content-center h-40 bg-base-200">
          Hello!
        </div>
      </Browser>
    )
}

export default App

网站预览

预览网站布局。

</>

https://mysite.com

MySite

Welcome

Content here...

import { Browser } from 'asterui'

function App() {
  return (
      <Browser url="https://mysite.com" className="w-full">
        <div className="bg-base-100">
          <div className="bg-primary text-primary-content p-4">
            <span className="font-bold">MySite</span>
          </div>
          <div className="p-4 h-32">
            <h2 className="text-xl font-bold">Welcome</h2>
            <p className="text-base-content/70">Content here...</p>
          </div>
        </div>
      </Browser>
    )
}

export default App

带背景

自定义背景颜色。

</>

https://app.example.com

Gradient

import { Browser } from 'asterui'

function App() {
  return (
      <Browser url="https://app.example.com" className="w-full">
        <div className="bg-gradient-to-br from-purple-500 to-pink-500 h-48 grid place-content-center">
          <span className="text-white text-2xl font-bold">Gradient</span>
        </div>
      </Browser>
    )
}

export default App

仪表盘预览

模拟仪表盘 UI。

</>

https://dashboard.example.com

Users

1,234

Revenue

$5,678

import { Browser } from 'asterui'

function App() {
  return (
      <Browser url="https://dashboard.example.com" className="w-full">
        <div className="bg-base-100 p-4 h-56">
          <div className="flex gap-4 mb-4">
            <div className="bg-primary/10 rounded-lg p-3 flex-1">
              <div className="text-xs text-base-content/60">Users</div>
              <div className="text-xl font-bold">1,234</div>
            </div>
            <div className="bg-secondary/10 rounded-lg p-3 flex-1">
              <div className="text-xs text-base-content/60">Revenue</div>
              <div className="text-xl font-bold">$5,678</div>
            </div>
          </div>
          <div className="bg-base-200 rounded-lg h-24"></div>
        </div>
      </Browser>
    )
}

export default App

API

Browser

属性	描述	类型	默认值
children	浏览器视口内的内容	React.ReactNode	-
url	地址栏中显示的 URL	string	'https://example.com'
className	浏览器容器的类名	string	-
contentClassName	内容区域的类名	string	-