Skip to content

t-row

Row 行

组件介绍

行组件,一个flex-direction:row的容器,用于水平布局。

平台兼容

HarmonyH5AndroidiOS小程序UTS

基础用法

vue
<template>
  <view class="row-demo">
    <t-row>
      <view class="item">Item 1</view>
      <view class="item">Item 2</view>
      <view class="item">Item 3</view>
    </t-row>
    
    <t-row>
      <t-col span="12">Column 1</t-col>
      <t-col span="12">Column 2</t-col>
    </t-row>
  </view>
</template>

<style scoped>
.row-demo {
  padding: 40rpx;
}
.item {
  padding: 20rpx;
  background-color: #f0f0f0;
  margin: 10rpx;
}
</style>

Props

属性名类型默认值说明可选值
sizeString"medium"组件尺寸large, medium, small, mini
typeString"primary"组件类型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内容插槽,用于放置子元素