suitcss-components-arrow

SUIT Arrow

A SUIT component for an arrow to use with dropdowns, tooltips etc.

Read more about SUIT's design principles.

Installation

• npm: npm install suitcss-components-arrow
• Download: releases

Available classes

• Arrow - The core Arrow class
• Arrow--[top|right|bottom|left] – Position modifiers. Arrow--bottom is the default.

Configurable variables

--Arrow-size
 
--Arrow-backgroundColor
 
--Arrow-borderColor
--Arrow-borderRadius
 
--Arrow-boxShadowColor
--Arrow-boxShadowSpread

Usage

<span class="Arrow"></span>

It is recommended to use a wrapper element to control the Arrow position. E.g.:

<span class="Dropdown-arrow" aria-hidden="true">
  <span class="Arrow"></span>
</span>

Tweaking the Arrow Size

The arrow size can be changed by overriding the font-size of the .Arrow element.

Testing

Install Node (comes with npm).

npm install

To generate a build:

npm run build

To generate the testing build.

npm run build-test

Basic visual tests are in test/index.html.

To pre-process:

npm run preprocess

To pre-process the tests:

npm run preprocess-test

Browser support

• Google Chrome 4+
• Opera 11.5+
• Firefox 3.5+
• Safari 3.1+
• Internet Explorer 9+