Jānis Skarnelis
4 years ago
11 changed files with 326 additions and 312 deletions
@ -1,216 +1,224 @@ |
|||||
# Fancyapps UI |
# Fancyapps UI |
||||
|
|
||||
Collection of task-oriented components that will make you more productive. Packed full of features that you and your clients will love. |
Collection of task-oriented components that will make you more productive. Packed full of features that you and your clients will love. |
||||
|
|
||||
Full docs with examples: https://fancyapps.com/docs/ui/quick-start/. |
Full docs with examples: https://fancyapps.com/docs/ui/quick-start/. |
||||
|
|
||||
## Installation |
## Installation |
||||
|
|
||||
### NPM |
### NPM |
||||
|
|
||||
Use either `npm` or `yarn` as follows: |
Use either `npm` or `yarn` as follows: |
||||
|
|
||||
```bash |
```bash |
||||
npm install @fancyapps/ui |
npm install @fancyapps/ui |
||||
// or |
// or |
||||
yarn add @fancyapps/ui |
yarn add @fancyapps/ui |
||||
``` |
``` |
||||
|
|
||||
Import one or more components: |
Import one or more components: |
||||
|
|
||||
```jsx |
```jsx |
||||
import { Fancybox, Carousel, Panzoom } from "@fancyapps/ui"; |
import { Fancybox, Carousel, Panzoom } from "@fancyapps/ui"; |
||||
``` |
``` |
||||
|
|
||||
Import the appropriate CSS file, example: |
Import the appropriate CSS file, example: |
||||
|
|
||||
```jsx |
```jsx |
||||
import "@fancyapps/ui/dist/fancybox.css"; |
import "@fancyapps/ui/dist/fancybox.css"; |
||||
``` |
``` |
||||
|
|
||||
### CDN |
### CDN |
||||
|
|
||||
A pre-bundled scripts that contain components are available on [CDN](https://www.jsdelivr.com/package/npm/@fancyapps/ui?path=dist). |
A pre-bundled scripts that contain components are available on [CDN](https://www.jsdelivr.com/package/npm/@fancyapps/ui?path=dist). |
||||
|
|
||||
> **_NOTE:_** Because Fancybox is build on top of both Carousel and Panzoom components, you only have to include `fancybox.umd.js` and all 3 components will be available through the `window` object. |
> **_NOTE:_** Because Fancybox is build on top of both Carousel and Panzoom components, you only have to include `fancybox.umd.js` and all 3 components will be available through the `window` object. |
||||
|
|
||||
```html |
```html |
||||
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script> |
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script> |
||||
``` |
``` |
||||
|
|
||||
Or use ES6 import: |
Or use ES6 import: |
||||
|
|
||||
```html |
```html |
||||
<script type="module"> |
<script type="module"> |
||||
import { Fancybox } from "https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.esm.js"; |
import { Fancybox } from "https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.esm.js"; |
||||
</script> |
</script> |
||||
``` |
``` |
||||
|
|
||||
Remember to include the appropriate CSS file, example: |
Remember to include the appropriate CSS file, example: |
||||
|
|
||||
```html |
```html |
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" /> |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" /> |
||||
``` |
``` |
||||
|
|
||||
## Usage |
## Usage |
||||
|
|
||||
### Fancybox |
### Fancybox |
||||
|
|
||||
There are two ways to use Fancybox. |
There are two ways to use Fancybox. |
||||
|
|
||||
#### Declarative |
#### Declarative |
||||
|
|
||||
Add a `data-fancybox` attribute to any element to enable Fancybox. Galleries are created by adding the same attribute `data-fancybox` value to multiple elements. Use `data-src` or `href` attribute to specify the source of the content. |
Add a `data-fancybox` attribute to any element to enable Fancybox. Galleries are created by adding the same attribute `data-fancybox` value to multiple elements. Use `data-src` or `href` attribute to specify the source of the content. Add a `data-caption` attribute if you want to show a caption under the content. |
||||
|
|
||||
```jsx |
```jsx |
||||
<a href="https://lipsum.app/id/1/1024x768" data-fancybox="gallery" data-caption="Optional caption"> |
<a href="https://lipsum.app/id/1/1024x768" data-fancybox="gallery" data-caption="Optional caption"> |
||||
Image |
Image |
||||
</a> |
</a> |
||||
``` |
``` |
||||
|
|
||||
```jsx |
```jsx |
||||
<a href="http://media.w3.org/2010/05/sintel/trailer.mp4" data-fancybox> |
<a href="http://media.w3.org/2010/05/sintel/trailer.mp4" data-fancybox> |
||||
Video |
Video |
||||
</a> |
</a> |
||||
``` |
``` |
||||
|
|
||||
```jsx |
```jsx |
||||
<a |
<a |
||||
href="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d10500.902039411158!2d2.2913514905137315!3d48.85391001859112!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1slv!2slv!4v1622011463926!5m2!1slv!2slv" |
href="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d10500.902039411158!2d2.2913514905137315!3d48.85391001859112!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1slv!2slv!4v1622011463926!5m2!1slv!2slv" |
||||
data-fancybox |
data-fancybox |
||||
data-type="iframe" |
data-type="iframe" |
||||
data-preload="false" |
data-preload="false" |
||||
data-width="640" |
data-width="640" |
||||
data-height="480" |
data-height="480" |
||||
> |
> |
||||
Iframe |
Iframe |
||||
</a> |
</a> |
||||
``` |
``` |
||||
|
|
||||
```jsx |
```jsx |
||||
<button data-fancybox data-src="#dialog-content"> |
<button data-fancybox data-src="#dialog-content"> |
||||
HTML element |
HTML element |
||||
</button> |
</button> |
||||
|
|
||||
<div id="dialog-content" style="display:none;"> |
<div id="dialog-content" style="display:none;"> |
||||
<h2>Hello, world!</h2> |
<h2>Hello, world!</h2> |
||||
<p> |
<p> |
||||
<input type="text" value="See if changes remain after closing the dialog" /> |
<input type="text" value="See if changes remain after closing the dialog" /> |
||||
</p> |
</p> |
||||
</div> |
</div> |
||||
``` |
``` |
||||
|
|
||||
#### Programmatic |
Customize options: |
||||
|
|
||||
```js |
```js |
||||
// Image gallery |
Fancybox.bind("[data-fancybox]", { |
||||
var gallery = [ |
// Your options go here |
||||
{ |
}); |
||||
src: "https://lipsum.app/id/2/800x600", |
``` |
||||
thumb: "https://lipsum.app/id/2/80x80", |
|
||||
caption: "First image", |
#### Programmatic |
||||
}, |
|
||||
{ |
```js |
||||
src: "https://lipsum.app/id/3/800x600", |
// Image gallery |
||||
thumb: "https://lipsum.app/id/3/80x80", |
var gallery = [ |
||||
caption: "Second image", |
{ |
||||
}, |
src: "https://lipsum.app/id/2/800x600", |
||||
{ |
thumb: "https://lipsum.app/id/2/80x80", |
||||
src: "https://lipsum.app/id/4/800x600", |
caption: "First image", |
||||
thumb: "https://lipsum.app/id/4/80x80", |
}, |
||||
caption: "Third image", |
{ |
||||
}, |
src: "https://lipsum.app/id/3/800x600", |
||||
]; |
thumb: "https://lipsum.app/id/3/80x80", |
||||
|
caption: "Second image", |
||||
Fancybox.show(gallery, { |
}, |
||||
// Your options go here |
{ |
||||
}); |
src: "https://lipsum.app/id/4/800x600", |
||||
|
thumb: "https://lipsum.app/id/4/80x80", |
||||
// HTML element |
caption: "Third image", |
||||
Fancybox.show([{ src: "#dialog-content", type: "inline" }]); |
}, |
||||
|
]; |
||||
// A copy of HTML element |
|
||||
Fancybox.show([{ src: "#dialog-content", type: "clone" }]); |
Fancybox.show(gallery, { |
||||
|
// Your options go here |
||||
// Any HTML content |
}); |
||||
Fancybox.show([{ src: "<p>Lorem ipsum dolor sit amet.</p>", type: "html" }]); |
|
||||
``` |
// HTML element |
||||
|
Fancybox.show([{ src: "#dialog-content", type: "inline" }]); |
||||
### Carousel |
|
||||
|
// A copy of HTML element |
||||
Add HTML markup |
Fancybox.show([{ src: "#dialog-content", type: "clone" }]); |
||||
|
|
||||
```html |
// Any HTML content |
||||
<div id="myCarousel" class="carousel"> |
Fancybox.show([{ src: "<p>Lorem ipsum dolor sit amet.</p>", type: "html" }]); |
||||
<div class="carousel__slide">1</div> |
``` |
||||
<div class="carousel__slide">2</div> |
|
||||
<div class="carousel__slide">3</div> |
### Carousel |
||||
</div> |
|
||||
``` |
Add HTML markup |
||||
|
|
||||
Initialise Carousel |
```html |
||||
|
<div id="myCarousel" class="carousel"> |
||||
```js |
<div class="carousel__slide">1</div> |
||||
const myCarousel = new Carousel(document.querySelector("#myCarousel"), { |
<div class="carousel__slide">2</div> |
||||
// Your options go here |
<div class="carousel__slide">3</div> |
||||
}); |
</div> |
||||
``` |
``` |
||||
|
|
||||
Optionally, use CSS to customize container, navigation elements and slides |
Initialise Carousel |
||||
|
|
||||
```css |
```js |
||||
.carousel { |
const myCarousel = new Carousel(document.querySelector("#myCarousel"), { |
||||
color: #170724; |
// Your options go here |
||||
|
}); |
||||
--carousel-button-bg: #fff; |
``` |
||||
--carousel-button-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%); |
|
||||
|
Optionally, use CSS to customize container, navigation elements and slides |
||||
--carousel-button-svg-width: 20px; |
|
||||
--carousel-button-svg-height: 20px; |
```css |
||||
--carousel-button-svg-stroke-width: 2.5; |
.carousel { |
||||
} |
color: #170724; |
||||
|
|
||||
.carousel__slide { |
--carousel-button-bg: #fff; |
||||
display: flex; |
--carousel-button-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%); |
||||
align-items: center; |
|
||||
justify-content: center; |
--carousel-button-svg-width: 20px; |
||||
|
--carousel-button-svg-height: 20px; |
||||
width: 80%; |
--carousel-button-svg-stroke-width: 2.5; |
||||
height: 160px; |
} |
||||
margin-right: 6px; |
|
||||
|
.carousel__slide { |
||||
background-color: #eee; |
display: flex; |
||||
border-radius: 6px; |
align-items: center; |
||||
} |
justify-content: center; |
||||
``` |
|
||||
|
width: 80%; |
||||
### Panzoom |
height: 160px; |
||||
|
margin-right: 6px; |
||||
Add HTML markup |
|
||||
|
background-color: #eee; |
||||
```html |
border-radius: 6px; |
||||
<div id="myPanzoom" class="panzoom"> |
} |
||||
<img class="panzoom__content" src="https://lipsum.app/id/3/2000x1500" alt="" /> |
``` |
||||
</div> |
|
||||
``` |
### Panzoom |
||||
|
|
||||
Initialise Panzoom |
Add HTML markup |
||||
|
|
||||
```js |
```html |
||||
const myPanzoom = new Panzoom(document.querySelector("#myPanzoom"), { |
<div id="myPanzoom" class="panzoom"> |
||||
// Your options go here |
<img class="panzoom__content" src="https://lipsum.app/id/3/2000x1500" alt="" /> |
||||
}); |
</div> |
||||
``` |
``` |
||||
|
|
||||
Optionally, use CSS to customize container |
Initialise Panzoom |
||||
|
|
||||
```css |
```js |
||||
.panzoom { |
const myPanzoom = new Panzoom(document.querySelector("#myPanzoom"), { |
||||
width: 400px; |
// Your options go here |
||||
height: 300px; |
}); |
||||
} |
``` |
||||
``` |
|
||||
|
Optionally, use CSS to customize container |
||||
## License |
|
||||
|
```css |
||||
This is commercial software. See LICENSE.md for more info. |
.panzoom { |
||||
|
width: 400px; |
||||
|
height: 300px; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## License |
||||
|
|
||||
|
This is commercial software. See [LICENSE.md](LICENSE.md) for more info. |
||||
|
|||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@ |
|||||
.panzoom__controls{position:absolute;bottom:16px;right:16px;display:flex;flex-direction:column;transform-origin:bottom right;transform:scale(0.75)}.panzoom__button{cursor:pointer;margin:0;padding:10px;border:0;color:#222;background:#eee}@media(hover: hover){.panzoom__button:hover{background:#ccc}}.panzoom__button svg{vertical-align:top;pointer-events:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} |
.panzoom__controls{position:absolute;top:16px;left:16px;display:flex;flex-direction:column;transform-origin:top left;transform:scale(0.75)}.panzoom__button{cursor:pointer;margin:0;padding:10px;border:0;border-radius:0;color:#222;background:#eee}@media(hover: hover){.panzoom__button:hover{background:#ccc}}.panzoom__button svg{vertical-align:top;pointer-events:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} |
||||
Loading…
Reference in new issue