|
1 | 1 | <template> |
2 | | - <b-tabs> |
3 | | - <b-tab> |
| 2 | + <CTabs> |
| 3 | + <CTab active> |
4 | 4 | <template slot="title"> |
5 | | - <i class='icon-list'></i> |
| 5 | + <i class="icon-list"></i> |
6 | 6 | </template> |
7 | | - <b-list-group class="list-group-accent"> |
8 | | - <b-list-group-item class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small"> |
| 7 | + <CListGroup class="list-group-accent"> |
| 8 | + <CListGroupItem class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small"> |
9 | 9 | Today |
10 | | - </b-list-group-item> |
11 | | - <b-list-group-item href="#" class="list-group-item-accent-warning list-group-item-divider"> |
| 10 | + </CListGroupItem> |
| 11 | + <CListGroupItem href="#" class="list-group-item-accent-warning list-group-item-divider"> |
12 | 12 | <div class="avatar float-right"> |
13 | 13 | < img class= "img-avatar" src= "img/avatars/7.jpg" alt= "[email protected]"> |
14 | 14 | </div> |
|
21 | 21 | <small class="text-muted"> |
22 | 22 | <i class="icon-location-pin"></i> Palo Alto, CA |
23 | 23 | </small> |
24 | | - </b-list-group-item> |
25 | | - <b-list-group-item href="#" class="list-group-item-accent-info"> |
| 24 | + </CListGroupItem> |
| 25 | + <CListGroupItem href="#" class="list-group-item-accent-info"> |
26 | 26 | <div class="avatar float-right"> |
27 | 27 | < img class= "img-avatar" src= "img/avatars/4.jpg" alt= "[email protected]"> |
28 | 28 | </div> |
29 | 29 | <div>Skype with <strong>Megan</strong> |
30 | 30 | </div> |
31 | 31 | <small class="text-muted mr-3"><i class="icon-calendar"></i> 4 - 5pm</small> |
32 | 32 | <small class="text-muted"><i class="icon-social-skype"></i> On-line</small> |
33 | | - </b-list-group-item> |
| 33 | + </CListGroupItem> |
34 | 34 | <hr class="transparent mx-3 my-0"> |
35 | | - <b-list-group-item class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small"> |
| 35 | + <CListGroupItem class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small"> |
36 | 36 | Tomorrow |
37 | | - </b-list-group-item> |
38 | | - <b-list-group-item href="#" class="list-group-item-accent-danger list-group-item-divider"> |
| 37 | + </CListGroupItem> |
| 38 | + <CListGroupItem href="#" class="list-group-item-accent-danger list-group-item-divider"> |
39 | 39 | <div>New UI Project - <strong>deadline</strong> |
40 | 40 | </div> |
41 | 41 | <small class="text-muted mr-3"><i class="icon-calendar"></i> 10 - 11pm</small> |
|
57 | 57 | < img class= "img-avatar" src= "img/avatars/6.jpg" alt= "[email protected]"> |
58 | 58 | </div> |
59 | 59 | </div> |
60 | | - </b-list-group-item> |
61 | | - <b-list-group-item href="#" class="list-group-item-accent-success list-group-item-divider"> |
| 60 | + </CListGroupItem> |
| 61 | + <CListGroupItem href="#" class="list-group-item-accent-success list-group-item-divider"> |
62 | 62 | <div><strong>#10 Startups.Garden</strong> Meetup</div> |
63 | 63 | <small class="text-muted mr-3"><i class="icon-calendar"></i> 1 - 3pm</small> |
64 | 64 | <small class="text-muted"><i class="icon-location-pin"></i> Palo Alto, CA</small> |
65 | | - </b-list-group-item> |
66 | | - <b-list-group-item href="#" class="list-group-item-accent-primary list-group-item-divider"> |
| 65 | + </CListGroupItem> |
| 66 | + <CListGroupItem href="#" class="list-group-item-accent-primary list-group-item-divider"> |
67 | 67 | <div><strong>Team meeting</strong></div> |
68 | 68 | <small class="text-muted mr-3"><i class="icon-calendar"></i> 4 - 6pm</small> |
69 | 69 | <small class="text-muted"><i class="icon-home"></i> creativeLabs HQ</small> |
|
90 | 90 | < img src= "img/avatars/8.jpg" class= "img-avatar" alt= "[email protected]"> |
91 | 91 | </div> |
92 | 92 | </div> |
93 | | - </b-list-group-item> |
94 | | - </b-list-group> |
95 | | - </b-tab> |
96 | | - <b-tab> |
| 93 | + </CListGroupItem> |
| 94 | + </CListGroup> |
| 95 | + </CTab> |
| 96 | + <CTab> |
97 | 97 | <template slot="title"> |
98 | 98 | <i class='icon-speech'></i> |
99 | 99 | </template> |
|
117 | 117 | <div class="py-3 pb-5 mr-3 float-left"> |
118 | 118 | <div class="avatar"> |
119 | 119 | < img src= "img/avatars/7.jpg" class= "img-avatar" alt= "[email protected]"> |
120 | | - <c-badge variant="danger" class="avatar-status"></c-badge> |
| 120 | + <CBadge variant="danger" class="avatar-status"></CBadge> |
121 | 121 | </div> |
122 | 122 | </div> |
123 | 123 | <div> |
|
132 | 132 | <div class="py-3 pb-5 mr-3 float-left"> |
133 | 133 | <div class="avatar"> |
134 | 134 | < img src= "img/avatars/7.jpg" class= "img-avatar" alt= "[email protected]"> |
135 | | - <c-badge variant="info" class="avatar-status"></c-badge> |
| 135 | + <CBadge variant="info" class="avatar-status"></CBadge> |
136 | 136 | </div> |
137 | 137 | </div> |
138 | 138 | <div> |
|
147 | 147 | <div class="py-3 pb-5 mr-3 float-left"> |
148 | 148 | <div class="avatar"> |
149 | 149 | < img src= "img/avatars/7.jpg" class= "img-avatar" alt= "[email protected]"> |
150 | | - <c-badge variant="warning" class="avatar-status"></c-badge> |
| 150 | + <CBadge variant="warning" class="avatar-status"></CBadge> |
151 | 151 | </div> |
152 | 152 | </div> |
153 | 153 | <div> |
|
162 | 162 | <div class="py-3 pb-5 mr-3 float-left"> |
163 | 163 | <div class="avatar"> |
164 | 164 | < img src= "img/avatars/7.jpg" class= "img-avatar" alt= "[email protected]"> |
165 | | - <c-badge variant="dark" class="avatar-status"></c-badge> |
| 165 | + <CBadge variant="dark" class="avatar-status"></CBadge> |
166 | 166 | </div> |
167 | 167 | </div> |
168 | 168 | <div> |
|
173 | 173 | <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small> |
174 | 174 | </div> |
175 | 175 | </div> |
176 | | - </b-tab> |
177 | | - <b-tab> |
| 176 | + </CTab> |
| 177 | + <CTab> |
178 | 178 | <template slot="title"> |
179 | 179 | <i class='icon-settings'></i> |
180 | 180 | </template> |
|
183 | 183 | <div class="aside-options"> |
184 | 184 | <div class="clearfix mt-4"> |
185 | 185 | <small><b>Option 1</b></small> |
186 | | - <c-switch color="success" label variant="pill" size="sm" class="float-right" checked /> |
| 186 | + <CSwitch variant="success" label shape="pill" size="sm" class="float-right" checked /> |
187 | 187 | </div> |
188 | 188 | <div> |
189 | 189 | <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small> |
|
192 | 192 | <div class="aside-options"> |
193 | 193 | <div class="clearfix mt-3"> |
194 | 194 | <small><b>Option 2</b></small> |
195 | | - <c-switch color="success" label variant="pill" size="sm" class="float-right" /> |
| 195 | + <CSwitch variant="success" label shape="pill" size="sm" class="float-right" /> |
196 | 196 | </div> |
197 | 197 | <div> |
198 | 198 | <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small> |
|
201 | 201 | <div class="aside-options"> |
202 | 202 | <div class="clearfix mt-3"> |
203 | 203 | <small><b>Option 3</b></small> |
204 | | - <c-switch color="success" label variant="pill" size="sm" class="float-right" disabled defaultChecked/> |
| 204 | + <CSwitch variant="success" label shape="pill" size="sm" class="float-right" disabled defaultChecked/> |
205 | 205 | </div> |
206 | 206 | <div> |
207 | 207 | <small class="text-muted">Disabled option.</small> |
|
210 | 210 | <div class="aside-options"> |
211 | 211 | <div class="clearfix mt-3"> |
212 | 212 | <small><b>Option 4</b></small> |
213 | | - <c-switch color="success" label variant="pill" size="sm" class="float-right" checked /> |
| 213 | + <CSwitch variant="success" label shape="pill" size="sm" class="float-right" checked /> |
214 | 214 | </div> |
215 | 215 | </div> |
216 | 216 | <hr> |
217 | 217 | <h6>System Utilization</h6> |
218 | 218 | <div class="text-uppercase mb-1 mt-4"> |
219 | 219 | <small><b>CPU Usage</b></small> |
220 | 220 | </div> |
221 | | - <b-progress height={} class="progress-xs" variant="info" :value="25"></b-progress> |
| 221 | + <CProgress class="progress-xs" variant="info" :value="25"></CProgress> |
222 | 222 | <small class="text-muted">348 Processes. 1/4 Cores.</small> |
223 | 223 | <div class="text-uppercase mb-1 mt-2"> |
224 | 224 | <small><b>Memory Usage</b></small> |
225 | 225 | </div> |
226 | | - <b-progress height={} class="progress-xs" variant="warning" :value="70"></b-progress> |
| 226 | + <CProgress class="progress-xs" variant="warning" :value="70"></CProgress> |
227 | 227 | <small class="text-muted">11444GB/16384MB</small> |
228 | 228 | <div class="text-uppercase mb-1 mt-2"> |
229 | 229 | <small><b>SSD 1 Usage</b></small> |
230 | 230 | </div> |
231 | | - <b-progress height={} class="progress-xs" variant="danger" :value="95"></b-progress> |
| 231 | + <CProgress class="progress-xs" variant="danger" :value="95"></CProgress> |
232 | 232 | <small class="text-muted">243GB/256GB</small> |
233 | 233 | <div class="text-uppercase mb-1 mt-2"> |
234 | 234 | <small><b>SSD 2 Usage</b></small> |
235 | 235 | </div> |
236 | | - <b-progress height={} class="progress-xs" variant="success" :value="10"></b-progress> |
| 236 | + <CProgress class="progress-xs" variant="success" :value="10"></CProgress> |
237 | 237 | <small class="text-muted">25GB/256GB</small> |
238 | 238 | </div> |
239 | | - </b-tab> |
240 | | - </b-tabs> |
| 239 | + </CTab> |
| 240 | + </CTabs> |
241 | 241 | </template> |
242 | 242 |
|
243 | 243 | <script> |
244 | | -import { Switch as cSwitch } from '@coreui/vue' |
245 | 244 | export default { |
246 | 245 | name: 'DefaultAside', |
247 | | - components: { |
248 | | - cSwitch |
249 | | - } |
250 | 246 | } |
251 | 247 | </script> |
0 commit comments