分割线 Divider

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

使用

API

安装使用

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

用法示例

单独使用

codesanbox

copy

code

import React from 'react';
import { TiDivider } from 'titian-h5-react';

export default function App() {
  return <TiDivider />;
}

对齐方式

居左居中居右

codesanbox

copy

code

import React from 'react';
import { TiDivider } from 'titian-h5-react';

export default function App() {
  return (
    <div className="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>
  );
}

分割线方向

codesanbox

copy

code

import React from 'react';
import { TiDivider } from 'titian-h5-react';

export default function App() {
  return (
    <div className="code-container" style={{ gap: 40 }}>
      <TiDivider orientation="horizontal" />
      <TiDivider orientation="vertical" />
    </div>
  );
}

分割线风格

codesanbox

copy

code

import React from 'react';
import { TiDivider } from 'titian-h5-react';

export default function App() {
  return (
    <div className="code-container" style={{ gap: 40 }}>
      <TiDivider />
      <TiDivider dashed />
    </div>
  );
}

分割线颜色

文字文字文字

codesanbox

copy

code

import React from 'react';
import { TiDivider } from 'titian-h5-react';

export default function App() {
  return (
    <div className="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>
  );
}

分割线厚度

codesanbox

copy

code

import React from 'react';
import { TiDivider } from 'titian-h5-react';

export default function App() {
  return <TiDivider borderWidth={6} />;
}

TiDivider API

属性 Properties

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

插槽 Slots

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

外部样式类 External Classes

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

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	分割线文字颜色	-