❤
npm
Sign UpSign In

polycon

0.2.3 • Public • Published

polycon

NPM version Build Status Dependency Status devDependency Status

Create polygonal container.

Demo and Description

English | Japanese

Usage

ES module

import Polycon from 'polycon';
 
const polycon = new Polycon(document.querySelector('.polycon'));

API

method parameter return
new Polycon(element) element: HTMLElement Polycon
Polycon.new(selector) selector: string Array<Polycon>
Polycon.new(element) element: HTMLElement Polycon
Polycon.new(nodeList) nodeList: NodeList<HTMLElement> Array<Polycon>

Browser

<script src="polycon.min.js"></script>
<script>
polycon('.polycon');
</script> 

API

method parameter return
polycon(selector) selector: string Array<Polycon>
polycon(element) element: HTMLElement Polycon
polycon(nodeList) nodeList: NodeList<HTMLElement> Array<Polycon>

HTML Markup

<!-- basic -->
<div class="polycon" data-points="0,0 50%,50% w,0 w,h 0,h">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur quis temporibus dicta illo magnam consequuntur quod tempora non dolorum, libero voluptas, aliquam ipsum quam eius quae error sequi, unde alias.</p>
</div>
 
<!-- mediaquery -->
<div class="polycon" data-points="
    @media default { 0,0 50%,50% w,0 w,h 0,h }
    @media (max-width: 640px) { 0,0 50%,90% w,0 w,h 0,h }
    @media (orientation: landscape) { 10,10 50%,50%, w-10,10 w-10,h-10 10,h-10 }">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, mollitia nesciunt vero voluptates natus? Accusamus assumenda rem consectetur. Ullam sapiente voluptatibus praesentium deleniti quae culpa ab consequatur perferendis iste quam.</p>
</div>

Required attributes

mame value description
data-points flex points points attribute value of the extended to the <polygon> svg elements so as to correspond to a relative value. Separate the x and y by a comma, each apexes by spaces x1,y1 x2,y2 x3,y3.... Numeric value without unit (0, 300) is absolute pixel. Numeric value with percent (30%, 98%) is relative value. Numeric value with alphabet and symbol (w-30,h+30) is offset number.
Usable with media queries @media [mediaQueryString] { [coordinates for each apexes] } ....

StyleSheet

Automatically define into <style> element.

[data-polycon-node="root"] {
    position: relative;
    background: none !important;
}
[data-polycon-node="root"] > * {
    position: relative;
    z-index: 1;
}
[data-polycon-node="root"] > [data-polycon-node="background"] {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
}

Support browsers

  • Chrome
  • Firefox
  • Edge
  • Safari 5.1+
  • Internet Explorer 9† and 11
  • iOS Safari 8+
  • Android Browser 4.0+

†: IE9 is not support mediaQuery syntax because that was not support matchMedia API. Allways refrect default value in that syntax.

©YusukeHirao(@cloud10designs), MIT license.

Readme

Keywords

Package Sidebar

Install

npm i polycon

Repository

github.com/YusukeHirao/polycon

Homepage

github.com/YusukeHirao/polycon#readme

Weekly Downloads

0

Version

0.2.3

License

MIT

Last publish

Collaborators

  • yusukehirao
Try on RunKit
Report malware