tmui4x 2.0(Vapor)

主题

TMUI4x2026-09-29
303
1.3m

步骤条子组件 xStepsItem ​

预览

介绍 ​

仅可直接放置在x-steps标签当作直接子接点

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-steps-item/x-steps-item.uvue

使用 ​

ts

<x-steps-item></x-steps-item>

Props 属性 ​

名称说明类型默认值
label标题
string""
desc辅助信息
string""
color未选中时的标题颜色
string""
activeColor激活时的颜色，默认空值取全局主题色。
string""
icon默认图标，空值时取父级设置的图标
string""
activeIcon激活时的图标，空值时取父级设置的图标
string""
iconSize图标大小，空值时取父级
string""
labelSize标题大小，空值时取父级
string""
descSize下面的小文字介绍大小
string""

Events 事件 ​

名称参数说明
click-点击时触发

Slots 插槽 ​

名称说明数据
default默认的文本节点插槽active: boolean

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/zhanshi/steps

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->

		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">步骤条 Steps</x-text>
			<x-text color="#999999" >可统一通过父级定制样式，也可单独通过子组件StepsItem来设置，灵活度高。统一设置时，样式不可变，原因在于Uniapp
				x目前暂不能传递可变值</x-text>
		</x-sheet>

		<x-sheet :padding="['0','12']">
			<x-steps :model-value="2">
				<x-steps-item desc="昨天付的" label="已付钱"></x-steps-item>
				<x-steps-item desc="还不错" label="快递准备"></x-steps-item>
				<x-steps-item desc="出题表" label="已送货"></x-steps-item>
				<x-steps-item desc="2023年3月24" label="已签收"></x-steps-item>
				<x-steps-item desc="2023年1月10" label="已签收"></x-steps-item>
			</x-steps>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b ">可交互，点击项目触发切换</x-text>
		</x-sheet>
		<x-sheet :padding="['0','12']">
			<x-steps v-model="setp" icon="checkbox-blank-circle-line" active-color="error"
				active-icon="radio-button-fill" :disabled="false">
				<x-steps-item desc="一般般" label="已付钱"></x-steps-item>
				<x-steps-item desc="还不错" label="快递准备"></x-steps-item>
				<x-steps-item desc="出题表" label="已送货"></x-steps-item>
				<x-steps-item desc="2023年3月24" label="已签收"></x-steps-item>
			</x-steps>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b ">竖向</x-text>
		</x-sheet>
		<x-sheet :padding="['0','12']">
			<x-steps :model-value="1" :vertical="true">
				<x-steps-item desc="错哦 新专辑要开始制作了" label="我是Jay"></x-steps-item>
				<x-steps-item label="2023新专辑"></x-steps-item>
				<x-steps-item label="呃!" desc="tmui4.0就是好用"></x-steps-item>
				<x-steps-item label="2023新专辑要开始制作了哇"></x-steps-item>
				
			</x-steps>
		</x-sheet>

		<x-sheet>
			<x-text font-size="18" class=" text-weight-b ">插槽定义</x-text>
		</x-sheet>
		<x-sheet :padding="['0','12']">
			<x-steps>
				<x-steps-item desc="哎呦~不错哦" label="我是Jay"></x-steps-item>
				<x-steps-item>
					<template v-slot:default="active">
						<x-sheet color="primary" :margin="['0']" :padding="['10']">
							<text class="text-size-m text-white">自定插槽</text>
						</x-sheet>
					</template>
				</x-steps-item>
				<x-steps-item label="2023新专辑要开始制作了哇"></x-steps-item>
			</x-steps>
		</x-sheet>

	<view style="height:80px"></view>

</template>

<script setup lang="ts">
	const setp = ref(2)
</script>

<style lang="scss">

</style>
最近更新