分割线 Divider

用于将内容分隔为多个区域

使用

API

安装使用

import { TiDivider } from '@titian-design/mobile-vue'

用法示例

单独使用

codesanbox

copy

code

<template>
  <TiDivider />
</template>

<script lang="ts" setup>
import { TiDivider } from 'titian-h5-vue';
</script>

对齐方式

居左居中居右

codesanbox

copy

code

<template>
  <div class="code-container">
    <TiDivider color="rgba(0, 0, 0, 0.90);" textAlign="left"> 居左 </TiDivider>
    <TiDivider color="rgba(0, 0, 0, 0.90);" textAlign="center"> 居中 </TiDivider>
    <TiDivider color="rgba(0, 0, 0, 0.90);" textAlign="right"> 居右 </TiDivider>
  </div>
</template>

<script lang="ts" setup>
import { TiDivider } from 'titian-h5-vue';
</script>

分割线方向

codesanbox

copy

code

<template>
  <div class="code-container" style="gap: 40px">
    <TiDivider orientation="horizontal" />
    <TiDivider orientation="vertical" />
  </div>
</template>

<script lang="ts" setup>
import { TiDivider } from 'titian-h5-vue';
</script>

分割线风格

codesanbox

copy

code

<template>
  <div class="code-container" style="gap: 40px">
    <TiDivider />
    <TiDivider dashed />
  </div>
</template>

<script lang="ts" setup>
import { TiDivider } from 'titian-h5-vue';
</script>

分割线颜色

文字文字文字

codesanbox

copy

code

<template>
  <div class="code-container">
    <TiDivider color="red">文字</TiDivider>
    <TiDivider color="red" borderColor="#2A6AE9"> 文字 </TiDivider>
    <TiDivider
      color="red"
      borderColor="linear-gradient(270deg, #FA2C19 0%, rgba(255, 255, 255, 0.00) 99.69%)"
      :borderWidth="6"
    >
      文字
    </TiDivider>
  </div>
</template>

<script lang="ts" setup>
import { TiDivider } from 'titian-h5-vue';
</script>

分割线厚度

codesanbox

copy

code

<template>
  <TiDivider :borderWidth="6" />
</template>

<script lang="ts" setup>
import { TiDivider } from 'titian-h5-vue';
</script>

TiDivider API

属性 Properties

名称	类型	必填	默认值	说明	备注
dashed	boolean	否	false	虚线	-
hairline	boolean	否	false	发丝线	-
text-align	string	否	center	文本位置，可选值 left center right	-
color	string	否	-	颜色，包括分割线和文字	-
border-color	string	否	-	分割线颜色	-
border-width	number	否	2	分割线厚度	-
orientation	string	否	horizontal	分割线方向，可选值horizontal vertical	-
ext-style	string | Record<string, string>	否	-	根节点样式	-

插槽 Slots

名称	说明	备注
default	默认插槽	orientation 为 horizontal 可用

外部样式类 External Classes

名称	说明	备注
ext-class	根节点样式类	-

CSS 变量 CSS Variable

变量	默认值	说明	备注
--divider-gap	theme.spacing.gap.g6	分割线和文字间距（orientation="horizontal"）	-
	theme.spacing.gap.g0	分割线和文字间距（orientation="vertical"）	-
--divider-width	2px	分割线厚度	-
--divider-color	theme.color.gray.texticon.50	分割线颜色	-
--divider-style	solid	分割线类型	-
--divider-font-size	theme.fontSize.t4	分割线文字字号	-
--divider-text-color	theme.color.gray.texticon.550	分割线文字颜色	-