支持子标题、带图标标题
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>
);
}
}
import React, {Component} from 'react';
import {Title} from 'hana-ui';
/**
* @en
* sub-title
*
*
*
* @cn
* 子标题
*
*
*/
export default class ExampleSubtitle extends Component {
render() {
return (
<div>
<Title subTitle={'Sbu-title under title'}>(ง •̀_•́)</Title>
</div>
);
}
}
import React, {Component} from 'react';
import {Title, Icon} from 'hana-ui';
/**
* @en
* icon title
*
*
*
* @cn
* 带图标标题
*
*
*/
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元素上。