feat: add views - in base section
This commit is contained in:
Marcin Michałek
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Cards</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h4>Standard</h4>
|
||||
<Example href="components/cards.html#example">
|
||||
<CCard style="width: 18rem">
|
||||
<CCardImage component="svg" orientation="top" class="docs-placeholder-img" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></CCardImage>
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</Example>
|
||||
<h4 class="mt-4">Horizontal</h4>
|
||||
<Example href="components/cards.html#horizontal">
|
||||
<CCard class="mb-3" style="max=width: 540px">
|
||||
<CRow class="g-0">
|
||||
<CCol :md="4">
|
||||
<CCardImage component="svg" class="docs-placeholder-img rounded-0" width="100%" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image</text></CCardImage>
|
||||
</CCol>
|
||||
<CCol :md="8">
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
|
||||
<CCardText><small class="text-muted">Last updated 3 mins ago</small></CCardText>
|
||||
</CCardBody>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCard>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Styles</h4>
|
||||
<Example href="components/cards.html#card-styles">
|
||||
<CRow>
|
||||
<template v-for="(item) in [
|
||||
{ color: 'primary', textColor: 'white' },
|
||||
{ color: 'secondary', textColor: 'white' },
|
||||
{ color: 'success', textColor: 'white' },
|
||||
{ color: 'danger', textColor: 'white' },
|
||||
{ color: 'warning' },
|
||||
{ color: 'info', textColor: 'white' },
|
||||
{ color: 'light' },
|
||||
{ color: 'dark', textColor: 'white' }
|
||||
]">
|
||||
<CCol lg="2" md="3" sm="4" xs="6">
|
||||
<CCard :color="item.color" :textColor="item.textColor" class="mb-3" style="max-width: 18rem">
|
||||
<CCardHeader>Header</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCardTitle>{{item.color}} card title</CCardTitle>
|
||||
<CCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</template>
|
||||
<template v-for="(item) in [
|
||||
{ color: 'primary', textColor: 'primary' },
|
||||
{ color: 'secondary', textColor: 'secondary' },
|
||||
{ color: 'success', textColor: 'success' },
|
||||
{ color: 'danger', textColor: 'danger' },
|
||||
{ color: 'warning', textColor: 'warning' },
|
||||
{ color: 'info', textColor: 'info' },
|
||||
{ color: 'light'},
|
||||
{ color: 'dark'}
|
||||
]">
|
||||
<CCol lg="2" md="3" sm="4" xs="6">
|
||||
<CCard :textColor="item.textColor" class="mb-3" :class="'border-' + item.color" style="max-width: 18rem">
|
||||
<CCardHeader>Header</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCardTitle>{{item.color}} card title</CCardTitle>
|
||||
<CCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</template>
|
||||
<template v-for="(item) in [
|
||||
{ color: 'primary', textColor: 'primary' },
|
||||
{ color: 'secondary', textColor: 'secondary' },
|
||||
{ color: 'success', textColor: 'success' },
|
||||
{ color: 'danger', textColor: 'danger' },
|
||||
{ color: 'warning', textColor: 'warning' },
|
||||
{ color: 'info', textColor: 'info' },
|
||||
{ color: 'light'},
|
||||
{ color: 'dark'}
|
||||
]">
|
||||
<CCol lg="2" md="3" sm="4" xs="6">
|
||||
<CCard :textColor="item.textColor" class="mb-3 border-top-3" :class="'border-top-' + item.color" style="max-width: 18rem">
|
||||
<CCardHeader>Header</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCardTitle>{{item.color}} card title</CCardTitle>
|
||||
<CCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</template>
|
||||
</CRow>
|
||||
</Example>
|
||||
<h4 class="mt-4">Card groups</h4>
|
||||
<Example href="components/cards.html#card-groups">
|
||||
<CCardGroup>
|
||||
<CCard>
|
||||
<CCardImage component="svg" orientation="top" class="docs-placeholder-img" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></CCardImage>
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
|
||||
</CCardBody>
|
||||
<CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardImage component="svg" orientation="top" class="docs-placeholder-img" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></CCardImage>
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>This card has supporting text below as a natural lead-in to additional content.</CCardText>
|
||||
</CCardBody>
|
||||
<CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardImage component="svg" orientation="top" class="docs-placeholder-img" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></CCardImage>
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</CCardText>
|
||||
</CCardBody>
|
||||
<CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</Example>
|
||||
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Cards",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Carousels</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h4>Slides only</h4>
|
||||
<Example href="components/carousel.html#slides-only">
|
||||
<CCarousel>
|
||||
<CCarouselItem>
|
||||
<img class="d-block w-100" src="/images/vue.jpg" alt="slide 1"/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img class="d-block w-100" src="/images/react.jpg" alt="slide 2"/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img class="d-block w-100" src="/images/angular.jpg" alt="slide 3"/>
|
||||
</CCarouselItem>
|
||||
</CCarousel>
|
||||
</Example>
|
||||
<h4 class="mt-4">With controls</h4>
|
||||
<Example href="components/carousel.html#with-controls">
|
||||
<CCarousel controls>
|
||||
<CCarouselItem>
|
||||
<img class="d-block w-100" src="/images/vue.jpg" alt="slide 1"/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img class="d-block w-100" src="/images/react.jpg" alt="slide 2"/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img class="d-block w-100" src="/images/angular.jpg" alt="slide 3"/>
|
||||
</CCarouselItem>
|
||||
</CCarousel>
|
||||
</Example>
|
||||
<h4 class="mt-4">With indicators</h4>
|
||||
<Example href="components/carousel.html#with-indicators">
|
||||
<CCarousel controls indicators>
|
||||
<CCarouselItem>
|
||||
<img class="d-block w-100" src="/images/vue.jpg" alt="slide 1"/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img class="d-block w-100" src="/images/react.jpg" alt="slide 2"/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img class="d-block w-100" src="/images/angular.jpg" alt="slide 3"/>
|
||||
</CCarouselItem>
|
||||
</CCarousel>
|
||||
</Example>
|
||||
<h4 class="mt-4">With caption</h4>
|
||||
<Example href="components/carousel.html#with-captions">
|
||||
<CCarousel controls indicators>
|
||||
<CCarouselItem>
|
||||
<img class="d-block w-100" src="/images/vue.jpg" alt="slide 1"/>
|
||||
<CCarouselCaption class="d-none d-md-block">
|
||||
<h5>First slide label</h5>
|
||||
<p>Some representative placeholder content for the first slide.</p>
|
||||
</CCarouselCaption>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img class="d-block w-100" src="/images/react.jpg" alt="slide 2"/>
|
||||
<CCarouselCaption class="d-none d-md-block">
|
||||
<h5>First slide label</h5>
|
||||
<p>Some representative placeholder content for the first slide.</p>
|
||||
</CCarouselCaption>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img class="d-block w-100" src="/images/angular.jpg" alt="slide 3"/>
|
||||
<CCarouselCaption class="d-none d-md-block">
|
||||
<h5>First slide label</h5>
|
||||
<p>Some representative placeholder content for the first slide.</p>
|
||||
</CCarouselCaption>
|
||||
</CCarouselItem>
|
||||
</CCarousel>
|
||||
</Example>
|
||||
<h4 class="mt-4">With caption</h4>
|
||||
<Example href="components/carousel.html#crossfade">
|
||||
<CCarousel controls indicators transition="crossfade">
|
||||
<CCarouselItem>
|
||||
<img class="d-block w-100" src="/images/vue.jpg" alt="slide 1"/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img class="d-block w-100" src="/images/react.jpg" alt="slide 2"/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img class="d-block w-100" src="/images/angular.jpg" alt="slide 3"/>
|
||||
</CCarouselItem>
|
||||
</CCarousel>
|
||||
</Example>
|
||||
<h4 class="mt-4">Dark variant</h4>
|
||||
<Example href="components/carousel.html#dark-variant">
|
||||
<CCarousel controls indicators dark>
|
||||
<CCarouselItem>
|
||||
<img class="d-block w-100" src="/images/vue.jpg" alt="slide 1"/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img class="d-block w-100" src="/images/react.jpg" alt="slide 2"/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img class="d-block w-100" src="/images/angular.jpg" alt="slide 3"/>
|
||||
</CCarouselItem>
|
||||
</CCarousel>
|
||||
</Example>
|
||||
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Carousels",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Collapses</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h4>Toggle</h4>
|
||||
<Example href="components/collapse.html#example">
|
||||
<CButton color="primary" href="#" @click="visible = !visible">Link</CButton>
|
||||
<CButton color="primary" @click="visible = !visible">Button</CButton>
|
||||
<CCollapse :visible="visible">
|
||||
<CCard class="mt-3">
|
||||
<CCardBody>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
|
||||
ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
|
||||
sapiente ea proident.
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Toggle multiple targets</h4>
|
||||
<Example href="components/collapse.html#multiple-targets">
|
||||
<CButton color="primary" @click="visibleA = !visibleA">Toggle first element</CButton>
|
||||
<CButton color="primary" @click="visibleB = !visibleB">Toggle second element</CButton>
|
||||
<CButton color="primary" @click="() => {
|
||||
visibleA = !visibleA
|
||||
visibleB = !visibleB
|
||||
}"
|
||||
>
|
||||
Toggle both elements
|
||||
</CButton>
|
||||
<CRow>
|
||||
<CCol xs="6">
|
||||
<CCollapse :visible="visibleA">
|
||||
<CCard class="mt-3">
|
||||
<CCardBody>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
||||
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
|
||||
cred nesciunt sapiente ea proident.
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</CCol>
|
||||
<CCol xs="6">
|
||||
<CCollapse :visible="visibleB">
|
||||
<CCard class="mt-3">
|
||||
<CCardBody>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
||||
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
|
||||
cred nesciunt sapiente ea proident.
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
|
||||
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Breadcrumbs",
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
visibleA: false,
|
||||
visibleB: false,
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,817 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Forms</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<h4>Overview</h4>
|
||||
<Example href="forms/overview.html#overview">
|
||||
<CForm>
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="exampleInputEmail1">Email address</CFormLabel>
|
||||
<CFormInput type="email" id="exampleInputEmail1" aria-describedby="emailHelp" />
|
||||
<CFormText id="emailHelp">We'll never share your email with anyone else.</CFormText>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="exampleInputPassword1">Email Password</CFormLabel>
|
||||
<CFormInput type="password" id="exampleInputPassword1" />
|
||||
</div>
|
||||
<CFormCheck
|
||||
class="mb-3"
|
||||
label="Check me out"
|
||||
/>
|
||||
<CButton type="submit" color="primary">
|
||||
Submit
|
||||
</CButton>
|
||||
</CForm>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Disabled fieldset example</h4>
|
||||
<Example href="forms/overview.html#disabled-forms">
|
||||
<CForm>
|
||||
<fieldset disabled>
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="disabledTextInput">Disabled input</CFormLabel>
|
||||
<CFormInput id="disabledTextInput" placeholder="Disabled input" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="disabledSelect">Disabled select menu</CFormLabel>
|
||||
<CFormSelect id="disabledSelect">
|
||||
<option>Disabled select</option>
|
||||
</CFormSelect>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormCheck id="disabledFieldsetCheck" label="Can't check this" disabled />
|
||||
</div>
|
||||
<CButton type="submit">Submit</CButton>
|
||||
</fieldset>
|
||||
</CForm>
|
||||
</Example>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<h4 class="mt-4">Sizing</h4>
|
||||
<Example href="forms/form-control.html#sizing">
|
||||
<CFormInput type="text" size="lg" placeholder="Large input" aria-label="lg input example"/>
|
||||
<br/>
|
||||
<CFormInput type="text" placeholder="Default input" aria-label="default input example"/>
|
||||
<br/>
|
||||
<CFormInput type="text" size="sm" placeholder="Small input" aria-label="sm input example"/>
|
||||
</Example>
|
||||
<h4 class="mt-4">Input file</h4>
|
||||
<Example href="forms/form-control.html#file-input">
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="formFile">Default file input example</CFormLabel>
|
||||
<CFormInput type="file" id="formFile"/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="formFileMultiple">Multiple files input example</CFormLabel>
|
||||
<CFormInput type="file" id="formFileMultiple" multiple/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="formFileDisabled">Disabled file input example</CFormLabel>
|
||||
<CFormInput type="file" id="formFileDisabled" disabled/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="formFileSm">Small file input example</CFormLabel>
|
||||
<CFormInput type="file" size="sm" id="formFileSm"/>
|
||||
</div>
|
||||
<div>
|
||||
<CFormLabel for="formFileLg">Large file input example</CFormLabel>
|
||||
<CFormInput type="file" size="lg" id="formFileLg"/>
|
||||
</div>
|
||||
</Example>
|
||||
<h4 class="mt-4">Color</h4>
|
||||
<Example href="forms/form-control.html#color">
|
||||
<CFormLabel for="exampleColorInput">Color picker</CFormLabel>
|
||||
<CFormInput type="color" id="exampleColorInput" defaultValue="#563d7c" title="Choose your color" />
|
||||
</Example>
|
||||
<h4 class="mt-4">Select</h4>
|
||||
<Example href="forms/select.html#default">
|
||||
<CRow>
|
||||
<CCol md="3">
|
||||
<CFormSelect class="mb-3" aria-label="Default select example">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormSelect size="lg" class="mb-3" aria-label="Large select example">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormSelect size="sm" class="mb-3" aria-label="Small select example">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormSelect size="lg" class="mb-3" multiple aria-label="Multiple select example">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormSelect htmlSize="3" class="mb-3" multiple aria-label="size 3 select example">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormSelect aria-label="Disabled select example" class="mb-3" disabled>
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<h4 class="mt-4">Checks</h4>
|
||||
<Example href="forms/checks-radios.html#checks">
|
||||
<CRow>
|
||||
<CCol md="4">
|
||||
<CFormCheck id="flexCheckDefault" label="Default checkbox"/>
|
||||
<CFormCheck id="flexCheckChecked" label="Checked checkbox" defaultChecked />
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormCheck label="Disabled checkbox" disabled/>
|
||||
<CFormCheck label="Disabled checked checkbox" defaultChecked disabled/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<h4 class="mt-4">Radios</h4>
|
||||
<Example href="forms/checks-radios.html#radios">
|
||||
<CRow>
|
||||
<CCol md="4">
|
||||
<CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault1" label="Default radio"/>
|
||||
<CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault2" label="Checked radio" defaultChecked/>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormCheck type="radio" name="flexRadioDisabled" id="flexRadioDisabled" label="Disabled radio" disabled/>
|
||||
<CFormCheck type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" label="Disabled checked radio" defaultChecked disabled/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<h4 class="mt-4">Switches</h4>
|
||||
<Example href="forms/checks-radios.html#switches">
|
||||
<CRow>
|
||||
<CCol md="4">
|
||||
<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault"/>
|
||||
<CFormSwitch label="Checked switch checkbox input" id="formSwitchCheckChecked" defaultChecked/>
|
||||
<CFormSwitch label="Disabled switch checkbox input" id="formSwitchCheckDisabled" disabled/>
|
||||
<CFormSwitch label="Disabled checked switch checkbox input" id="formSwitchCheckCheckedDisabled" defaultChecked disabled/>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault"/>
|
||||
<CFormSwitch size="lg" label="Large switch checkbox input" id="formSwitchCheckDefaultLg"/>
|
||||
<CFormSwitch size="xl" label="Extra large switch checkbox input" id="formSwitchCheckDefaultXL"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<h4 class="mt-4">Inline Checks and Radios</h4>
|
||||
<Example href="forms/checks-radios.html#inline">
|
||||
<CRow>
|
||||
<CCol md="4">
|
||||
<h5 class="mt-2 mb-2">Checks</h5>
|
||||
<CFormCheck inline id="inlineCheckbox1" value="option1" label="1"/>
|
||||
<CFormCheck inline id="inlineCheckbox2" value="option2" label="2"/>
|
||||
<CFormCheck inline id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled/>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<h5 class="mt-2 mb-2">Radios</h5>
|
||||
<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox1" value="option1" label="1"/>
|
||||
<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox2" value="option2" label="2"/>
|
||||
<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<h4 class="mt-4">Toggle buttons</h4>
|
||||
<Example href="forms/checks-radios.html#checkbox-toggle-buttons">
|
||||
<CRow>
|
||||
<CCol md="4">
|
||||
<h5 class="mt-2 mb-2">Checkbox toggle buttons</h5>
|
||||
<div class="mb-2">
|
||||
<CFormCheck :button="{ color: 'primary' }" id="btn-check" autoComplete="off" label="Single toggle"/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<CFormCheck :button="{ color: 'primary' }" id="btn-check-2" autoComplete="off" label="Checked" defaultChecked/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<CFormCheck :button="{ color: 'primary' }" id="btn-check-3" autoComplete="off" label="Disabled" disabled/>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<h5 class="mt-2 mb-2">Radio toggle buttons</h5>
|
||||
<CFormCheck :button="{ color: 'secondary' }" type="radio" name="options" id="option1" autoComplete="off" label="Checked" defaultChecked/>
|
||||
<CFormCheck :button="{ color: 'secondary' }" type="radio" name="options" id="option2" autoComplete="off" label="Radio"/>
|
||||
<CFormCheck :button="{ color: 'secondary' }" type="radio" name="options" id="option3" autoComplete="off" label="Radio" disabled/>
|
||||
<CFormCheck :button="{ color: 'secondary' }" type="radio" name="options" id="option4" autoComplete="off" label="Radio"/>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<h5 class="mt-2 mb-2">Outlined styles</h5>
|
||||
<div>
|
||||
<CFormCheck :button="{ color: 'primary', variant: 'outline' }" id="btn-check-outlined" autoComplete="off" label="Single toggle"/>
|
||||
</div>
|
||||
<div>
|
||||
<CFormCheck :button="{ color: 'secondary', variant: 'outline' }" id="btn-check-2-outlined" autoComplete="off" label="Checked" defaultChecked/>
|
||||
</div>
|
||||
<div>
|
||||
<CFormCheck :button="{ color: 'success', variant: 'outline' }" type="radio" name="options-outlined" id="success-outlined" autoComplete="off" label="Radio" defaultChecked/>
|
||||
<CFormCheck :button="{ color: 'danger', variant: 'outline' }" type="radio" name="options-outlined" id="danger-outlined" autoComplete="off" label="Radio"/>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<h4 class="mt-4">Range</h4>
|
||||
<Example href="forms/range.html#overview">
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CFormLabel for="customRange1">Example range</CFormLabel>
|
||||
<CFormRange id="customRange1"/>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CFormLabel for="disabledRange">Disabled range</CFormLabel>
|
||||
<CFormRange id="disabledRange" disabled/>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CFormLabel for="customRange2">Example range max="5"</CFormLabel>
|
||||
<CFormRange min="0" max="5" defaultValue="3" id="customRange2"/>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CFormLabel for="customRange3">Example range step="0.5"</CFormLabel>
|
||||
<CFormRange min="0" max="5" step="0.5" defaultValue="3" id="customRange3"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<h4 class="mt-4">Floating labels</h4>
|
||||
<Example href="forms/floating-labels.html#example">
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<h5 class="mt-2 mb-2">Input</h5>
|
||||
<CFormFloating class="mb-3">
|
||||
<CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
|
||||
<CFormLabel for="floatingInput">Email address</CFormLabel>
|
||||
</CFormFloating>
|
||||
<CFormFloating>
|
||||
<CFormInput type="password" id="floatingPassword" placeholder="Password" />
|
||||
<CFormLabel for="exampleFormControlPassword">Password</CFormLabel>
|
||||
</CFormFloating>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h5 class="mt-2 mb-2">Input with value</h5>
|
||||
<CFormFloating>
|
||||
<CFormInput
|
||||
type="email"
|
||||
id="floatingInputValue"
|
||||
placeholder="name@example.com"
|
||||
value="test@example.com"
|
||||
/>
|
||||
<CFormLabel for="floatingInputValue">Input with value</CFormLabel>
|
||||
</CFormFloating>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h5 class="mt-2 mb-2">Text areas</h5>
|
||||
<CFormFloating>
|
||||
<CFormTextarea
|
||||
id="floatingTextarea"
|
||||
placeholder="Leave a comment here"
|
||||
></CFormTextarea>
|
||||
<CFormLabel for="floatingTextarea">Comments</CFormLabel>
|
||||
</CFormFloating>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h5 class="mt-2 mb-2">Select</h5>
|
||||
<CFormFloating>
|
||||
<CFormSelect id="floatingSelect" aria-label="Floating label select example">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
<CFormLabel for="floatingSelect">Works with selects</CFormLabel>
|
||||
</CFormFloating>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<h4 class="mt-4">Vue input group (basic example)</h4>
|
||||
<Example href="forms/input-group.html#basic-example">
|
||||
<CInputGroup class="mb-3">
|
||||
<CInputGroupText id="basic-addon1">@</CInputGroupText>
|
||||
<CFormInput placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CFormInput placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"/>
|
||||
<CInputGroupText id="basic-addon2">@example.com</CInputGroupText>
|
||||
</CInputGroup>
|
||||
<CFormLabel for="basic-url">Your vanity URL</CFormLabel>
|
||||
<CInputGroup class="mb-3">
|
||||
<CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>
|
||||
<CFormInput id="basic-url" aria-describedby="basic-addon3"/>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CInputGroupText>$</CInputGroupText>
|
||||
<CFormInput aria-label="Amount (to the nearest dollar)"/>
|
||||
<CInputGroupText>.00</CInputGroupText>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CFormInput placeholder="Username" aria-label="Username"/>
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormInput placeholder="Server" aria-label="Server"/>
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>With textarea</CInputGroupText>
|
||||
<CFormTextarea aria-label="With textarea"></CFormTextarea>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Input group sizing</h4>
|
||||
<Example href="forms/input-group.html#sizing">
|
||||
<CInputGroup size="sm" class="mb-3">
|
||||
<CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
|
||||
<CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm"/>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText>
|
||||
<CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default"/>
|
||||
</CInputGroup>
|
||||
<CInputGroup size="lg">
|
||||
<CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText>
|
||||
<CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg"/>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Checkboxes and radios</h4>
|
||||
<Example href="forms/input-group.html#checkboxes-and-radios">
|
||||
<CInputGroup class="mb-3">
|
||||
<CInputGroupText>
|
||||
<CFormCheck type="checkbox" value="" aria-label="Checkbox for following text input"/>
|
||||
</CInputGroupText>
|
||||
<CFormInput aria-label="Text input with checkbox"/>
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>
|
||||
<CFormCheck type="radio" value="" aria-label="Radio button for following text input"/>
|
||||
</CInputGroupText>
|
||||
<CFormInput aria-label="Text input with radio button"/>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Multiple inputs</h4>
|
||||
<Example href="forms/input-group.html#multiple-inputs">
|
||||
<CInputGroup>
|
||||
<CInputGroupText>First and last name</CInputGroupText>
|
||||
<CFormInput aria-label="First name"/>
|
||||
<CFormInput aria-label="Last name"/>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
|
||||
<h4 class="mt-4">Multiple addons</h4>
|
||||
<Example href="forms/input-group.html#multiple-addons">
|
||||
<CInputGroup class="mb-3">
|
||||
<CInputGroupText>$</CInputGroupText>
|
||||
<CInputGroupText>0.00</CInputGroupText>
|
||||
<CFormInput aria-label="Dollar amount (with dot and two decimal places)"/>
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CFormInput aria-label="Dollar amount (with dot and two decimal places)"/>
|
||||
<CInputGroupText>$</CInputGroupText>
|
||||
<CInputGroupText>0.00</CInputGroupText>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
|
||||
<h4 class="mt-4">Button addons</h4>
|
||||
<Example href="forms/input-group.html#button-addons">
|
||||
<CInputGroup class="mb-3">
|
||||
<CButton type="button" color="secondary" variant="outline" id="button-addon1">Button</CButton>
|
||||
<CFormInput placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1"/>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CFormInput placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2"/>
|
||||
<CButton type="button" color="secondary" variant="outline" id="button-addon2">Button</CButton>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CButton type="button" color="secondary" variant="outline">Button</CButton>
|
||||
<CButton type="button" color="secondary" variant="outline">Button</CButton>
|
||||
<CFormInput placeholder="" aria-label="Example text with two button addons"/>
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CFormInput placeholder="Recipient's username" aria-label="Recipient's username with two button addons"/>
|
||||
<CButton type="button" color="secondary" variant="outline">Button</CButton>
|
||||
<CButton type="button" color="secondary" variant="outline">Button</CButton>
|
||||
</CInputGroup>
|
||||
|
||||
</Example>
|
||||
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
|
||||
<h4 class="mt-4">Buttons with dropdowns</h4>
|
||||
<Example href="forms/input-group.html#buttons-with-dropdowns">
|
||||
<CInputGroup class="mb-3">
|
||||
<CDropdown variant="input-group">
|
||||
<CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CFormInput aria-label="Text input with dropdown button"/>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CFormInput aria-label="Text input with dropdown button"/>
|
||||
<CDropdown alignment="end" variant="input-group">
|
||||
<CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CDropdown variant="input-group">
|
||||
<CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CFormInput aria-label="Text input with 2 dropdown buttons"/>
|
||||
<CDropdown alignment="end" variant="input-group">
|
||||
<CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CInputGroup>
|
||||
|
||||
</Example>
|
||||
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Segmented buttons</h4>
|
||||
<Example href="forms/input-group.html#segmented-buttons">
|
||||
<CInputGroup class="mb-3">
|
||||
<CDropdown variant="input-group">
|
||||
<CButton type="button" color="secondary" variant="outline">Action</CButton>
|
||||
<CDropdownToggle color="secondary" variant="outline" split/>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CFormInput aria-label="Text input with segmented dropdown button"/>
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CFormInput aria-label="Text input with segmented dropdown button"/>
|
||||
<CDropdown alignment="end" variant="input-group">
|
||||
<CButton type="button" color="secondary" variant="outline">Action</CButton>
|
||||
<CDropdownToggle color="secondary" variant="outline" split/>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Custom select</h4>
|
||||
<Example href="forms/input-group.html#custom-select">
|
||||
<CInputGroup class="mb-3">
|
||||
<CInputGroupText component="label" for="inputGroupSelect01">Options</CInputGroupText>
|
||||
<CFormSelect id="inputGroupSelect01">
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CFormSelect id="inputGroupSelect02">
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
<CInputGroupText component="label" for="inputGroupSelect02">Options</CInputGroupText>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CButton type="button" color="secondary" variant="outline">Button</CButton>
|
||||
<CFormSelect id="inputGroupSelect03" aria-label="Example select with button addon">
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CFormSelect id="inputGroupSelect04" aria-label="Example select with button addon">
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
<CButton type="button" color="secondary" variant="outline">Button</CButton>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Custom file input</h4>
|
||||
<Example href="forms/input-group.html#custom-file-input">
|
||||
<CInputGroup class="mb-3">
|
||||
<CInputGroupText component="label" for="inputGroupFile01">Upload</CInputGroupText>
|
||||
<CFormInput type="file" id="inputGroupFile01"/>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CFormInput type="file" id="inputGroupFile02"/>
|
||||
<CInputGroupText component="label" for="inputGroupFile02">Upload</CInputGroupText>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon03">Button</CButton>
|
||||
<CFormInput type="file" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="Upload"/>
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CFormInput type="file" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload"/>
|
||||
<CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon04">Button</CButton>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="8">
|
||||
<h4 class="mt-4">Horizonstal form</h4>
|
||||
<Example href="forms/layout.html#horizontal-form">
|
||||
<CForm>
|
||||
<CRow class="mb-3">
|
||||
<CFormLabel for="inputEmail3" class="col-sm-2 col-form-label">Email</CFormLabel>
|
||||
<CCol sm="10">
|
||||
<CFormInput type="email" id="inputEmail3"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="mb-3">
|
||||
<CFormLabel for="inputPassword3" class="col-sm-2 col-form-label">Password</CFormLabel>
|
||||
<CCol sm="10">
|
||||
<CFormInput type="password" id="inputPassword3"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<fieldset class="row mb-3">
|
||||
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
|
||||
<CCol sm="10">
|
||||
<CFormCheck type="radio" name="gridRadios" id="gridRadios1" value="option1" label="First radio" defaultChecked/>
|
||||
<CFormCheck type="radio" name="gridRadios" id="gridRadios2" value="option2" label="Second radio"/>
|
||||
<CFormCheck type="radio" name="gridRadios" id="gridRadios3" value="option3" label="Third disabled radio" disabled/>
|
||||
</CCol>
|
||||
</fieldset>
|
||||
<CRow class="mb-3">
|
||||
<div class="col-sm-10 offset-sm-2">
|
||||
<CFormCheck type="checkbox" id="gridCheck1" label="Example checkbox"/>
|
||||
</div>
|
||||
</CRow>
|
||||
<CButton type="submit">Sign in</CButton>
|
||||
</CForm>
|
||||
</Example>
|
||||
|
||||
</CCol>
|
||||
</CRow>
|
||||
<h4 class="mt-4">Vue form validation custom styles</h4>
|
||||
<Example href="forms/validation.html#custom-styles">
|
||||
<CForm class="row g-3 needs-validation" noValidate :validated="validatedCustom01" @submit="handleSubmitCustom01">
|
||||
<CCol md="4">
|
||||
<CFormLabel for="validationCustom01">Email</CFormLabel>
|
||||
<CFormInput id="validationCustom01" defaultValue="Mark" required/>
|
||||
<CFormFeedback valid>
|
||||
Looks good!
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormLabel for="validationCustom02">Email</CFormLabel>
|
||||
<CFormInput id="validationCustom02" defaultValue="Otto" required/>
|
||||
<CFormFeedback valid>
|
||||
Looks good!
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormLabel for="validationCustomUsername">Username</CFormLabel>
|
||||
<CInputGroup class="has-validation">
|
||||
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
|
||||
<CFormInput id="validationCustomUsername" defaultValue="" aria-describedby="inputGroupPrepend" required/>
|
||||
<CFormFeedback invalid>
|
||||
Please choose a username.
|
||||
</CFormFeedback>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CFormLabel for="validationCustom03">City</CFormLabel>
|
||||
<CFormInput id="validationCustom03" required/>
|
||||
<CFormFeedback invalid>
|
||||
Please provide a valid city.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormLabel for="validationCustom04">City</CFormLabel>
|
||||
<CFormSelect id="validationCustom04">
|
||||
<option disabled>Choose...</option>
|
||||
<option>...</option>
|
||||
</CFormSelect>
|
||||
<CFormFeedback invalid>
|
||||
Please provide a valid city.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormLabel for="validationCustom05">City</CFormLabel>
|
||||
<CFormInput id="validationCustom05" required/>
|
||||
<CFormFeedback invalid>
|
||||
Please provide a valid zip.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CFormCheck type="checkbox" id="invalidCheck" label="Agree to terms and conditions" required/>
|
||||
<CFormFeedback invalid>
|
||||
You must agree before submitting.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CButton color="primary" type="submit">Submit form</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vue form validation browser defaults</h4>
|
||||
<Example href="forms/validation.html#browser-defaults">
|
||||
<CForm class="row g-3 needs-validation" :validated="validatedDefault01" @submit="handleSubmitDefault01">
|
||||
<CCol md="4">
|
||||
<CFormLabel for="validationDefault01">Email</CFormLabel>
|
||||
<CFormInput id="validationDefault01" defaultValue="Mark" required/>
|
||||
<CFormFeedback valid>
|
||||
Looks good!
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormLabel for="validationDefault02">Email</CFormLabel>
|
||||
<CFormInput id="validationDefault02" defaultValue="Otto" required/>
|
||||
<CFormFeedback valid>
|
||||
Looks good!
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormLabel for="validationDefaultUsername">Username</CFormLabel>
|
||||
<CInputGroup class="has-validation">
|
||||
<CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
|
||||
<CFormInput id="validationDefaultUsername" defaultValue="" aria-describedby="inputGroupPrepend02" required/>
|
||||
<CFormFeedback invalid>
|
||||
Please choose a username.
|
||||
</CFormFeedback>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CFormLabel for="validationDefault03">City</CFormLabel>
|
||||
<CFormInput id="validationDefault03" required/>
|
||||
<CFormFeedback invalid>
|
||||
Please provide a valid city.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormLabel for="validationDefault04">City</CFormLabel>
|
||||
<CFormSelect id="validationDefault04">
|
||||
<option disabled>Choose...</option>
|
||||
<option>...</option>
|
||||
</CFormSelect>
|
||||
<CFormFeedback invalid>
|
||||
Please provide a valid city.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormLabel for="validationDefault05">City</CFormLabel>
|
||||
<CFormInput id="validationDefault05" required/>
|
||||
<CFormFeedback invalid>
|
||||
Please provide a valid zip.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CFormCheck type="checkbox" id="invalidCheck" label="Agree to terms and conditions" required/>
|
||||
<CFormFeedback invalid>
|
||||
You must agree before submitting.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CButton color="primary" type="submit">Submit form</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
</Example>
|
||||
|
||||
|
||||
|
||||
<h4 class="mt-4">Validation styles for components</h4>
|
||||
<Example href="forms/validation.html#supported-elements">
|
||||
<CForm :validated="true">
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="validationTextarea" class="form-label">Textarea</CFormLabel>
|
||||
<CFormTextarea id="validationTextarea" placeholder="Required example textarea" invalid required></CFormTextarea>
|
||||
<CFormFeedback invalid>
|
||||
Please enter a message in the textarea.
|
||||
</CFormFeedback>
|
||||
</div>
|
||||
<CFormCheck class="mb-3" id="validationFormCheck1" label="Check this checkbox" required/>
|
||||
<CFormFeedback invalid>Example invalid feedback text</CFormFeedback>
|
||||
<CFormCheck type="radio" name="radio-stacked" id="validationFormCheck2" label="Check this checkbox" required/>
|
||||
<CFormCheck class="mb-3" type="radio" name="radio-stacked" id="validationFormCheck3" label="Or toggle this other radio" required/>
|
||||
<CFormFeedback invalid>More example invalid feedback text</CFormFeedback>
|
||||
<div class="mb-3">
|
||||
<CFormSelect required aria-label="select example">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
<CFormFeedback invalid>Example invalid select feedback</CFormFeedback>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormInput type="file" id="validationTextarea" aria-label="file example" required />
|
||||
<CFormFeedback invalid>Example invalid form file feedback</CFormFeedback>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CButton type="submit" color="primary" disabled>Submit form</CButton>
|
||||
</div>
|
||||
</CForm>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Forms",
|
||||
data: () => {
|
||||
return {
|
||||
validatedCustom01: null,
|
||||
validatedDefault01: null,
|
||||
validatedTooltip01: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmitCustom01(event) {
|
||||
const form = event.currentTarget
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
this.validatedCustom01 = true
|
||||
},
|
||||
handleSubmitDefault01(event) {
|
||||
const form = event.currentTarget
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
this.validatedDefault01 = true
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue List Groups</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<h4>Basic example</h4>
|
||||
<Example href="components/list-group.html#basic-example">
|
||||
<CListGroup>
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Active items</h4>
|
||||
<Example href="components/list-group.html#active-items">
|
||||
<CListGroup>
|
||||
<CListGroupItem active>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Disabled items</h4>
|
||||
<Example href="components/list-group.html#disabled-items">
|
||||
<CListGroup>
|
||||
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Links</h4>
|
||||
<Example href="components/list-group.html#links-and-buttons">
|
||||
<CListGroup>
|
||||
<CListGroupItem component="a" href="#" active>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem component="a" href="#">Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem component="a" href="#">Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem component="a" href="#">Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem component="a" href="#" disabled>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Buttons</h4>
|
||||
<Example href="components/list-group.html#links-and-buttons">
|
||||
<CListGroup>
|
||||
<CListGroupItem component="button" active>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem component="button">Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem component="button">Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem component="button">Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem component="button" disabled>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Flush</h4>
|
||||
<Example href="components/list-group.html#flush">
|
||||
<CListGroup flush>
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Horizonstal</h4>
|
||||
<Example href="components/list-group.html#horizontal">
|
||||
<template v-for="(item) in ['', '-sm', '-md', '-lg', '-xl', '-xxl']">
|
||||
<CListGroup class="mb-2" :layout="'horizontal' + item">
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
</CListGroup>
|
||||
</template>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Contextual classes</h4>
|
||||
<Example href="components/list-group.html#contextual-classes">
|
||||
<CListGroup>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']" :color="item">A simple {{item}} list group item</CListGroupItem>
|
||||
</CListGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Change component to link</h4>
|
||||
<Example href="components/list-group.html#contextual-classes">
|
||||
<CListGroup>
|
||||
<CListGroupItem component="a" href="#">Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']" component="a" href="#" :color="item">A simple {{item}} list group item</CListGroupItem>
|
||||
</CListGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Vue list groups with badge</h4>
|
||||
<Example href="components/list-group.html#with-badges">
|
||||
<CListGroup>
|
||||
<CListGroupItem class="d-flex justify-content-between align-items-center">Cras justo odio<CBadge color="primary" shape="rounded-pill">14</CBadge></CListGroupItem>
|
||||
<CListGroupItem class="d-flex justify-content-between align-items-center">Dapibus ac facilisis in<CBadge color="primary" shape="rounded-pill">2</CBadge></CListGroupItem>
|
||||
<CListGroupItem class="d-flex justify-content-between align-items-center">Morbi leo risus<CBadge color="primary" shape="rounded-pill">1</CBadge></CListGroupItem>
|
||||
</CListGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Custom content</h4>
|
||||
<Example href="components/list-group.html#custom-content">
|
||||
<CListGroup>
|
||||
<CListGroupItem component="a" href="#" active>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small>3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||
<small>Donec id elit non mi porta.</small>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem component="a" href="#">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem component="a" href="#">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</CListGroupItem>
|
||||
</CListGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Checkboxes and radios</h4>
|
||||
<Example href="components/list-group.html#checkboxes-and-radios">
|
||||
<CListGroup>
|
||||
<CListGroupItem><CFormCheck label="Cras justo odio"/></CListGroupItem>
|
||||
<CListGroupItem><CFormCheck label="Dapibus ac facilisis in" defaultChecked/></CListGroupItem>
|
||||
<CListGroupItem><CFormCheck label="Morbi leo risus" defaultChecked/></CListGroupItem>
|
||||
<CListGroupItem><CFormCheck label="orta ac consectetur ac"/></CListGroupItem>
|
||||
<CListGroupItem><CFormCheck label="Vestibulum at eros"/></CListGroupItem>
|
||||
</CListGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ListGroups",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,440 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Navbars</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
|
||||
<h4 class="mt-4">Basic usage of navbar</h4>
|
||||
<Example 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>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vue nav brand</h4>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<Example href="components/navbar.html#brand">
|
||||
<CNavbar colorScheme="light" class="bg-light">
|
||||
<CContainer fluid>
|
||||
<CNavbarBrand href="#">Brand as link</CNavbarBrand>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<Example href="components/navbar.html#brand">
|
||||
<CNavbar colorScheme="light" class="bg-light">
|
||||
<CContainer fluid>
|
||||
<CNavbarBrand class="mb-0 h1">Brand</CNavbarBrand>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<Example 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>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<Example 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>
|
||||
</Example>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<h4 class="mt-4">Vue navbar with nav</h4>
|
||||
<Example 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>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vue navbar with form</h4>
|
||||
<Example 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>
|
||||
</Example>
|
||||
<h4 class="mt-4">Vue navbar with form on right side</h4>
|
||||
<Example 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>
|
||||
|
||||
</Example>
|
||||
<h4 class="mt-4">Vue navbar with input group</h4>
|
||||
<Example 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>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vue navbar with buttons</h4>
|
||||
<Example 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>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vue navbar with text</h4>
|
||||
<Example href="components/navbar.html#forms">
|
||||
<CNavbar colorScheme="light" class="bg-light">
|
||||
<CContainer fluid>
|
||||
<CNavbarText>Navbar text with an inline element</CNavbarText>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vue navbar color schemes</h4>
|
||||
<Example 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>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vue navbar placement</h4>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<Example href="components/navbar.html#placement">
|
||||
<CNavbar colorScheme="light" class="bg-light">
|
||||
<CContainer fluid>
|
||||
<CNavbarBrand href="#">Default</CNavbarBrand>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<Example href="components/navbar.html#placement">
|
||||
<CNavbar colorScheme="light" class="bg-light" placement="fixed-top">
|
||||
<CContainer fluid>
|
||||
<CNavbarBrand href="#">Fixed top</CNavbarBrand>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<Example href="components/navbar.html#placement">
|
||||
<CNavbar colorScheme="light" class="bg-light" placement="fixed-bottom">
|
||||
<CContainer fluid>
|
||||
<CNavbarBrand href="#">Fixed bottom</CNavbarBrand>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<Example href="components/navbar.html#placement">
|
||||
<CNavbar colorScheme="light" class="bg-light" placement="sticky-top">
|
||||
<CContainer fluid>
|
||||
<CNavbarBrand href="#">Sticky top</CNavbarBrand>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<h4 class="mt-4">Vue navbar responsive</h4>
|
||||
<p>With no CNavbarBrand shown at the smallest breakpoint:</p>
|
||||
<Example 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>
|
||||
</Example>
|
||||
<p>With a brand name shown on the left and toggler on the right:</p>
|
||||
<Example 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>
|
||||
</Example>
|
||||
|
||||
<p>With a toggler on the left and brand name on the right:</p>
|
||||
<Example 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>
|
||||
</Example>
|
||||
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Navbars",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,250 @@
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</Example>
|
||||
|
||||
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Navs",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Paginations</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h4 class="mt-4">Basic example</h4>
|
||||
<Example href="components/pagination.html#overview">
|
||||
<CPagination aria-label="Page navigation example">
|
||||
<CPaginationItem href="#">Previous</CPaginationItem>
|
||||
<CPaginationItem href="#">1</CPaginationItem>
|
||||
<CPaginationItem href="#">2</CPaginationItem>
|
||||
<CPaginationItem href="#">3</CPaginationItem>
|
||||
<CPaginationItem href="#">Next</CPaginationItem>
|
||||
</CPagination>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vue pagination with icons</h4>
|
||||
<Example href="components/pagination.html#working-with-icons">
|
||||
<CPagination aria-label="Page navigation example">
|
||||
<CPaginationItem aria-label="Previous" href="#"><span aria-hidden="true">«</span></CPaginationItem>
|
||||
<CPaginationItem href="#">1</CPaginationItem>
|
||||
<CPaginationItem href="#">2</CPaginationItem>
|
||||
<CPaginationItem href="#">3</CPaginationItem>
|
||||
<CPaginationItem aria-label="Next" href="#"><span aria-hidden="true">»</span></CPaginationItem>
|
||||
</CPagination>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Pagination disabled and active states</h4>
|
||||
<Example href="components/pagination.html#disabled-and-active-states">
|
||||
<CPagination aria-label="Page navigation example">
|
||||
<CPaginationItem aria-label="Previous" href="#" disabled><span aria-hidden="true">«</span></CPaginationItem>
|
||||
<CPaginationItem href="#" active>1</CPaginationItem>
|
||||
<CPaginationItem href="#">2</CPaginationItem>
|
||||
<CPaginationItem href="#">3</CPaginationItem>
|
||||
<CPaginationItem aria-label="Next" href="#"><span aria-hidden="true">»</span></CPaginationItem>
|
||||
</CPagination>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Pagination sizing</h4>
|
||||
<Example href="components/pagination.html#sizing">
|
||||
<CPagination size="lg" aria-label="Page navigation example">
|
||||
<CPaginationItem href="#">Previous</CPaginationItem>
|
||||
<CPaginationItem href="#">1</CPaginationItem>
|
||||
<CPaginationItem href="#">2</CPaginationItem>
|
||||
<CPaginationItem href="#">3</CPaginationItem>
|
||||
<CPaginationItem href="#">Next</CPaginationItem>
|
||||
</CPagination>
|
||||
</Example>
|
||||
<Example href="components/pagination.html#sizing">
|
||||
<CPagination size="sm" aria-label="Page navigation example">
|
||||
<CPaginationItem href="#">Previous</CPaginationItem>
|
||||
<CPaginationItem href="#">1</CPaginationItem>
|
||||
<CPaginationItem href="#">2</CPaginationItem>
|
||||
<CPaginationItem href="#">3</CPaginationItem>
|
||||
<CPaginationItem href="#">Next</CPaginationItem>
|
||||
</CPagination>
|
||||
</Example>
|
||||
|
||||
|
||||
<h4 class="mt-4">Vue pagination alignment</h4>
|
||||
<p>Pagination alignment enter</p>
|
||||
<Example href="components/pagination.html#alignment">
|
||||
<CPagination class="justify-content-center" aria-label="Page navigation example">
|
||||
<CPaginationItem disabled>Previous</CPaginationItem>
|
||||
<CPaginationItem href="#">1</CPaginationItem>
|
||||
<CPaginationItem href="#">2</CPaginationItem>
|
||||
<CPaginationItem href="#">3</CPaginationItem>
|
||||
<CPaginationItem href="#">Next</CPaginationItem>
|
||||
</CPagination>
|
||||
</Example>
|
||||
<p>Pagination alignment end</p>
|
||||
<Example href="components/pagination.html#alignment">
|
||||
<CPagination class="justify-content-center" aria-label="Page navigation example">
|
||||
<CPaginationItem disabled>Previous</CPaginationItem>
|
||||
<CPaginationItem href="#">1</CPaginationItem>
|
||||
<CPaginationItem href="#">2</CPaginationItem>
|
||||
<CPaginationItem href="#">3</CPaginationItem>
|
||||
<CPaginationItem href="#">Next</CPaginationItem>
|
||||
</CPagination>
|
||||
</Example>
|
||||
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Paginations",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Popovers</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h4 class="mt-4">Vue popover example</h4>
|
||||
<Example href="directives/popover.html#example">
|
||||
<CButton
|
||||
color="danger"
|
||||
size="lg"
|
||||
v-c-popover="{header: 'Popover title', content: 'And here\’s some amazing content. It’s very engaging. Right?', placement: 'right'}"
|
||||
>
|
||||
Click to toggle popover
|
||||
</CButton>
|
||||
</Example>
|
||||
<h4 class="mt-4">Vue popovers four directions</h4>
|
||||
<Example href="directives/popover.html#four-directions">
|
||||
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'top'}">Popover on top</CButton>
|
||||
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'right'}">Popover on right</CButton>
|
||||
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'bottom'}">Popover on bottom</CButton>
|
||||
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'left'}">Popover on left</CButton>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Popovers",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Progress Bar</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h4 class="mt-4">Progress bar example</h4>
|
||||
<Example href="components/progress.html#basic-usage">
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar :value="0"/>
|
||||
</CProgress>
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar :value="25"/>
|
||||
</CProgress>
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar :value="50"/>
|
||||
</CProgress>
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar :value="75"/>
|
||||
</CProgress>
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar :value="100"/>
|
||||
</CProgress>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Progress bar with labels</h4>
|
||||
<Example href="components/progress.html#labels">
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar :value="25">25%</CProgressBar>
|
||||
</CProgress>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Progress bar with set height</h4>
|
||||
<Example href="components/progress.html#height">
|
||||
<CProgress height="1" class="mb-3">
|
||||
<CProgressBar :value="25"></CProgressBar>
|
||||
</CProgress>
|
||||
<CProgress height="20" class="mb-3">
|
||||
<CProgressBar :value="25"></CProgressBar>
|
||||
</CProgress>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Progress bar color</h4>
|
||||
<Example href="components/progress.html#backgrounds">
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar color="success" :value="25"/>
|
||||
</CProgress>
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar color="info" :value="50"/>
|
||||
</CProgress>
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar color="warning" :value="75"/>
|
||||
</CProgress>
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar color="danger" :value="100"/>
|
||||
</CProgress>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Progress bar multiple bars</h4>
|
||||
<Example href="components/progress.html#multiple-bars">
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar :value="15"/>
|
||||
<CProgressBar color="success" :value="30"/>
|
||||
<CProgressBar color="info" :value="20"/>
|
||||
</CProgress>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Progress bar striped</h4>
|
||||
<Example href="components/progress.html#striped">
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar color="success" variant="striped" :value="25"/>
|
||||
</CProgress>
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar color="info" variant="striped" :value="50"/>
|
||||
</CProgress>
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar color="warning" variant="striped" :value="75"/>
|
||||
</CProgress>
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar color="danger" variant="striped" :value="100"/>
|
||||
</CProgress>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Progress bar animated stripes</h4>
|
||||
<Example href="components/progress.html#animated-stripes">
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar color="success" variant="striped" animated :value="25"/>
|
||||
</CProgress>
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar color="info" variant="striped" animated :value="50"/>
|
||||
</CProgress>
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar color="warning" variant="striped" animated :value="75"/>
|
||||
</CProgress>
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar color="danger" variant="striped" animated :value="100"/>
|
||||
</CProgress>
|
||||
</Example>
|
||||
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Breadcrumbs",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Switches</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="forms/checks-radios.html#switches">
|
||||
<CRow>
|
||||
<CCol md="4">
|
||||
<CFormSwitch label="Default switch checkbox input" />
|
||||
<CFormSwitch label="Checked switch checkbox input" defaultChecked />
|
||||
<CFormSwitch label="Disabled switch checkbox input" disabled />
|
||||
<CFormSwitch label="Disabled checked switch checkbox input" defaultChecked disabled />
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormSwitch label="Large switch" size="lg"/>
|
||||
<CFormSwitch label="Large switch" defaultChecked size="lg"/>
|
||||
<CFormSwitch label="Large switch" disabled size="lg"/>
|
||||
<CFormSwitch label="Large switch" defaultChecked disabled size="lg"/>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormSwitch label="Extra-large switch" size="xl"/>
|
||||
<CFormSwitch label="Extra-large switch" defaultChecked size="xl"/>
|
||||
<CFormSwitch label="Extra-large switch" disabled size="xl"/>
|
||||
<CFormSwitch label="Extra-large switch" defaultChecked disabled size="xl"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Switches",
|
||||
};
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Tabs</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="breadcrumbs">
|
||||
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Tabs",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Tooltips</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h4 class="mt-4">Tooltips example</h4>
|
||||
<Example href="directives/tooltip.html">
|
||||
<p class="text-medium-emphasis">
|
||||
Tight pants next level keffiyeh
|
||||
<CLink v-c-tooltip="'Tooltip text'"> you probably </CLink>
|
||||
haven't heard of them.
|
||||
Photo booth beard raw denim letterpress vegan messenger
|
||||
bag stumptown. Farm-to-table seitan, mcsweeney's fixie
|
||||
sustainable quinoa 8-bit american apparel
|
||||
<CLink v-c-tooltip="'Tooltip text'"> have a </CLink>
|
||||
terry richardson vinyl chambray. Beard stumptown,
|
||||
cardigans banh mi lomo thundercats. Tofu biodiesel
|
||||
williamsburg marfa, four loko mcsweeney''s cleanse
|
||||
vegan chambray. A really ironic artisan
|
||||
<CLink v-c-tooltip="'Tooltip text'"> whatever keytar </CLink>
|
||||
scenester farm-to-table banksy Austin
|
||||
<CLink v-c-tooltip="'Tooltip text'"> twitter handle </CLink>
|
||||
freegan cred raw denim single-origin coffee viral.
|
||||
</p>
|
||||
</Example>
|
||||
<h4 class="mt-4">Tooltips placements</h4>
|
||||
<Example href="directives/tooltip.html">
|
||||
<CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'top'}">Tooltip on top</CButton>
|
||||
<CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'right'}">Tooltip on right</CButton>
|
||||
<CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'bottom'}">Tooltip on bottom</CButton>
|
||||
<CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'left'}">Tooltip on left</CButton>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Tooltips",
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user