mirror of
https://github.com/creativetimofficial/muse-vue-ant-design-dashboard.git
synced 2025-08-16 11:31:10 +08:00
149 lines
3.0 KiB
Vue
149 lines
3.0 KiB
Vue
<template>
|
|
<div>
|
|
<div class="page-row">
|
|
<div class="page-content">
|
|
<section class="mb-24">
|
|
<h1>Grid</h1>
|
|
<p class="text-dark">
|
|
24 Grids System
|
|
</p>
|
|
</section>
|
|
<a-divider />
|
|
<h2>Examples</h2>
|
|
<section class="mb-24" id="Basic-Grid">
|
|
<a-divider orientation="left">Basic Grid</a-divider>
|
|
<p>
|
|
From the stack to the horizontal arrangement.
|
|
You can create a basic grid system by using a single set of Row and Col grid assembly, all of the columns (Col) must be placed in Row.
|
|
</p>
|
|
<div class="showcase">
|
|
<div class="grid-demo">
|
|
<a-row>
|
|
<a-col :span="12">
|
|
col-12
|
|
</a-col>
|
|
<a-col :span="12">
|
|
col-12
|
|
</a-col>
|
|
</a-row>
|
|
<a-row>
|
|
<a-col :span="8">
|
|
col-8
|
|
</a-col>
|
|
<a-col :span="8">
|
|
col-8
|
|
</a-col>
|
|
<a-col :span="8">
|
|
col-8
|
|
</a-col>
|
|
</a-row>
|
|
<a-row>
|
|
<a-col :span="6">
|
|
col-6
|
|
</a-col>
|
|
<a-col :span="6">
|
|
col-6
|
|
</a-col>
|
|
<a-col :span="6">
|
|
col-6
|
|
</a-col>
|
|
<a-col :span="6">
|
|
col-6
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
</div>
|
|
<muse-snippet :code="codeSample"></muse-snippet>
|
|
</section>
|
|
|
|
<p class="text-right font-semibold mb-24">
|
|
Looking for more Ant Design Vue Grid? Please check the
|
|
<a target="_blank" href="https://antdv.com/components/grid/">official docs</a>.
|
|
</p>
|
|
</div>
|
|
<muse-anchor :anchors="anchors"></muse-anchor>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
head () {
|
|
return {
|
|
title: 'Grid | Muse Vue Ant Design Dashboard @ Creative Tim',
|
|
meta: [
|
|
{ hid: 'description', name: 'description', content: '24 Grids System' }
|
|
]
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
anchors: {
|
|
"Basic-Grid": "Basic Grid",
|
|
},
|
|
codeSample: `
|
|
<template>
|
|
<div>
|
|
<a-row>
|
|
<a-col :span="12">
|
|
col-12
|
|
</a-col>
|
|
<a-col :span="12">
|
|
col-12
|
|
</a-col>
|
|
</a-row>
|
|
<a-row>
|
|
<a-col :span="8">
|
|
col-8
|
|
</a-col>
|
|
<a-col :span="8">
|
|
col-8
|
|
</a-col>
|
|
<a-col :span="8">
|
|
col-8
|
|
</a-col>
|
|
</a-row>
|
|
<a-row>
|
|
<a-col :span="6">
|
|
col-6
|
|
</a-col>
|
|
<a-col :span="6">
|
|
col-6
|
|
</a-col>
|
|
<a-col :span="6">
|
|
col-6
|
|
</a-col>
|
|
<a-col :span="6">
|
|
col-6
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
</template>
|
|
`,
|
|
}
|
|
},
|
|
methods: {
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
.grid-demo .ant-row>div {
|
|
padding: 15px 0;
|
|
text-align: center;
|
|
border-radius: 0;
|
|
min-height: 30px;
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
color: #fff;
|
|
}
|
|
.grid-demo .ant-row>div:nth-child(odd) {
|
|
background: rgba(0,160,233,.7);
|
|
}
|
|
.grid-demo .ant-row>div:nth-child(even) {
|
|
background: #00a0e9
|
|
}
|
|
</style> |