Skip to content

Instantly share code, notes, and snippets.

@CaptainFalcon92

CaptainFalcon92/102.html

Created October 23, 2020 22:38
Show Gist options
  • Save CaptainFalcon92/f53dbb58b5c5a36a7606ef86bfad563d to your computer and use it in GitHub Desktop.
Save CaptainFalcon92/f53dbb58b5c5a36a7606ef86bfad563d to your computer and use it in GitHub Desktop.
Download ZIP
jdan / 98.css / Adding tabs #102
Raw
102.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" class="window" style="margin: 32px; width: 800px">
<div class="title-bar">
<div class="title-bar-text">My First VB4 Program</div>
</div>
<div class="window-body">
<p>Hello, world!</p>
<menu role="tablist">
<li role="tab" v-for="(tab, key) in tabs" :key="key" :aria-selected="key === active" @click="activeTab = key">
<a href="#" v-text="tab" :tabindex="key"></a>
</li>
</menu>
<div class="window" role="tabpanel">
<div class="window-body">
<p v-text="tabContent"></p>
</div>
</div>
</div>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
activeTab: 0,
tabs: ['Desktop', 'My computer', 'Control panel', 'Devices manager', 'Hardware profiles', 'Performance']
},
computed: {
tabContent() {
return [
'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, doloribus ducimus facere maiores non reiciendis temporibus. Aspernatur, libero, velit! Amet expedita nam provident unde voluptate. Architecto facilis fugit praesentium quam.',
'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aut deleniti dolorem, eius fugit incidunt ipsa maxime minus neque, nulla odit porro possimus quo quos reprehenderit rerum tempore voluptatem voluptates.',
'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquam beatae deleniti deserunt dolor dolore, ex explicabo id molestias natus nihil odio porro quaerat quis ratione, sunt tempora vitae, voluptate.',
'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo impedit, iste itaque minus perferendis reiciendis voluptate voluptatum! Accusantium alias aliquid cumque dignissimos doloribus dolorum eaque earum, eius nemo, saepe tenetur.',
'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, nam necessitatibus neque ratione similique tempore? Cupiditate expedita minus quidem repellat repudiandae voluptate. Consequatur doloribus earum in omnis perspiciatis soluta voluptate.',
'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto commodi cumque distinctio, dolor dolores et impedit magnam minima, nam natus odit, rem repudiandae similique sint veniam voluptatibus. Facere, molestiae!',
][this.active];
}
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment