CounterComponent
import Example from ‘../../src/@primer/gatsby-theme-doctocat/components/example’
Use CounterComponent to add a count to navigational elements and buttons.
Accessibility
Always use CounterComponent with adjacent text that provides supplementary information regarding what the count is for. For instance, Counter
should be accompanied with text such as issues or pull requests.
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
tag |
Symbol, String |
:span |
The rendered tag name |
classes |
String |
"" |
Classes and attributes |
count |
Integer, Float::INFINITY, nil |
0 |
The number to be displayed (e.x. # of issues, pull requests) |
limit |
Integer, nil |
9_000 |
Maximum value to display. Pass nil for no limit. (e.x. if count == 6,000 and limit == 5000, counter will display “5,000+”) |
hide_if_zero |
Boolean |
false |
If true, a hidden attribute is added to the counter if count is zero. |
text |
String |
"" |
Text to display instead of count. |
round |
Boolean |
false |
Whether to apply rounding logic to value. |
attributes |
Hash |
{} |
Classes and attributes |
Examples
Default
<%= render(Ariadne::CounterComponent.new(count: 25)) %>
Schemes
<%= render(Ariadne::CounterComponent.new(count: 25)) %>
<%= render(Ariadne::CounterComponent.new(count: 25)) %>
Have questions?
Still have questions? Talk to support.