# Title 标题

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/title/freepass)
- 平台：PC
- 维护者：屈正巍
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/zms/zujian-title/
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[Title]

## 代码演示

### 基础用法

最简单的默认Title。

```jsx
import { Component } from 'react';
import { Title } from '@weapp/ui';

class TitleDemo extends Component {
  render() {
    return (
      <Title title={'基本用法'} />
    );
  }
}

export default TitleDemo;
```

### 自定义右侧按钮

可自定义配置右侧按钮。

```jsx
import { Component } from 'react';
import { Title, Button, constants } from '@weapp/ui';

const prefixCls = `${constants.uiPcClsPrefix}-demo-title`;

class TitleDemo extends Component{

  render() {
    return (
      <div className={prefixCls}>
        <Title title={'带右侧按钮'}
          buttons={[
            <Button key='a'>打开</Button>,
            <Button key='b'>跳转</Button>
          ]}
        />
      </div>
    );
  }
}

export default TitleDemo;
```

### 自定义页签

配置左侧页签，以及页签过多时的展示形式。

```jsx
import { Component } from 'react';
import { Title, Button, constants } from '@weapp/ui';

const prefixCls = `${constants.uiPcClsPrefix}-demo-title`;
const dataItem = {
  id: 'tab1',
  content: '可选标签',
  icon: null,
  disabled: false,
  closeable: false,
  closeIcon: null,
  data: [],
};

const data1 = [
  { ...dataItem },
  { ...dataItem, id: 'tab2', content: '可选标签2' },
  { ...dataItem, id: 'tab3', content: '可选标签3' },
  { ...dataItem, id: 'tab4', content: '可选标签4' },
  { ...dataItem, id: 'tab5', content: '可选标签5' },
  { ...dataItem, id: 'tab6', content: '可选标签6' },
  { ...dataItem, id: 'tab7', content: '可选标签7' },
  { ...dataItem, id: 'tab8', content: '可选标签8' },
  { ...dataItem, id: 'tab9', content: '可选标签9' },
  { ...dataItem, id: 'tab10', content: '可选标签10' },
  { ...dataItem, id: 'tab11', content: '可选标签11' },
  { ...dataItem, id: 'tab12', content: '可选标签12' },
  { ...dataItem, id: 'tab13', content: '可选标签13' },
  { ...dataItem, id: 'tab14', content: '可选标签14' },
  { ...dataItem, id: 'tab15', content: '可选标签15' },
]
interface TitleDemoProps {

}
interface TitleDemoState {
  menuValue: string;
}
class TitleDemo extends Component<TitleDemoProps, TitleDemoState> {

  constructor(props: TitleDemoProps) {
    super(props);
    this.state = {
      menuValue: 'tab1',
    }
  }

  onMenuChange = (key: any) => this.setState({ menuValue: key });

  render() {
    const { menuValue } = this.state;
    return (
      <div className={prefixCls}>
        <Title title={'页签很长'}
          menuValue={menuValue}
          menus={data1}
          inDialog
          onMenuChange={this.onMenuChange}
          buttons={[<Button key='a'>打开</Button>, <Button key='b' >跳转</Button>]}
        />
        <Title title={'页签很长'}
          menuValue={menuValue}
          menus={data1}
          // inDialog
          onMenuChange={this.onMenuChange}
          buttons={[<Button key='a'>打开</Button>, <Button key='b' >跳转</Button>]}
        />
      </div>
    );
  }
}

export default TitleDemo;
```

### 顶部进度条

设置 needProgress 配置顶部进度条。

```jsx
import { Component } from 'react';
import { Title, Button, constants } from '@weapp/ui';

const prefixCls = `${constants.uiPcClsPrefix}-demo-title`;

interface TitleDemoState {
  progressValue: number;
}

class TitleDemo extends Component<{}, TitleDemoState> {

  timer: any;

  constructor(props: {}) {
    super(props);
    this.state = {
      progressValue: 0,
    }
  }

  ticker = () => {
    if (this.timer) {
      return;
    }
    let progressValue = 0;
    let ticker = () => {
      this.timer = setTimeout(() => {
        progressValue += 1;
        if (progressValue >= 100) {
          clearTimeout(this.timer);
          this.timer = null;
          ticker = () => { };
        }
        this.setState({
          progressValue
        });
        ticker();
      }, 1000 / 60);
    }
    ticker();
  }

  render() {
    const { progressValue } = this.state
    return (
      <div className={prefixCls}>
        <Button onClick={this.ticker} type="primary">开始运行</Button>
        <Title
          title={'带进度条'}
          needProgress
          progressProps={{
            value: progressValue
          }}
        />
      </div>
    );
  }
}

export default TitleDemo;
```

### 常用属性

设置 noIcon 可以隐藏图标，设置 hideUnderLine 可以隐藏底部边线。

```jsx
import { Component } from 'react';
import { Title } from '@weapp/ui';

class TitleDemo extends Component {
  render() {
    return (
      <>
        <div>
          <h4>无图标</h4>
          <Title title={'无图标'} noIcon />
        </div>

        <div>
          <h4>无底部边线</h4>
          <Title title={'无底部边线'} hideUnderLine />
        </div>

        
        <div>
          <h4>自定义图标</h4>
          <Title icon='Icon-smiling-face' iconBgcolor='red' title={'自定义图标'}  />
        </div>
      </>
    );
  }
}

export default TitleDemo;
```

### 自适应布局

```jsx
import { Component } from 'react';
import { Button, Form, FormStore, Title, TitleProps } from '@weapp/ui';
import { observer } from 'mobx-react';

@observer
class TitleDemo extends Component {
  formStore = new FormStore();
  componentDidMount() {
    this.formStore.initForm({
      data: {
        hasIcon: true,
        hasBtn: true,
        hasProgress: true,
        hasMenu: true,
        titleTipType: 'title',
        btnNumber: 2,
      },
      items: {
        hasIcon: {
          itemType: 'SWITCH'
        },
        hasBtn: {
          itemType: 'SWITCH'
        },
        hasProgress: {
          itemType: 'SWITCH'
        },
        hasMenu: {
          itemType: 'SWITCH'
        },
        titleTipType: {
          itemType: 'SELECT',
          data: [
            { id: 'title', content: 'title' },
            { id: 'popover', content: 'popover' },
            { id: 'scroll', content: 'scroll' },
          ]
        },
        btnNumber: {
          itemType: 'INPUTNUMBER',
          min: 0,
          max: 30,
        }
      },
      layout: [
        [ {id: 'hasIcon', label: '显示图标', hide: false, items: ['hasIcon'], labelSpan: 8 } ],
        [
          {
            id: 'hasBtn', label: '显示按钮(最多30个)', hide: false, items: ['hasBtn'], labelSpan: 8,
            cascadeRules: {
              hasBtn: {
                true: ['btnNumber'],
                false: [],
              }
            }
          }
        ],
        [ {id: 'hasProgress', label: '显示进度条', hide: false, items: ['hasProgress'], labelSpan: 8 } ],
        [ {id: 'hasMenu', label: '显示菜单', hide: false, items: ['hasMenu'], labelSpan: 8 } ],
        [ {id: 'titleTipType', label: 'Title提示类型', hide: false, items: ['titleTipType'], labelSpan: 8 } ]
      ],
      groups: [],
    })
  }
  dataItem = {
    id: 'tab1',
    content: '可选标签',
    icon: null,
    disabled: false,
    closeable: false,
    closeIcon: null,
    data: [],
  };
  menusDatas = [
    { ...this.dataItem },
    { ...this.dataItem, id: 'tab2', content: '可选标签2' },
    { ...this.dataItem, id: 'tab3', content: '可选标签3' },
    { ...this.dataItem, id: 'tab4', content: '可选标签4' },
    { ...this.dataItem, id: 'tab5', content: '可选标签5' },
    { ...this.dataItem, id: 'tab6', content: '可选标签6' },
    { ...this.dataItem, id: 'tab7', content: '可选标签7' },
    { ...this.dataItem, id: 'tab8', content: '可选标签8' },
    { ...this.dataItem, id: 'tab9', content: '可选标签9' },
    { ...this.dataItem, id: 'tab10', content: '可选标签10' },
    { ...this.dataItem, id: 'tab11', content: '可选标签11' },
    { ...this.dataItem, id: 'tab12', content: '可选标签12' },
    { ...this.dataItem, id: 'tab13', content: '可选标签13' },
    { ...this.dataItem, id: 'tab14', content: '可选标签14' },
    { ...this.dataItem, id: 'tab15', content: '可选标签15' },
  ]
  render() {
    const title = 'Title组件自适应布局超长文本标题效果测试Demo标题数据(Title组件自适应布局超长文本标题效果测试Demo标题数据)';
    const config = this.formStore?.datas;
    let titleProps: TitleProps = {
      title,
      noIcon: !config?.hasIcon,
      needProgress: config?.hasProgress ? true : false,
      titleTipType: (config?.titleTipType as any),
    };
    if (config?.hasBtn) {
      const buttons: any[] = [];
      for (let i = 0; i < (config?.btnNumber as number); i++) {
        buttons.push(
          <Button key={i}>按钮</Button>
        );
      }
      titleProps = {
        ...titleProps,
        buttons,
      }
    }
    if (config?.hasMenu) {
      titleProps = {
        ...titleProps,
        menus: this.menusDatas,
      }
    }

    return (
      <>
        <Form store={this.formStore} />
        <br/>
        <Title {...titleProps} enableAdaptiveLayout />
      </>
    );
  }
}

export default TitleDemo;
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| title | 标题 | string | 否 | - |
| getTitle | 自定义左侧区域,仅 title 部分 | () => ReactNode | 否 | - |
| getTitleLabel | 自定义标题 | () => ReactNode | 否 | - |
| icon | 标题图标 | IconNames | 否 | - |
| iconBgcolor | 图标颜色 | string | 否 | - |
| iconBorderColor | 图标边框颜色 | string | 否 | - |
| iconStyle | 图标样式 | CSSProperties | 否 | - |
| buttons | 按钮组 | ReactNode | 否 | - |
| leftCol | 左侧布局比例 | number | 否 | - |
| rightCol | 右侧布局比例 | number | 否 | - |
| customRenderLeft | 自定义渲染左侧内容，含 title 和 icon | (e?: JSX.Element) => ReactNode | 否 | - |
| customRenderRight | 自定义渲染右侧内容 | (e?: JSX.Element) => ReactNode | 否 | - |
| menus | 页签配置 | MenuItemData[] | 否 | - |
| menuValue | 页签选中值配置 | string | 否 | - |
| onMenuChange | 切换选中页签的事件 | (value: string) => void | 否 | - |
| menuProps | 页签自定义参数配置，兼容 Menu 组件配置 | MenuBaseProps | 否 | - |
| noIcon | 隐藏图标 | boolean | 否 | false |
| inDialog | 兼容对话框中使用时的样式,且对话框默认开启 | boolean | 否 | - |
| hideUnderLine | 隐藏底部边线 | boolean | 否 | false |
| needProgress | 需要进度条 | boolean | 否 | false |
| progressProps | 进度条属性 | any | 否 | - |
| enableAdaptiveLayout | 开启自适应布局 | boolean | 否 | - |
| titleTipType | 标题提示效果 | 'title' \| 'popover' \| 'scroll' | 否 | - |
| customStyleLeft | 自定义左侧行内样式 | CSSProperties | 否 | - |
| customStyleRight | 自定义左侧行内样式 | CSSProperties | 否 | - |
#### MenuItemData 同 Menu 组件 data 参数配置相同，具体参照Menu组件。
