vue-tabs-component
Version:
A Vue component to easily render tabs
196 lines (166 loc) • 5.4 kB
HTML
<html>
<head>
<title>vue-tabs-component</title>
<link href="resources/tabs-component.css" rel="stylesheet">
<style>
/* Page styles */
*,
*:after,
*:before {
box-sizing: border-box;
margin: 0;
padding: 0;
position: relative;
}
body {
background-color: #efefef;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
font-size: 16px;
padding: 1em;
}
.page {
background-color: #fff;
border-radius: 3px;
box-shadow: 0 2px 20px rgba(0, 0, 0, .025);
margin: 0 auto;
max-width: 66em;
padding: 4em 2em;
}
@media (min-width: 700px) {
.page {
padding: 4em;
}
}
.page-title {
font-size: 2.4rem;
margin-bottom: 1em;
}
.page-title a {
color: inherit;
text-decoration: none;
}
.page-title a:hover {
color: #007593;
}
.page-subtitle {
font-size: 1.25rem;
margin-bottom: 1em;
padding-top: .25em;
}
.page-about {
background-color: #d1e8eb;
margin: 0 -2em;
padding: 2em 1em;
}
@media (min-width: 700px) {
.page-about {
border-radius: 3px;
margin: 0;
padding: 2em;
}
}
.page-about h2 {
color: #003345;
}
.page-about p {
color: #003345;
line-height: 1.45;
margin-bottom: 1em;
}
.page-about a {
color: #007593;
}
.page-about code {
background-color: rgba(255, 255, 255, .75);
border-radius: 3px;
padding: 0 .25em;
}
.page-outro {
color: #999;
display: block;
margin-top: 4em;
text-align: center;
}
.page-outro a {
color: #999;
}
.prefix,
.suffix {
align-items: center;
border-radius: 1.25rem;
display: flex;
font-size: .75rem;
flex-shrink: 0;
height: 1.25rem;
justify-content: center;
line-height: 1.25rem;
min-width: 1.25rem;
padding: 0 .1em;
}
.prefix {
background-color: #d1e8eb;
color: #0c5174;
margin-right: .35em;
}
.suffix {
background-color: #c03;
color: #fff;
margin-left: .35em;
}
@media (min-width: 700px) {
.suffix {
position: absolute;
right: -.725em;
top: -.725em;
}
}
</style>
</head>
<body>
<article id="app" class="page">
<h1 class="page-title">
<a href="https://github.com/spatie/vue-tabs-component">Vue-tabs-component</a>
</h1>
<tabs>
<tab name="First tab">
<h2 class="page-subtitle">First tab</h2>
This is the content of the first tab.
</tab>
<tab name="Second tab">
<h2 class="page-subtitle">Second tab</h2>
This is the content of the second tab.
</tab>
<tab name="Disabled tab" :is-disabled="true">
<h2 class="page-subtitle">Disabled tab</h2>
This content will be unavailable while :is-disabled prop set to true
</tab>
<tab id="oh-hi-mark" name="Custom fragment">
<h2 class="page-subtitle">Custom fragment</h2>
The hash that is appended to the url can be customized.
</tab>
<tab prefix="<span class='prefix'>→</span>" name="Prefix and suffix" suffix="<span class='suffix'>4</span>">
<h2 class="page-subtitle">Prefix and suffix</h2>
A prefix and a suffix can be added — HTML allowed.
</tab>
</tabs>
<section class="page-about">
<h2 class="page-subtitle">About</h2>
<p>
The tab component above is powered by <a href="https://github.com/spatie/vue-tabs-component">spatie/vue-tabs-component</a>.
</p>
<p>The component will use the <strong>fragment</strong> of the url to choose which tab to open. So clicking
<a href="#second-tab">#second-tab</a>
will display the contents of the tab named <code>Second tab</code>.</p>
<p>The component will also <strong>remember</strong>
which tab was opened previously. If you <a href="http://vue-tabs-component.spatie.be">reload without fragment</a>
the tab that is currently active will receive focus again. More about this feature <a href="https://github.com/spatie/vue-tabs-component#remembering-the-last-opened-tab">on Github</a>.
</p>
</section>
<small class="page-outro">
<a href="https://github.com/spatie/vue-tabs-component">Code on Github</a> |
Proudly presented by <a href="https://spatie.be">spatie.be</a>
</small>
</article>
<script src="resources/app.js"></script>
</body>
</html>