ApplePhone

---



import { ApplePhone } from "@coffic/cosy-ui";
---

<ApplePhone title="我的应用">
    <div class="cosy:p-4 cosy:text-center">
        <h2 class="cosy:text-xl cosy:font-bold">欢迎使用</h2>
        <p class="cosy:mt-2">这是一个示例应用内容</p>
    </div>
</ApplePhone>

---



import { ApplePhone } from "@coffic/cosy-ui";
---

<ApplePhone title="长文本示例(无边框)" showFrame={false}>
    <div class="cosy:p-4 cosy:text-left">
        <h2 class="cosy:text-xl cosy:font-bold cosy:mb-4">长文本内容展示</h2>
        <p class="cosy:mb-3">
            这是一个展示长文本内容的示例。在这个示例中，我们将展示大量文本内容在
            ApplePhone 组件中的渲染效果。
        </p>
        <p class="cosy:mb-3">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
        </p>
        <p class="cosy:mb-3">
            Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum.
        </p>
        <p class="cosy:mb-3">
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem
            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
            quae ab illo inventore veritatis et quasi architecto beatae vitae
            dicta sunt explicabo.
        </p>
        <p class="cosy:mb-3">
            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
            fugit, sed quia consequuntur magni dolores eos qui ratione
            voluptatem sequi nesciunt.
        </p>
        <p class="cosy:mb-3">
            Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
            consectetur, adipisci velit, sed quia non numquam eius modi tempora
            incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
        </p>
        <p class="cosy:mb-3">
            Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
            suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
            autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
            nihil molestiae consequatur.
        </p>
        <p class="cosy:mb-3">
            At vero eos et accusamus et iusto odio dignissimos ducimus qui
            blanditiis praesentium voluptatum deleniti atque corrupti quos
            dolores et quas molestias excepturi sint occaecati cupiditate non
            provident.
        </p>
        <p class="cosy:mb-3">
            Similique sunt in culpa qui officia deserunt mollitia animi, id est
            laborum et dolorum fuga. Et harum quidem rerum facilis est et
            expedita distinctio.
        </p>
        <p class="cosy:mb-3">
            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
            impedit quo minus id quod maxime placeat facere possimus, omnis
            voluptas assumenda est, omnis dolor repellendus.
        </p>
        <p class="cosy:mb-3">
            Temporibus autem quibusdam et aut officiis debitis aut rerum
            necessitatibus saepe eveniet ut et voluptates repudiandae sint et
            molestiae non recusandae.
        </p>
        <p class="cosy:mb-3">
            Itaque earum rerum hic tenetur a sapiente delectus, ut aut
            reiciendis voluptatibus maiores alias consequatur aut perferendis
            doloribus asperiores repellat.
        </p>
        <p class="cosy:mb-3">
            这是最后一段文本内容，用于测试滚动效果和组件在大量文本内容下的表现。
        </p>
    </div>
</ApplePhone>

---



import { ApplePhone } from "@coffic/cosy-ui";
---

<ApplePhone title="长文本示例(有边框)" showFrame={true}>
    <div class="cosy:p-4 cosy:text-left">
        <h2 class="cosy:text-xl cosy:font-bold cosy:mb-4">长文本内容展示</h2>
        <p class="cosy:mb-3">
            这是一个展示长文本内容的示例。在这个示例中，我们将展示大量文本内容在
            ApplePhone 组件中的渲染效果。
        </p>
        <p class="cosy:mb-3">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
        </p>
        <p class="cosy:mb-3">
            Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum.
        </p>
        <p class="cosy:mb-3">
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem
            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
            quae ab illo inventore veritatis et quasi architecto beatae vitae
            dicta sunt explicabo.
        </p>
        <p class="cosy:mb-3">
            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
            fugit, sed quia consequuntur magni dolores eos qui ratione
            voluptatem sequi nesciunt.
        </p>
        <p class="cosy:mb-3">
            Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
            consectetur, adipisci velit, sed quia non numquam eius modi tempora
            incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
        </p>
        <p class="cosy:mb-3">
            Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
            suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
            autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
            nihil molestiae consequatur.
        </p>
        <p class="cosy:mb-3">
            At vero eos et accusamus et iusto odio dignissimos ducimus qui
            blanditiis praesentium voluptatum deleniti atque corrupti quos
            dolores et quas molestias excepturi sint occaecati cupiditate non
            provident.
        </p>
        <p class="cosy:mb-3">
            Similique sunt in culpa qui officia deserunt mollitia animi, id est
            laborum et dolorum fuga. Et harum quidem rerum facilis est et
            expedita distinctio.
        </p>
        <p class="cosy:mb-3">
            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
            impedit quo minus id quod maxime placeat facere possimus, omnis
            voluptas assumenda est, omnis dolor repellendus.
        </p>
        <p class="cosy:mb-3">
            Temporibus autem quibusdam et aut officiis debitis aut rerum
            necessitatibus saepe eveniet ut et voluptates repudiandae sint et
            molestiae non recusandae.
        </p>
        <p class="cosy:mb-3">
            Itaque earum rerum hic tenetur a sapiente delectus, ut aut
            reiciendis voluptatibus maiores alias consequatur aut perferendis
            doloribus asperiores repellat.
        </p>
        <p class="cosy:mb-3">
            这是最后一段文本内容，用于测试滚动效果和组件在大量文本内容下的表现。
        </p>
    </div>
</ApplePhone>

<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
    <ApplePhone title="我的应用">
        <div class="cosy:p-4 cosy:text-center">
            <Heading :level="4">欢迎使用</Heading>
            <p class="cosy:mt-2">这是一个示例应用内容</p>
        </div>
    </ApplePhone>
</template>

<script setup lang="ts">
import { ApplePhone } from '@coffic/cosy-ui/vue';
</script>
<template>
    <ApplePhone title="长文本示例(无边框)" :showFrame="false">
        <div class="cosy:p-4 cosy:text-left">
            <h2 class="cosy:text-xl cosy:font-bold cosy:mb-4">长文本内容展示</h2>
            <p class="cosy:mb-3">
                这是一个展示长文本内容的示例。在这个示例中，我们将展示大量文本内容在
                ApplePhone 组件中的渲染效果。
            </p>
            <p class="cosy:mb-3">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.
            </p>
            <p class="cosy:mb-3">
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                dolore eu fugiat nulla pariatur.
            </p>
        </div>
    </ApplePhone>
</template>

<script setup lang="ts">
import { ApplePhone } from '@coffic/cosy-ui/vue';
</script>
<template>
    <ApplePhone title="长文本示例(有边框)" :showFrame="true">
        <div class="cosy:p-4 cosy:text-left">
            <h2 class="cosy:text-xl cosy:font-bold cosy:mb-4">长文本内容展示</h2>
            <p class="cosy:mb-3">
                这是一个展示长文本内容的示例。在这个示例中，我们将展示大量文本内容在
                ApplePhone 组件中的渲染效果。
            </p>
            <p class="cosy:mb-3">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.
            </p>
            <p class="cosy:mb-3">
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                dolore eu fugiat nulla pariatur.
            </p>
        </div>
    </ApplePhone>
</template>

---



import { ApplePhone } from "@coffic/cosy-ui";
---

<ApplePhone backgroundColor="primary/10" title="主要色背景">
    <div class="cosy:p-4 cosy:text-center">
        <h2 class="cosy:text-xl cosy:font-bold">主要色背景</h2>
        <p class="cosy:mt-2">这是一个使用主要色背景的示例</p>
    </div>
</ApplePhone>

---



import { ApplePhone } from "@coffic/cosy-ui";
---

<ApplePhone backgroundColor="success/10" title="成功色背景">
    <div class="cosy:p-4 cosy:text-center">
        <h2 class="cosy:text-xl cosy:font-bold">成功色背景</h2>
        <p class="cosy:mt-2">这是一个使用成功色背景的示例</p>
    </div>
</ApplePhone>

---



import { ApplePhone } from "@coffic/cosy-ui";
---

<ApplePhone backgroundColor="warning/10" title="警告色背景">
    <div class="cosy:p-4 cosy:text-center">
        <h2 class="cosy:text-xl cosy:font-bold">警告色背景</h2>
        <p class="cosy:mt-2">这是一个使用警告色背景的示例</p>
    </div>
</ApplePhone>

<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
    <ApplePhone backgroundColor="primary/10">
        <Heading :level="4">Primary 背景</Heading>
        <p>使用 primary/10 背景色</p>
    </ApplePhone>
</template>

<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
    <ApplePhone backgroundColor="success/10">
        <Heading :level="4">Success 背景</Heading>
        <p>使用 success/10 背景色</p>
    </ApplePhone>
</template>

<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
    <ApplePhone backgroundColor="warning/10">
        <Heading :level="4">Warning 背景</Heading>
        <p>使用 warning/10 背景色</p>
    </ApplePhone>
</template>

---



import { ApplePhone } from "@coffic/cosy-ui";
---

<ApplePhone height="sm" title="小尺寸">
    <div class="cosy:p-2 cosy:text-center">
        <p class="cosy:text-sm">小尺寸内容</p>
    </div>
</ApplePhone>

---



import { ApplePhone } from "@coffic/cosy-ui";
---

<ApplePhone height="md" title="中等尺寸">
    <div class="cosy:p-3 cosy:text-center">
        <p class="cosy:text-sm">中等尺寸内容</p>
    </div>
</ApplePhone>

---



import { ApplePhone } from "@coffic/cosy-ui";
---

<ApplePhone height="lg" title="默认尺寸">
    <div class="cosy:p-4 cosy:text-center">
        <p class="cosy:text-base">默认尺寸内容</p>
    </div>
</ApplePhone>

---



import { ApplePhone } from "@coffic/cosy-ui";
---

<ApplePhone height="xl" title="大尺寸">
    <div class="cosy:p-5 cosy:text-center">
        <p class="cosy:text-lg">大尺寸内容</p>
    </div>
</ApplePhone>

---



import { ApplePhone } from "@coffic/cosy-ui";
---

<ApplePhone height="2xl" title="超大尺寸">
    <div class="cosy:p-6 cosy:text-center">
        <p class="cosy:text-xl">超大尺寸内容</p>
    </div>
</ApplePhone>

<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>

<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>

<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>

<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
    <ApplePhone height="xl">
        <Heading :level="4">超大尺寸</Heading>
        <p>480px 高度</p>
    </ApplePhone>
</template>

<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
    <ApplePhone height="2xl">
        <Heading :level="4">2XL 尺寸</Heading>
        <p>560px 高度</p>
    </ApplePhone>
</template>

---



import { ApplePhone } from "@coffic/cosy-ui";
---

<ApplePhone showFrame={true} title="显示边框">
    <div class="cosy:p-4 cosy:text-center">
        <h2 class="cosy:text-xl cosy:font-bold">显示边框</h2>
        <p class="cosy:mt-2">这是显示 iPhone 边框的示例</p>
    </div>
</ApplePhone>

---



import { ApplePhone } from "@coffic/cosy-ui";
---

<ApplePhone showFrame={false} title="隐藏边框">
    <div class="cosy:p-4 cosy:text-center">
        <h2 class="cosy:text-xl cosy:font-bold">隐藏边框</h2>
        <p class="cosy:mt-2">这是隐藏 iPhone 边框的示例</p>
    </div>
</ApplePhone>

<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>

<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
    <ApplePhone :showFrame="false">
        <Heading :level="4">无边框</Heading>
        <p>只显示内容区域</p>
    </ApplePhone>
</template>

---
import { ApplePhone } from '@coffic/cosy-ui';
---

<ApplePhone title="自定义标题">
	<div class="cosy:p-4 cosy:text-center">
		<h2 class="cosy:text-xl cosy:font-bold">应用内容</h2>
		<p class="cosy:mt-2">标题显示在状态栏中</p>
	</div>
</ApplePhone>

---
import { ApplePhone } from '@coffic/cosy-ui';
---

<ApplePhone>
	<div class="cosy:p-4 cosy:text-center">
		<h2 class="cosy:text-xl cosy:font-bold">应用内容</h2>
		<p class="cosy:mt-2">未设置标题</p>
	</div>
</ApplePhone>

<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
    <ApplePhone title="自定义标题">
        <Heading :level="4">应用内容</Heading>
        <p>标题显示在状态栏中</p>
    </ApplePhone>
</template>

<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
    <ApplePhone>
        <Heading :level="4">应用内容</Heading>
        <p>未设置标题</p>
    </ApplePhone>
</template>

---
import { ApplePhone } from '@coffic/cosy-ui';
---

<ApplePhone withShadow={true}>
	<div class="cosy:p-4 cosy:text-center">
		<h2 class="cosy:text-xl cosy:font-bold">带阴影效果</h2>
		<p class="cosy:mt-2">iPhone 窗口带有阴影效果</p>
	</div>
</ApplePhone>

---
import { ApplePhone } from '@coffic/cosy-ui';
---

<ApplePhone withShadow={false}>
	<div class="cosy:p-4 cosy:text-center">
		<h2 class="cosy:text-xl cosy:font-bold">无阴影效果</h2>
		<p class="cosy:mt-2">iPhone 窗口没有阴影</p>
	</div>
</ApplePhone>

<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
    <ApplePhone :withShadow="true">
        <Heading :level="4">带阴影效果</Heading>
        <p>iPhone 窗口带有阴影效果</p>
    </ApplePhone>
</template>

<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
    <ApplePhone :withShadow="false">
        <Heading :level="4">无阴影效果</Heading>
        <p>iPhone 窗口没有阴影</p>
    </ApplePhone>
</template>

---



import { ApplePhone } from "@coffic/cosy-ui";
---

<ApplePhone title="基本内容">
    <div class="cosy:p-4 cosy:text-center">
        <h2 class="cosy:text-xl cosy:font-bold">基本内容</h2>
        <p class="cosy:mt-2">这是放置在 default slot 中的内容</p>
    </div>
</ApplePhone>

---



import { ApplePhone } from "@coffic/cosy-ui";
---

<ApplePhone title="复杂内容">
    <div class="cosy:h-full cosy:flex cosy:flex-col">
        <header class="cosy:p-4 cosy:bg-primary/10 cosy:text-center">
            <h2 class="cosy:text-lg cosy:font-bold">应用头部</h2>
        </header>
        <main class="cosy:flex-1 cosy:p-4 cosy:overflow-auto">
            <p>这是应用的主要内容区域。</p>
            <p class="cosy:mt-2">可以放置任何复杂的 UI 组件。</p>
        </main>
        <footer
            class="cosy:p-2 cosy:bg-accent/10 cosy:text-center cosy:text-sm">
            底部栏
        </footer>
    </div>
</ApplePhone>

<script setup lang="ts">
import { ApplePhone, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
  <ApplePhone title="基本内容">
    <div class="cosy:p-4 cosy:text-center">
      <Heading :level="4">基本内容</Heading>
      <p class="cosy:mt-2">这是放置在 default slot 中的内容</p>
    </div>
  </ApplePhone>
</template>

<script setup lang="ts">
import { ApplePhone } from '@coffic/cosy-ui/vue';
</script>
<template>
  <ApplePhone title="复杂内容">
    <div class="cosy:h-full cosy:flex cosy:flex-col">
      <header class="cosy:p-4 cosy:bg-primary/10 cosy:text-center">
        <h2 class="cosy:text-lg cosy:font-bold">应用头部</h2>
      </header>
      <main class="cosy:flex-1 cosy:p-4 cosy:overflow-auto">
        <p>这是应用的主要内容区域。</p>
        <p class="cosy:mt-2">可以放置任何复杂的 UI 组件。</p>
      </main>
      <footer class="cosy:p-2 cosy:bg-accent/10 cosy:text-center cosy:text-sm">
        底部栏
      </footer>
    </div>
  </ApplePhone>
</template>