YTUI 2

Box 盒子 ​

示例 ​

A - 最简用法 ​

默认（什么都不传）。

Resident Content
Main Content
html
<Box />

O - 展开时的起始位置 ​

  • 根据 YTUI 设计原则，关闭按钮永远在右上方。
  • 为保证效果，当 origin 的值为 center-center 时，size 不可使用百分比 %，必须将 size 设置为 px / rem / vw 等绝对单位。
View Code
vue
<script setup>
import { Box } from "ytui";
</script>
<template>
  <div class="w-full overflow-x-auto p-6 bg-base">
    <div class="min-w-[600px] flex flex-col justify-between gap-[200px]">
      <div class="flex justify-between">
        <Box origin="top-left">
          <template #resident> top-left </template>
          <template #main>
            <div class="h-full bg-area"></div>
          </template>
        </Box>

        <Box origin="top-center">
          <template #resident> top-center </template>
          <template #main>
            <div class="h-full bg-area"></div>
          </template>
        </Box>

        <Box origin="top-right">
          <template #resident> top-right </template>
          <template #main>
            <div class="h-full bg-area"></div>
          </template>
        </Box>
      </div>
      <div class="flex justify-center">
        <Box size="200px" origin="center-center">
          <template #resident> center-center </template>
          <template #main>
            <div class="h-full bg-area"></div>
          </template>
        </Box>
      </div>
      <div class="flex justify-between">
        <Box origin="bottom-left">
          <template #resident> bottom-left </template>
          <template #main>
            <div class="h-full bg-area"></div>
          </template>
        </Box>

        <Box origin="bottom-center">
          <template #resident> bottom-center </template>
          <template #main>
            <div class="h-full bg-area"></div>
          </template>
        </Box>

        <Box origin="bottom-right">
          <template #resident> bottom-right </template>
          <template #main>
            <div class="h-full bg-area"></div>
          </template>
        </Box>
      </div>
    </div>
  </div>
</template>