https://github.com/andrelmlins/svelte-fullscreen

Component that performs fullscreen in DOM Elements
https://github.com/andrelmlins/svelte-fullscreen

fullscreen library screenfull svelte

Last synced: 26 days ago
JSON representation

Component that performs fullscreen in DOM Elements

• Host: GitHub
• URL: https://github.com/andrelmlins/svelte-fullscreen
• Owner: andrelmlins
• License: mit
• Created: 2019-11-16T21:09:00.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T10:33:37.000Z (almost 2 years ago)
• Last Synced: 2024-06-11T18:06:17.396Z (6 months ago)
• Topics: fullscreen, library, screenfull, svelte
• Language: Svelte
• Homepage: https://svelte-fullscreen.netlify.com/
• Size: 543 KB
• Stars: 65
• Watchers: 3
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-svelte - Svelte Fullscreen - Realiza fullscreen em elementos do DOM. (UI Componentes / Comunidade Global)

README

        
# Svelte FullScreen

[![npm version](https://badge.fury.io/js/svelte-fullscreen.svg)](https://www.npmjs.com/package/svelte-fullscreen) • [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/andrelmlins/svelte-fullscreen/blob/master/LICENSE) • [![Node.js CI](https://github.com/andrelmlins/svelte-fullscreen/actions/workflows/nodejs.yml/badge.svg)](https://github.com/andrelmlins/svelte-fullscreen/actions/workflows/nodejs.yml) • [![Netlify Status](https://api.netlify.com/api/v1/badges/30d7b769-4f7a-40db-9575-032fca47b888/deploy-status)](https://app.netlify.com/sites/svelte-fullscreen/deploys) • [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/andrelmlins/svelte-fullscreen.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/andrelmlins/svelte-fullscreen/context:javascript)

Component that performs fullscreen in DOM Elements

## Installation

```

npm i svelte-fullscreen

// OR

yarn add svelte-fullscreen

```

Note: to use this library in sapper, install as devDependency. See the [link](https://github.com/sveltejs/sapper-template#using-external-components).

## Demo [Link](https://svelte-fullscreen.netlify.com/)

Local demo:

```

git clone https://github.com/andrelmlins/svelte-fullscreen.git

cd svelte-fullscreen

yarn install && yarn start

```

## Examples

An example of how to use the library:

```svelte

  import Fullscreen from "svelte-fullscreen";

  div {

    background-color: red;

    width: 120px;

    height: 120px;

  }

  


     onRequest()}>FullScreen

     onExit()}>Screen

  


```

## Properties

Raw component props (before transform):

| Prop   | Type | Description    |

| ------ | ---- | -------------- |

| change | func | Call in change |

| error  | func | Call in error  |

## Slot Properties

Raw component props (before transform):

| Prop      | Type | Description                |

| --------- | ---- | -------------------------- |

| onToggle  | func | Call for fullscreen toggle |

| onExit    | func | Call for fullscreen exit   |

| onRequest | func | Call for fullscreen enter  |

## Browsers Support

You can see the list of supported browsers [here](https://caniuse.com/fullscreen)

![Browsers support](assets/browser-support.png)

## License

Svelte FullScreen is open source software [licensed as MIT](https://github.com/andrelmlins/svelte-fullscreen/blob/master/LICENSE).