Phone 手机框架

在 iPhone 样式的手机框架模型中显示内容。

导入

import { Phone } from 'asterui'

示例

基础手机

带有居中内容的简单手机模型。

</>

Hello World

import { Phone } from 'asterui'

function App() {
  return (
      <Phone displayClassName="bg-base-100 grid place-content-center">
        <span className="text-xl">Hello World</span>
      </Phone>
    )
}

export default App

带图片

显示图片作为壁纸。

</>

import { Phone } from 'asterui'

function App() {
  return (
      <Phone>
        <img
          src="https://img.daisyui.com/images/stock/453966.webp"
          alt="wallpaper"
          className="w-full h-full object-cover"
        />
      </Phone>
    )
}

export default App

自定义颜色

自定义手机框架颜色。

</>

Orange

import { Phone } from 'asterui'

function App() {
  return (
      <Phone color="#ff8938" displayClassName="bg-gradient-to-b from-orange-400 to-orange-600 grid place-content-center">
        <span className="text-white text-xl font-bold">Orange</span>
      </Phone>
    )
}

export default App

应用界面

模拟移动应用布局。

</>

My App

Item 1

Item 2

Item 3

Action

import { Phone, Button } from 'asterui'

function App() {
  return (
      <Phone displayClassName="bg-base-100 flex flex-col">
        <div className="bg-primary text-primary-content p-4">
          <h2 className="font-bold">My App</h2>
        </div>
        <div className="flex-1 p-4 space-y-3">
          <div className="bg-base-200 rounded-lg p-3 text-sm">Item 1</div>
          <div className="bg-base-200 rounded-lg p-3 text-sm">Item 2</div>
          <div className="bg-base-200 rounded-lg p-3 text-sm">Item 3</div>
        </div>
        <div className="p-4 border-t border-base-300">
          <Button color="primary" size="sm" className="w-full">Action</Button>
        </div>
      </Phone>
    )
}

export default App

聊天界面

模拟聊天应用布局。

</>

Jane

Hey! How are you?

Hi there! I'm good!

Great to hear!

import { Phone } from 'asterui'

function App() {
  return (
      <Phone displayClassName="bg-base-200 flex flex-col">
        <div className="bg-base-100 p-3 border-b border-base-300 flex items-center gap-3">
          <div className="avatar">
            <div className="w-8 rounded-full">
              <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=jane" alt="" />
            </div>
          </div>
          <span className="font-medium text-sm">Jane</span>
        </div>
        <div className="flex-1 p-3 space-y-2 overflow-auto">
          <div className="chat chat-start">
            <div className="chat-bubble chat-bubble-primary text-xs">Hey! How are you?</div>
          </div>
          <div className="chat chat-end">
            <div className="chat-bubble text-xs">Hi there! I'm good!</div>
          </div>
          <div className="chat chat-start">
            <div className="chat-bubble chat-bubble-primary text-xs">Great to hear!</div>
          </div>
        </div>
      </Phone>
    )
}

export default App

API

Phone

属性	描述	类型	默认值
children	手机屏幕内的内容	React.ReactNode	-
color	自定义框架颜色	string	-
className	手机容器的类	string	-
displayClassName	显示区域的类	string	-

可访问性

• 手机模型是装饰性的 - 内部内容应该是可访问的
• 内部的图片应该有适当的 alt 文本
• 内部的交互元素保持完全可访问