https://github.com/collardeau/svelte-fluid-header

A responsive and customizable header component for Svelte
https://github.com/collardeau/svelte-fluid-header

responsive-design svelte svelte-component

Last synced: 26 days ago
JSON representation

A responsive and customizable header component for Svelte

• Host: GitHub
• URL: https://github.com/collardeau/svelte-fluid-header
• Owner: collardeau
• Created: 2019-10-05T11:03:19.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2019-10-11T14:20:21.000Z (about 5 years ago)
• Last Synced: 2024-09-30T09:24:06.057Z (about 1 month ago)
• Topics: responsive-design, svelte, svelte-component
• Language: HTML
• Homepage:
• Size: 78.1 KB
• Stars: 8
• Watchers: 3
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# svelte-fluid-header

`svelte-fluid-header` is a **responsive** and **customizable** header component for [Svelte](https://svelte.dev/).

On **large screens**, use a horizontal menu inside your header. On **small screens**, move the menu to a drawer below.

![](http://g.recordit.co/StDfeVYJRp.gif)

`svelte-fluid-header` has **no production dependencies**.

# Demo

[Example](https://xuyfx.csb.app/) |  [Code Sandbox](https://codesandbox.io/s/svelte-fluid-header-demo-xuyfx?view=preview)

## Install

`npm install svelte-fluid-header`

## Usage

```html

  import Fluid from "svelte-fluid-header"

  

    


      My Header Title

    

    


      My Horizontal Menu

    

     


       My Vertical Menu

     

  

 ` component in another HTML tag (as in the `` in the example above).


## Slots

#### `left`

The `left` slot goes into the left side of the header, usually for a logo and/or page title.

#### `right`

The `right` slot goes into the right side of the header, usually for a horizontal menu.

*It is hidden on smaller screens.*

#### `drawer`

The `drawer` slot goes below the header, usually to place a vertical menu. It can be toggled into view (with a customizable slide animation).

*It is hidden on larger screens.*

#### `right-collapsed` optional

The `right-collapsed` slot goes to the right of the header on smaller screens, usually for a hamburger button to reveal the drawer.

It is optional as `svelte-fluid-header` provides a default slot (including hamburger and close buttons, which may be styled). See the Binding section below to create a custom button.

*`right-collapsed` is hidden on larger screens.*

## Props

#### `breakpoint`

The breakpoint at which the `right` slot is displayed, and the `right-collapsed` and `drawer` slots are hidden.

Possible values are:

 - `sm` (640px)

 - `md`(768px),

 - `lg`(1024px),

 - `xl`(1200px).

 

 The default value is `sm`.

#### `duration`

The duration of the drawer slider animation in milliseconds.

The default is `200`.

## Styling

Slots give you control of your content and your style.

To style the default button, you can hook into the `svelte-fluid-header--button` class;

```html

  :global(.svelte-fluid-header--button) {

    color: grey

  }

```

A few CSS properties such as `background-color` will need an `!important` flag.

## Binding

You can bind to the `toggleDrawer` function of your `svelte-fluid-header` component. This is especially handy if you implement your own toggle button:

```html

  let toggleDrawer; // from bind below

  const handleClick = () => {

    toggleDrawer();

  };

  

  


    Toggle

  


```

## Events

Two events are emitted from the component when the drawer is toggled, `open` and `close`:

```html

 {

    console.log('drawer will open');

  }}

   {

    console.log('drawer will close');

  }}

  

```

## Kitchen Sink

All the options available:

```html

  import Fluid from 'svelte-fluid-header';

  let toggleDrawer;

  const handleClick = () => {

    toggleDrawer();

  };

  :global(.svelte-fluid-header--button) {

    color: grey

  }

  :global(.svelte-fluid-header--button:hover) {

    color: grey

  }

   {} }

    on:close={ ()=> {} }>

    
My app

    
My Horizontal Menu

    
My Vertical Menu

    


      Toggle

    

  


```