68 lines
1.6 KiB
Vue
68 lines
1.6 KiB
Vue
<template>
|
|
<div class="md-example button">
|
|
<section class="md-example-section" v-for="(demo, index) in demos" :key="index">
|
|
<div class="md-example-title" v-html="demo.title || '基础'"></div>
|
|
<div class="md-example-content">
|
|
<component :is="demo"></component>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import createDemoModule from '../../../examples/create-demo-module'
|
|
import Demo0 from './cases/demo0'
|
|
import Demo1 from './cases/demo1'
|
|
import Demo2 from './cases/demo2'
|
|
import Demo3 from './cases/demo3'
|
|
import Demo4 from './cases/demo4'
|
|
|
|
export default {
|
|
...createDemoModule('button', [Demo0, Demo1, Demo2, Demo3, Demo4]),
|
|
}
|
|
|
|
// export default {
|
|
// name: `button-demo`,
|
|
// data() {
|
|
// return {
|
|
// demos: [Demo0, Demo1, Demo2, Demo3],
|
|
// }
|
|
// },
|
|
// }
|
|
|
|
</script>
|
|
|
|
<style lang="stylus">
|
|
.md-example.button
|
|
.md-example-section
|
|
float left
|
|
width 100%
|
|
margin-bottom 10px
|
|
h1
|
|
margin-bottom 10px
|
|
color #111A34
|
|
font-size font-heading-normal
|
|
font-weight normal
|
|
.md-button
|
|
// float left
|
|
margin-bottom 10px
|
|
&.inline, &.link
|
|
margin-right 10px
|
|
.md-example-box
|
|
position relative
|
|
float left
|
|
width 100%
|
|
hairline(top)
|
|
.md-example-box-content
|
|
float left
|
|
width 100%
|
|
padding 60px h-gap-lg
|
|
color color-text-base
|
|
font-size font-minor-large
|
|
text-align left
|
|
background color-bg-base
|
|
box-sizing border-box
|
|
line-height 1.5
|
|
text-indent 2em
|
|
.md-button
|
|
margin 0
|
|
</style>
|