Skip to content

Commit 639c3fb

Browse files
tmorehousetmorehouse
authored
Update README.md
1 parent c02e7f0 commit 639c3fb

File tree

1 file changed

+104
-1
lines changed

1 file changed

+104
-1
lines changed

‎src/components/form-spinbutton/README.md

Lines changed: 104 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,106 @@
11
# Form Spinbutton
22

3-
> TBD
3+
> Spinbuttons are a BottstrapVue custom numerical range form control. Spin buttons allow for incrementing
4+
> or decrementing a numerical value within a range of a minimum and maximum number, with optional step
5+
> value.
6+
7+
`<b-form-spinbutton>` is WAI_ARIA compliant, allowing for keyboard control, and support both horizontal
8+
(default) and vertical layout.
9+
10+
```html
11+
<template>
12+
<div>
13+
<label for="demo-sb">Spin Button</label>
14+
<b-form-spinbutton id="demo-sb" v-model="value" min="1" max="100"></b-form-spinbutton>
15+
<p>Value: {{ value }}</p>
16+
</div>
17+
</template>
18+
19+
<script>
20+
export default {
21+
data() {
22+
return {
23+
value: 50
24+
}
25+
}
26+
}
27+
</script>
28+
29+
<!-- b-spin-botton-demo.vue -->
30+
```
31+
32+
## Overview
33+
34+
Spinbuttons have a default range from `1` to `100`, which can be changed by setting the `min` and
35+
`max` props. The default step increment is `1`, which can be changed via the `step` prop (decimal
36+
values allowed).
37+
38+
When `step` is set, the value will always be a multiple of the step size plus the minimum value.
39+
40+
The <kbd>ArrowUp</kbd> and <kbd>ArrowDown</kbd> keys can be used to increment or decrement the
41+
value.
42+
43+
## Styling
44+
45+
### Size
46+
47+
As with other form controls, `<b-form-spinbutton>` supports small and large sizing via setting the
48+
`size` prop to either `'sm'` or `'lg'`, respectively.
49+
50+
```html
51+
<template>
52+
<div>
53+
<label for="sb-small">Spin button - Small size</label>
54+
<b-form-spinbutton id="sb-small" size="sm" class="mb-2"></b-form-spinbutton>
55+
56+
<label for="db-default">Spin button - Default size</label>
57+
<b-form-spinbutton id="sb-default" class="mb-2"></b-form-spinbutton>
58+
59+
<label for="db-large">Spin button - Large size</label>
60+
<b-form-spinbutton id="sb-large" size="lg" class="mb-2"></b-form-spinbutton>
61+
</div>
62+
</template>
63+
64+
<!-- b-spin-botton-size.vue -->
65+
```
66+
67+
### Inline
68+
69+
TBD
70+
71+
### Vertical
72+
73+
Spinbuttons can be oriented in vertical mode
74+
75+
```html
76+
<template>
77+
<div>
78+
<label for="sb-vertical">Vertical spin button</label><br>
79+
<b-form-spinbutton id="sb-vertical" vertical></b-form-spinbutton>
80+
</div>
81+
</template>
82+
83+
<!-- b-spin-botton-vertical.vue -->
84+
```
85+
86+
Vertical spinbuttons can also be sized.
87+
88+
### Width
89+
90+
TBD
91+
92+
### Using in input groups
93+
94+
TBD
95+
96+
## Validation states
97+
98+
TBD
99+
100+
## Events
101+
102+
TBD
103+
104+
## Accessibility
105+
106+
TBD

0 commit comments

Comments
 (0)