Title 标题组件

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/title@1.0.3 -S

标题组件。

参数（props）

代码示例

简单的用法

本 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);

相关区块

暂无相关区块