Repository navigation
Expand file tree
/
Copy pathdocs.html
More file actions
166 lines (154 loc) · 7.1 KB
/
Copy pathdocs.html
File metadata and controls
166 lines (154 loc) · 7.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
table.documentation {
width: 90%;
border-collapse: collapse;
margin: 24px auto;
}
table.documentation thead tr {
background: #ddd;
}
table.documentation th {
font-size: 12pt;
font-weight: normal;
padding: 8px;
text-align: left;
}
table.documentation th.option_name {
width: 15%;
}
table.documentation th.option_value {
width: 20%;
}
table.documentation th.option_description {
width: 65%;
}
table.documentation tr {
border-width: 1px 0px 1px 0px;
border-color: #ddd;
border-style: solid;
background-color: #eee;
}
table.documentation td {
padding: 8px 8px 16px 8px;
vertical-align: top;
}
<h2>Options</h2>
<p>The <code>flapper()</code> function accepts an object containing options with the following values:</p>
<table class="documentation">
<thead>
<tr>
<th class="option_name">Option</th>
<th class="option_value">Value</th>
<th class="option_description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>width</code></td>
<td><code>6</code> (default)</td>
<td>The width of the display in digits. Flapper will
accept any value here, so be careful. If you
want to display multiple pieces of information
on one line, it's probably better to use
multiple flappers.</td>
</tr>
<tr>
<td><code>format</code></td>
<td><em>null</em> (default)</td>
<td>A object with options to send to the numberformatter
plugin. This plugin isn't required unless this
is set.</td>
</tr>
<tr>
<td rowspan=2><code>align</code></td>
<td><code>right</code> (default)</td>
<td>Flapper will right-align the display, and pad its value with spaces
on the left.</td>
</tr>
<tr>
<td><code>left</code></td>
<td>Flapper will left-align the display, and pad its value with spaces
on the right.</td>
</tr>
<tr>
<td><code>padding</code></td>
<td><code>&nbsp;</code> (default)</td>
<td>Flapper uses this value to pad the display. Set this
to <code>0</code> if you're not using the numberformatter
plugin and you want to pad your numbers with
zeros.</td>
</tr>
<tr>
<td><code>digits</code></td>
<td><em>see below</em></td>
<td>A object with options for the digits.</td>
</tr>
</tbody>
</table>
<p>The digits take these options:</p>
<table class="documentation">
<thead>
<tr>
<th class="option_name">Option</th>
<th class="option_value">Value</th>
<th class="option_description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>timing</code></td>
<td><code>150</code> (default)</td>
<td>Animation duration in milliseconds.</td>
</tr>
<tr>
<td rowspan=3><code>chars_preset</code></td>
<td><code>num</code> (default)</td>
<td>Flapper will display only numerals
and common punctuation (spaces, commas, decimal points,
colons, negative and dollar signs.)</td>
</tr>
<tr>
<td><code>alpha</code></td>
<td>Flapper will display only spaces and capital
letters.</td>
</tr>
<tr>
<td><code>alphanum</code></td>
<td>Flapper will display all <code>num</code> values
plus capital letters.</td>
</tr>
<tr>
<td><code>chars</code></td>
<td><em>null</em></td>
<td>If you'd like your own custom stack of letters and
numbers, pass an array of characters here. This
value will override the <code>chars_preset</code>
value.</td>
</tr>
<tr>
<td rowspan=3><code>animation</code></td>
<td><code>medium</code> (default)</td>
<td>Flapper uses a very simple, four-frame animation
as each new symbols falls into place. This is probably
the best options for most applications. It
requires the transform plugin.</td>
</tr>
<tr>
<td><code>slow</code></td>
<td>Flapper uses fully-tweened animations to show the
symbols falling into place. This options is best
for large displays with only a handful of digits
(like the header on this page.) It also looks great
with a slower timing value (≥ 200). It requires the
transform plugin.</td>
</tr>
<tr>
<td><code>fast</code></td>
<td>Flapper uses a minimal two-frame animation to show
each symbol falling into place. Use this if you're
using multiple displays on a page and you find that
the animations looks jerky. This animation looks
best with a fast timing value (≤100). This
option doesn't require any plugins.</td>
</tr>
</tbody>
</table>