@9am/before-after

1.1.4 • Public • Published
before-after-logo

<before-after>

A small Web Component shows a before-after comparison. 🌓

GitHub npm npm npm bundle size

Demo

Go to the Home page.

Usage

Include via CDN(e.g. unpkg) or Download a copy

<script src="https://unpkg.com/@9am/before-after/dist/index.min.js"></script>

<before-after>
    <section slot="before">
        <h1>BEFORE</h1>
    </section>
    <section slot="after">
        <h1>AFTER</h1>
    </section>
</before-after>
Or import the ESM version
<script type="module">
    import 'https://unpkg.com/@9am/before-after/dist/index.es.js';
</script>
Or install via npm
npm install @9am/before-after

Documentation

Attributes

Name Type Default Description
varient linear | radial | conic
repeating-linear | repeating-radial | repeating-conic
linear The varient.
orient horizontal | vertical horizontal The orientation.
value number 50 The position of the thumb bar. (0-100)

CSS Properties

Name Type Default Description
--position css gradient params before <color-stop-list> linear: to left
radial: circle at center
conic: at center
The control for how the mask behaves.
--repeat number 6 The repeat times for repeating- varients.
--thumb-size css size 1px The thumb size.
--thumb-color css color white The thumb color.

License

MIT

Package Sidebar

Install

npm i @9am/before-after

Weekly Downloads

2

Version

1.1.4

License

MIT

Unpacked Size

21.9 kB

Total Files

6

Last publish

Collaborators

  • 9am