Tantalum UI

Appearance

Return to top
On this page

Fixed 固定布局

vue
<template>
  <ta-group title="基本用法">
    <ta-fixed>
      <div class="exp-fixed-box">
        <ta-button type="primary">固定布局</ta-button>
      </div>
    </ta-fixed>
  </ta-group>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ExpFixed'
})
</script>

Import

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

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

Props

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

注：

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

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

Slots

底部（#default）

vue
<ta-fixed placement="bottom">固定内容</ta-fixed>