文本展示 KLText

大小扩展

通过设置size值控制文本字体大小

示例：
<kl-text size="xs" text="超小号文本"></kl-text>
<kl-text size="sm" text="小号文本"></kl-text>
<kl-text text="正常文本"></kl-text>
<kl-text size="lg" text="大号文本"></kl-text>
<kl-text size="xl" text="超大号文本"></kl-text>

类型扩展

通过设置type值控制文本显示不同类型

示例：
<kl-text type="default" text="Default"></kl-text>
<kl-text type="primary" text="Primary"></kl-text>
<kl-text type="success" text="Success"></kl-text>
<kl-text type="warning" text="Warning"></kl-text>
<kl-text type="error" text="Error"></kl-text>
<kl-text type="inverse" text="Inverse" class="s-bg-dark"></kl-text>
<kl-text type="muted" text="Muted"></kl-text>

加粗

通过设置isBold值控制文本字体是否加粗

false: 不加粗
true: 加粗

示例：
<kl-text  text="正常文本"></kl-text>
<kl-text isBold={true} text="加粗文本"></kl-text>

水平对齐

通过指定align值来控制文字垂直方向的排列规则

left:左对齐
center: 居中对齐
right: 右对齐

示例：
<kl-text align="left" text="左对齐"></kl-text>
<kl-text align="center" text="居中对齐"></kl-text>
<kl-text align="right" text="右对齐"></kl-text>

垂直对齐

通过指定vertical值来控制文字垂直方向的排列规则

top:顶部对齐
middle: 垂直居中
bottom: 底部对齐

示例：
<kl-text vertical="top" text="顶部对齐"></kl-text>
<kl-text vertical="middle" text="垂直居中"></kl-text>
<kl-text vertical="bottom" text="底部对齐"></kl-text>

链接显示

通过设置url把文本变成链接显示

示例：<kl-text url="http://www.kaola.com"  target="_blank" text="跳转至考拉首页"></kl-text>

API

KLText

Param	Type	Default	Description
[options.data]	`object`		= 绑定属性
[options.data.text]	`string`	`"文本"`	<=> 内容
[options.data.size]	`string`		=> text大小取值：xs、sm、lg、xl
[options.data.isBold]	`boolean`	`false`	=> 是否加粗取值：true-加粗、false-不加粗
[options.data.align]	`string`		=> 左右对齐方式取值：left、center、right
[options.data.vertical]	`string`		=> 上下对齐方式取值：top、middle、bottom
[options.data.type]	`string`	`"default"`	=> 文本样式取值：default、primary、success、warning、error、inverse、muted
[options.dara.class]	`string`		=> 自定义class
[options.data.url]	`string`	`"javascript:;"`	=>连接的url 值为“javascript:”表示非链接文本
[options.data.target]	`string`		=> a标签的target属性取值：_blank、_self、_parent、_top