Skip to content

t-gap

Gap 间隔

组件介绍

间隔槽组件,提供空白区域,帮助内容元素更好地对齐和分布,用于在页面中创建视觉间隔。

平台兼容

HarmonyH5AndroidiOS小程序UTS

基础用法

vue
<template>
  <view class="container">
    <t-text class="title">第一部分内容</t-text>
    <t-gap></t-gap>
    <t-text class="title">第二部分内容</t-text>
    <t-gap></t-gap>
    <t-text class="title">第三部分内容</t-text>
  </view>
</template>

<style scoped>
.container {
  padding: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
}
</style>

Props

属性名类型默认值说明可选值
sizeString"medium"组件尺寸large, medium, small, mini
typeString""组件类型info, primary, error, warning, success
disabledBooleanfalse组件是否禁用true, false
hoverBooleanfalse是否有点击效果true, false
pathString""点击组件后跳转的页面路径-
effectString"normal"组件显示主题normal, dark, light, plain

Events

事件名说明回调参数
click点击时触发-
transitionend动画结束时触发-
initFinished组件初始化完成触发组件的节点信息
touchstart触摸开始时触发触摸事件对象
touchend触摸结束时触发触摸事件对象
touchmove触摸移动时触发触摸事件对象
touchcancel触摸取消时触发触摸事件对象

Slots

插槽名说明
default自定义内容插槽