Browser

Afficher du contenu dans une maquette de fenêtre de navigateur avec barre d’adresse.

Importation

import { Browser } from 'asterui'

Exemples

Navigateur basique

Fenêtre de navigateur avec barre d'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

Aperçu de site web

Aperçu d'une mise en page de site web.

</>

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

Avec arrière-plan

Couleur d'arrière-plan personnalisée.

</>

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

Aperçu de tableau de bord

Maquette d'interface de tableau de bord.

</>

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

Propriété	Description	Type	Défaut
children	Contenu à l’intérieur de la fenêtre du navigateur	React.ReactNode	-
url	URL affichée dans la barre d’adresse	string	'https://example.com'
className	Classes pour le conteneur du navigateur	string	-
contentClassName	Classes pour la zone de contenu	string	-