Tantalum UI

Fixed 固定布局 

import { TaFixed, TaButton, TaGroup } from '@/index'
import { useState } from 'react'

export default function ExpFixed() {
  const [fixed, setFixed] = useState(true)

  return (
    <>
      <TaGroup title="基本用法">
        <TaFixed fixed={fixed}>
          <div className="exp-fixed-box">
            <TaButton type="primary" onClick={() => setFixed(!fixed)}>
              {fixed ? '点击取消固定' : '点击固定布局'}
            </TaButton>
          </div>
        </TaFixed>
      </TaGroup>
    </>
  )
}

Import 

import { TaFixed } from 'tantalum-ui-mobile-react'

具体的引入方式可以参考引入组件。

Props

属性类型默认值必填说明
placementPlacementType'bottom'否固定位置，可选 'bottom', 'top', 'left', 'right'
backgroundstring否固定背景色，同 CSS 值
zIndexnumber1否设定固定的 zIndex
spaceHoldbooleantrue否是否预留占位元素，开启后元素位置预留跟固定元素一样大小的占位元素，防止挡住其他元素
enableSafeAreaInsetsbooleantrue否是否开启安全区适配

注：

在 iPhoneX 等机型开启 enableSafeAreaInsets，需要在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>

Slots

底部（children） 

<TaFixed placement="bottom">固定内容</TaFixed>