Window

Componente de maqueta de ventana estilo OS para mostrar código o contenido.

Importación

import { Window } from 'asterui'

Ejemplos

Ventana Básica

Maqueta de ventana simple con contenido.

</>

Hello from the window!

import { Window } from 'asterui'

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

export default App

Con Código

Ventana que contiene visualización de código.

</>

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

Código Multilínea

Ventana con múltiples líneas de código.

</>

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

Con Prefijo

Líneas de código con prefijos de comando.

</>

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

Ventana Estilizada

Ventana con estilo personalizado con diferente fondo.

</>

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

Contenido Personalizado

Ventana con estilo de contenido personalizado.

</>

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

Propiedad	Descripción	Tipo	Predeterminado
children	Contenido de la ventana	React.ReactNode	-
className	Clases CSS adicionales para la ventana	string	-
contentClassName	Clases CSS adicionales para el área de contenido	string	-

Accesibilidad

• El cromo de la ventana es decorativo y marcado como presentacional
• El área de contenido mantiene el orden de lectura adecuado
• Los bloques de código son legibles por lectores de pantalla
• Los botones de semáforo son decoraciones no interactivas