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