Window

Componente de mockup de janela estilo OS para exibir código ou conteúdo.

Importação

import { Window } from 'asterui'

Exemplos

Janela Básica

Mockup de janela simples com conteúdo.

</>

Hello from the window!

import { Window } from 'asterui'

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

export default App

Com Código

Janela contendo exibição 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 Multilinha

Janela com múltiplas linhas 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

Com Prefixo

Linhas de código com prefixos 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

Janela Estilizada

Janela com estilo personalizado com fundo diferente.

</>

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

Conteúdo Personalizado

Janela com estilo de conteúdo 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

Propriedade	Descrição	Tipo	Padrão
children	Conteúdo da janela	React.ReactNode	-
className	Classes CSS adicionais para a janela	string	-
contentClassName	Classes CSS adicionais para a área de conteúdo	string	-

Acessibilidade

• O chrome da janela é decorativo e marcado como apresentacional
• A área de conteúdo mantém ordem de leitura adequada
• Blocos de código são legíveis por leitores de tela
• Os botões de semáforo são decorações não interativas