An easy-to-use Ember component for rendering SVG section dividers
MIT License
A customizable Ember component for rendering SVG section dividers.
ember install ember-divider-dots
For usage tips and visible examples, check out the Ember Divider Dots demo app.
numDots
Integer
4
lineWidth
width
attribute.String
'100%'
lineHeight
height
attribute.String
'100%'
direction
String
horizontal
, vertical
horizontal
dotType
String
circle
, square
circle
crossSizePct
Number
100
gapSizePct
The size of each gutter (the space between two dots), given as a percentage of the dotSize
.
Note: This will have no effect when justify
is set to between
, as the gutter space will be automatically distributed.
type: Number
default: 125
fill
fill
attribute.String
currentColor
justify
start
, center
, end
, between
String
center
Section divider "dots" are a common design pattern, and they can add a nice touch to long, content-heavy pages.
But implementing them is tough!
There's a wide variety of ways to approach their markup and styling, and if you want to use SVG (good for you!), the calculus for sizing and positioning gets even more involved.
And so as simple as they seem, divider dots are often overlooked.
That's where Ember Divider Dots comes in. The addon provides an easy-to-use, easy-to-configure component that generates a line of "dots" as crisp SVGs wherever you choose to place it.
If you have a request for a new dot type, please feel free to open up an issue for it.
git clone <repository-url>
this repositorycd ember-divider-dots
npm install
bower install
ember serve
npm test
(Runs ember try:each
to test your addon against multiple Ember versions)ember test
ember test --server
ember build