YTUI 2

API ​

NameDescTypeDefaultVue OnlyReact Only
layout设备方向，可选 x / yStringy
width设备的屏幕区域宽度String
height设备的屏幕区域高度String

Usage ​

08:57
4G5G89%
技术为先 质量为重 的前端开发外包 / 软件应用研发服务
先进的技术架构、易于维护的高质量代码、持续集成和持续交付，易他软件科技为你提供强有力的技术支撑。
  联系我们（本月可承接 1 项目）
  了解更多  
新项目技术选型 - YYYY/MM/DD
BE
Laravel / Next
FE
React / Vue
UI
YTUI / Tailwind
jsx
import { DeviceOneplus } from "ytui"
import Welcome from "ytui/templates/yitasoft/welcome"

export default () => (
  <div className="flex flex-row flex-wrap">
    <DeviceOneplus>
      <div className="h-full overflow-auto">
        <Welcome />
      </div>
    </DeviceOneplus>
  </div>
)

横纵切换 ​

08:57
4G5G89%
html
<div class="my-4 flex gap-4 justify-left">
  <Button @click="() => { layout = 'Y'}">设为纵向</Button>
  <Button @click="() => { layout = 'x'}">设为横向</Button>
</div>
<DeviceOneplus :layout="layout" />

自定义屏幕区域尺寸 ​

如下自定义了屏幕区域为 300x540 px，注意状态栏占高 40px，实际屏幕可用区域是 300x500 px：

08:57
4G5G89%
html
<DeviceOneplus width="300px" height="540px" />

自定义屏幕区域尺寸（全局） ​

默认的屏幕尺寸是 360x740 px，可通过设置以下 CSS 变量自定义全局屏幕尺寸：

css
:root {
  --device-oneplus-screen-width: 300px;
  --device-oneplus-screen-height: 540px;
}

可配合媒体查询，响应式调整宽高，让 Device 可以在有限的屏幕空间内展示完整：

css
@media (max-height: 1000px) {
  :root {
    --device-oneplus-screen-width: 300px;
    --device-oneplus-screen-height: 520px;
  }
}

等比缩放以应对空间不足的情况 ​

将设备等比缩放至 300x300 像素的区域内显示。

08:57
4G5G89%
html
<div class="h-[300px] w-[300px] flex items-center justify-center">
  <div class="w-fit h-fit origin-center" :style="{ transform: 'scale(calc(300 / calc(740 + 192)))'}">
    <DeviceOneplus />
  </div>
</div>

自定义背景 ​

可传入任意有效的 CSS background 属性值自定义背景。

  • 自定义的背景建议深色系。
  • 默认的背景与设备的立体投影方向形成呼应，推荐保持默认。
08:57
4G5G89%
jsx
<DeviceOneplus background="#454545" />