mg-bootstrap-header

Made with create-react-library

Install

npm install --save mg-bootstrap-header

Início rápido

import React, { Component } from 'react'

import Header from 'mg-bootstrap-header'
import 'mg-bootstrap-header/css/index.css'

class Example extends Component {
  render() {
    return <Header
      logo={'url_da_logo'}
      menu={[{ name: "Início", url: "/" }]}
    />
  }
}

Importando estilos

Além da forma informada acima, também é possível utilizar os arquivos SCSS para imoprtação.

Importando para arquivos js

import 'mg-bootstrap-header/scss/index.scss'

Imortações em SCSS

As importaçõespara SCSS podem ainda ser feitas por completo ou de acordo com a necessidade e utilização dos components

@import "./node_modules/mg-bootstrap-header/scss/index";

Importação compoent a componente

@import "./node_modules/mg-bootstrap-header/scss/bar";
@import "./node_modules/mg-bootstrap-header/scss/menu";
@import "./node_modules/mg-bootstrap-header/scss/btnMobile";
@import "./node_modules/mg-bootstrap-header/scss/mobileMenu";
@import "./node_modules/mg-bootstrap-header/scss/mobileMenuNav";

Props

Cols

A props cols é utilizada para alterar as colunas pré-definidas pela header. Esta propriedade recebe uma objeto contendo 4 níveis de dados, um para cada elemento existente na header.

OS VALORES INFORMADOS ABAIXO SÃO EXATAMENTE OS VALORES DEFAULT DO PACKAGE. Caso não necessite de alterações, não será necessário informar esses dados

class Example extends Component {
  render() {
    return <Header
      cols={{
        logo: {xl: 3, lg: 3, md: 3, sm: 3, xs: 8},
        menu: {xl: 9, lg: 9, md: 9, sm: 8, xs: 8},
        menu2: {xl: 9, lg: 9, md: 9, sm: 8, xs: 8},
        btnModile: {xl: 1, lg: 1, md: 10, sm: 10, xs: 4}
      }}
    />
  }
}

Menu e Menu2

As propriedades menu e menu2 são instancias de um mesmo componente. Cabendo então a ambos o mesmo tratamento de entrada.

class Example extends Component {
  render() {
    return <Header
      menu={[
        { name: "Início", url: "/" },
        { name: "Contato", action: props => {} },
        { render: props => (<btn>Login</btn>) }
        ]}
    />
  }
}

Propriedade | type | descrição --- | --- | --- name | string | nome que será exibido no link url | string | caminho para onde o link deve mandar action | function | passe uma função de retorno, essa função será acionada substituindo a url. render | component | passe um componente para ser renderizado na header

ATENÇÃO

A propriedade menu2 NÃO É UMA PROPRIEDADE PADRÃO, de forma que essa não existe a menos que seja explicitamente incorporada

Por não ser uma propriedade padrão, menu2 também não tem uma adequação definida em colunas, sendo necessário passar valores para que essa apareça sem quebrar na header

##NodeMenu e NodeMenu2 similar ao render que vimos acima, as propriedades NodeMenu e NodeMenu2 representam substituições as propriedades menu e menu2 respectivamente. Caso existam, serão renderizadas nos seus devidos lugares. Isso servirá para casos de estilização extrema.

Align

Assim como com cols, align receberá 4 níveis de dados, um para cada elemento da header. Porem, neste caso, teremos o incremento de bar, com uma propriedade única que representa o alinhamento vertical da row em relação à altura da header.

OS VALORES INFORMADOS ABAIXO SÃO EXATAMENTE OS VALORES DEFAULT DO PACKAGE. Caso não necessite de alterações, não será necessário informar esses dados

class Example extends Component {
  render() {
    return <Header
      align={{
        bar: 'end',
        logo: {horizontal: '', vertical: ''},
        menu: {horizontal: 'center', vertical: 'center'},
        menu2: {horizontal: 'center', vertical: 'center'},
        btnModile: {horizontal: 'end', vertical: 'end'}
      }}
    />
  }
}

Todas as propriedades acima aceitam exatamente os mesmo valores. veja abaixo

Propriedade | type | descrição --- | --- | --- start | string | alinha ao início center | string | alinha ao centro end | string | alinha ao final

Expand

expand representa o ponto de exibição de cada componente. A logo não pode ser escondida, por isso não a veremos aqui.

Atenção

Aqui, hideBtnMobile funciona de maneira invertida dos demais. Representando quando o botão deve ser OMITIDO.

OS VALORES INFORMADOS ABAIXO SÃO EXATAMENTE OS VALORES DEFAULT DO PACKAGE. Caso não necessite de alterações, não será necessário informar esses dados

class Example extends Component {
  render() {
    return <Header
      expand={{
        menu: 'md',
        menu2: 'md',
        hideBtnMobile: 'md'
      }}
    />
  }
}

Todas as propriedades acima aceitam exatamente os mesmo valores. veja abaixo

Propriedade | type --- | --- | xl | string lg | string md | string sm | string xs | string

OffsetReact

Este componente de header pode reagir a alterações do scroll, fazendo isso a partir de sua própria posição, ou de outra pré-determinada em PIXELS.

INÍCIO RÁPIDO

class Example extends Component {
  render() {
    return <Header
      offsetReact={{
        offset: 100, // POSIÇÃO DO TOPO DA TELA EM PIXELS
        classBar: 'stick' // CLASSE PASSADA
      }}
    />
  }
}

OFFSET

Posição em que o header deve reagir, este está diretamente relacionado AO TOPO DA TELA.

Propriedade | type | Descrição --- | --- | --- offsetHeight | string | Quando o topo da tela atingir o final da header offsetTop | string | Quando o topo da tela for maior que 0 number | int | Altura em pixels

CLASSBAR

Nome de uma cçasse com animação já existente, ou, um novo nome de classe que faça referencia a animação criada por você.

Propriedade | type | Descrição --- | --- | --- stick | string | Fixa header no topo

License

MIT © Claudio-Magalhaes