search

moxie-lean / ng-patternlab

Atomic Design Patternlab in Angular for use with the LEAN Ecosystem
http://getmoxied.net/lean
MIT License
0 stars 1 forks source link

Add Lightbox component #4

Open adamf321 opened 8 years ago

adamf321 commented 8 years ago

Copy in from ng-elements (then we can delete this repo)

adamf321 commented 8 years ago

Here's the existing one: https://github.com/moxienyc/Now-This-web-app/tree/develop/app/components/utils/lightbox

I'm not sure if there are better ways to acheive this? @andybar2 @chrisweight

adamf321 commented 8 years ago

Here's some help text I wrote which might be reusable:

Lightbox

Place on an element to turn it into a lightbox. The element and it's children will hide/show as the lightbox triggers are clicked.

<section ln-lightbox="about-1">
    <h3>Lightbox Title</h3>
    <div class="inner">
        Some content.
    </div>
</section>
 Lightbox Trigger

Place on an element to turn it into a lightbox trigger.

<a href="#" ln-lightbox-trigger="about-1">Click Me</a>
By default it will toggler the lightbox. Use the lightbox-action attribute to specify (possible actions are hid, show and toggle).

<a href="#" ln-lightbox-trigger="about-1" lightbox-action="show">Click Me</a>
Omit the lightbox id to control all lightboxes on the page. E.g. to hide them all:

<a href="#" ln-lightbox-trigger lightbox-action="hide">Click Me</a>