简体中文

标题

支持子标题、带图标标题

基础用例
import React, {Component} from 'react';
import {Title} from 'hana-ui';

/**
 * @en
 * Base Example
 *
 *  
 *
 * @cn
 * 基础用例
 *
 *  
 */

export default class ExampleBase extends Component {
  render() {
    return (
      <div>
        <Title>(ง •̀_•́)</Title>
        <br />
        <Title
          style={{
            padding: 10,
            backgroundColor: '#199ed8',
            color: 'white'
          }}
        >
          Title
        </Title>
      </div>
    );
  }
}

 

(ง •̀_•́)

Title
子标题
import React, {Component} from 'react';
import {Title} from 'hana-ui';

/**
 * @en
 * sub-title
 *
 * &nbsp;
 *
 * @cn
 * 子标题
 *
 * &nbsp;
 */

export default class ExampleSubtitle extends Component {
  render() {
    return (
      <div>
        <Title subTitle={'Sbu-title under title'}>(ง •̀_•́)</Title>
      </div>
    );
  }
}

 

(ง •̀_•́)
Sbu-title under title
带图标标题
import React, {Component} from 'react';
import {Title, Icon} from 'hana-ui';

/**
 * @en
 * icon title
 *
 * &nbsp;
 *
 * @cn
 * 带图标标题
 *
 * &nbsp;
 */

export default class ExampleIcon extends Component {
  render() {
    return (
      <div>
        <Title
          icon={<Icon type={'menu'} color={'#199ed8'} />}
          iconRight={
            <div>
              <Icon type={'hana'} color={'#199ed8'} />
              <Icon type={'delete'} color={'red'} />
            </div>
          }
          leftIconClick={() => {
            alert('click'); // eslint-disable-line
          }}
        >
          (ง •̀_•́)
        </Title>
      </div>
    );
  }
}

 

(ง •̀_•́)

属性说明

属性名 类型 默认值 说明
style object 自定义组件样式
subTitle string 显示子标题
icon node 显示标题图标
iconRight node 最右侧显示标题图标
leftIconClick function 自定义标题左侧按钮点击事件
children node 设置组件的子组件

未在文档中说明的属性将会被自动加到根元素或form元素上。