diff --git a/README.md b/README.md index f55b254..1357a2e 100644 --- a/README.md +++ b/README.md @@ -1 +1,218 @@ -TBA +# Fancyapps UI + +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/. + +## Installation + +### NPM + +Use either `npm` or `yarn` as follows: + +```bash +npm install @fancyapps/ui +// or +yarn add @fancyapps/ui +``` + +Import one or more components: + +```jsx +import { Fancybox, Carousel, Panzoom } from "@fancyapps/ui"; +``` + +Import the appropriate CSS file, example: + +```jsx +import "@fancyapps/ui/dist/fancybox.css"; +``` + +### CDN + +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. +::: + +```html + +``` + +Or use ES6 import: + +```html + +``` + +Remember to include the appropriate CSS file, example: + +```html + +``` + +## Usage + +### Fancybox + +There are two ways to use Fancybox. + +#### 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. + +```jsx + + Image + +``` + +```jsx + + Video + +``` + +```jsx + + Iframe + +``` + +```jsx + + + +``` + +#### Programmatic + +```js +// Image gallery +var gallery = [ + { + src: "https://lipsum.app/id/2/800x600", + thumb: "https://lipsum.app/id/2/80x80", + caption: "First image", + }, + { + src: "https://lipsum.app/id/3/800x600", + thumb: "https://lipsum.app/id/3/80x80", + caption: "Second image", + }, + { + src: "https://lipsum.app/id/4/800x600", + thumb: "https://lipsum.app/id/4/80x80", + caption: "Third image", + }, +]; + +Fancybox.show(gallery, { + // Your options go here +}); + +// HTML element +Fancybox.show([{ src: "#dialog-content", type: "inline" }]); + +// A copy of HTML element +Fancybox.show([{ src: "#dialog-content", type: "clone" }]); + +// Any HTML content +Fancybox.show([{ src: "

Lorem ipsum dolor sit amet.

", type: "html" }]); +``` + +### Carousel + +Add HTML markup + +```html + +``` + +Initialise Carousel + +```js +const myCarousel = new Carousel(document.querySelector("#myCarousel"), { + // Your options go here +}); +``` + +Optionally, use CSS to customize container, navigation elements and slides + +```css +.carousel { + color: #170724; + + --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%); + + --carousel-button-svg-width: 20px; + --carousel-button-svg-height: 20px; + --carousel-button-svg-stroke-width: 2.5; +} + +.carousel__slide { + display: flex; + align-items: center; + justify-content: center; + + width: 80%; + height: 160px; + margin-right: 6px; + + background-color: #eee; + border-radius: 6px; +} +``` + +### Panzoom + +Add HTML markup + +```html +
+ +
+``` + +Initialise Panzoom + +```js +const myPanzoom = new Panzoom(document.querySelector("#myPanzoom"), { + // Your options go here +}); +``` + +Optionally, use CSS to customize container + +```css +.panzoom { + width: 400px; + height: 300px; +} +``` + +## License + +This is commercial software. See LICENSE.md for more info.