Skip to content

Commit f12aff6

Browse files
author
ntepluhina
committed
feat: added folder for examples
1 parent b361c0d commit f12aff6

File tree

4 files changed

+104
-0
lines changed

4 files changed

+104
-0
lines changed

‎src/examples/dynamic-components/index.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1.0"
8+
/>
9+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
10+
<script src="https://unpkg.com/vue@next"></script>
11+
<title>Vue classes</title>
12+
<link rel="stylesheet" href="style.css" />
13+
</head>
14+
<body>
15+
<div id="dynamic-component-demo" class="demo">
16+
<button
17+
v-for="tab in tabs"
18+
:key="tab"
19+
:class="['tab-button', { active: currentTab === tab }]"
20+
@click="currentTab = tab"
21+
>
22+
{{ tab }}
23+
</button>
24+
25+
<component :is="currentTabComponent" class="tab"></component>
26+
</div>
27+
</body>
28+
<script>
29+
const app = Vue.createApp()
30+
31+
app.component('tab-home', {
32+
template: `<div>Home component</div>`
33+
})
34+
app.component('tab-posts', {
35+
template: `<div>Posts component</div>`
36+
})
37+
app.component('tab-archive', {
38+
template: `<div>Archive component</div>`
39+
})
40+
41+
app.mount(
42+
{
43+
data() {
44+
return {
45+
currentTab: 'Home',
46+
tabs: ['Home', 'Posts', 'Archive']
47+
}
48+
},
49+
computed: {
50+
currentTabComponent() {
51+
return 'tab-' + this.currentTab.toLowerCase()
52+
}
53+
}
54+
},
55+
'#dynamic-component-demo'
56+
)
57+
</script>
58+
</html>

‎src/examples/dynamic-components/package.json

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "dynamic-components",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.html",
6+
"scripts": {
7+
"start": "serve"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/codesandbox-app/static-template.git"
12+
},
13+
"keywords": [],
14+
"author": "Ives van Hoorne",
15+
"license": "MIT",
16+
"bugs": {
17+
"url": "https://github.com/codesandbox-app/static-template/issues"
18+
},
19+
"homepage": "https://github.com/codesandbox-app/static-template#readme",
20+
"devDependencies": {
21+
"serve": "^11.2.0"
22+
}
23+
}

‎src/examples/dynamic-components/sandbox.config.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"template": "static"
3+
}

‎src/examples/dynamic-components/style.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.tab-button {
2+
padding: 6px 10px;
3+
border-top-left-radius: 3px;
4+
border-top-right-radius: 3px;
5+
border: 1px solid #ccc;
6+
cursor: pointer;
7+
background: #f0f0f0;
8+
margin-bottom: -1px;
9+
margin-right: -1px;
10+
}
11+
.tab-button:hover {
12+
background: #e0e0e0;
13+
}
14+
.tab-button.active {
15+
background: #e0e0e0;
16+
}
17+
.tab {
18+
border: 1px solid #ccc;
19+
padding: 10px;
20+
}

0 commit comments

Comments
 (0)