API

Name	Desc	Type	Default
title	浮层标题	String
renderTitle	标题区域的渲染函数	(currentState) => Element	一个经调优以最大化适配浮层样式的 Button
renderMain	主体内容的渲染函数	(currentState) => Element
initialState	控制 Layer 的初始状态，后续状态将由组件自我管理，外部不可干预	String	min

Usage

父容器要求

Layer 的父容器必须 relative 且 overflow-hidden。

基本用法

浮层切换

利用浮层标题实现按钮和浮层之间的平滑转换。

浮层不能凭空出现。必须是用户主动与 UI 交互后的产物。此处按钮的点击与浮层的打开形成了因果关系。

[email protected]
易他软件科技

import { Layer, DesignDemo } from 'ytui'

export default () => (
  <DesignDemo>
    <div
      className={`
        m-8 relative min-w-[328px] min-h-[528px] w-[328px] h-[528px] overflow-hidden p-6 rounded-[32px] 
        text-[--c-text-1] bg-[--c-bg] border-4 border-inset border-[--c-border]
      `}
      style={{
        resize: 'both'
      }}
    >
      <h3>浮层切换</h3>
      <p>利用浮层标题实现按钮和浮层之间的平滑转换。</p>
      <p>
        浮层不能凭空出现。必须是用户主动与 UI
        交互后的产物。此处按钮的点击与浮层的打开形成了因果关系。
      </p>
      <p></p>
      <Layer
        layout="auto"
        initialState={'min'}
        title="联系我们"
        renderMain={() => (
          <div className="py-20 text-center">[email protected]<br/>易他软件科技</div>
        )}
      ></Layer>
    </div>
  </DesignDemo>
)

自定义浮层标题区域

传入 renderTitle 可自定义渲染整个标题区域。renderTitle 优先级高于 title，此时 title 将会被忽略。

缺省此渲染函数时，会使用默认状态的 Button 组件来渲染 title 纯文本标题。

YITASOFT

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

[email protected]
易他软件科技

import { Layer, DesignDemo, Button } from 'ytui'

export default () => (
  <DesignDemo>
    <div
      className={`
        m-8 relative w-[328px] h-[528px] overflow-hidden p-6 rounded-[32px] 
        text-[--c-text-1] bg-[--c-bg] border-4 border-inset border-[--c-border]
      `}
    >
      <h3>YITASOFT</h3>
      <p>
        先进的技术架构、易于维护的高质量代码、持续集成和持续交付。易他软件科技为你提供强有力的技术支撑。
      </p>
      <div class="h-40"></div>
      <Layer
        initialState={'max'}
        className="!w-full"
        title="联系我们"
        renderTitle={(currentState) => (
          <div
            class="transition-all duration-[300ms]"
            style={{ transformOrigin: '0 0', transform: currentState === 'max' ? 'scale(0.8)' : 'scale(1)' }}
          >
            <Button
              className='w-full'
              size={40}
              scheme={
                currentState === 'max' ? 'secondary-solid' : 'secondary-solid'
              }
              shape={'pill'}
              children={
                <>
                  &nbsp;&nbsp;联系我们（本月可承接
                  <span className="text-light-theme-accent font-bold">
                    &nbsp;1&nbsp;
                  </span>
                  项目）
                </>
              }
            ></Button>
          </div>
        )}
        renderMain={() => (
          <div className="py-20 text-center">
            [email protected]
            <br />
            易他软件科技
          </div>
        )}
      ></Layer>
    </div>
  </DesignDemo>
)