YTUI 2

API

Name	Desc	Type	Default	Vue Only
renderDemo	内容渲染函数。可自行根据接收到的 layout 值 ('x' or 'y') 生成指定布局下的内容。	(layout) => Element
renderFooter	底部区域渲染函数。	() => Element	Button - Read Docs
default/demo	内容插槽（作用域插槽）。可通过 v-slot="{ layout }" 取得 layout 值，具体使用方式见示例。	Slot		true
footer	底部区域插槽。	Slot		true

Usage

纵向布局Layout Y

技术为先质量为重的前端开发外包 / 软件应用研发服务

先进的技术架构、易于维护的高质量代码、持续集成和持续交付，易他软件科技为你提供强有力的技术支撑。

联系我们（本月可承接 1 项目）

了解更多

新项目技术选型 - YYYY/MM/DD

Laravel / Next

React / Vue

YTUI / Tailwind

横向布局Layout X

技术为先质量为重的前端开发外包 / 软件应用研发服务

先进的技术架构、易于维护的高质量代码、持续集成和持续交付，易他软件科技为你提供强有力的技术支撑。

联系我们（本月可承接 1 项目）

了解更多

新项目技术选型 - YYYY/MM/DD

Laravel / Next

React / Vue

YTUI / Tailwind

电脑版布局Layout PC

技术为先质量为重的前端开发外包 / 软件应用研发服务

先进的技术架构、易于维护的高质量代码、持续集成和持续交付，易他软件科技为你提供强有力的技术支撑。

联系我们（本月可承接 1 项目）

了解更多

新项目技术选型 - YYYY/MM/DD

Laravel / Next

React / Vue

YTUI / Tailwind

INFO

Layout | Size (Scale)

x | 720x480 (0.76)

y | 320x480 (0.45)

pc | 1280x720 (0.70)

Vue SFCVue/React JSX

vue

<template>
  <!-- 使用作用域插槽，子组件的 layout 值由 Demo 控制 -->
  
  <!-- 默认插槽最简用法 -->
  <DesignLayout v-slot="{ layout }">
    <Welcome :layout="layout"/>
  </DesignLayout>

  <!-- 具名作用域插槽 -->
  <DesignLayout>
    <template v-slot:demo="{ layout }">
      <Welcome :layout="layout" />
    </template>
    <template v-slot:footer>
      <p>Footer Area<p>
    </template>
  </DesignLayout>

</template>

jsx

/* 传入渲染函数，子组件的 layout 值由 Demo 控制 */
<DesignLayout renderDemo={({ layout }) => (
  <Welcome layout={layout} />
)} />

API ​

Usage ​

API

Usage