Header-g NPM | npm.io

header-g

Header component based on antd with React

Screenshot

Demo

online example: https://favori.gitee.io/gantd-landing (CodePen)

install

Feature

Supports multiple header types and Options
Extra tools overflow hidden gently

Usage

import React from 'react';
import Header from 'header-g';
import { Tooltip, Button } from 'antd';

function BasicUse() {
  return <>
        <Header type='line' title="title(with short line)" />
        <Header type='icon' icon="file-text" title="title(with icon)" />
        <Header type='num' title="title(with number)" />
        <Header
            title="title(extra tools)"
            beforeExtra={
              <>
                <Tooltip title='tool_1'>
                    <Button icon="plus" type="primary" />
                </Tooltip>   
                 <Tooltip title='tool_2'>
                    <Button icon="edit"/>
                </Tooltip>   
                 <Tooltip title='tool_3'>
                    <Button icon="save" />
                </Tooltip>   
                 <Tooltip title='tool_4'>
                    <Button icon="delete"/>
                </Tooltip>   
              </> 
            }
        />
    </>
}

React.render(<BasicUse/>, mountNode);