Permalink
Browse files

feat(jumbotron): Add support for variants (#973)

* [jumbotron] Add variant support

* Update README.md
  • Loading branch information...
tmorehouse committed Aug 31, 2017
1 parent cf7c538 commit bd9bb7cad48c2ba0e99f73808c193e89ec0ebb6e
Showing with 107 additions and 4 deletions.
  1. +88 −3 docs/components/jumbotron/README.md
  2. +19 −1 lib/components/jumbotron.js
@@ -3,11 +3,96 @@
> A lightweight, flexible component that can optionally extend the entire viewport to
showcase key marketing messages on your site.
You can set the heading and lead text via hte `header` and `lead` props, or use the
named slots `header` and `lead` if you need HTML support.
Anything else betwen the opening and closing tags will be renderd at the bottom of the
jumbotron.
**Usage with props:**
```html
<b-jumbotron header="BootstrapVue" lead="Bootstrap 4 Components for Vue.js 2" >
<b-jumbotron header="Bootstrap Vue" lead="Bootstrap 4 Components for Vue.js 2" >
<p>For more information visit website</p>
<b-btn variant="primary" href="#">Docs</b-btn>
<b-btn variant="primary" href="#">More Info</b-btn>
</b-jumbotron>
<!-- jumbotron-1.vue -->
```
**Usage with slots:**
```html
<b-jumbotron>
<template slot="header">
Bootstrap Vue
</template>
<template slot="lead">
This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.
</template>
<hr class="my-4">
<p>
It uses utility classes for typography and spacing to space content
out within the larger container.
</p>
<b-btn variant="primary" href="#">Do Something</b-btn>
<b-btn variant="success" href="#">Do Something Else</b-btn>
</b-jumbotron>
<!-- jumbotron-2.vue -->
```
## Options
### Header
Control which tag is rendered for the header by setting the `header-tag` to the
approriate HTML element. The default is `h1`. Both the prop `header` and slot `header`
will be rendered inside this tag. If both the prop and the slot are specified, the
slot will be shown.
Control the overall size of the header text by setting the `header-level` prop to
a value between `1` and `4` - with `1` being the largest and `4` being smallest. The
default value is `3`.
### Lead Text
Control which tag is rendered for the lead text by setting the `lead-tag` to the
desired HTML element. The default is `p`. Both the prop `lead` and slot `lead`
will be rendered inside this tag. If both the prop and the slot are specified, the
slot will be shown.
## Fluid width
To make `<b-jumbotron>` full width, and without rounded corners, set the `fluid`
prop. The innter content will automatically be placed into a `<b-container>`
(fixed width at the various breakpoints). To change this to a fluid container,
set the `container-fluid` prop. The `container-fluid` prop has no effect if
the `fluid` prop is not set
## Component tag
By default, `<b-jumbotron>` will render it's root element as a `div`. Change
the element tag to any other appropriate element by setting the `tag` prop
to the desired element tag name.
## Variants
Control the overall background variant with the `bg-variant` prop ( set to `info`,
`danger`, `warning`, `light`, `dark`, etc), the border variant with the
`border-variant` prop, and the text variant with `text-variant` prop. All
three props default to `null`, which will instruct the jumbotron to use the
default styling.
```html
<b-jumbotron bg-variant="info" text-variant"white" border-variant="dark">
<template slot="header">
Bootstrap Vue
</template>
<template slot="lead">
This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.
</template>
<hr class="my-4">
<p>
It uses utility classes for typography and spacing to space content
out within the larger container.
</p>
</b-jumbotron>
<!-- jumbotron.vue -->
<!-- jumbotron-3.vue -->
```
@@ -34,6 +34,18 @@ export const props = {
tag: {
type: String,
default: 'div'
},
bgVariant: {
type: String,
default: null
},
borderVariant: {
type: String,
default: null
},
textVariant: {
type: String,
default: null
}
};
@@ -86,7 +98,13 @@ export default {
props.tag,
mergeData(data, {
staticClass: "jumbotron",
class: { 'jumbotron-fluid': props.fluid }
class: {
'jumbotron-fluid': props.fluid,
[`text-${props.textVariant}`]: Boolean(props.textVariant),
[`bg-${props.bgVariant}`]: Boolean(props.bgVariant),
[`border-${props.borderVariant}`]: Boolean(props.borderVariant),
'border': Boolean(props.borderVariant)
}
}),
childNodes
);

0 comments on commit bd9bb7c

Please sign in to comment.