Phone

Afficher du contenu dans une maquette de cadre de téléphone de style iPhone.

Import

import { Phone } from 'asterui'

Exemples

Téléphone de base

Maquette de téléphone simple avec contenu centré.

</>

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

Avec image

Afficher une image comme fond d'écran.

</>

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

Couleur personnalisée

Personnaliser la couleur du cadre du téléphone.

</>

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

Interface d'application

Maquette d'une mise en page d'application mobile.

</>

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

Interface de chat

Maquette d'une mise en page d'application de chat.

</>

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

Propriété	Description	Type	Défaut
children	Contenu à l’intérieur de l’écran du téléphone	React.ReactNode	-
color	Couleur de cadre personnalisée	string	-
className	Classes pour le conteneur du téléphone	string	-
displayClassName	Classes pour la zone d’affichage	string	-

Accessibilité

• La maquette de téléphone est décorative - le contenu à l’intérieur doit être accessible
• Les images à l’intérieur doivent avoir un attribut alt approprié
• Les éléments interactifs à l’intérieur restent entièrement accessibles