Permalink
Browse files

fix(docs): add root wrapper to templates

  • Loading branch information...
pi0 committed Jul 1, 2017
1 parent 35a5db6 commit ff6432d2b1bfca7dad80152ad1363544d863de23
@@ -4,7 +4,8 @@
```html
<template>
<b-alert show>
<div>
<b-alert show>
Default Alert
</b-alert>
@@ -24,6 +25,7 @@
<b-btn @click="showDismissibleAlert=true" variant="info" class="m-1">
Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
</b-btn>
</div>
</template>
<script>
@@ -6,11 +6,13 @@ semantic and accessible markup, so it is a solid replacement for the default che
```html
<template>
<b-form-checkbox v-model="state" value="accepted" unchecked-value="not_accepted">
I accept terms and use
</b-form-checkbox>
<div>
<b-form-checkbox v-model="state" value="accepted" unchecked-value="not_accepted">
I accept terms and use
</b-form-checkbox>
<div>State: <strong>{{state}}</strong></div>
<div>State: <strong>{{state}}</strong></div>
</div>
</template>
<script>
@@ -5,6 +5,7 @@ multiple files, and directory upload (for browsers that support directory mode)
```html
<template>
<div>
<!-- Simple File -->
<b-form-file v-model="file"></b-form-file>
<br> Selected file: {{file && file.name}}
@@ -14,6 +15,7 @@ multiple files, and directory upload (for browsers that support directory mode)
<b-form-file v-model="file2" choose-label="Attachment2"></b-form-file>
<br> Selected file : {{file2 && file2.name}}
</div>
</div>
</template>
<script>
@@ -5,6 +5,7 @@
```html
<template>
<div>
<b-form-input v-model="text" type="text" placeholder="Enter your name" :state="text.length?'success':'warning'" :formatter="format"></b-form-input>
<small class="text-muted">We will convert your name to lowercase instantly</small>
@@ -21,6 +22,7 @@
<br>
<p>Value: {{text}}</p>
</div>
</template>
<script>
@@ -6,12 +6,14 @@ semantic and accessible markup, so it is a solid replacement for the default rad
```html
<template>
<div>
<b-form-radio v-model="value2" :options="options" stacked>
</b-form-radio>
<br>
<span>Selected: </span>
<span>{{value2}}</span>
</div>
</template>
<script>
@@ -4,12 +4,14 @@
```html
<template>
<div>
<b-form-select v-model="selected"
:options="options"
calss="mb-3"
></b-form-select>
<div>Selected: <strong>{{selected}}</strong></div>
</div>
</template>
<script>
@@ -4,13 +4,11 @@
showcase key marketing messages on your site.
```html
<div id="app">
<b-jumbotron header="BootstrapVue"
lead="Bootstrap 4 Components for Vue.js 2" >
<p>For more information visit website</p>
<b-btn variant="primary" href="#">Docs</b-btn>
</b-jumbotron>
</div>
<b-jumbotron header="BootstrapVue"
lead="Bootstrap 4 Components for Vue.js 2" >
<p>For more information visit website</p>
<b-btn variant="primary" href="#">Docs</b-btn>
</b-jumbotron>
<!-- jumbotron.vue -->
```
@@ -5,17 +5,17 @@
They can also be used as navigation with the right modifier class.
```html
<div id="app">
<b-list-group>
<b-list-group-item active>Awesome list</b-list-group-item>
<b-list-group-item to="#">
Action links are easy
</b-list-group-item>
<b-list-group-item>
This is a text only item
</b-list-group-item>
</b-list-group>
</div>
<b-list-group>
<b-list-group-item active>
Awesome list
</b-list-group-item>
<b-list-group-item to="#">
Action links are easy
</b-list-group-item>
<b-list-group-item>
This is a text only item
</b-list-group-item>
</b-list-group>
<!-- list-group.vue -->
```
@@ -6,6 +6,7 @@
```html
<template>
<div>
<b-btn @click="$root.$emit('show::modal','modal1')">Launch demo modal</b-btn>
<!-- Main UI -->
@@ -24,6 +25,7 @@
</form>
</b-modal>
</div>
</template>
<script>
@@ -6,6 +6,7 @@
```html
<template>
<div>
<h6>Default</h6>
<b-pagination size="md" :total-rows="100" v-model="currentPage" :per-page="10">
</b-pagination>
@@ -18,6 +19,7 @@
<br>
<div>currentPage: {{currentPage}}</div>
</div>
</template>
<script>
@@ -5,7 +5,9 @@
```html
<template>
<h4 class="mt-sm-4 ms-sm-4 text-muted">Placement</h4>
<div>
<h4 class="mt-sm-4 ms-sm-4 text-muted">Placement</h4>
<div class="row">
<div class="col-md-3 my-1 text-center" v-for="placement in ['top', 'left', 'right', 'bottom']">
<b-popover :placement="placement" content="Heya!">
@@ -62,6 +64,8 @@
</b-popover>
</div>
</div>
</div>
</template>
<script>
@@ -5,9 +5,10 @@ We don’t use the HTML5 `<progress>` element, ensuring you can animate them, an
```html
<template>
<div>
<b-progress v-model="counter" :precision="1" show-progress animated></b-progress>
<b-btn class="mt-4" @click="clicked">Click me</b-btn>
</div>
</template>
<script>
@@ -4,8 +4,7 @@
```html
<template>
<!-- Example #1 -->
<div>
<!-- Tabs with card integration -->
<b-card no-block>
<b-tabs small card ref="tabs" v-model="tabIndex">
@@ -36,8 +35,6 @@
<br>
<br>
<!-- Example #2 -->
<b-card no-block>
<b-tabs card>
<!-- Render Tabs -->
@@ -59,6 +56,8 @@
</div>
</b-tabs>
</b-card>
</div>
</template>
<script>

0 comments on commit ff6432d

Please sign in to comment.