refactor: update examples
This commit is contained in:
Łukasz Holeczek
+368
-233
@@ -1,250 +1,385 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Nav</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h4 class="mt-4">Base Nav</h4>
|
||||
<Example href="components/nav.html#base-nav">
|
||||
<CNav>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
<CRow>
|
||||
<CCol :xs="12">
|
||||
<DocsCallout name="Nav" href="components/nav" />
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Navs</strong> <small>Base navs</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
The base <code>.nav</code> component is built with flexbox and provide a strong
|
||||
foundation for building all types of navigation components. It includes some style
|
||||
overrides (for working with lists), some link padding for larger hit areas, and basic
|
||||
disabled styling.
|
||||
</p>
|
||||
<Example href="components/nav#base-nav">
|
||||
<CNav>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Nav horizontal alignment</h4>
|
||||
<Example href="components/nav.html#horizontal-alignment">
|
||||
<CNav class="justify-content-center">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
<p class="text-medium-emphasis small">
|
||||
Classes are used throughout, so your markup can be super flexible. Use{' '}
|
||||
<code><ul></code>s like above, <code><ol></code> if the order of your
|
||||
items is important, or roll your own with a <code><nav></code> element. Because
|
||||
the .nav uses display: flex, the nav links behave the same as nav items would, but
|
||||
without the extra markup.
|
||||
</p>
|
||||
<Example href="components/nav#base-nav">
|
||||
<CNav component="nav">
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNav>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Nav right alignment</h4>
|
||||
<Example href="components/nav.html#horizontal-alignment">
|
||||
<CNav class="justify-content-end">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Navs</strong> <small>Horizontal alignment</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Change the horizontal alignment of your nav with{' '}
|
||||
<a href="https://coreui.io/docs/layout/grid/#horizontal-alignment">
|
||||
flexbox utilities
|
||||
</a>
|
||||
. By default, navs are left-aligned, but you can easily change them to center or right
|
||||
aligned.
|
||||
</p>
|
||||
<p class="text-medium-emphasis small">
|
||||
Centered with <code>.justify-content-center</code>:
|
||||
</p>
|
||||
<Example href="components/nav#horizontal-alignment">
|
||||
<CNav class="justify-content-center">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vertical nav</h4>
|
||||
<Example href="components/nav.html#vertical">
|
||||
<CNav class="flex-column">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
<p class="text-medium-emphasis small">
|
||||
Right-aligned with <code>.justify-content-end</code>:
|
||||
</p>
|
||||
<Example href="components/nav#base-nav">
|
||||
<CNav class="justify-content-end">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Tabs nav</h4>
|
||||
<Example href="components/nav.html#tabs">
|
||||
<CNav variant="tabs">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Navs</strong> <small>Vertical</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Stack your navigation by changing the flex item direction with the{' '}
|
||||
<code>.flex-column</code> utility. Need to stack them on some viewports but not
|
||||
others? Use the responsive versions (e.g., <code>.flex-sm-column</code>).
|
||||
</p>
|
||||
<Example href="components/nav#vertical">
|
||||
<CNav class="flex-column">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Pills nav</h4>
|
||||
<Example href="components/nav.html#pills">
|
||||
<CNav variant="pills">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Navs</strong> <small>Tabs</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Takes the basic nav from above and adds the <code>variant="tabs"</code> class
|
||||
to generate a tabbed interface
|
||||
</p>
|
||||
<Example href="components/nav#tabs">
|
||||
<CNav variant="tabs">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Fill nav</h4>
|
||||
<Example href="components/nav.html#fill-and-justify">
|
||||
<CNav variant="pills" layout="fill">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Navs</strong> <small>Pills</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Take that same HTML, but use <code>variant="pills"</code> instead:
|
||||
</p>
|
||||
<Example href="components/nav#pills">
|
||||
<CNav variant="pills">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Justified nav</h4>
|
||||
<Example href="components/nav.html#fill-and-justify">
|
||||
<CNav variant="pills" layout="justified">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Navs</strong> <small>Fill and justify</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Force your <code>.nav</code>'s contents to extend the full available width one of
|
||||
two modifier classes. To proportionately fill all available space with your{' '}
|
||||
<code>.nav-item</code>s, use <code>layout="fill"</code>. Notice that all
|
||||
horizontal space is occupied, but not every nav item has the same width.
|
||||
</p>
|
||||
<Example href="components/nav#fill-and-justify">
|
||||
<CNav variant="pills" layout="fill">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vue nav with dropdown</h4>
|
||||
<Example href="components/nav.html#using-dropdowns">
|
||||
<CNav>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CDropdown variant="nav-item">
|
||||
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
<p class="text-medium-emphasis small">
|
||||
For equal-width elements, use <code>layout="justified"</code>. All horizontal
|
||||
space will be occupied by nav links, but unlike the .nav-fill above, every nav item
|
||||
will be the same width.
|
||||
</p>
|
||||
<Example href="components/nav#fill-and-justify">
|
||||
<CNav variant="pills" layout="justified">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vue pills nav with dropdown</h4>
|
||||
<Example href="components/nav.html#pills-with-dropdowns">
|
||||
<CNav variant="pills">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CDropdown variant="nav-item">
|
||||
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Navs</strong> <small>Working with flex utilities</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
If you need responsive nav variations, consider using a series of{' '}
|
||||
<a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a>. While more
|
||||
verbose, these utilities offer greater customization across responsive breakpoints. In
|
||||
the example below, our nav will be stacked on the lowest breakpoint, then adapt to a
|
||||
horizontal layout that fills the available width starting from the small breakpoint.
|
||||
</p>
|
||||
<Example href="components/nav#working-with-flex-utilities">
|
||||
<CNav component="nav" variant="pills" class="flex-column flex-sm-row">
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNav>
|
||||
</Example>
|
||||
|
||||
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Navs</strong> <small>Tabs with dropdowns</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="components/nav#tabs-with-dropdowns">
|
||||
<CNav>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CDropdown variant="nav-item">
|
||||
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Navs</strong> <small>Pills with dropdowns</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="components/nav#pills-with-dropdowns">
|
||||
<CNav variant="pills">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CDropdown variant="nav-item">
|
||||
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Navs",
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user