From 874102e8bc4328f52cc0f306feaee551074202cd Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Tue, 22 Sep 2020 12:32:14 +0300 Subject: [PATCH] New codehighlighter --- package.json | 2 +- src/AppCodeHighlight.js | 16 ++++++++ src/main.js | 2 + src/views/tabview/TabViewDoc.vue | 65 +++++++++++++++++++++----------- 4 files changed, 61 insertions(+), 24 deletions(-) create mode 100644 src/AppCodeHighlight.js diff --git a/package.json b/package.json index f43b3c9b7..bf15d042c 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/AppCodeHighlight.js b/src/AppCodeHighlight.js new file mode 100644 index 000000000..1b3675194 --- /dev/null +++ b/src/AppCodeHighlight.js @@ -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; \ No newline at end of file diff --git a/src/main.js b/src/main.js index ca5294ac6..65b82d1ac 100644 --- a/src/main.js +++ b/src/main.js @@ -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); diff --git a/src/views/tabview/TabViewDoc.vue b/src/views/tabview/TabViewDoc.vue index e83dfedfa..50c7c4ff0 100755 --- a/src/views/tabview/TabViewDoc.vue +++ b/src/views/tabview/TabViewDoc.vue @@ -3,14 +3,17 @@
Import
- +
+
 import TabView from 'primevue/tabview';
 import TabPanel from 'primevue/tabpanel';
-
+
+
Getting Started

Tabview element consists of one or more TabPanel elements. Header of the tab is defined using header attribute.

- +
+
 <TabView>
 	<TabPanel header="Header I">
 		Content I
@@ -22,11 +25,13 @@ import TabPanel from 'primevue/tabpanel';
 		Content III
 	</TabPanel>
 </TabView>
-
+
+
Active

Visibility of the content is specified with the activeIndex property that supports one or two-way binding.

- +
+
 <TabView :activeIndex="activeIndex">
 	<TabPanel header="Header I">
 		Content I
@@ -38,10 +43,12 @@ import TabPanel from 'primevue/tabpanel';
 		Content III
 	</TabPanel>
 </TabView>
-
+
+

Two-way binding requires v-model.

- +
+
 <TabView v-model:activeIndex="activeIndex">
 	<TabPanel header="Header I">
 		Content I
@@ -53,11 +60,13 @@ import TabPanel from 'primevue/tabpanel';
 		Content III
 	</TabPanel>
 </TabView>
-
+
+
Disabled

A tab can be disabled to prevent the content to be displayed by setting the disabled property on a panel.

- +
+
 <TabView>
 	<TabPanel header="Header I">
 		Content I
@@ -69,11 +78,13 @@ import TabPanel from 'primevue/tabpanel';
 		Content III
 	</TabPanel>
 </TabView>
-
+
+
Header Template

Custom content for the title section of a panel is defined using the header template.

- +
+
 <TabView>
 	<TabPanel>
 		<template #header>
@@ -90,11 +101,13 @@ import TabPanel from 'primevue/tabpanel';
 		Content II
 	</TabPanel>
 </TabView>
-
+
+
Programmatic Control

Tabs can be controlled programmatically using active property that defines the active tab.

- +
+
 <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
 <Button @click="active = 1" class="p-button-text" label="Activate 2nd" />
 <Button @click="active = 2" class="p-button-text" label="Activate 3rd" />
@@ -111,9 +124,10 @@ import TabPanel from 'primevue/tabpanel';
     </TabPanel>
 </TabView>
 
-
+
- +
+
 export default {
     data() {
         return {
@@ -121,7 +135,8 @@ export default {
         }
     }
 }
-
+
+
Properties of TabPanel
@@ -219,8 +234,8 @@ export default { View on GitHub - -