ci(component): 初步集成 滑块 和 轮播 组件
This commit is contained in:
19
docs/docs/zh-CN/components/carousel.md
Normal file
19
docs/docs/zh-CN/components/carousel.md
Normal file
@@ -0,0 +1,19 @@
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-carousel></lay-carousel>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
@@ -3,25 +3,25 @@
|
||||
<template>
|
||||
<ul class="layui-row layui-col-space15">
|
||||
<li class="layui-col-sm3">
|
||||
<div style="background-color: #009688;padding:10px;color:whitesmoke;padding:30px">
|
||||
<div style="background-color: #009688;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||
<p>#009688</p><p>
|
||||
</p><p tips="">主色调之一</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-col-sm3">
|
||||
<div style="background-color: #5FB878;padding:10px;color:whitesmoke;padding:30px">
|
||||
<div style="background-color: #5FB878;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||
<p>#5FB878</p><p>
|
||||
</p><p tips="">一般用于选中状态</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-col-sm3">
|
||||
<div style="background-color: #393D49;padding:10px;color:whitesmoke;padding:30px">
|
||||
<div style="background-color: #393D49;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||
<p>#393D49</p><p>
|
||||
</p><p tips="">通常用于导航</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-col-sm3">
|
||||
<div style="background-color: #1E9FFF;padding:10px;color:whitesmoke;padding:30px">
|
||||
<div style="background-color: #1E9FFF;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||
<p>#1E9FFF</p><p>
|
||||
</p><p tips="">经典蓝</p>
|
||||
</div>
|
||||
@@ -48,25 +48,25 @@ export default {
|
||||
<template>
|
||||
<ul class="layui-row layui-col-space15">
|
||||
<li class="layui-col-sm3">
|
||||
<div style="background-color: #FFB800;padding:10px;color:whitesmoke;padding:30px">
|
||||
<div style="background-color: #FFB800;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||
<p>#FFB800</p><p>
|
||||
</p><p tips="">暖色系</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-col-sm3">
|
||||
<div style="background-color: #FF5722;padding:10px;color:whitesmoke;padding:30px">
|
||||
<div style="background-color: #FF5722;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||
<p>#FF5722</p><p>
|
||||
</p><p tips="">比较引人注意的颜色</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-col-sm3">
|
||||
<div style="background-color: #01AAED;padding:10px;color:whitesmoke;padding:30px">
|
||||
<div style="background-color: #01AAED;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||
<p>#01AAED</p><p>
|
||||
</p><p tips="">文本链接着色</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-col-sm3">
|
||||
<div style="background-color: #2F4056;padding:10px;color:whitesmoke;padding:30px">
|
||||
<div style="background-color: #2F4056;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||
<p>#2F4056</p><p>
|
||||
</p><p tips="">侧边色</p>
|
||||
</div>
|
||||
|
||||
@@ -309,6 +309,11 @@ export default {
|
||||
title: '滑块',
|
||||
subTitle: 'slider',
|
||||
path: '/zh-CN/components/slider',
|
||||
},{
|
||||
id: 38,
|
||||
title: '轮播',
|
||||
subTitle: 'carousel',
|
||||
path: '/zh-CN/components/carousel'
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
@@ -198,7 +198,11 @@ const zhCN = [
|
||||
path: '/zh-CN/components/slider',
|
||||
component: () => import('../../docs/zh-CN/components/slider.md'),
|
||||
meta: { title: '滑块' },
|
||||
},
|
||||
},{
|
||||
path: '/zh-CN/components/carousel',
|
||||
component: () => import('../../docs/zh-CN/components/carousel.md'),
|
||||
meta: { title: '轮播' },
|
||||
}
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user