Svelte FullScreen

Component that performs fullscreen in DOM Elements, but it is more up-to-date.

Original project can be found here

Installation

npm i better-svelte-fullscreen
// OR
yarn add better-svelte-fullscreen

Note: to use this library in sapper, install as devDependency. See the link.

Local demo:

git clone https://gitlab.com/uimaxbai/better-svelte-fullscreen/
cd svelte-fullscreen
yarn install && yarn start

Examples

An example of how to use the library:

<script>
  import Fullscreen from "better-svelte-fullscreen";
</script>

<style>
  div {
    background-color: red;
    width: 120px;
    height: 120px;
  }
</style>

<Fullscreen let:onRequest let:onExit>
  <div>
    <button on:click={() => onRequest()}>FullScreen</button>
    <button on:click={() => onExit()}>Screen</button>
  </div>
</Fullscreen>

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

License

Better Svelte Fullscreen is open source software also licensed as MIT.