Vue
Googleでログイン
問題1：Vueでアプリレイアウトを作ろう! サイドバー編
次はサイドバーの中身を作っていこう。
NavItemというコンポーネントファイルを作成して、見本動画のようなレイアウトを作ってほしい。
src
├── App.vue
├── assets
│ └── /* 画像等 */
├── components
│ ├── Main.vue
│ ├── Sidebar.vue
| |__ NavItem.vue /* ここにファイルを追加 */
└── main.js
NavItemというコンポーネントファイルを作成して、見本動画のようなレイアウトを作ってほしい。
src
├── App.vue
├── assets
│ └── /* 画像等 */
├── components
│ ├── Main.vue
│ ├── Sidebar.vue
| |__ NavItem.vue /* ここにファイルを追加 */
└── main.js
あらかじめエディタに書くコード
--- Sidebar.vue
<template>
<div class="sidebar-container">
<h1>Sidebar.vue</h1>
<navlist></navlist>
</div>
</template>
<script>
/* 回答を書く */
</script>
<style>
.sidebar-container {
width: 20%;
background: #fff;
}
.sidebar-container h1 {
border-bottom: 1px solid #40b983;
padding: 20px 0;
color: #40b983;
}
</style>
¥Vue¥
--- NavList.vue
<template>
<div>
<nav class="nav-list-wrapper">
<ul class="nav-list">
<li class="nav-list-item"><a href="#">リンク1</a></li>
<li class="nav-list-item"><a href="#">リンク2</a></li>
<li class="nav-list-item"><a href="#">リンク3</a></li>
</ul>
</nav>
</div>
</template>
<style>
.nav-list-wrapper {
padding: 10px;
}
.nav-list-item {
list-style: none;
padding: 8px 0;
}
.nav-list-item a {
color: #40b983;
text-decoration: none;
display: inline-block;
width: 100%;
font-size: 16px;
font-weight: 700;
}
.nav-list-item a:hover{
background: #40b983;
opacity: .8;
color: #fff;
}
</style>
¥Vue¥
期待する画面
解答ソースコード
--- Sidebar.vue
<script>
import NavList from './NavList.vue'
export default {
name: 'Sidebar',
components: {
NavList
},
}
</script>
¥Vue¥
解説
Sidebarの中でNavListコンポーネントを読み込んでいる形になる。
ログインして解答を見る
#忍者CODE無料問題集で活動を記録しよう
完了にする！
