Fancy OFF-Canvas componente Sidebar en Pure JavaScript-ApocSidebar

Vista prévia

Descripción

ApocSidebar es un componente de barra lateral de JavaScript es 5/6 que permite revelar barras laterales fuera de la pantalla con algunas animaciones frescas basadas en CSS3. Ideal para la navegación off-Canvas amigable para móviles.

Instalación

# Yarn
yarn add apoc-sidebar

# NPM
$ npm install apoc-sidebar

Funcionamiento

Importa el ApocSidebar de "Apoc-Sidebar".

import ApocSidebar from 'apoc-sidebar';

O directamente incluir el archivo JavaScript "Apoc-Sidebar. js" de la carpeta "dist" como esta:

<script src="apoc-sidebar.js"></script>

Crear un panel de barra lateral que está oculto en la carga de la página.

<div class="sidebar" id="demo">

I am a sidebar panel
</div>

Agregue el atributo "Data-Apoc-Sidebar-sibling" al contenedor principal.

<div data-apoc-sidebar-sibling class="container">

...
</div>

Es posible que necesites un elemento desencadenante para alternar el panel de la barra lateral.

<button id="trigger">Click Me</button>

Cree un nuevo objeto ApocSidebar.

const sidebar = new ApocSidebar(

document.getElementById('sidebar'),

{


// options here

}
);

Inicialice la ApocSidebar.

sidebar.init();

Active el elemento desencadenante.

document.getElementById('trigger').addEventListener('click', () => {

if (sidebar.isOpen()) {


sidebar.close();

} else {


sidebar.open();

}
});

Todas las opciones posibles con valores predeterminados.

const sidebar = new ApocSidebar(

document.getElementById('sidebar'),

{


// type: 'water',


// type: 'push',


// type: 'lid',


// type: 'door',


// type: 'waterfall',


// type: 'waterfallReverse',


type: 'slide',



// side: 'right'


side: 'left',




transitionTimingFunction: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',


transitionDuration: '.2s',


wallBackgroundColor: 'rgba(0,0,0,.3)'

}
);

Registro de cambios

v0.1.0 (09/23/2018)

• Bugfix