标题 - hana-ui

标题

支持子标题、带图标标题

基础用例

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

/**
 * @en
 * Base Example
 *
 * &nbsp;
 *
 * @cn
 * 基础用例
 *
 * &nbsp;
 */

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元素上。