Vue
ApplePhone
ApplePhone 组件用于模拟 iPhone 设备的外观，适合移动端界面原型展示。
案例
12:00
基础用法
这是一个基础的 ApplePhone 窗口示例，展示了默认的外观和状态栏。
<script setup lang="ts">
import { ApplePhone } from '@coffic/cosy-ui/vue';
</script>
<template>
<ApplePhone>
<h3>基础用法</h3>
<p>这是一个基础的 ApplePhone 窗口示例，展示了默认的外观和状态栏。</p>
</ApplePhone>
</template>
Props
backgroundColor
内容区域背景色，等同于为其内部的 Container 设置背景色。支持预设的语义化颜色和透明度变体。
12:00
Primary 背景色
使用 primary 背景色的 ApplePhone 窗口。
12:00
Success 背景色
使用 success 背景色的 ApplePhone 窗口。
12:00
Warning 背景色
使用 warning 背景色的 ApplePhone 窗口。
12:00
透明度背景色
使用 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>
12:00
Primary 背景色
使用 primary 背景色的 ApplePhone 窗口。
12:00
Success 背景色
使用 success 背景色的 ApplePhone 窗口。
12:00
Warning 背景色
使用 warning 背景色的 ApplePhone 窗口。
12:00
透明度背景色
使用 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>
12:00
Primary 背景色
使用 primary 背景色的 ApplePhone 窗口。
12:00
Success 背景色
使用 success 背景色的 ApplePhone 窗口。
12:00
Warning 背景色
使用 warning 背景色的 ApplePhone 窗口。
12:00
透明度背景色
使用 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>
12:00
Primary 背景色
使用 primary 背景色的 ApplePhone 窗口。
12:00
Success 背景色
使用 success 背景色的 ApplePhone 窗口。
12:00
Warning 背景色
使用 warning 背景色的 ApplePhone 窗口。
12:00
透明度背景色
使用 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
窗口高度，支持多种预定义尺寸选项。
12:00
小尺寸
256px 高度
12:00
中等尺寸
320px 高度
12:00
大尺寸
384px 高度（默认）
12:00
超大尺寸
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>
12:00
小尺寸
256px 高度
12:00
中等尺寸
320px 高度
12:00
大尺寸
384px 高度（默认）
12:00
超大尺寸
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>
12:00
小尺寸
256px 高度
12:00
中等尺寸
320px 高度
12:00
大尺寸
384px 高度（默认）
12:00
超大尺寸
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>
12:00
小尺寸
256px 高度
12:00
中等尺寸
320px 高度
12:00
大尺寸
384px 高度（默认）
12:00
超大尺寸
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
是否显示 iPhone 边框，设置为 false 时只显示内容区域。
12:00
带边框
显示完整的 iPhone 边框和状态栏
12:00
无边框
只显示内容区域，不显示 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>
12:00
带边框
显示完整的 iPhone 边框和状态栏
12:00
无边框
只显示内容区域，不显示 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
窗口标题，显示在状态栏中的标题文本。
12:00
窗口标题
这个示例展示了如何设置窗口标题。
注意：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
是否显示阴影效果，为 iPhone 窗口添加立体感。
12:00
阴影效果
这个示例展示了如何启用阴影效果。
注意：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
主要内容区域，用于放置应用界面内容。
12:00
默认插槽内容
这是通过默认插槽放置的内容，可以包含任何 HTML 元素。
12:00
复杂布局内容
左侧内容
右侧内容
插槽可以包含复杂的布局结构，如 flex 布局、网格等。
12:00
表单示例
<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<ApplePhone>
<Heading :level="4">默认插槽内容</Heading>
<p>这是通过默认插槽放置的内容，可以包含任何 HTML 元素。</p>
</ApplePhone>
</template>
12:00
默认插槽内容
这是通过默认插槽放置的内容，可以包含任何 HTML 元素。
12:00
复杂布局内容
左侧内容
右侧内容
插槽可以包含复杂的布局结构，如 flex 布局、网格等。
12:00
表单示例
<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>
12:00
默认插槽内容
这是通过默认插槽放置的内容，可以包含任何 HTML 元素。
12:00
复杂布局内容
左侧内容
右侧内容
插槽可以包含复杂的布局结构，如 flex 布局、网格等。
12:00
表单示例
<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>