mirror of https://github.com/requarks/wiki
NGPixel
5 years ago
parent
9fd55f8a97
commit
5d43f6ada1
@ -0,0 +1,151 @@
|
|||||||
|
<template lang="pug">
|
||||||
|
.tabset.elevation-2
|
||||||
|
ul.tabset-tabs(ref='tabs')
|
||||||
|
slot(name='tabs')
|
||||||
|
.tabset-content(ref='content')
|
||||||
|
slot(name='content')
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentTab: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
currentTab (newValue, oldValue) {
|
||||||
|
this.setActiveTab()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setActiveTab () {
|
||||||
|
this.$refs.tabs.childNodes.forEach((node, idx) => {
|
||||||
|
if (idx === this.currentTab) {
|
||||||
|
node.className = 'is-active'
|
||||||
|
} else {
|
||||||
|
node.className = ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.$refs.content.childNodes.forEach((node, idx) => {
|
||||||
|
if (idx === this.currentTab) {
|
||||||
|
node.className = 'tabset-panel is-active'
|
||||||
|
} else {
|
||||||
|
node.className = 'tabset-panel'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.setActiveTab()
|
||||||
|
this.$refs.tabs.childNodes.forEach((node, idx) => {
|
||||||
|
node.addEventListener('click', ev => {
|
||||||
|
this.currentTab = [].indexOf.call(ev.target.parentNode.children, ev.target)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.tabset {
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
@at-root .theme--dark & {
|
||||||
|
background-color: #292929;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .tabset-tabs {
|
||||||
|
padding-left: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: linear-gradient(to bottom, #FFF, #FAFAFA);
|
||||||
|
box-shadow: inset 0 -1px 0 0 #DDD;
|
||||||
|
border-radius: 5px 5px 0 0;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
@at-root .theme--dark & {
|
||||||
|
background: linear-gradient(to bottom, #424242, #333);
|
||||||
|
box-shadow: inset 0 -1px 0 0 #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
> li {
|
||||||
|
display: block;
|
||||||
|
padding: 16px;
|
||||||
|
margin-top: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 1s ease;
|
||||||
|
border-right: 1px solid #FFF;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
@at-root .theme--dark & {
|
||||||
|
border-right-color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
background-color: #FFF;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-bottom: 17px;
|
||||||
|
color: mc('blue', '700');
|
||||||
|
|
||||||
|
@at-root .theme--dark & {
|
||||||
|
background-color: #292929;
|
||||||
|
color: mc('blue', '300');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-right: none;
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
border-right: 1px solid #EEE;
|
||||||
|
|
||||||
|
@at-root .theme--dark & {
|
||||||
|
border-right-color: #555;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(#CCC, .1);
|
||||||
|
|
||||||
|
@at-root .theme--dark & {
|
||||||
|
background-color: rgba(#222, .25);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
background-color: #FFF;
|
||||||
|
|
||||||
|
@at-root .theme--dark & {
|
||||||
|
background-color: #292929;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& + li {
|
||||||
|
border-left: 1px solid #EEE;
|
||||||
|
|
||||||
|
@at-root .theme--dark & {
|
||||||
|
border-left-color: #222;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .tabset-content {
|
||||||
|
.tabset-panel {
|
||||||
|
padding: 2px 16px 16px;
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
key: htmlTabset
|
||||||
|
title: Tabsets
|
||||||
|
description: Transform headers into tabs
|
||||||
|
author: requarks.io
|
||||||
|
icon: mdi-tab
|
||||||
|
enabledDefault: true
|
||||||
|
dependsOn: htmlCore
|
||||||
|
props: {}
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
const _ = require('lodash')
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
async init($, config) {
|
||||||
|
for (let i = 1; i < 6; i++) {
|
||||||
|
$(`h${i}.tabset`).each((idx, elm) => {
|
||||||
|
let content = `<tabset>`
|
||||||
|
let tabs = []
|
||||||
|
let tabContents = []
|
||||||
|
$(elm).nextUntil(_.times(i, t => `h${t + 1}`).join(', '), `h${i + 1}`).each((hidx, hd) => {
|
||||||
|
tabs.push(`<li @click="switchTab(${hidx})">${$(hd).html()}</li>`)
|
||||||
|
let tabContent = ''
|
||||||
|
$(hd).nextUntil(_.times(i + 1, t => `h${t + 1}`).join(', ')).each((cidx, celm) => {
|
||||||
|
tabContent += $.html(celm)
|
||||||
|
$(celm).remove()
|
||||||
|
})
|
||||||
|
console.info(tabContent)
|
||||||
|
tabContents.push(`<div class="tabset-panel">${tabContent}</div>`)
|
||||||
|
$(hd).remove()
|
||||||
|
})
|
||||||
|
content += `<template v-slot:tabs>${tabs.join('')}</template>`
|
||||||
|
content += `<template v-slot:content>${tabContents.join('')}</template>`
|
||||||
|
content += `</tabset>`
|
||||||
|
$(elm).replaceWith($(content))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue