mg-bootstrap-header

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