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

Commite6b0322

Browse files
committed
✨ New component(ModalBox) and Refactor static
static 디렉토리를 삭제하고 examples를 추가- component를 재사용할 수 있도록 수정- App에서 hash가 #/examples로 시작할 경우 menu를 안보이도록 함
1 parentb54db85 commite6b0322

File tree

16 files changed

+604
-120
lines changed

16 files changed

+604
-120
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"test:watch":"jest --watch",
1212
"coverage":"jest --coverage",
1313
"lint":"eslint --ext .js,.vue src",
14-
"prepublish":"npm run build && cp -Rstatic/*dist",
14+
"prepublish":"npm run build && cp -R dist",
1515
"publish":"git checkout gh-pages && rm -rf js pages && mv dist/* . && rm -r dist && git add . && git commit -m Publish && git push",
1616
"postpublish":"git checkout master"
1717
},

‎src/App.vue‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<template>
2-
<divid="app">
3-
2+
<divv-if="showExamples">
3+
<router-view></router-view>
4+
</div>
5+
<divid="app"v-else>
46
<app-menu></app-menu>
57

68
<divclass="container">
@@ -17,6 +19,11 @@ import AppMenu from '@/layout/AppMenu.vue'
1719
1820
exportdefault {
1921
name:'app',
22+
computed: {
23+
showExamples() {
24+
returnlocation.hash.startsWith('#/examples')
25+
}
26+
},
2027
components: {
2128
AppMenu
2229
}

‎src/components/more/ModalBox.vue‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<template lang="html">
2+
<divclass="modal-box":class="{'is-active': isActive}"@click.self="closeDim()">
3+
<divclass="modal-content">
4+
<slot></slot>
5+
</div>
6+
</div>
7+
</template>
8+
9+
<script>
10+
exportdefault {
11+
name:'modal-box',
12+
props: {
13+
isClosable:Boolean,
14+
isActive:Boolean
15+
},
16+
methods: {
17+
close() {
18+
this.$emit('close')
19+
this.$emit('update:isActive',false)
20+
},
21+
closeDim() {
22+
if (this.isClosable)this.close()
23+
}
24+
}
25+
}
26+
</script>
27+
28+
<style lang="scss">
29+
.modal-box {
30+
display:none;/* Hidden by default*/
31+
position:fixed;/* Stay in place*/
32+
z-index:90;/* Sit on top*/
33+
left:0;
34+
top:0;
35+
width:100%;/* Full width*/
36+
height:100%;/* Full height*/
37+
overflow:auto;/* Enable scroll if needed*/
38+
background-color:rgb(0,0,0);/* Fallback color*/
39+
background-color:rgba(0,0,0,0.4);/* Black w/ opacity*/
40+
animation-name: fadeIn;
41+
animation-duration:0.4s;
42+
43+
44+
&.is-active {
45+
display:block;
46+
}
47+
48+
.modal-content {
49+
position:relative;
50+
background-color:#fefefe;
51+
margin:auto;
52+
padding:0;
53+
border:1pxsolid#888;
54+
width:80%;
55+
box-shadow:04px8px0rgba(0,0,0,0.2),06px20px0rgba(0,0,0,0.19);
56+
57+
/* Modal Header*/
58+
.modal-header {
59+
padding:2px16px;
60+
background-color:#5cb85c;
61+
color:white;
62+
}
63+
64+
/* Modal Body*/
65+
.modal-body {padding:2px16px;}
66+
67+
/* Modal Footer*/
68+
.modal-footer {
69+
padding:2px16px;
70+
background-color:#5cb85c;
71+
color:white;
72+
}
73+
74+
.close {
75+
color:white;
76+
float:right;
77+
font-size:28px;
78+
font-weight:bold;
79+
80+
&:hover,&:focus {
81+
color:black;
82+
text-decoration:none;
83+
cursor:pointer;
84+
}
85+
}
86+
}
87+
88+
/* Add Animation*/
89+
@keyframesfadeIn {
90+
from {opacity:0}
91+
to {opacity:1}
92+
}
93+
}
94+
</style>

‎src/examples/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
exportconstmenu=require('./menu')
2+
exportconstmore=require('./more')

‎src/examples/menu/StickyNavbar.vue‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<template lang="html">
2+
<div>
3+
<divclass="header">
4+
<h2>Scroll Down</h2>
5+
<p>Scroll down to see the sticky effect.</p>
6+
</div>
7+
8+
<divref="navbar"class="navbar">
9+
<ahref="#"diff-d08e99c4f258be6ba8f67ad09b4db540fd674cbeb022d416c9d442d785a4167c-empty-10-0" data-selected="false" role="gridcell" tabindex="-1" valign="top">
10+
</div>
11+
12+
<divclass="content">
13+
<h3>Sticky Navigation Example</h3>
14+
<p>The navbar will stick to the top when you reach its scroll position.</p>
15+
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
16+
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
17+
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
18+
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
19+
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
20+
</div>
21+
</div>
22+
</template>
23+
24+
<script>
25+
exportdefault {
26+
name:'sticky-navbar-example',
27+
data:function () {
28+
return {
29+
currentLink:'',
30+
links: ['Home','News','Contact']
31+
}
32+
},
33+
beforeMount:function () {
34+
this.currentLink=this.links[0]
35+
window.addEventListener('scroll',this.onScroll)
36+
},
37+
beforeDestory:function () {
38+
window.removeEventListener('scroll',this.onScroll)
39+
},
40+
computed: {
41+
navbar:function () {
42+
returnthis.$refs.navbar
43+
},
44+
navbarOffsetTop:function () {
45+
returnthis.navbar.offsetTop
46+
}
47+
},
48+
methods: {
49+
onScroll:function () {
50+
if (window.pageYOffset>=this.navbarOffsetTop) {
51+
this.navbar.classList.add('sticky')
52+
}else {
53+
this.navbar.classList.remove('sticky')
54+
}
55+
}
56+
}
57+
}
58+
</script>
59+
60+
<style lang="css">
61+
.header {
62+
background-color:#f1f1f1;
63+
padding:30px;
64+
text-align:center;
65+
}
66+
67+
.navbar {
68+
overflow:hidden;
69+
background-color:#333;
70+
}
71+
72+
.navbara {
73+
float:left;
74+
display:block;
75+
color:#f2f2f2;
76+
text-align:center;
77+
padding:14px16px;
78+
text-decoration:none;
79+
font-size:17px;
80+
}
81+
82+
.navbara:hover {
83+
background-color:#ddd;
84+
color:black;
85+
}
86+
87+
.navbara.is-active {
88+
background-color:#4CAF50;
89+
color:white;
90+
}
91+
92+
.content {
93+
padding:16px;
94+
}
95+
96+
.sticky {
97+
position:fixed;
98+
top:0;
99+
width:100%
100+
}
101+
102+
.sticky+.content {
103+
padding-top:60px;
104+
}
105+
</style>

‎src/examples/menu/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
exportconstStickyNavbar=()=>import(/* webpackChunkName: "examples/menu/StickyNavbar" */'./StickyNavbar.vue')

‎src/examples/more/BottomModal.vue‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<template lang="html">
2+
<divclass="bottom-modal-example">
3+
<h2>Bottom Modal</h2>
4+
<buttonclass="btn-modal"@click="modal.isActive = true">Open Modal</button>
5+
<modal-box:is-active.sync="modal.isActive"is-closable>
6+
<divclass="modal-header">
7+
<spanclass="close"@click="modal.isActive = false">&times;</span>
8+
<h2>Modal Header</h2>
9+
</div>
10+
<divclass="modal-body">
11+
<p>Some text in the Modal Body</p>
12+
<p>Some other text...</p>
13+
</div>
14+
<divclass="modal-footer">
15+
<h3>Modal Footer</h3>
16+
</div>
17+
</modal-box>
18+
</div>
19+
</template>
20+
21+
<script>
22+
importModalBoxfrom'@/components/more/ModalBox.vue'
23+
24+
exportdefault {
25+
name:'bottom-modal-example',
26+
data: ()=> ({
27+
modal: {
28+
isActive:false
29+
}
30+
}),
31+
components: {
32+
ModalBox
33+
}
34+
}
35+
</script>
36+
37+
<style lang="scss">
38+
.bottom-modal-example {
39+
.modal-box {
40+
.modal-content {
41+
width:100%;
42+
position:fixed;
43+
bottom:0;
44+
border:none;
45+
animation-name: slideIn;
46+
animation-duration:0.4s;
47+
}
48+
}
49+
50+
/* Add Animation*/
51+
@keyframesslideIn {
52+
from {bottom:-100%;opacity:0}
53+
to {bottom:0;opacity:1}
54+
}
55+
}
56+
</style>

‎src/examples/more/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
exportconstBottomModal=()=>import(/* webpackChunkName: "examples/more/BottomModal" */'./BottomModal.vue')

‎src/pages/Home.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,14 @@ export default {
3232
}
3333
},
3434
created() {
35-
const_routes=routes.slice(1)// remove home
35+
const_routes=routes.slice(2)// remove home and examples
3636
_routes.forEach(route=> {
3737
constchildren1= []
3838
constchildren2= []
3939
4040
route.children
4141
.filter(page=> {
42+
console.log(page)
4243
return!['Slideshow'].includes(page.component.name)
4344
})
4445
.forEach((page,index)=> {

‎src/pages/menus/StickyNavbar.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
title="Sticky/Affix Navbar"
44
:intro="intro">
55
<sampleclass="sticky-navbar-page">
6-
<iframesrc="pages/menus/sticky-navbar.html"frameborder="0"></iframe>
6+
<iframesrc="#/examples/menu/sticky-navbar"frameborder="0"></iframe>
77
</sample>
88

99
<template slot="examples">

0 commit comments

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