Permalink
Browse files

fix(card): change prop no-block to no-body (#826)

* fix(card): change no-block to no-body

* [card] docs update

* [tabs] update documentation

* [card] Add slots body and no-body

Alternative means to place body and no-body sections

* Update meta.json

Document body and no-body slots

* ESLint

* remove body/no-body slots

* ESLint

* Update meta.json

* Update meta.json
  • Loading branch information...
tmorehouse committed Aug 12, 2017
1 parent 2e863d9 commit 664bc9814f51163c71e417684728faa843eb7430
Showing with 46 additions and 25 deletions.
  1. +13 −12 docs/components/card/README.md
  2. +9 −1 docs/components/card/meta.json
  3. +7 −5 docs/components/tabs/README.md
  4. +17 −7 lib/components/card.vue
@@ -18,7 +18,7 @@ Change the default `div` root tag to any other HTML element by specifying via th
img="https://lorempixel.com/600/300/food/5/"
img-alt="Image"
tag="article"
style="width: 20rem;"
style="max-width: 20rem;"
class="mb-2">
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
@@ -34,29 +34,30 @@ Change the default `div` root tag to any other HTML element by specifying via th
Cards support a wide variety of content, including images, text, list groups,
links and more. Below are examples of what’s supported.
#### Blocks:
The building block of a card is the `.card-body` section. Use it whenever you need a padded
section within a card. By default the `<b-card>` content is placed in the block section:
#### Card Body:
The building block of a card is the `.card-body` section which provides a padded
section within a card. By default the `<b-card>` content is placed in the
`.card-body` section:
```html
<b-card class="text-center">
This is some text within the default card block.
</b-card>
<!-- card-block-1.vue -->
<!-- card-body-1.vue -->
```
Disable the `.card-body` class (and associated padding) by setting the prop `no-block`.
Disable the `.card-body` section (and associated padding) by setting the prop `no-body`.
```html
<b-card no-block class="text-center">
This is some text without the default card block. Notice the lack of padding.
<b-card no-body class="text-center">
This is some text without the default card body section. Notice the lack of padding.
</b-card>
<!-- card-block-2.vue -->
<!-- card-body-2.vue -->
```
Note that with `no-block` enabled, `title` and `sub-title` will not be rendered.
Note that with `no-body` enabled, `title` and `sub-title` will not be rendered.
#### Titles, text, and links:
*Card titles* are adding via the `title` prop, and *sub titles* are added via the
@@ -175,7 +176,7 @@ a fixed-width card.
```html
<div>
<b-card no-block style="width: 20rem;" img="https://placekitten.com/380/200" img-alt="Image">
<b-card no-body style="max-width: 20rem;" img="https://placekitten.com/380/200" img-alt="Image">
<h4 slot="header">Hello World</h4>
<div class="card-body">
<p class="card-text">
@@ -208,7 +209,7 @@ toggling the color of text within, as well as that of the card’s subcomponents
via the prop `inverse`. Then, specify a dark background variant.
```html
<b-card inverse title="Card Title" variant="dark"">
<b-card variant="dark" inverse title="Card Title">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<b-button href="#" variant="primary">Go somewhere</b-button>
</b-card>
@@ -14,6 +14,14 @@
{
"name": "footer",
"description": "For custom rendering of footer content"
}
},
{
"name": "body",
"description": "Optional body section"
},
{
"name": "no-body",
"description": "Optional section with-out card-body wrapper"
}
]
}
@@ -6,7 +6,7 @@
<template>
<div>
<!-- Tabs with card integration -->
<b-card no-block>
<b-card no-body>
<b-tabs small card ref="tabs" v-model="tabIndex">
<b-tab title="General">
I'm the first fading tab
@@ -35,7 +35,7 @@
<br>
<br>
<b-card no-block>
<b-card no-body>
<b-tabs card>
<!-- Render Tabs -->
<b-tab :title="`Tab ${i}`" v-for="i in tabs" :key="i">
@@ -103,10 +103,12 @@ export default {
### Cards Integration
Tabs support integrating with bootstrap cards. Just add `card` property. Note that you should add `no-block` prop on `<b-card>` element in order to decorate header.
Tabs support integrating with bootstrap cards. Just add `card` property. Note
that you should add `no-body` prop on `<b-card>` element in order to decorate header
and remove the extra badding
```html
<b-card no-block>
<b-card no-body>
<b-tabs ref="tabs" v-model="tabIndex" card>
<b-tab title="Tab 1" active>
Tab Contents
@@ -130,7 +132,7 @@ If you want to add extra tabs that do not have any content, you can put them in
```html
<b-tabs>
<!-- Add your tabs here-->
<!-- Add your b-tab components here-->
<template slot="tabs">
<b-nav-item to="#" @click="onClick">Another tab</b-nav-item>
@@ -5,7 +5,7 @@
<img v-if="img" :src="img" :alt="imgAlt" :class="['card-img', 'img-fluid']">
</slot>
<!-- Card Header-->
<!-- Card Header -->
<component v-if="header || $slots['header']"
:is="headerTag"
:class="['card-header', headerVariant?('bg-'+headerVariant):'', headerClass]"
@@ -15,19 +15,29 @@
</slot>
</component>
<!--Show custom block when no-block prop is set-->
<template v-if="noBlock">
<!--Show custom block when no-body prop is set -->
<template v-if="noBody">
<slot></slot>
</template>
<!-- Card Standard Blocks-->
<!-- Card Standard Body-->
<div :class="blockClass" v-else>
<h4 v-if="title" :is="titleTag" class="card-title" v-html="title"></h4>
<h6 v-if="subTitle" :is="subTitleTag" class="card-subtitle mb-2 text-muted" v-html="subTitle"></h6>
<slot></slot>
</div>
<!-- Card Footer-->
<!--Alternative method to get a no-body section -->
<slot name="no-body"></slot>
<!--Alternative method to get a body section -->
<template v-if="$slots['body']">
<div class="card-body">
<slot name="body"></slot>
</div>
</template>
<!-- Card Footer -->
<component v-if="footer || $slots['footer']"
:is="footerTag"
:class="['card-footer', footerVariant?('bg-'+footerVariant):'', footerClass]"
@@ -120,7 +130,7 @@
default: 'div'
},
// Main block
// Main body
title: {
type: String,
default: null
@@ -137,7 +147,7 @@
type: String,
default: 'h6'
},
noBlock: {
noBody: {
type: Boolean,
default: false
},

0 comments on commit 664bc98

Please sign in to comment.