npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mg-bootstrap-header

v0.0.1

Published

Made with create-react-library

Downloads

4

Readme

mg-bootstrap-header

Made with create-react-library

NPM JavaScript Style Guide

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