chore: clean-up
This commit is contained in:
Łukasz Holeczek
+1
-5
@@ -70,11 +70,7 @@ export default [
|
|||||||
name: 'Navs & Tabs',
|
name: 'Navs & Tabs',
|
||||||
to: '/base/navs',
|
to: '/base/navs',
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// component: "CNavItem",
|
|
||||||
// name: "Navbars",
|
|
||||||
// to: "/base/navbars",
|
|
||||||
// },
|
|
||||||
{
|
{
|
||||||
component: 'CNavItem',
|
component: 'CNavItem',
|
||||||
name: 'Paginations',
|
name: 'Paginations',
|
||||||
|
|||||||
@@ -79,11 +79,6 @@ const routes = [
|
|||||||
name: 'Navs',
|
name: 'Navs',
|
||||||
component: () => import('@/views/base/Navs.vue'),
|
component: () => import('@/views/base/Navs.vue'),
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/base/navbars',
|
|
||||||
name: 'Navbars',
|
|
||||||
component: () => import('@/views/base/Navbars.vue'),
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/base/paginations',
|
path: '/base/paginations',
|
||||||
name: 'Paginations',
|
name: 'Paginations',
|
||||||
|
|||||||
@@ -1,543 +0,0 @@
|
|||||||
<template>
|
|
||||||
<CRow>
|
|
||||||
<CCol>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
<strong>Vue Navbars</strong>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<h4 class="mt-4">Basic usage of navbar</h4>
|
|
||||||
<DocsExample href="components/navbar.html#basic-usage">
|
|
||||||
<CNavbar expand="lg" colorScheme="light" class="bg-light">
|
|
||||||
<CContainer fluid>
|
|
||||||
<CNavbarBrand href="#">Navbar</CNavbarBrand>
|
|
||||||
<CNavbarToggler @click="visible = !visible" />
|
|
||||||
<CCollapse class="navbar-collapse" :visible="visible">
|
|
||||||
<CNavbarNav>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink href="#" active> Home </CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink href="#">Link</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CDropdown variant="nav-item" :popper="false">
|
|
||||||
<CDropdownToggle color="secondary"
|
|
||||||
>Dropdown button</CDropdownToggle
|
|
||||||
>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem href="#">Action</CDropdownItem>
|
|
||||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
|
||||||
<CDropdownDivider />
|
|
||||||
<CDropdownItem href="#"
|
|
||||||
>Something else here</CDropdownItem
|
|
||||||
>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink href="#" disabled> Disabled </CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
</CNavbarNav>
|
|
||||||
<CForm class="d-flex">
|
|
||||||
<CFormInput
|
|
||||||
type="search"
|
|
||||||
class="me-2"
|
|
||||||
placeholder="Search"
|
|
||||||
/>
|
|
||||||
<CButton type="submit" color="success" variant="outline"
|
|
||||||
>Search</CButton
|
|
||||||
>
|
|
||||||
</CForm>
|
|
||||||
</CCollapse>
|
|
||||||
</CContainer>
|
|
||||||
</CNavbar>
|
|
||||||
</DocsExample>
|
|
||||||
|
|
||||||
<h4 class="mt-4">Vue nav brand</h4>
|
|
||||||
<CRow>
|
|
||||||
<CCol :md="6">
|
|
||||||
<DocsExample href="components/navbar.html#brand">
|
|
||||||
<CNavbar colorScheme="light" class="bg-light">
|
|
||||||
<CContainer fluid>
|
|
||||||
<CNavbarBrand href="#">Brand as link</CNavbarBrand>
|
|
||||||
</CContainer>
|
|
||||||
</CNavbar>
|
|
||||||
</DocsExample>
|
|
||||||
</CCol>
|
|
||||||
<CCol :md="6">
|
|
||||||
<DocsExample href="components/navbar.html#brand">
|
|
||||||
<CNavbar colorScheme="light" class="bg-light">
|
|
||||||
<CContainer fluid>
|
|
||||||
<CNavbarBrand class="mb-0 h1">Brand</CNavbarBrand>
|
|
||||||
</CContainer>
|
|
||||||
</CNavbar>
|
|
||||||
</DocsExample>
|
|
||||||
</CCol>
|
|
||||||
<CCol :md="6">
|
|
||||||
<DocsExample href="components/navbar.html#brand">
|
|
||||||
<CNavbar colorScheme="light" class="bg-light">
|
|
||||||
<CContainer fluid>
|
|
||||||
<CNavbarBrand href="#">
|
|
||||||
<img
|
|
||||||
src="/images/brand/coreui-signet.svg"
|
|
||||||
alt=""
|
|
||||||
width="22"
|
|
||||||
height="24"
|
|
||||||
/>
|
|
||||||
</CNavbarBrand>
|
|
||||||
</CContainer>
|
|
||||||
</CNavbar>
|
|
||||||
</DocsExample>
|
|
||||||
</CCol>
|
|
||||||
<CCol :md="6">
|
|
||||||
<DocsExample href="components/navbar.html#brand">
|
|
||||||
<CNavbar colorScheme="light" class="bg-light">
|
|
||||||
<CContainer fluid>
|
|
||||||
<CNavbarBrand href="#">
|
|
||||||
<img
|
|
||||||
src="/images/brand/coreui-signet.svg"
|
|
||||||
alt=""
|
|
||||||
width="22"
|
|
||||||
height="24"
|
|
||||||
class="d-inline-block align-top"
|
|
||||||
/>
|
|
||||||
CoreUI
|
|
||||||
</CNavbarBrand>
|
|
||||||
</CContainer>
|
|
||||||
</CNavbar>
|
|
||||||
</DocsExample>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
|
|
||||||
<h4 class="mt-4">Vue navbar with nav</h4>
|
|
||||||
<DocsExample href="components/navbar.html#nav">
|
|
||||||
<CNavbar expand="lg" colorScheme="light" class="bg-light">
|
|
||||||
<CContainer fluid>
|
|
||||||
<CNavbarBrand href="#">Navbar</CNavbarBrand>
|
|
||||||
<CNavbarToggler
|
|
||||||
aria-label="Toggle navigation"
|
|
||||||
aria-expanded="{visible}"
|
|
||||||
@click="visible = !visible"
|
|
||||||
/>
|
|
||||||
<CCollapse class="navbar-collapse" :visible="visible">
|
|
||||||
<CNavbarNav>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink href="#" active> Home </CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink href="#">Features</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink href="#">Pricing</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CDropdown variant="nav-item" :popper="false">
|
|
||||||
<CDropdownToggle>Dropdown link</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem href="#">Action</CDropdownItem>
|
|
||||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
|
||||||
<CDropdownDivider />
|
|
||||||
<CDropdownItem href="#"
|
|
||||||
>Something else here</CDropdownItem
|
|
||||||
>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
</CNavbarNav>
|
|
||||||
</CCollapse>
|
|
||||||
</CContainer>
|
|
||||||
</CNavbar>
|
|
||||||
</DocsExample>
|
|
||||||
|
|
||||||
<h4 class="mt-4">Vue navbar with form</h4>
|
|
||||||
<DocsExample href="components/navbar.html#forms">
|
|
||||||
<CNavbar colorScheme="light" class="bg-light">
|
|
||||||
<CContainer fluid>
|
|
||||||
<CForm class="d-flex">
|
|
||||||
<CFormInput type="search" class="me-2" placeholder="Search" />
|
|
||||||
<CButton type="submit" color="success" variant="outline"
|
|
||||||
>Search</CButton
|
|
||||||
>
|
|
||||||
</CForm>
|
|
||||||
</CContainer>
|
|
||||||
</CNavbar>
|
|
||||||
</DocsExample>
|
|
||||||
<h4 class="mt-4">Vue navbar with form on right side</h4>
|
|
||||||
<DocsExample href="components/navbar.html#forms">
|
|
||||||
<CNavbar colorScheme="light" class="bg-light">
|
|
||||||
<CContainer fluid>
|
|
||||||
<CNavbarBrand href="#">Navbar</CNavbarBrand>
|
|
||||||
<CForm class="d-flex">
|
|
||||||
<CFormInput type="search" class="me-2" placeholder="Search" />
|
|
||||||
<CButton type="submit" color="success" variant="outline"
|
|
||||||
>Search</CButton
|
|
||||||
>
|
|
||||||
</CForm>
|
|
||||||
</CContainer>
|
|
||||||
</CNavbar>
|
|
||||||
</DocsExample>
|
|
||||||
<h4 class="mt-4">Vue navbar with input group</h4>
|
|
||||||
<DocsExample href="components/navbar.html#forms">
|
|
||||||
<CNavbar colorScheme="light" class="bg-light">
|
|
||||||
<CForm class="container-fluid">
|
|
||||||
<CInputGroup>
|
|
||||||
<CInputGroupText id="basic-addon1">@</CInputGroupText>
|
|
||||||
<CFormInput
|
|
||||||
placeholder="Username"
|
|
||||||
aria-label="Username"
|
|
||||||
aria-describedby="basic-addon1"
|
|
||||||
/>
|
|
||||||
</CInputGroup>
|
|
||||||
</CForm>
|
|
||||||
</CNavbar>
|
|
||||||
</DocsExample>
|
|
||||||
|
|
||||||
<h4 class="mt-4">Vue navbar with buttons</h4>
|
|
||||||
<DocsExample href="components/navbar.html#forms">
|
|
||||||
<CNavbar colorScheme="light" class="bg-light">
|
|
||||||
<CForm class="container-fluid justify-content-start">
|
|
||||||
<CButton
|
|
||||||
type="button"
|
|
||||||
color="success"
|
|
||||||
variant="outline"
|
|
||||||
class="me-2"
|
|
||||||
>Main button</CButton
|
|
||||||
>
|
|
||||||
<CButton
|
|
||||||
type="button"
|
|
||||||
color="secondary"
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
>Smaller button</CButton
|
|
||||||
>
|
|
||||||
</CForm>
|
|
||||||
</CNavbar>
|
|
||||||
</DocsExample>
|
|
||||||
|
|
||||||
<h4 class="mt-4">Vue navbar with text</h4>
|
|
||||||
<DocsExample href="components/navbar.html#forms">
|
|
||||||
<CNavbar colorScheme="light" class="bg-light">
|
|
||||||
<CContainer fluid>
|
|
||||||
<CNavbarText>Navbar text with an inline element</CNavbarText>
|
|
||||||
</CContainer>
|
|
||||||
</CNavbar>
|
|
||||||
</DocsExample>
|
|
||||||
|
|
||||||
<h4 class="mt-4">Vue navbar color schemes</h4>
|
|
||||||
<DocsExample href="components/navbar.html#color-schemes">
|
|
||||||
<CNavbar expand="lg" colorScheme="dark" class="bg-dark">
|
|
||||||
<CContainer fluid>
|
|
||||||
<CNavbarBrand href="#">Navbar</CNavbarBrand>
|
|
||||||
<CNavbarToggler
|
|
||||||
aria-label="Toggle navigation"
|
|
||||||
aria-expanded="{visible}"
|
|
||||||
@click="visible = !visible"
|
|
||||||
/>
|
|
||||||
<CCollapse class="navbar-collapse" :visible="visible">
|
|
||||||
<CNavbarNav>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink href="#" active> Home </CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink href="#">Link</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CDropdown variant="nav-item" :popper="false">
|
|
||||||
<CDropdownToggle color="secondary"
|
|
||||||
>Dropdown button</CDropdownToggle
|
|
||||||
>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem href="#">Action</CDropdownItem>
|
|
||||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
|
||||||
<CDropdownDivider />
|
|
||||||
<CDropdownItem href="#"
|
|
||||||
>Something else here</CDropdownItem
|
|
||||||
>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink href="#" disabled> Disabled </CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
</CNavbarNav>
|
|
||||||
<CForm class="d-flex">
|
|
||||||
<CFormInput
|
|
||||||
type="search"
|
|
||||||
class="me-2"
|
|
||||||
placeholder="Search"
|
|
||||||
/>
|
|
||||||
<CButton type="submit" color="light" variant="outline"
|
|
||||||
>Search</CButton
|
|
||||||
>
|
|
||||||
</CForm>
|
|
||||||
</CCollapse>
|
|
||||||
</CContainer>
|
|
||||||
</CNavbar>
|
|
||||||
<br />
|
|
||||||
<CNavbar expand="lg" colorScheme="dark" class="bg-primary">
|
|
||||||
<CContainer fluid>
|
|
||||||
<CNavbarBrand href="#">Navbar</CNavbarBrand>
|
|
||||||
<CNavbarToggler
|
|
||||||
aria-label="Toggle navigation"
|
|
||||||
aria-expanded="{visible}"
|
|
||||||
@click="visible = !visible"
|
|
||||||
/>
|
|
||||||
<CCollapse class="navbar-collapse" :visible="visible">
|
|
||||||
<CNavbarNav>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink href="#" active> Home </CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink href="#">Link</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CDropdown variant="nav-item" :popper="false">
|
|
||||||
<CDropdownToggle color="secondary"
|
|
||||||
>Dropdown button</CDropdownToggle
|
|
||||||
>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem href="#">Action</CDropdownItem>
|
|
||||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
|
||||||
<CDropdownDivider />
|
|
||||||
<CDropdownItem href="#"
|
|
||||||
>Something else here</CDropdownItem
|
|
||||||
>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink href="#" disabled> Disabled </CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
</CNavbarNav>
|
|
||||||
<CForm class="d-flex">
|
|
||||||
<CFormInput
|
|
||||||
type="search"
|
|
||||||
class="me-2"
|
|
||||||
placeholder="Search"
|
|
||||||
/>
|
|
||||||
<CButton type="submit" color="light" variant="outline"
|
|
||||||
>Search</CButton
|
|
||||||
>
|
|
||||||
</CForm>
|
|
||||||
</CCollapse>
|
|
||||||
</CContainer>
|
|
||||||
</CNavbar>
|
|
||||||
<br />
|
|
||||||
<CNavbar
|
|
||||||
expand="lg"
|
|
||||||
colorScheme="light"
|
|
||||||
style="background-color: #e3f2fd"
|
|
||||||
>
|
|
||||||
<CContainer fluid>
|
|
||||||
<CNavbarBrand href="#">Navbar</CNavbarBrand>
|
|
||||||
<CNavbarToggler
|
|
||||||
aria-label="Toggle navigation"
|
|
||||||
aria-expanded="{visible}"
|
|
||||||
@click="visible = !visible"
|
|
||||||
/>
|
|
||||||
<CCollapse class="navbar-collapse" :visible="visible">
|
|
||||||
<CNavbarNav>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink href="#" active> Home </CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink href="#">Link</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CDropdown variant="nav-item" :popper="false">
|
|
||||||
<CDropdownToggle color="secondary"
|
|
||||||
>Dropdown button</CDropdownToggle
|
|
||||||
>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem href="#">Action</CDropdownItem>
|
|
||||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
|
||||||
<CDropdownDivider />
|
|
||||||
<CDropdownItem href="#"
|
|
||||||
>Something else here</CDropdownItem
|
|
||||||
>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink href="#" disabled> Disabled </CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
</CNavbarNav>
|
|
||||||
<CForm class="d-flex">
|
|
||||||
<CFormInput
|
|
||||||
type="search"
|
|
||||||
class="me-2"
|
|
||||||
placeholder="Search"
|
|
||||||
/>
|
|
||||||
<CButton type="submit" color="primary" variant="outline"
|
|
||||||
>Search</CButton
|
|
||||||
>
|
|
||||||
</CForm>
|
|
||||||
</CCollapse>
|
|
||||||
</CContainer>
|
|
||||||
</CNavbar>
|
|
||||||
</DocsExample>
|
|
||||||
|
|
||||||
<h4 class="mt-4">Vue navbar placement</h4>
|
|
||||||
<CRow>
|
|
||||||
<CCol :md="6">
|
|
||||||
<DocsExample href="components/navbar.html#placement">
|
|
||||||
<CNavbar colorScheme="light" class="bg-light">
|
|
||||||
<CContainer fluid>
|
|
||||||
<CNavbarBrand href="#">Default</CNavbarBrand>
|
|
||||||
</CContainer>
|
|
||||||
</CNavbar>
|
|
||||||
</DocsExample>
|
|
||||||
</CCol>
|
|
||||||
<CCol :md="6">
|
|
||||||
<DocsExample href="components/navbar.html#placement">
|
|
||||||
<CNavbar
|
|
||||||
colorScheme="light"
|
|
||||||
class="bg-light"
|
|
||||||
placement="fixed-top"
|
|
||||||
>
|
|
||||||
<CContainer fluid>
|
|
||||||
<CNavbarBrand href="#">Fixed top</CNavbarBrand>
|
|
||||||
</CContainer>
|
|
||||||
</CNavbar>
|
|
||||||
</DocsExample>
|
|
||||||
</CCol>
|
|
||||||
<CCol :md="6">
|
|
||||||
<DocsExample href="components/navbar.html#placement">
|
|
||||||
<CNavbar
|
|
||||||
colorScheme="light"
|
|
||||||
class="bg-light"
|
|
||||||
placement="fixed-bottom"
|
|
||||||
>
|
|
||||||
<CContainer fluid>
|
|
||||||
<CNavbarBrand href="#">Fixed bottom</CNavbarBrand>
|
|
||||||
</CContainer>
|
|
||||||
</CNavbar>
|
|
||||||
</DocsExample>
|
|
||||||
</CCol>
|
|
||||||
<CCol :md="6">
|
|
||||||
<DocsExample href="components/navbar.html#placement">
|
|
||||||
<CNavbar
|
|
||||||
colorScheme="light"
|
|
||||||
class="bg-light"
|
|
||||||
placement="sticky-top"
|
|
||||||
>
|
|
||||||
<CContainer fluid>
|
|
||||||
<CNavbarBrand href="#">Sticky top</CNavbarBrand>
|
|
||||||
</CContainer>
|
|
||||||
</CNavbar>
|
|
||||||
</DocsExample>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
|
|
||||||
<h4 class="mt-4">Vue navbar responsive</h4>
|
|
||||||
<p>With no CNavbarBrand shown at the smallest breakpoint:</p>
|
|
||||||
<DocsExample href="components/navbar.html#forms">
|
|
||||||
<CNavbar expand="lg" colorScheme="light" class="bg-light">
|
|
||||||
<CContainer fluid>
|
|
||||||
<CNavbarToggler
|
|
||||||
aria-label="Toggle navigation"
|
|
||||||
aria-expanded="{visible}"
|
|
||||||
@click="visible = !visible"
|
|
||||||
/>
|
|
||||||
<CCollapse class="navbar-collapse" :visible="visible">
|
|
||||||
<CNavbarBrand href="#">Hidden brand</CNavbarBrand>
|
|
||||||
<CNavbarNav class="me-auto mb-2 mb-lg-0">
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink href="#" active> Home </CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink href="#">Link</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink href="#" disabled> Disabled </CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
</CNavbarNav>
|
|
||||||
<CForm class="d-flex">
|
|
||||||
<CFormInput
|
|
||||||
type="search"
|
|
||||||
class="me-2"
|
|
||||||
placeholder="Search"
|
|
||||||
/>
|
|
||||||
<CButton type="submit" color="success" variant="outline"
|
|
||||||
>Search</CButton
|
|
||||||
>
|
|
||||||
</CForm>
|
|
||||||
</CCollapse>
|
|
||||||
</CContainer>
|
|
||||||
</CNavbar>
|
|
||||||
</DocsExample>
|
|
||||||
<p>With a brand name shown on the left and toggler on the right:</p>
|
|
||||||
<DocsExample href="components/navbar.html#forms">
|
|
||||||
<CNavbar expand="lg" colorScheme="light" class="bg-light">
|
|
||||||
<CContainer fluid>
|
|
||||||
<CNavbarBrand href="#">Navbar</CNavbarBrand>
|
|
||||||
<CNavbarToggler
|
|
||||||
aria-label="Toggle navigation"
|
|
||||||
aria-expanded="{visible}"
|
|
||||||
@click="visible = !visible"
|
|
||||||
/>
|
|
||||||
<CCollapse class="navbar-collapse" :visible="visible">
|
|
||||||
<CNavbarNav class="me-auto mb-2 mb-lg-0">
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink href="#" active> Home </CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink href="#">Link</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink href="#" disabled> Disabled </CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
</CNavbarNav>
|
|
||||||
<CForm class="d-flex">
|
|
||||||
<CFormInput
|
|
||||||
type="search"
|
|
||||||
class="me-2"
|
|
||||||
placeholder="Search"
|
|
||||||
/>
|
|
||||||
<CButton type="submit" color="success" variant="outline"
|
|
||||||
>Search</CButton
|
|
||||||
>
|
|
||||||
</CForm>
|
|
||||||
</CCollapse>
|
|
||||||
</CContainer>
|
|
||||||
</CNavbar>
|
|
||||||
</DocsExample>
|
|
||||||
|
|
||||||
<p>With a toggler on the left and brand name on the right:</p>
|
|
||||||
<DocsExample href="components/navbar.html#forms">
|
|
||||||
<CNavbar expand="lg" colorScheme="light" class="bg-light">
|
|
||||||
<CContainer fluid>
|
|
||||||
<CNavbarToggler
|
|
||||||
aria-label="Toggle navigation"
|
|
||||||
aria-expanded="{visible}"
|
|
||||||
@click="visible = !visible"
|
|
||||||
/>
|
|
||||||
<CNavbarBrand href="#">Navbar</CNavbarBrand>
|
|
||||||
<CCollapse class="navbar-collapse" :visible="visible">
|
|
||||||
<CNavbarNav class="me-auto mb-2 mb-lg-0">
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink href="#" active> Home </CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink href="#">Link</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink href="#" disabled> Disabled </CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
</CNavbarNav>
|
|
||||||
<CForm class="d-flex">
|
|
||||||
<CFormInput
|
|
||||||
type="search"
|
|
||||||
class="me-2"
|
|
||||||
placeholder="Search"
|
|
||||||
/>
|
|
||||||
<CButton type="submit" color="success" variant="outline"
|
|
||||||
>Search</CButton
|
|
||||||
>
|
|
||||||
</CForm>
|
|
||||||
</CCollapse>
|
|
||||||
</CContainer>
|
|
||||||
</CNavbar>
|
|
||||||
</DocsExample>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'Navbars',
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -656,14 +656,12 @@ import { getStyle } from '@coreui/utils'
|
|||||||
import { CChart } from '@coreui/vue-chartjs'
|
import { CChart } from '@coreui/vue-chartjs'
|
||||||
import WidgetsStatsA from './WidgetsStatsTypeA.vue'
|
import WidgetsStatsA from './WidgetsStatsTypeA.vue'
|
||||||
import WidgetsStatsD from './WidgetsStatsTypeD.vue'
|
import WidgetsStatsD from './WidgetsStatsTypeD.vue'
|
||||||
import Example from '../../components/DocsExample.vue'
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Widgets',
|
name: 'Widgets',
|
||||||
components: {
|
components: {
|
||||||
CChart,
|
CChart,
|
||||||
WidgetsStatsA,
|
WidgetsStatsA,
|
||||||
WidgetsStatsD,
|
WidgetsStatsD,
|
||||||
Example,
|
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
const widgetStatsE = {
|
const widgetStatsE = {
|
||||||
|
|||||||
Reference in New Issue
Block a user