Window

Composant de maquette de fenêtre de style OS pour présenter du code ou du contenu.

Importation

import { Window } from 'asterui'

Exemples

Fenêtre basique

Maquette de fenêtre simple avec contenu.

</>

Hello from the window!

import { Window } from 'asterui'

function App() {
  return (
      <Window>
        <p>Hello from the window!</p>
      </Window>
    )
}

export default App

Avec code

Fenêtre contenant l'affichage de code.

</>

npm install asterui

import { Window, Code } from 'asterui'

function App() {
  return (
      <Window>
        <Code className="bg-base-300">
          <Code.Line>npm install asterui</Code.Line>
        </Code>
      </Window>
    )
}

export default App

Code multi-lignes

Fenêtre avec plusieurs lignes de code.

</>

import { Button } from 'asterui'

function App() {

  return <Button>Click me</Button>

}

import { Window, Code } from 'asterui'

function App() {
  return (
      <Window>
        <Code className="bg-base-300">
          <Code.Line>import {'{ Button }'} from 'asterui'</Code.Line>
          <Code.Line></Code.Line>
          <Code.Line>function App() {'{'}</Code.Line>
          <Code.Line>  return {'<Button>Click me</Button>'}</Code.Line>
          <Code.Line>{'}'}</Code.Line>
        </Code>
      </Window>
    )
}

export default App

Avec préfixe

Lignes de code avec préfixes de commande.

</>

npm install asterui

npm run dev

Server running on http://localhost:3000

import { Window, Code } from 'asterui'

function App() {
  return (
      <Window>
        <Code className="bg-base-300">
          <Code.Line prefix="$">npm install asterui</Code.Line>
          <Code.Line prefix="$">npm run dev</Code.Line>
          <Code.Line prefix=">">Server running on http://localhost:3000</Code.Line>
        </Code>
      </Window>
    )
}

export default App

Fenêtre stylisée

Fenêtre personnalisée avec un arrière-plan différent.

</>

echo "Custom styled window"

Custom styled window

import { Window, Code } from 'asterui'

function App() {
  return (
      <Window className="bg-neutral">
        <Code className="bg-neutral text-neutral-content">
          <Code.Line prefix="~">echo "Custom styled window"</Code.Line>
          <Code.Line>Custom styled window</Code.Line>
        </Code>
      </Window>
    )
}

export default App

Contenu personnalisé

Fenêtre avec style de contenu personnalisé.

</>

Window Content

This window has custom content styling.

You can put any content here.

import { Window } from 'asterui'

function App() {
  return (
      <Window contentClassName="p-4">
        <div className="space-y-2">
          <h3 className="font-bold">Window Content</h3>
          <p>This window has custom content styling.</p>
          <p className="text-sm opacity-70">You can put any content here.</p>
        </div>
      </Window>
    )
}

export default App

API

Propriété	Description	Type	Défaut
children	Contenu de la fenêtre	React.ReactNode	-
className	Classes CSS supplémentaires pour la fenêtre	string	-
contentClassName	Classes CSS supplémentaires pour la zone de contenu	string	-

Accessibilité

• Le chrome de la fenêtre est décoratif et marqué comme présentation
• La zone de contenu maintient un ordre de lecture approprié
• Les blocs de code sont lisibles par les lecteurs d’écran
• Les boutons de feux de circulation sont des décorations non interactives