Sample library of Angular Elements components geared for a slideshow
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e initial commit Jan 5, 2019
src refactor(SlidesModule): remove unused Jan 15, 2019
.editorconfig initial commit Jan 5, 2019
.gitignore
CHANGELOG.md chore(release): patch version release Jan 13, 2019
CODE_OF_CONDUCT.md build: create build script and set up folder for npm distribution Jan 9, 2019
CONTRIBUTING.md build: create build script and set up folder for npm distribution Jan 9, 2019
LICENSE.md
README.md docs(README): add details about usage and React support Jan 13, 2019
angular.json build: use node script for build process Jan 12, 2019
build.js chore: move some style and remove support for Angular Jan 12, 2019
package-lock.json 0.1.3 Jan 13, 2019
package.json 0.1.3 Jan 13, 2019
tsconfig.json initial commit Jan 5, 2019
tslint.json

README.md

Angular Elements Slides

This is a sample library of Angular Elements components geared for a slideshow. Doesn't play well in Angular applications, but should work with other framworks (tested with vanilla HTML/JS, React and Vue).

Downloading

Angular Elements Slides is available via NPM:

npm install nge-slides

Then just import the library into your code like so:

import 'nge-slides';

Or you can use Angular Elements Slides via CDN:

<script src="https://unpkg.com/nge-slides@0.1.3/nge-slides.js"></script>

Example Usage

<!-- Required wrapper for all slides as well as progress bar -->
<nge-slides-wrapper>
  <nge-slide type="title" title="Angular Element Slides" subtitle="Web Components Made Easy"></nge-slide>
  <nge-slide type="section" title="Section Slide"></nge-slide>
  <nge-slide title="Slide 3" content="Content can be defined via an attribute"></nge-slide>
  <nge-slide title="Slide 4">
    <p>Or you can put your content in as HTML</p>
  </nge-slide>
  <nge-slide type="blank">
    <p>A blank slide has little to no properties</p>
    <p>All it's designed to be is an HTML passthrough</p>
  </nge-slide>
  <nge-slide type="title" title="Goodbye"></nge-slide>
  <nge-slides-progress-bar></nge-slides-progress-bar>
</nge-slides-wrapper>