Window 窗口

用于展示代码或内容的操作系统风格窗口模型组件。

导入

import { Window } from 'asterui'

示例

基础窗口

带有内容的简单窗口模型。

</>

Hello from the window!

import { Window } from 'asterui'

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

export default App

带代码

包含代码显示的窗口。

</>

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

多行代码

带有多行代码的窗口。

</>

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

带前缀

带有命令前缀的代码行。

</>

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

样式窗口

具有不同背景的自定义样式窗口。

</>

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

自定义内容

带有自定义内容样式的窗口。

</>

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

属性	描述	类型	默认值
children	窗口内容	React.ReactNode	-
className	窗口的额外 CSS 类	string	-
contentClassName	内容区域的额外 CSS 类	string	-

可访问性

• 窗口框架是装饰性的,标记为表现性
• 内容区域保持正确的阅读顺序
• 代码块可由屏幕阅读器读取
• 交通灯按钮是非交互式装饰