<template>
<zk-theme type="page" :padding="30" showBack navbarTitle="text文本">
<!-- 基础用法 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础用法" />
<view class="text-row">
<zk-text text="默认文本" margin="0 0 20rpx 0" />
<zk-text text="主要文本" type="primary" margin="0 0 20rpx 0" />
<zk-text text="成功文本" type="success" margin="0 0 20rpx 0" />
<zk-text text="警告文本" type="warning" margin="0 0 20rpx 0" />
<zk-text text="危险文本" type="danger" margin="0 0 20rpx 0" />
<zk-text text="信息文本" type="info" margin="0 0 20rpx 0" />
</view>
</zk-theme>
<!-- 文字大小 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="文字大小" />
<view class="text-row">
<zk-text text="24rpx文字" :size="24" margin="0 0 20rpx 0" />
<zk-text text="28rpx文字" :size="28" margin="0 0 20rpx 0" />
<zk-text text="32rpx文字" :size="32" margin="0 0 20rpx 0" />
<zk-text text="36rpx文字" :size="36" margin="0 0 20rpx 0" />
<zk-text text="40rpx文字" :size="40" margin="0 0 20rpx 0" />
</view>
</zk-theme>
<!-- 文字粗细 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="文字粗细" />
<view class="text-row">
<zk-text text="正常文字" margin="0 0 20rpx 0" />
<zk-text text="加粗文字" bold margin="0 0 20rpx 0" />
</view>
</zk-theme>
<!-- 文字装饰 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="文字装饰" />
<view class="text-row">
<zk-text text="下划线文字" decoration="underline" margin="0 0 20rpx 0" />
<zk-text text="删除线文字" decoration="line-through" margin="0 0 20rpx 0" />
</view>
</zk-theme>
<!-- 文本对齐 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="文本对齐" />
<view class="text-row">
<zk-text text="左对齐文本" align="left" margin="0 0 20rpx 0" block />
<zk-text text="居中文本" align="center" margin="0 0 20rpx 0" block />
<zk-text text="右对齐文本" align="right" margin="0 0 20rpx 0" block />
</view>
</zk-theme>
<!-- 文本截断 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="文本截断" />
<view class="text-row">
<zk-text text="这是一段很长的文本,超过一行会自动截断,这是一段很长的文本,超过一行会自动截断" :lines="1" margin="0 0 20rpx 0" block />
<zk-text text="这是一段很长的文本,最多显示两行,超过会自动截断,这是一段很长的文本,最多显示两行,超过会自动截断,这是一段很长的文本,最多显示两行,超过会自动截断" :lines="2"
margin="0 0 20rpx 0" block />
<zk-text text="这是一段很长的文本,最多显示三行,超过会自动截断,这是一段很长的文本,最多显示两行,超过会自动截断,这是一段很长的文本,最多显示两行,超过会自动截断" :lines="3"
margin="0 0 20rpx 0" block />
</view>
</zk-theme>
</zk-theme>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.text-row {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
</style>