Skip to content

Commit edf80bd

Browse files
tmorehousetmorehouse
authored
Update CHEATSHEET.md
1 parent 707c86e commit edf80bd

File tree

1 file changed

+163
-47
lines changed

1 file changed

+163
-47
lines changed

‎docs/CHEATSHEET.md

Lines changed: 163 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22

33
<h3>Prop: <code>state</code></h3>
44
<strong>type: String</strong>
5-
<table class="table table-sm">
5+
6+
<table class="table table-sm table-responsive">
67
<thead class="thead-default">
78
<tr>
89
<th>Standard Values</th>
@@ -17,108 +18,223 @@
1718
<tbody>
1819
<tr>
1920
<th><code>success</code></th>
20-
<td>&#x2713;</td>
21-
<td>&#x2716;</td>
22-
<td>&#x2716;</td>
23-
<td>&#x2713;</td>
24-
<td>&#x2713;</td>
21+
<td>&#x2714;</td>
2522
<td>&#x2716;</td>
23+
<td>&#x2726;</td>
24+
<td>&#x2731;</td>
25+
<td>&#x2714;</td>
26+
<td>&#x2726;</td>
2627
</tr>
2728
<tr>
2829
<th><code>danger</code></th>
29-
<td>&#x2713;</td>
30-
<td>&#x2716;</td>
31-
<td>&#x2716;</td>
32-
<td>&#x2713;</td>
33-
<td>&#x2713;</td>
30+
<td>&#x2714;</td>
3431
<td>&#x2716;</td>
32+
<td>&#x2726;</td>
33+
<td>&#x2731;</td>
34+
<td>&#x2714;</td>
35+
<td>&#x2726;</td>
3536
</tr>
3637
<tr>
3738
<th><code>warning</code></th>
38-
<td>&#x2713;</td>
39-
<td>&#x2716;</td>
40-
<td>&#x2716;</td>
41-
<td>&#x2713;</td>
42-
<td>&#x2713;</td>
39+
<td>&#x2714;</td>
4340
<td>&#x2716;</td>
41+
<td>&#x2726;</td>
42+
<td>&#x2731;</td>
43+
<td>&#x2714;</td>
44+
<td>&#x2726;</td>
4445
</tr>
4546
</tbody>
4647
</table>
47-
**note:** form-input (textual) the variant is only used to add the indictor icon when placed inside a form-fieldset.
48-
Variants can be aplied to form-select and for checkbox indirectly by placing them inside a form-fieldset.
48+
49+
**note:**
50+
51+
- &#x2731; `<b-form-input>` (textual) the state is only used to add the indictor
52+
icon when placed inside a `<b-form-fieldset>` which has the *same* `state` applied.
53+
- &#x2726; States can be aplied to `<b-form-select>` and `<b-form-checkbox>` indirectly
54+
by placing them inside a `<b-form-fieldset>` which has a `state` applied.
4955

5056
<h3>Prop: <code>variant</code></h3>
5157
<strong>type: String</strong>
52-
<table class="table table-sm">
58+
59+
<table class="table table-sm table-responsive">
5360
<thead class="thead-default">
5461
<tr>
5562
<th>Standard Values</th>
63+
<th><code>&lt;b-alert&gt;</code></th>
64+
<th><code>&lt;b-badge&gt;</code></th>
5665
<th><code>&lt;b-button&gt;</code></th>
5766
<th><code>&lt;b-table&gt;</code></th>
5867
<th><code>&lt;b-card&gt;</code></th>
68+
<th><code>&lt;b-dropdown&gt;</code></th>
69+
<th><code>&lt;b-list-group-item&gt;</code></th>
70+
<th><code>&lt;b-navbar&gt;</code></th>
71+
<th><code>&lt;b-progress&gt;</code></th>
5972
</tr>
6073
</thead>
6174
<tbody>
75+
<tr>
76+
<th><code>default</code></th>
77+
<td>&#x2716;</td>
78+
<td>&#x2714;</td>
79+
<td>&#x2716;</td>
80+
<td>&#x2714;</td>
81+
<td> </td>
82+
<td>&#x2716;</td>
83+
<td>&#x2716;</td>
84+
<td>&#x2716;</td>
85+
<td>&#x2716;</td>
86+
</tr>
6287
<tr>
6388
<th><code>primary</code></th>
64-
<td>&#x2713;</td>
65-
<td>&#x2713;</td>
89+
<td>&#x2716;</td>
90+
<td>&#x2714;</td>
91+
<td>&#x2714;</td>
92+
<td>&#x2714;</td>
6693
<td> </td>
94+
<td>&#x2714;</td>
95+
<td>&#x2716;</td>
96+
<td>&#x2716;</td>
97+
<td>&#x2716;</td>
6798
</tr>
6899
<tr>
69-
<th><code>success</code></th>
70-
<td>&#x2713;</td>
71-
<td>&#x2713;</td>
100+
<th><code>secondary</code></th>
101+
<td>&#x2716;</td>
102+
<td>&#x2716;</td>
103+
<td>&#x2714;</td>
104+
<td>&#x2714;</td>
72105
<td> </td>
106+
<td>&#x2714;</td>
107+
<td>&#x2716;</td>
108+
<td>&#x2716;</td>
109+
<td>&#x2716;</td>
73110
</tr>
74111
<tr>
75-
<th><code>danger</code></th>
76-
<td>&#x2713;</td>
77-
<td>&#x2713;</td>
112+
<th><code>success</code></th>
113+
<td>&#x2714;</td>
114+
<td>&#x2714;</td>
115+
<td>&#x2714;</td>
116+
<td>&#x2714;</td>
78117
<td> </td>
118+
<td>&#x2714;</td>
119+
<td>&#x2714;</td>
120+
<td>&#x2714;</td>
121+
<td>&#x2714;</td>
79122
</tr>
80123
<tr>
81124
<th><code>warning</code></th>
82-
<td>&#x2713;</td>
83-
<td>&#x2713;</td>
125+
<td>&#x2714;</td>
126+
<td>&#x2714;</td>
127+
<td>&#x2714;</td>
128+
<td>&#x2714;</td>
84129
<td> </td>
130+
<td>&#x2714;</td>
131+
<td>&#x2714;</td>
132+
<td>&#x2714;</td>
133+
<td>&#x2714;</td>
85134
</tr>
86135
<tr>
87136
<th><code>info</code></th>
88-
<td>&#x2713;</td>
89-
<td>&#x2713;</td>
137+
<td>&#x2714;</td>
138+
<td>&#x2714;</td>
139+
<td>&#x2714;</td>
140+
<td>&#x2714;</td>
90141
<td> </td>
142+
<td>&#x2714;</td>
143+
<td>&#x2714;</td>
144+
<td>&#x2714;</td>
145+
<td>&#x2714;</td>
91146
</tr>
92147
<tr>
93-
<th><code>link</code></th>
94-
<td>&#x2713;</td>
148+
<th><code>danger</code></th>
149+
<td>&#x2714;</td>
150+
<td>&#x2714;</td>
151+
<td>&#x2714;</td>
152+
<td>&#x2714;</td>
153+
<td> </td>
154+
<td>&#x2714;</td>
155+
<td>&#x2714;</td>
156+
<td>&#x2714;</td>
157+
<td>&#x2714;</td>
158+
</tr>
159+
<tr>
160+
<th><code>outline-primary</code></th>
161+
<td>&#x2716;</td>
162+
<td>&#x2716;</td>
163+
<td>&#x2714;</d>
95164
<td>&#x2716;</td>
96165
<td> </td>
166+
<td>&#x2714;</td>
167+
<td>&#x2716;</td>
168+
<td>&#x2716;</td>
169+
<td>&#x2716;</td>
170+
</tr>
171+
<tr>
172+
<th><code>outline-secondary</code></th>
173+
<td>&#x2716;</td>
174+
<td>&#x2716;</td>
175+
<td>&#x2714;</d>
176+
<td>&#x2716;</td>
177+
<td> </td>
178+
<td>&#x2714;</td>
179+
<td>&#x2716;</td>
180+
<td>&#x2716;</td>
181+
<td>&#x2716;</td>
97182
</tr>
98183
<tr>
99184
<th><code>outline-success</code></th>
100-
<td>&#x2713;</d>
185+
<td>&#x2716;</td>
186+
<td>&#x2716;</td>
187+
<td>&#x2714;</d>
101188
<td>&#x2716;</td>
102189
<td> </td>
190+
<td>&#x2714;</td>
191+
<td>&#x2716;</td>
192+
<td>&#x2716;</td>
193+
<td>&#x2716;</td>
103194
</tr>
104195
<tr>
105196
<th><code>outline-warning</code></th>
106-
<td>&#x2713;</td>
197+
<td>&#x2716;</td>
198+
<td>&#x2716;</td>
199+
<td>&#x2714;</td>
107200
<td>&#x2716;</td>
108201
<td> </td>
202+
<td>&#x2714;</td>
203+
<td>&#x2716;</td>
204+
<td>&#x2716;</td>
205+
<td>&#x2716;</td>
109206
</tr>
110207
<tr>
111208
<th><code>outline-danger</code></th>
112-
<td>&#x2713;</td>
209+
<td>&#x2716;</td>
210+
<td>&#x2716;</td>
211+
<td>&#x2714;</td>
113212
<td>&#x2716;</td>
114213
<td> </td>
214+
<td>&#x2714;</td>
215+
<td>&#x2716;</td>
216+
<td>&#x2716;</td>
217+
<td>&#x2716;</td>
218+
</tr>
219+
<tr>
220+
<th><code>link</code></th>
221+
<td>&#x2716;</td>
222+
<td>&#x2716;</td>
223+
<td>&#x2714;</td>
224+
<td>&#x2716;</td>
225+
<td> </td>
226+
<td>&#x2714;</td>
227+
<td>&#x2716;</td>
228+
<td>&#x2716;</td>
229+
<td>&#x2716;</td>
115230
</tr>
116231
</tbody>
117232
</table>
118233

119234
<h3>Prop: <code>size</code>, <code>button-size</code></h3>
120235
<strong>type: String</strong>
121-
<table class="table table-sm">
236+
237+
<table class="table table-sm table-responsive">
122238
<thead class="thead-default">
123239
<tr>
124240
<th>Standard Values</th>
@@ -133,21 +249,21 @@ Variants can be aplied to form-select and for checkbox indirectly by placing the
133249
<tbody>
134250
<tr>
135251
<th><code>lg</code></th>
136-
<td>&#x2713;</td>
252+
<td>&#x2714;</td>
137253
<td> </td>
138-
<td>&#x2713;</td>
139-
<td>&#x2713;</td>
140-
<td>&#x2713;</td>
141-
<td>&#x2713;</td>
254+
<td>&#x2714;</td>
255+
<td>&#x2714;</td>
256+
<td>&#x2714;</td>
257+
<td>&#x2714;</td>
142258
</tr>
143259
<tr>
144260
<th><code>sm</code></th>
145-
<td>&#x2713;</td>
261+
<td>&#x2714;</td>
146262
<td> </d>
147-
<td>&#x2713;</td>
148-
<td>&#x2713;</td>
149-
<td>&#x2713;</td>
150-
<td>&#x2713;</td>
263+
<td>&#x2714;</td>
264+
<td>&#x2714;</td>
265+
<td>&#x2714;</td>
266+
<td>&#x2714;</td>
151267
</tr>
152268
</tbody>
153269
</table>

0 commit comments

Comments
 (0)