vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

New codehighlighter

pull/496/head
Cagatay Civici 2020-09-22 12:32:14 +03:00
parent 2902cc2b81
commit 874102e8bc
4 changed files with 61 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -34,7 +34,7 @@
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0-0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",

16
src/AppCodeHighlight.js Normal file
View File

@ -0,0 +1,16 @@
import Prism from 'prismjs';
const CodeHighlight2 = {
beforeMount(el, binding) {
if (binding.modifiers.script)
el.className = 'language-javascript';
else if (binding.modifiers.css)
el.className = 'language-css';
else
el.className = 'language-markup';
Prism.highlightElement(el.children[0]);
}
};
export default CodeHighlight2;

2
src/main.js
View File

@ -78,6 +78,7 @@ import Galleria from './components/galleria/Galleria';
import CodeHighlight from './views/codehighlight/CodeHighlight';
import AppInputStyleSwitch from './AppInputStyleSwitch';
import CodeHighlight2 from './AppCodeHighlight';
import './assets/styles/primevue.css';
import 'primeflex/primeflex.css';
@ -105,6 +106,7 @@ app.use(router);
app.directive('tooltip', Tooltip);
app.directive('ripple', Ripple);
app.directive('code', CodeHighlight2);
app.component('Accordion', Accordion);
app.component('AccordionTab', AccordionTab);

65
src/views/tabview/TabViewDoc.vue
View File

@ -3,14 +3,17 @@
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<CodeHighlight lang="javascript">
<pre v-code.script>
<code>
import TabView from 'primevue/tabview';
import TabPanel from 'primevue/tabpanel';
</CodeHighlight>
</code></pre>
<h5>Getting Started</h5>
<p>Tabview element consists of one or more TabPanel elements. Header of the tab is defined using header attribute.</p>
<CodeHighlight>
<pre v-code>
<code>
&lt;TabView&gt;
&lt;TabPanel header="Header I"&gt;
Content I
@ -22,11 +25,13 @@ import TabPanel from 'primevue/tabpanel';
Content III
&lt;/TabPanel&gt;
&lt;/TabView&gt;
</CodeHighlight>
</code></pre>
<h5>Active</h5>
<p>Visibility of the content is specified with the <i>activeIndex</i> property that supports one or two-way binding.</p>
<CodeHighlight>
<pre v-code>
<code>
&lt;TabView :activeIndex="activeIndex"&gt;
&lt;TabPanel header="Header I"&gt;
Content I
@ -38,10 +43,12 @@ import TabPanel from 'primevue/tabpanel';
Content III
&lt;/TabPanel&gt;
&lt;/TabView&gt;
</CodeHighlight>
</code></pre>
<p>Two-way binding requires v-model.</p>
<CodeHighlight>
<pre v-code>
<code>
&lt;TabView v-model:activeIndex="activeIndex"&gt;
&lt;TabPanel header="Header I"&gt;
Content I
@ -53,11 +60,13 @@ import TabPanel from 'primevue/tabpanel';
Content III
&lt;/TabPanel&gt;
&lt;/TabView&gt;
</CodeHighlight>
</code></pre>
<h5>Disabled</h5>
<p>A tab can be disabled to prevent the content to be displayed by setting the disabled property on a panel.</p>
<CodeHighlight>
<pre v-code>
<code>
&lt;TabView&gt;
&lt;TabPanel header="Header I"&gt;
Content I
@ -69,11 +78,13 @@ import TabPanel from 'primevue/tabpanel';
Content III
&lt;/TabPanel&gt;
&lt;/TabView&gt;
</CodeHighlight>
</code></pre>
<h5>Header Template</h5>
<p>Custom content for the title section of a panel is defined using the header template.</p>
<CodeHighlight>
<pre v-code>
<code>
&lt;TabView&gt;
&lt;TabPanel&gt;
&lt;template #header&gt;
@ -90,11 +101,13 @@ import TabPanel from 'primevue/tabpanel';
Content II
&lt;/TabPanel&gt;
&lt;/TabView&gt;
</CodeHighlight>
</code></pre>
<h5>Programmatic Control</h5>
<p>Tabs can be controlled programmatically using active property that defines the active tab.</p>
<CodeHighlight>
<pre v-code>
<code>
&lt;Button @click="active = 0" class="p-button-text" label="Activate 1st" /&gt;
&lt;Button @click="active = 1" class="p-button-text" label="Activate 2nd" /&gt;
&lt;Button @click="active = 2" class="p-button-text" label="Activate 3rd" /&gt;
@ -111,9 +124,10 @@ import TabPanel from 'primevue/tabpanel';
&lt;/TabPanel&gt;
&lt;/TabView&gt;
</CodeHighlight>
</code></pre>
<CodeHighlight lang="js">
<pre v-code.script>
<code>
export default {
data() {
return {
@ -121,7 +135,8 @@ export default {
}
}
}
</CodeHighlight>
</code></pre>
<h5>Properties of TabPanel</h5>
<div class="doc-tablewrapper">
@ -219,8 +234,8 @@ export default {
<a href="https://github.com/primefaces/primevue/tree/master/src/views/tabview" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<CodeHighlight>
<template v-pre>
<pre v-code>
<code><template v-pre>
&lt;div class="card"&gt;
&lt;h5&gt;Default&lt;/h5&gt;
&lt;TabView&gt;
@ -325,9 +340,10 @@ export default {
&lt;/TabView&gt;
&lt;/div&gt;
</template>
</CodeHighlight>
</code></pre>
<CodeHighlight lang="javascript">
<pre v-code.script>
<code>
export default {
data() {
return {
@ -335,9 +351,11 @@ export default {
}
}
}
</CodeHighlight>
<CodeHighlight lang="css">
</code></pre>
<pre v-code.css>
<code>
.tabview-custom {
i, span {
vertical-align: middle;
@ -347,7 +365,8 @@ export default {
margin: 0 .5rem;
}
}
</CodeHighlight>
</code></pre>
</TabPanel>
</TabView>
</div>