mg-bootstrap-header
v0.0.1
Published
Made with create-react-library
Downloads
4
Readme
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