fullscreen-api

KO | EN

gitlite — search

#javascript #typescript #go #android #macos #java #awesome #cli #vue #awesome-list #pytorch #mcp #openai #open-source

(★ 22)

A simple Polymer based Web Component wrapper for the HTML5 full screen API

fullscreen-api 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# &lt;fullscreen-api&gt;

_A simple Polymer based Web Component wrapper for the HTML5 full screen API._

Please refer to the <a href="https://vguillou.github.io/webcomponents/fullscreen-api/">component page</a> for more informations.

### Available Web Components

* **fullscreen-api**: The most flexible, comes without UI but with bindable attributes. Ideal when you need to dynamically set the element to display fullscreen (e.g. building and image gallery).
* **fullscreen-icon-button**: Prepackaged material icon-button. Drop it on your page, tap it and it works.

Both elements share a common API and let you define what to display in full screen mode
(via the `target` attribute) and toggle normal/full screen
mode by calling the `toggleFullscreen()` method.

Note that this method MUST be triggered directly by user interaction
(typically in a native `onclick` or Polymer's `on-click` handler).
If no `target` is set, the whole page (more specifically
`document.documentElement`) will be displayed full screen.

### Attributes

* **target** :
The element to display full screen (document.documentElement by default),
or the selector to use to automatically find that element.
Note that changing the target while in full screen mode will not
have any effect, as toggling between display modes MUST be
triggered by user interaction.

* **fullscreen** :
Read-only flag (boolean) indicating if an element is being displayed full screen.

* **fullscreenAvailable** :
Read-only flag (boolean) indicating if full screen mode is available on the browser
(Safari on iOS does not support it).

### Methods

* **toggleFullscreen()** :
Toggle between full screen and normal display mode.
MUST be triggered directly by user interaction (typically in a native 'onclick'
or Polymer's 'on-click' handler).

* **exitFullscreen()** :
Exit full screen mode (if toggled).

## Examples

* **fullscreen-api**

```html
<template is="dom-bind">
	<fullscreen-api id="fsapi" fullscreen-available="{{fullscreenAvailable}}"></fullscreen-api>

<button type="button" onclick="goFullscreen()" hidden$="[[!fullscreenAvailable]]">Display this page in full screen mode</button>

<div id="errorDiv" hidden$="[[fullscreenAvailable]]">
		Your browser does not support the HTML5 full screen API... :(
	</div>
</template>

* **fullscreen-icon-button**

```html
    <fullscreen-icon-button target="#myElementToDisplayFullscreen" title="fullscreen" alt="fullscreen" tabindex="0"></fullscreen-icon-button>
```

## Demo!

[Link](https://vguillou.github.io/webcomponents/fullscreen-api/demo/)

[Iframe demo](https://vguillou.github.io/webcomponents/fullscreen-api/demo/iframe.html)

## License

[MIT License](https://github.com/vguillou/fullscreen-api/blob/master/LICENSE.md)

fullscreen-api

fullscreen-api 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

fullscreen-api

fullscreen-api 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README