Skip to content
This repository has been archived by the owner on May 25, 2018. It is now read-only.

Support fixed container navbar (beyond just container-fluid) #493

Open
wants to merge 2 commits into
base: v2
Choose a base branch
from
Open

Support fixed container navbar (beyond just container-fluid) #493

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
14c3d54
Support `container` (vs. just `container-fluid`) navbar
neilsmind Jun 15, 2017
8b919f0
Update docs regarding new `container` attribute
neilsmind Jun 15, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/assets/docs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -909,8 +909,8 @@ h1[id] {
}
}

/* Undo width of container */
.bs-example .container {
/* Undo width of container except for navbar example */
.bs-example :not(.navbar) .container {
width: auto;
}

Expand Down
17 changes: 14 additions & 3 deletions docs/example/navbarDocs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<doc-section id="navbar" name="Navbar">
<div class="bs-example">
<navbar :placement="placement" :type="type">
<navbar :placement="placement" :type="type" :container="container">
<a href="/" title="Home" slot="brand" class="navbar-brand">VueStrap</a>
<dropdown text="Component List" type="primary">
<li v-for="s in sections"><a :href="'#'+s.id" v-text="s.name"></a></li>
Expand All @@ -21,9 +21,13 @@
<label>Type</label>
<v-select v-model="type" :options="['default','inverse']"></v-select>
</div>
<div class="form-group">
<label>Container</label>
<v-select v-model="container" clear-button :options="['fixed','fluid']"></v-select>
</div>
</div>
<doc-code language="markup">
&lt;navbar placement="top" type="default">
&lt;navbar placement="top" type="default" container="fluid">
&lt;!-- Brand as slot -->
&lt;a slot="brand" href="/" title="Home" class="navbar-brand">VueStrap&lt;/a>
&lt;!-- You can use dropdown component -->
Expand Down Expand Up @@ -56,6 +60,12 @@
<p><code>default</code></p>
<p></p>
</div>
<div>
<p>container</p>
<p><code>String</code>, one of <code>fixed</code>, <code>fluid</code>.</p>
<p><code>fluid</code></p>
<p></p>
</div>
</doc-table>
</doc-section>
</template>
Expand All @@ -82,7 +92,8 @@ export default {
data () {
return {
placement : 'top',
type : 'default'
type : 'default',
container : 'fluid',
}
},
computed: {
Expand Down
5 changes: 3 additions & 2 deletions src/Navbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<nav :class="['navbar', 'navbar-'+type, placement === 'static'?'navbar-static-top':'navbar-fixed-'+placement]">
<div class="container-fluid">
<div :class="'container'+(container === 'fluid' ? '-fluid' : '')">
<div class="navbar-header">
<button v-if="!$slots.collapse" type="button" class="navbar-toggle collapsed" aria-expanded="false" @click="toggleCollapse">
<span class="sr-only">Toggle navigation</span>
Expand Down Expand Up @@ -32,7 +32,8 @@ import $ from './utils/NodeList.js'
export default {
props: {
type: {type: String, default: 'default'},
placement: {type: String, default: ''}
placement: {type: String, default: ''},
container: {type: String, default: 'fluid'},
},
data () {
return {
Expand Down