@ray-js/components-ty-typography v0.0.11

English | 简体中文

@ray/components-ty-typography

tuya Typography

Installation

$ npm install @ray/components-ty-typography
// or
$ yarn add @ray/components-ty-typography

Usage

// index.module.less
:root {
  --rayui-native-color-B1: #f6f7fb; /* 背景色 */
}

:root[theme='dark'] {
  --rayui-native-color-B1: #000000; /* 背景色 */
}

.view {
  color: brown;
  padding: 16px;
  background-color: var(--rayui-native-color-B1);
}

.text {
  display: block;
  margin-bottom: 16px;
}

Basic Usage

import Typography from '@ray/components-ty-typography';

<Typography text='标题28' type='title' size={28} className={styles.text} />
<Typography text='标题24' type='title' size={24} className={styles.text} />
<Typography text='标题22' type='title' size={22} className={styles.text} />
<Typography text='标题20' type='title' size={20} className={styles.text} />
<Typography text='标题18' type='title' size={18} className={styles.text} />
<Typography text='标题17' type='title' size={17} className={styles.text} />
<Typography text='标题16' type='title' size={16} className={styles.text} />

<Typography text='正文17' type='body' size={17} className={styles.text} />
<Typography text='正文16' type='body' size={16} className={styles.text} />
<Typography text='正文15' type='body' size={15} className={styles.text} />
<Typography text='正文14' type='body' size={14} className={styles.text} />

<Typography text='说明14' type='caption' size={14} className={styles.text} />
<Typography text='说明13' type='caption' size={13} className={styles.text} />
<Typography text='说明12' type='caption' size={12} className={styles.text} />
<Typography text='说明11' type='caption' size={11} className={styles.text} />

Customize color、type

<Typography
  text='标题28,color:red'
  type='title'
  size={28}
  color='red'
  className={styles.text}
/>

Customize style

<Typography
  text='标题28,color:red,style{color: blue,fontSize:50}'
  type='title'
  size={28}
  color='red'
  style={{
    color: 'blue',
    fontSize: '13px',
  }}
  className={styles.text}
/>