https://github.com/nickrigby/silc-offcanvas

Lightweight offcanvas/modal component for silc framework
https://github.com/nickrigby/silc-offcanvas

offcanvas silc-framework typescript

Last synced: 2 months ago
JSON representation

Lightweight offcanvas/modal component for silc framework

• Host: GitHub
• URL: https://github.com/nickrigby/silc-offcanvas
• Owner: nickrigby
• License: mit
• Created: 2017-04-07T06:43:48.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-06-24T11:57:29.000Z (almost 8 years ago)
• Last Synced: 2025-02-11T15:52:46.997Z (3 months ago)
• Topics: offcanvas, silc-framework, typescript
• Language: JavaScript
• Homepage: https://silc.io
• Size: 66.4 KB
• Stars: 0
• Watchers: 3
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# silc offcanvas [![Build Status](https://travis-ci.org/nickrigby/silc-offcanvas.svg?branch=master)](https://travis-ci.org/nickrigby/silc-offcanvas) [![npm version](https://badge.fury.io/js/silc-offcanvas.svg)](https://badge.fury.io/js/silc-offcanvas)

The offcanvas module is an ultra-lightweight web component for the [silc framework](https://github.com/nickrigby/silc). The offcanvas module allows you to place content outside of the viewport, with the ability to trigger its visibility.

## HTML

The offcanvas pattern consists of two main elements:

### Open Trigger

The open trigger must contain an anchor link that references an element on the page with a corresponding id.

```html

Trigger Offcanvas

```

### Content element

The content element should contain an anchor link that is self-referencing through an id for closing the offcanvas element.

```html



    Close

    
This content is outside of the viewport.



```


## Class modifiers

### Direction

An offcanvas element appears from the right by default, but can be modified using one of the following classes:

```html

...

...

...

```


## Options

You can control when an element becomes offcanvas by overriding the `$silc-offcanvas--options--becomes-visible` variable. The default value is `800px`.

## Styling

As with all silc components, no deliberate style has been added. However, through a SASS fallback system, a number of [SASS variables](src/scss/_variables.scss) are available to easily apply design without having to write your own selectors.