Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit2f97ebc

Browse files
adjust sidemenu css
1 parent06a032e commit2f97ebc

File tree

3 files changed

+56
-39
lines changed

3 files changed

+56
-39
lines changed

‎src/components/Content.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22

33
<divclass="markdown-body">
4-
5-
<componentv-bind:is="currentContentPage" />
6-
4+
<keep-alive>
5+
<componentv-bind:is="currentContentPage" />
6+
</keep-alive>
77
</div>
88
</template>
99

‎src/components/SlideMenu.vue

Lines changed: 47 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,58 @@
11
<template>
2+
<divclass="slideMenu">
3+
<pclass="slideMenu__title">CarvueJS</p>
4+
<pclass="slideMenu__subTitle">Carbon Design in VueJS</p>
5+
<ca-searchclass="slideMenu__search"></ca-search>
26
<ca-accordion>
3-
<ca-accordion-itemtitle="Getting Started">
4-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
7+
<divclass="slideMenu__item">GET STARTED</div>
8+
<ca-accordion-itemtitle="Components"active>
9+
<ulclass="slideMenu__item__list">
10+
<li><router-linkto="test">Test</router-link></li>
11+
<li><router-linkto="testA">TestA</router-link></li>
12+
</ul>
513
</ca-accordion-item>
6-
<ca-accordion-itemtitle="Components">
7-
<ca-list>
8-
<ca-list-item>
9-
Ordered List level 1
10-
</ca-list-item>
11-
<ca-list-item>
12-
Ordered List level 2
13-
</ca-list-item>
14-
<ca-list-item>
15-
Ordered List level 3
16-
</ca-list-item>
17-
</ca-list>
18-
</ca-accordion-item>
19-
<ca-accordion-itemtitle="Dummy">
20-
</ca-accordion-item>
21-
<ca-accordion-itemtitle="Dummy">
22-
</ca-accordion-item>
23-
<ca-accordion-itemtitle="Dummy">
24-
</ca-accordion-item>
25-
<ca-accordion-itemtitle="Dummy">
26-
</ca-accordion-item>
27-
<ca-accordion-itemtitle="Dummy"></ca-accordion-item>
28-
<ca-accordion-itemtitle="Dummy"></ca-accordion-item>
29-
<ca-accordion-itemtitle="Dummy"></ca-accordion-item>
30-
<ca-accordion-itemtitle="Dummy"></ca-accordion-item>
31-
<ca-accordion-itemtitle="Dummy"></ca-accordion-item>
32-
<ca-accordion-itemtitle="Dummy"></ca-accordion-item>
33-
<ca-accordion-itemtitle="Dummy"></ca-accordion-item>
34-
<ca-accordion-itemtitle="Dummy"></ca-accordion-item>
35-
<ca-accordion-itemtitle="Dummy"></ca-accordion-item>
36-
<ca-accordion-itemtitle="Dummy"></ca-accordion-item>
14+
<divclass="slideMenu__item">ABOUT US</div>
3715
</ca-accordion>
16+
</div>
3817
</template>
3918

4019
<script>
4120
exportdefault {
4221
name:'slideMenu',
4322
}
4423
</script>
24+
25+
<style scoped>
26+
.slideMenu__title {
27+
font-size:20px;
28+
}
29+
30+
.slideMenu__subTitle {
31+
font-size:12px;
32+
}
33+
34+
.slideMenu__search {
35+
margin:20px0;
36+
}
37+
38+
.slideMenu__item {
39+
margin:10px7px;
40+
}
41+
42+
.slideMenu {
43+
padding:30px15px;
44+
}
45+
46+
.slideMenu__item__listli {
47+
margin:0012px10px;
48+
}
49+
50+
/* overwrite the default*/
51+
.bx--accordion__item {
52+
border-top:none;
53+
}
54+
55+
.bx--accordion__item:last-child {
56+
border-bottom:none;
57+
}
58+
</style>

‎src/views/Home.vue

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
22
<div>
33
<ca-layoutwrap>
4-
<ca-flexcol="xs2 sm2 md2 lg2 xl2"class="slideMenu">
4+
<ca-flexcol="xs3 sm3 md3 lg3 xl3"class="slideMenu">
55
<SliderMenu />
66
</ca-flex>
7-
<ca-flexcol="xs12 sm10 md10 lg10 xl10"class="content">
7+
<ca-flexcol="xs9 sm9 md9 lg9 xl9"class="content">
88
<router-view/>
99
</ca-flex>
1010
</ca-layout>
@@ -28,14 +28,17 @@ export default {
2828
}
2929
</script>
3030

31-
<stylescroped>
31+
<stylescoped>
3232
.slideMenu {
3333
max-height:100vh;
3434
overflow:scroll;
35+
border-right:2pxsolid#f5f7fa;
36+
background:#fff
3537
}
3638
3739
.content {
3840
max-height:100vh;
3941
overflow:scroll;
42+
background:#fff
4043
}
4144
</style>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp