ApplePhone
The ApplePhone component simulates the appearance of an iPhone device, perfect for mobile UI prototyping.
Examples
基础用法
这是一个基础的 ApplePhone 窗口示例，展示了默认的外观和状态栏。
<script setup lang="ts">
import { ApplePhone } from '@coffic/cosy-ui/vue';
</script>
<template>
<ApplePhone>
<h3>基础用法</h3>
<p>这是一个基础的 ApplePhone 窗口示例，展示了默认的外观和状态栏。</p>
</ApplePhone>
</template>
Props
backgroundColor
Content area background color, equivalent to setting the background color for its internal Container. Supports preset semantic colors and opacity variants.
Primary 背景色
使用 primary 背景色的 ApplePhone 窗口。
Success 背景色
使用 success 背景色的 ApplePhone 窗口。
Warning 背景色
使用 warning 背景色的 ApplePhone 窗口。
透明度背景色
使用 primary/20 透明度背景色的 ApplePhone 窗口。
<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<ApplePhone backgroundColor="primary/30">
<Heading :level="4">Primary 背景色</Heading>
<p>使用 primary 背景色的 ApplePhone 窗口。</p>
</ApplePhone>
</template>
Primary 背景色
使用 primary 背景色的 ApplePhone 窗口。
Success 背景色
使用 success 背景色的 ApplePhone 窗口。
Warning 背景色
使用 warning 背景色的 ApplePhone 窗口。
透明度背景色
使用 primary/20 透明度背景色的 ApplePhone 窗口。
<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<ApplePhone backgroundColor="success">
<Heading :level="4">Success 背景色</Heading>
<p>使用 success 背景色的 ApplePhone 窗口。</p>
</ApplePhone>
</template>
Primary 背景色
使用 primary 背景色的 ApplePhone 窗口。
Success 背景色
使用 success 背景色的 ApplePhone 窗口。
Warning 背景色
使用 warning 背景色的 ApplePhone 窗口。
透明度背景色
使用 primary/20 透明度背景色的 ApplePhone 窗口。
<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<ApplePhone backgroundColor="warning">
<Heading :level="4">Warning 背景色</Heading>
<p>使用 warning 背景色的 ApplePhone 窗口。</p>
</ApplePhone>
</template>
Primary 背景色
使用 primary 背景色的 ApplePhone 窗口。
Success 背景色
使用 success 背景色的 ApplePhone 窗口。
Warning 背景色
使用 warning 背景色的 ApplePhone 窗口。
透明度背景色
使用 primary/20 透明度背景色的 ApplePhone 窗口。
<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<ApplePhone backgroundColor="primary/20">
<Heading :level="4">透明度背景色</Heading>
<p>使用 primary/20 透明度背景色的 ApplePhone 窗口。</p>
</ApplePhone>
</template>
height
Window height, supporting multiple predefined size options.
小尺寸
256px 高度
中等尺寸
320px 高度
大尺寸
384px 高度（默认）
超大尺寸
560px 高度
<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<ApplePhone height="sm">
<Heading :level="4">小尺寸</Heading>
<p>256px 高度</p>
</ApplePhone>
</template>
小尺寸
256px 高度
中等尺寸
320px 高度
大尺寸
384px 高度（默认）
超大尺寸
560px 高度
<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<ApplePhone height="md">
<Heading :level="4">中等尺寸</Heading>
<p>320px 高度</p>
</ApplePhone>
</template>
小尺寸
256px 高度
中等尺寸
320px 高度
大尺寸
384px 高度（默认）
超大尺寸
560px 高度
<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<ApplePhone height="lg">
<Heading :level="4">大尺寸</Heading>
<p>384px 高度（默认）</p>
</ApplePhone>
</template>
小尺寸
256px 高度
中等尺寸
320px 高度
大尺寸
384px 高度（默认）
超大尺寸
560px 高度
<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<ApplePhone height="2xl">
<Heading :level="4">超大尺寸</Heading>
<p>560px 高度</p>
</ApplePhone>
</template>
showFrame
Whether to show the iPhone frame, when set to false, only the content area is displayed.
带边框
显示完整的 iPhone 边框和状态栏
无边框
只显示内容区域，不显示 iPhone 边框
<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<ApplePhone :showFrame="true">
<Heading :level="4">带边框</Heading>
<p>显示完整的 iPhone 边框和状态栏</p>
</ApplePhone>
</template>
带边框
显示完整的 iPhone 边框和状态栏
无边框
只显示内容区域，不显示 iPhone 边框
<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<ApplePhone :showFrame="false">
<Heading :level="4">无边框</Heading>
<p>只显示内容区域，不显示 iPhone 边框</p>
</ApplePhone>
</template>
title
Window title, displayed as title text in the status bar.
窗口标题
这个示例展示了如何设置窗口标题。
注意：title 属性目前为预留功能，尚未在界面上显示
<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<ApplePhone title="我的应用">
<Heading :level="4">窗口标题</Heading>
<p style="margin: 0; color: #6b7280;">这个示例展示了如何设置窗口标题。</p>
<p style="margin: 0.5rem 0 0 0; color: #6b7280; font-size: 0.875rem;">
注意：title 属性目前为预留功能，尚未在界面上显示
</p>
</ApplePhone>
</template>
withShadow
Whether to show shadow effects, adding dimensionality to the iPhone window.
阴影效果
这个示例展示了如何启用阴影效果。
注意：withShadow 属性目前为预留功能，尚未实现
<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<ApplePhone :withShadow="true">
<Heading :level="4">阴影效果</Heading>
<p style="margin: 0; color: #6b7280;">这个示例展示了如何启用阴影效果。</p>
<p style="margin: 0.5rem 0 0 0; color: #6b7280; font-size: 0.875rem;">
注意：withShadow 属性目前为预留功能，尚未实现
</p>
</ApplePhone>
</template>
Slots
default
Main content area, used to place application interface content.
默认插槽内容
这是通过默认插槽放置的内容，可以包含任何 HTML 元素。
复杂布局内容
插槽可以包含复杂的布局结构，如 flex 布局、网格等。
表单示例
<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<ApplePhone>
<Heading :level="4">默认插槽内容</Heading>
<p>这是通过默认插槽放置的内容，可以包含任何 HTML 元素。</p>
</ApplePhone>
</template>
默认插槽内容
这是通过默认插槽放置的内容，可以包含任何 HTML 元素。
复杂布局内容
插槽可以包含复杂的布局结构，如 flex 布局、网格等。
表单示例
<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<ApplePhone>
<Heading :level="4">复杂布局内容</Heading>
<div style="display: flex; gap: 0.5rem; margin-bottom: 1rem;">
<div
style="background-color: #3b82f6; color: white; padding: 0.5rem; border-radius: 0.375rem; flex: 1; text-align: center;">
左侧内容
</div>
<div
style="background-color: #10b981; color: white; padding: 0.5rem; border-radius: 0.375rem; flex: 1; text-align: center;">
右侧内容
</div>
</div>
<p>插槽可以包含复杂的布局结构，如 flex 布局、网格等。</p>
</ApplePhone>
</template>
默认插槽内容
这是通过默认插槽放置的内容，可以包含任何 HTML 元素。
复杂布局内容
插槽可以包含复杂的布局结构，如 flex 布局、网格等。
表单示例
<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<ApplePhone>
<Heading :level="4">表单示例</Heading>
<div style="display: flex; flex-direction: column; gap: 0.5rem;">
<input type="text" placeholder="用户名"
style="padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem;" />
<input type="password" placeholder="密码"
style="padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem;" />
<button
style="background-color: #3b82f6; color: white; padding: 0.5rem; border: none; border-radius: 0.375rem; cursor: pointer;">
提交
</button>
</div>
</ApplePhone>
</template>