feat: copy features from pro template
This commit is contained in:
woothu
@@ -37,6 +37,16 @@
|
||||
</CCollapse>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader @click.native="cardCollapse = !cardCollapse">
|
||||
<strong>Collapsible card</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCollapse :show="cardCollapse" class="mt-2">
|
||||
<CCardText>Collapse contents Here</CCardText>
|
||||
</CCollapse>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
@@ -47,6 +57,7 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
collapse: false,
|
||||
cardCollapse: true,
|
||||
innerCollapse: false,
|
||||
text: `
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
||||
|
||||
@@ -3,7 +3,8 @@
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Responsive bootstrap Pagination</strong>
|
||||
<strong> Pagination </strong>
|
||||
<small>size</small>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/pagination"
|
||||
@@ -31,7 +32,7 @@
|
||||
:pages="10"/>
|
||||
<br>
|
||||
|
||||
<div>
|
||||
<div class="d-md-down-none">
|
||||
<h6>Large</h6>
|
||||
<CPagination
|
||||
size="lg"
|
||||
@@ -86,7 +87,7 @@ export default {
|
||||
name: 'Paginations',
|
||||
data () {
|
||||
return {
|
||||
currentPage: 3,
|
||||
currentPage: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
<script>
|
||||
import { CChartLine } from '@coreui/vue-chartjs'
|
||||
import { getColor, hexToRgba } from '@coreui/utils/src'
|
||||
import { getStyle, hexToRgba } from '@coreui/utils/src'
|
||||
|
||||
function random (min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min)
|
||||
@@ -21,9 +21,9 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
const brandSuccess = getColor('success') || '#4dbd74'
|
||||
const brandInfo = getColor('info') || '#20a8d8'
|
||||
const brandDanger = getColor('danger') || '#f86c6b'
|
||||
const brandSuccess = getStyle('success2') || '#4dbd74'
|
||||
const brandInfo = getStyle('info') || '#20a8d8'
|
||||
const brandDanger = getStyle('danger') || '#f86c6b'
|
||||
|
||||
let elements = 27
|
||||
const data1 = []
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<CContainer class="d-flex align-items-center min-vh-100">
|
||||
<CRow class="justify-content-center">
|
||||
<CCol md="8">
|
||||
<CContainer class="d-flex content-center min-vh-100">
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCardGroup>
|
||||
<CCard class="p-4">
|
||||
<CCardBody>
|
||||
@@ -22,11 +22,12 @@
|
||||
<template #prepend-content><CIcon name="cil-lock-locked"/></template>
|
||||
</CInput>
|
||||
<CRow>
|
||||
<CCol col="6">
|
||||
<CCol col="6" class="text-left">
|
||||
<CButton color="primary" class="px-4">Login</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" class="text-right">
|
||||
<CButton color="link" class="px-0">Forgot password?</CButton>
|
||||
<CButton color="link" class="d-md-none">Register now!</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CForm>
|
||||
@@ -35,8 +36,7 @@
|
||||
<CCard
|
||||
color="primary"
|
||||
text-color="white"
|
||||
class="text-center py-5 d-md-down-none"
|
||||
style="width:44%"
|
||||
class="text-center py-5 d-sm-down-none"
|
||||
body-wrapper
|
||||
>
|
||||
<h2>Sign up</h2>
|
||||
|
||||
@@ -1,59 +1,61 @@
|
||||
<template>
|
||||
<CContainer class="min-vh-100 d-flex align-items-center">
|
||||
<CRow class="w-100 justify-content-center">
|
||||
<CCol md="6" sm="8">
|
||||
<CCard class="mx-4 mb-0">
|
||||
<CCardBody class="p-4">
|
||||
<CForm>
|
||||
<h1>Register</h1>
|
||||
<p class="text-muted">Create your account</p>
|
||||
<CInput
|
||||
placeholder="Username"
|
||||
autocomplete="username"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-user"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Email"
|
||||
autocomplete="email"
|
||||
prepend="@"
|
||||
/>
|
||||
<CInput
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-lock-locked"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Repeat password"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
class="mb-4"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-lock-locked"/></template>
|
||||
</CInput>
|
||||
<CButton color="success" block>Create Account</CButton>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
<CCardFooter class="p-4">
|
||||
<CRow>
|
||||
<CCol col="6">
|
||||
<CButton block color="facebook">
|
||||
Facebook
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6">
|
||||
<CButton block color="twitter">
|
||||
Twitter
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
<div class="d-flex align-items-center min-vh-100">
|
||||
<CContainer fluid>
|
||||
<CRow class="justify-content-center">
|
||||
<CCol md="6">
|
||||
<CCard class="mx-4 mb-0">
|
||||
<CCardBody class="p-4">
|
||||
<CForm>
|
||||
<h1>Register</h1>
|
||||
<p class="text-muted">Create your account</p>
|
||||
<CInput
|
||||
placeholder="Username"
|
||||
autocomplete="username"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-user"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Email"
|
||||
autocomplete="email"
|
||||
prepend="@"
|
||||
/>
|
||||
<CInput
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-lock-locked"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Repeat password"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
class="mb-4"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-lock-locked"/></template>
|
||||
</CInput>
|
||||
<CButton color="success" block>Create Account</CButton>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
<CCardFooter class="p-4">
|
||||
<CRow>
|
||||
<CCol col="6">
|
||||
<CButton block color="facebook">
|
||||
Facebook
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6">
|
||||
<CButton block color="twitter">
|
||||
Twitter
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -29,11 +29,7 @@ export default {
|
||||
computed: {
|
||||
fields () {
|
||||
return [
|
||||
{
|
||||
key: 'key',
|
||||
label: this.userData.filter(param => param.key === 'username')[0].value,
|
||||
_style: 'width:150px'
|
||||
},
|
||||
{ key: 'key', label: this.username, _style: 'width:150px'},
|
||||
{ key: 'value', label: '', _style: 'width:150px;' }
|
||||
]
|
||||
},
|
||||
@@ -45,6 +41,9 @@ export default {
|
||||
},
|
||||
visibleData () {
|
||||
return this.userData.filter(param => param.key !== 'username')
|
||||
},
|
||||
username () {
|
||||
return this.userData.filter(param => param.key === 'username')[0].value
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
Reference in New Issue
Block a user