HTML Polygonfor React and Vue 3

HTML Polygon for Vue 3

Installation

Install the @html-polygon/vue NPM package:

# NPM
npm install @html-polygon/vue

# Yarn
yarn add @html-polygon/vue

# PNPM
pnpm add @html-polygon/vue

Then import the Polygon component into your Vue 3 project:

import { Polygon } from '@html-polygon/vue'

There are also “named” components available like: Pentagon, Hexagon, and Enneadecagon:

import { Pentagon, Enneadecagon } from '@html-polygon/vue'

These work just like the Polygon component, except they don’t accept the sides attribute. You can find the complete list of named components in the code.

Usage

• sides attribute
• idSuffix attribute
• margin attribute
• borderWidth attribute
• borderColor attribute
• borderStyle attribute
• borderClass attribute
• paddding attribute
• rotate attribute
• stable attribute
• center attribute
• debug attribute
• ref attribute
• Event handlers
• Accessibility attributes

sides attribute

The number of sides the polygon should have.

idSuffix attribute

Adds a suffix to generated HTML elements built by the Polygon component. Useful if you need to address multiple polygons in a single document by their HTML id atribute.

margin attribute

The polygon that is constructed will be built inside an HTML element which is defined by both the containing HTML and any style that is passed to the Polygon component.

This margin is a percentage from 0% to 50% of the height and width of this containing element.

That means that if you specify or inherit unequal height and width for the Polygon component, you will get uneven margin applied in proportion.

borderWidth attribute

The polygon that is constructed will be built inside an HTML element which is defined by both the containing HTML and any style that is passed to the Polygon component.

The width of the border is a percentage from 0% to 50% of the height and width of this containing element.

That means that if you specify or inherit unequal height and width for the Polygon component, you will get uneven border width applied in proportion.

borderColor attribute

The color of the polygon’s border. Any CSS color value will work.

borderStyle attribute

CSS properties to be applied to the Polygon border. Keep in mind when applying styles that the border is actually an HTML div element. So the effect of certain styles may be unexpected. For example, setting backgroundColor here will override the borderColor attribute.

Some CSS properties should not be set as they will replace internal styles, these are:

• position - always absolute
• height - always 100%
• width - always 100%
• clipPath - always the calculated polygon shape for the border

borderClass attribute

Adds a class name to the border HTML element built by the Polygon component. You can use Vue's class binding capabilities if desired.

padding attribute

The padding applied to text or HTML elements inside the polygon itself.

The polygon that is constructed will be built inside an HTML element which is defined by both the containing HTML and any style that is passed to the Polygon component.

This padding is a percentage from 0% to 50% of the height and width of this containing element.

That means that if you specify or inherit unequal height and width for the Polygon component, you will get uneven padding applied in proportion.

rotate attribute

Rotates the polygon shape by the given number of degrees, without rotating the contents of the polygon.

To rotate the entire polygon including its contents you can use basic CSS transform properties applied using the style attribute.

stable attribute

When true, the stable attribute applies a rotation to the polygon which places one side flat at the bottom of the polygon.

Any further rotation applied via the rotate attribute is additive to this pre-applied rotation.

center attribute

Sets the center point of the polygon within the containing element. The values are a percentage of the containing element’s height and width.

debug attribute

When true, the debug attribute adds additional styles and elements to the generated HTML in order to help visualise the code being generated.

ref attribute

You can pass a ref ID to the Polygon component that will be applied to the root HTML element. See the Vue documentation on template refs for more information.

Event handlers

The Polygon component accepts standard Vue 3 event handlers like:

• @mouseover
• @mouseout
• @mousedown
• @mouseup
• @click

Accessibility attributes

The Polygon component accepts all the standard ARIA attributes available in Vue 3, including the role attribute.