Title 标题组件

标题组件。

参数（props）

参数名 说明 必填 类型 默认值 可选值 备注
text 要显示的文本 否 string
subtitle 二级标题 否 string 或 React.component
decoration 是否有左边竖线 否 boolean true true/false
children 要显示的内容，支持复杂 component 否 string、components

DEMO 列表

简单的用法

本 Demo 演示最基础的用法。

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import IceTitle from '@icedesign/title';


class App extends Component {

  state = {

  }
  
  render() {
    const com = <span>我不是一个简单的标题</span>
    return (
      <div>
        <IceTitle text="简单的标题" />
        <div 
          style={{
            background:'#999',
            color:'#666',
            height:'100px',
            textAlign:'center',
            paddingTop:'40px'
          }}
        >content</div>
        <IceTitle text="简单的标题" subtitle={com}/>
        <div 
          style={{
            background:'#999',
            color:'#666',
            height:'100px',
            textAlign:'center',
            paddingTop:'40px'
          }}
        >content</div>
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);

里面包裹更复杂的结构

里面可以包裹更加附加的结构。

import React, {Component} from 'react'
import ReactDOM from 'react-dom';

import {Balloon, Icon} from '@alifd/next';
import IceTitle from '@icedesign/title';

class App extends Component {

  state = {

  }

  render() {
    return (
      <div>
        <IceTitle>
          基本数据 &nbsp;
          <Balloon trigger={<Icon type="help" style={{position: 'relative', color:'#666666'}} />} align="r" triggerType="hover">
            这里是基本数据的更多描述信息。
          </Balloon>
        </IceTitle>
        
        <div 
          style={{
            background:'#999',
            color:'#666',
            height:'100px',
            textAlign:'center',
            paddingTop:'40px'
          }}
        >content</div>
                
        <IceTitle 
            text="主标题"
            subtitle="副标题"
            link="http://www.taobao.com"
            decoration={true}
        />
        <div 
          style={{
            background:'#999',
            color:'#666',
            height:'100px',
            textAlign:'center',
            paddingTop:'40px'
          }}
        >content</div>
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);

没有左边竖线的用法

没有左边竖线的用法。

import React, {Component} from 'react'
import ReactDOM from 'react-dom';

import {Balloon, Icon} from '@alifd/next';
import IceTitle from '@icedesign/title';

class App extends Component {

  state = {

  }

  render() {
    return (
      <div>
        <IceTitle 
            text="主标题"
            subtitle="副标题"
            link="http://www.taobao.com"
            decoration={false}
        />
        <div 
          style={{
            background:'#999',
            color:'#666',
            height:'100px',
            textAlign:'center',
            paddingTop:'40px'
          }}
        >content</div> 
        
 
        <IceTitle 
            text="主标题"
            link="http://www.taobao.com"
            decoration={false}
        />
        <div 
          style={{
            background:'#999',
            color:'#666',
            height:'100px',
            textAlign:'center',
            paddingTop:'40px'
          }}
        >content</div> 

      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);

自定义样式

自定义样式的 demo。

import React, {Component} from 'react'
import ReactDOM from 'react-dom';

import IceTitle from '@icedesign/title';

class App extends Component {

  state = {

  }

  render() {
    return (
      <div>
        <IceTitle className="custom-class" style={{marginTop: 100}} text="基本信息" />
        <div 
          style={{
            background:'#999',
            color:'#666',
            height:'100px',
            textAlign:'center',
            paddingTop:'40px'
          }}
        >content</div>        
        <IceTitle 
          text="主标题"
          subtitle="副标题"
          decoration={true}
        />
        
        <div 
          style={{
            background:'#999',
            color:'#666',
            height:'100px',
            textAlign:'center',
            paddingTop:'40px'
          }}
        >content</div>
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);