Fixed #322 - New Component: ScrollPanel
cagataycivici
parent
401bbb9465
commit
2fdc8c3465
|
|
@ -0,0 +1 @@
|
||||||
|
export * from './components/scrollpanel/ScrollPanel';
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
'use strict';
|
||||||
|
module.exports = require('./components/scrollpanel/ScrollPanel.vue');
|
||||||
|
|
||||||
|
|
@ -2,12 +2,6 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-93461466-1"></script>
|
|
||||||
<script>
|
|
||||||
window.dataLayer = window.dataLayer || [];
|
|
||||||
function gtag(){dataLayer.push(arguments);}
|
|
||||||
gtag('js', new Date());
|
|
||||||
</script>
|
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover">
|
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover">
|
||||||
|
|
|
||||||
|
|
@ -49,12 +49,6 @@ export default {
|
||||||
$route: {
|
$route: {
|
||||||
immediate: true,
|
immediate: true,
|
||||||
handler(to) {
|
handler(to) {
|
||||||
let route = window.location.href.split('/#')[1];
|
|
||||||
if (to.path === route) {
|
|
||||||
window['gtag']('config', 'UA-93461466-1', {
|
|
||||||
'page_path': '/primevue' + to.path
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.sidebarActive = false;
|
this.sidebarActive = false;
|
||||||
this.$toast.removeAllGroups();
|
this.$toast.removeAllGroups();
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -152,6 +152,7 @@
|
||||||
<router-link to="/deferredcontent">Deferred</router-link>
|
<router-link to="/deferredcontent">Deferred</router-link>
|
||||||
<router-link to="/fieldset">Fieldset</router-link>
|
<router-link to="/fieldset">Fieldset</router-link>
|
||||||
<router-link to="/panel">Panel</router-link>
|
<router-link to="/panel">Panel</router-link>
|
||||||
|
<router-link to="/scrollpanel">ScrollPanel</router-link>
|
||||||
<router-link to="/tabview">TabView</router-link>
|
<router-link to="/tabview">TabView</router-link>
|
||||||
<router-link to="/toolbar">Toolbar</router-link>
|
<router-link to="/toolbar">Toolbar</router-link>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -93,6 +93,10 @@
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: $linkColor;
|
color: $linkColor;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
|
@ -152,6 +156,10 @@
|
||||||
transition: background-color .2s, box-shadow .2s;
|
transition: background-color .2s, box-shadow .2s;
|
||||||
box-shadow: 0 0 0 0.2em $focusBorderColor;
|
box-shadow: 0 0 0 0.2em $focusBorderColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.p-highlight a,
|
&.p-highlight a,
|
||||||
|
|
@ -180,6 +188,10 @@
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: $linkColor;
|
color: $linkColor;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
import Vue, {VNode} from 'vue';
|
||||||
|
|
||||||
|
export declare class ScrollPanel extends Vue {
|
||||||
|
$slots: {
|
||||||
|
'': VNode[];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,263 @@
|
||||||
|
<template>
|
||||||
|
<div class="p-scrollpanel p-component">
|
||||||
|
<div class="p-scrollpanel-wrapper">
|
||||||
|
<div ref="content" class="p-scrollpanel-content" @scroll="moveBar" @mouseenter="moveBar">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div ref="xBar" class="p-scrollpanel-bar p-scrollpanel-bar-x" @mousedown="onXBarMouseDown"></div>
|
||||||
|
<div ref="yBar" class="p-scrollpanel-bar p-scrollpanel-bar-y" @mousedown="onYBarMouseDown"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import DomHandler from '../utils/DomHandler';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
initialized: false,
|
||||||
|
documentResizeListener: null,
|
||||||
|
documentMouseMoveListener: null,
|
||||||
|
documentMouseUpListener: null,
|
||||||
|
frame: null,
|
||||||
|
scrollXRatio: null,
|
||||||
|
scrollYRatio: null,
|
||||||
|
isXBarClicked: false,
|
||||||
|
isYBarClicked: false,
|
||||||
|
lastPageX: null,
|
||||||
|
lastPageY: null,
|
||||||
|
mounted() {
|
||||||
|
if (this.$el.offsetParent) {
|
||||||
|
this.initialize();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
updated() {
|
||||||
|
if (!this.initialized && this.$el.offsetParent) {
|
||||||
|
this.initialize();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.unbindDocumentResizeListener();
|
||||||
|
|
||||||
|
if (this.frame) {
|
||||||
|
window.cancelAnimationFrame(this.frame);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initialize() {
|
||||||
|
this.moveBar();
|
||||||
|
this.bindDocumentResizeListener();
|
||||||
|
this.calculateContainerHeight();
|
||||||
|
},
|
||||||
|
calculateContainerHeight() {
|
||||||
|
let containerStyles = getComputedStyle(this.$el),
|
||||||
|
xBarStyles = getComputedStyle(this.$refs.xBar),
|
||||||
|
pureContainerHeight = DomHandler.getHeight(this.$el) - parseInt(xBarStyles['height'], 10);
|
||||||
|
|
||||||
|
if (containerStyles['max-height'] !== "none" && pureContainerHeight === 0) {
|
||||||
|
if(this.$refs.content.offsetHeight + parseInt(xBarStyles['height'], 10) > parseInt(containerStyles['max-height'], 10)) {
|
||||||
|
this.$el.style.height = containerStyles['max-height'];
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.$el.style.height = this.$refs.content.offsetHeight + parseFloat(containerStyles.paddingTop) + parseFloat(containerStyles.paddingBottom) + parseFloat(containerStyles.borderTopWidth) + parseFloat(containerStyles.borderBottomWidth) + "px";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
moveBar() {
|
||||||
|
/* horizontal scroll */
|
||||||
|
let totalWidth = this.$refs.content.scrollWidth;
|
||||||
|
let ownWidth = this.$refs.content.clientWidth;
|
||||||
|
let bottom = (this.$el.clientHeight - this.$refs.xBar.clientHeight) * -1;
|
||||||
|
|
||||||
|
this.scrollXRatio = ownWidth / totalWidth;
|
||||||
|
|
||||||
|
/* vertical scroll */
|
||||||
|
let totalHeight = this.$refs.content.scrollHeight;
|
||||||
|
let ownHeight = this.$refs.content.clientHeight;
|
||||||
|
let right = (this.$el.clientWidth - this.$refs.yBar.clientWidth) * -1;
|
||||||
|
|
||||||
|
this.scrollYRatio = ownHeight / totalHeight;
|
||||||
|
|
||||||
|
this.frame = this.requestAnimationFrame(() => {
|
||||||
|
if (this.scrollXRatio >= 1) {
|
||||||
|
DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-hidden');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-hidden');
|
||||||
|
this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.scrollYRatio >= 1) {
|
||||||
|
DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-hidden');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-hidden');
|
||||||
|
this.$refs.yBar.style.cssText = 'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onYBarMouseDown(e) {
|
||||||
|
this.isYBarClicked = true;
|
||||||
|
this.lastPageY = e.pageY;
|
||||||
|
DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-grabbed');
|
||||||
|
DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
|
||||||
|
|
||||||
|
this.bindDocumentMouseListeners();
|
||||||
|
e.preventDefault();
|
||||||
|
},
|
||||||
|
onXBarMouseDown(e) {
|
||||||
|
this.isXBarClicked = true;
|
||||||
|
this.lastPageX = e.pageX;
|
||||||
|
DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-grabbed');
|
||||||
|
DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
|
||||||
|
|
||||||
|
this.bindDocumentMouseListeners();
|
||||||
|
e.preventDefault();
|
||||||
|
},
|
||||||
|
onDocumentMouseMove(e) {
|
||||||
|
if (this.isXBarClicked) {
|
||||||
|
this.onMouseMoveForXBar(e);
|
||||||
|
}
|
||||||
|
else if (this.isYBarClicked) {
|
||||||
|
this.onMouseMoveForYBar(e);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.onMouseMoveForXBar(e);
|
||||||
|
this.onMouseMoveForYBar(e);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onMouseMoveForXBar(e) {
|
||||||
|
let deltaX = e.pageX - this.lastPageX;
|
||||||
|
this.lastPageX = e.pageX;
|
||||||
|
|
||||||
|
this.frame = this.requestAnimationFrame(() => {
|
||||||
|
this.$refs.content.scrollLeft += deltaX / this.scrollXRatio;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onMouseMoveForYBar(e) {
|
||||||
|
let deltaY = e.pageY - this.lastPageY;
|
||||||
|
this.lastPageY = e.pageY;
|
||||||
|
|
||||||
|
this.frame = this.requestAnimationFrame(() => {
|
||||||
|
this.$refs.content.scrollTop += deltaY / this.scrollYRatio;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onDocumentMouseUp() {
|
||||||
|
DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-grabbed');
|
||||||
|
DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-grabbed');
|
||||||
|
DomHandler.removeClass(document.body, 'p-scrollpanel-grabbed');
|
||||||
|
|
||||||
|
this.unbindDocumentMouseListeners();
|
||||||
|
this.isXBarClicked = false;
|
||||||
|
this.isYBarClicked = false;
|
||||||
|
},
|
||||||
|
requestAnimationFrame(f) {
|
||||||
|
let frame = window.requestAnimationFrame || this.timeoutFrame;
|
||||||
|
frame(f);
|
||||||
|
},
|
||||||
|
refresh() {
|
||||||
|
this.moveBar();
|
||||||
|
},
|
||||||
|
scrollTop(scrollTop) {
|
||||||
|
let scrollableHeight = this.$refs.content.scrollHeight - this.$refs.content.clientHeight;
|
||||||
|
scrollTop = scrollTop > scrollableHeight ? scrollableHeight : scrollTop > 0 ? scrollTop : 0;
|
||||||
|
this.$refs.contentscrollTop = scrollTop;
|
||||||
|
},
|
||||||
|
bindDocumentMouseListeners() {
|
||||||
|
if (!this.documentMouseMoveListener) {
|
||||||
|
this.documentMouseMoveListener = (e) => {
|
||||||
|
this.onDocumentMouseMove(e);
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('mousemove', this.documentMouseMoveListener);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.documentMouseUpListener) {
|
||||||
|
this.documentMouseUpListener = (e) => {
|
||||||
|
this.onDocumentMouseUp(e);
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('mouseup', this.documentMouseUpListener);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
unbindDocumentMouseListeners() {
|
||||||
|
if (this.documentMouseMoveListener) {
|
||||||
|
document.removeEventListener('mousemove', this.documentMouseMoveListener);
|
||||||
|
this.documentMouseMoveListener = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(this.documentMouseUpListener) {
|
||||||
|
document.removeEventListener('mouseup', this.documentMouseUpListener);
|
||||||
|
this.documentMouseUpListener = null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
bindDocumentResizeListener() {
|
||||||
|
if (!this.documentResizeListener) {
|
||||||
|
this.documentResizeListener = () => {
|
||||||
|
this.moveBar();
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('resize', this.documentResizeListener);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
unbindDocumentResizeListener() {
|
||||||
|
if(this.documentResizeListener) {
|
||||||
|
window.removeEventListener('resize', this.documentResizeListener);
|
||||||
|
this.documentResizeListener = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.p-scrollpanel-wrapper {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-scrollpanel-content {
|
||||||
|
height: calc(100% + 18px);
|
||||||
|
width: calc(100% + 18px);
|
||||||
|
padding: 0 18px 18px 0;
|
||||||
|
position: relative;
|
||||||
|
overflow: auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-scrollpanel-bar {
|
||||||
|
position: relative;
|
||||||
|
background: #c1c1c1;
|
||||||
|
border-radius: 3px;
|
||||||
|
z-index: 2;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.25s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-scrollpanel-bar-y {
|
||||||
|
width: 9px;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-scrollpanel-bar-x {
|
||||||
|
height: 9px;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-scrollpanel-hidden {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-scrollpanel:hover .p-scrollpanel-bar,
|
||||||
|
.p-scrollpanel:active .p-scrollpanel-bar {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-scrollpanel-grabbed {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -52,6 +52,7 @@ import ProgressSpinner from './components/progressspinner/ProgressSpinner';
|
||||||
import Rating from './components/rating/Rating';
|
import Rating from './components/rating/Rating';
|
||||||
import RadioButton from './components/radiobutton/RadioButton';
|
import RadioButton from './components/radiobutton/RadioButton';
|
||||||
import Row from './components/row/Row';
|
import Row from './components/row/Row';
|
||||||
|
import ScrollPanel from './components/scrollpanel/ScrollPanel';
|
||||||
import SelectButton from './components/selectbutton/SelectButton';
|
import SelectButton from './components/selectbutton/SelectButton';
|
||||||
import Slider from './components/slider/Slider';
|
import Slider from './components/slider/Slider';
|
||||||
import Sidebar from './components/sidebar/Sidebar';
|
import Sidebar from './components/sidebar/Sidebar';
|
||||||
|
|
@ -141,6 +142,7 @@ Vue.component('ProgressSpinner', ProgressSpinner);
|
||||||
Vue.component('RadioButton', RadioButton);
|
Vue.component('RadioButton', RadioButton);
|
||||||
Vue.component('Rating', Rating);
|
Vue.component('Rating', Rating);
|
||||||
Vue.component('Row', Row);
|
Vue.component('Row', Row);
|
||||||
|
Vue.component('ScrollPanel', ScrollPanel);
|
||||||
Vue.component('SelectButton', SelectButton);
|
Vue.component('SelectButton', SelectButton);
|
||||||
Vue.component('Slider', Slider);
|
Vue.component('Slider', Slider);
|
||||||
Vue.component('Sidebar', Sidebar);
|
Vue.component('Sidebar', Sidebar);
|
||||||
|
|
|
||||||
|
|
@ -435,7 +435,12 @@ export default new Router({
|
||||||
path: '/rating',
|
path: '/rating',
|
||||||
name: 'rating',
|
name: 'rating',
|
||||||
component: () => import('./views/rating/RatingDemo.vue')
|
component: () => import('./views/rating/RatingDemo.vue')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/scrollpanel',
|
||||||
|
name: 'scrollpanel',
|
||||||
|
component: () => import('./views/scrollpanel/ScrollPanelDemo.vue')
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/selectbutton',
|
path: '/selectbutton',
|
||||||
name: 'selectbutton',
|
name: 'selectbutton',
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,117 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="content-section introduction">
|
||||||
|
<div class="feature-intro">
|
||||||
|
<h1>ScrollPanel</h1>
|
||||||
|
<p>ScrollPanel is a cross browser, lightweight and themable alternative to native browser scrollbar.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-section implementation">
|
||||||
|
<div class="p-grid">
|
||||||
|
<div class="p-col-12 p-md-4">
|
||||||
|
<ScrollPanel style="width: 100%; height: 200px">
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
Vitae et leo duis ut diam.
|
||||||
|
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
|
||||||
|
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
|
||||||
|
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
|
||||||
|
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
|
||||||
|
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
|
||||||
|
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
|
||||||
|
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
|
||||||
|
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
|
||||||
|
Mattis aliquam faucibus purus in massa tempor nec.
|
||||||
|
</p>
|
||||||
|
</ScrollPanel>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-md-4">
|
||||||
|
<ScrollPanel style="width: 100%; height: 200px" class="custombar1">
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
Vitae et leo duis ut diam.
|
||||||
|
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
|
||||||
|
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
|
||||||
|
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
|
||||||
|
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
|
||||||
|
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
|
||||||
|
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
|
||||||
|
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
|
||||||
|
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
|
||||||
|
Mattis aliquam faucibus purus in massa tempor nec.
|
||||||
|
</p>
|
||||||
|
</ScrollPanel>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-md-4">
|
||||||
|
<ScrollPanel style="width: 100%; height: 200px" class="custombar2">
|
||||||
|
<p style="width: 600px">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
Vitae et leo duis ut diam.
|
||||||
|
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
|
||||||
|
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
|
||||||
|
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
|
||||||
|
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
|
||||||
|
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
|
||||||
|
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
|
||||||
|
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
|
||||||
|
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
|
||||||
|
Mattis aliquam faucibus purus in massa tempor nec.
|
||||||
|
</p>
|
||||||
|
</ScrollPanel>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ScrollPanelDoc />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import ScrollPanelDoc from './ScrollPanelDoc';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
'ScrollPanelDoc': ScrollPanelDoc
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
/deep/ .p-scrollpanel {
|
||||||
|
p {
|
||||||
|
padding: .5rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.custombar1 {
|
||||||
|
.p-scrollpanel-wrapper {
|
||||||
|
border-right: 9px solid var(--layer-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-scrollpanel-bar {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
opacity: 1;
|
||||||
|
transition: background-color .2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #007ad9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.custombar2 {
|
||||||
|
.p-scrollpanel-wrapper {
|
||||||
|
border-right: 9px solid var(--layer-1);
|
||||||
|
border-bottom: 9px solid var(--layer-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-scrollpanel-bar {
|
||||||
|
background-color: var(--layer-2);
|
||||||
|
border-radius: 0;
|
||||||
|
opacity: 1;
|
||||||
|
transition: background-color .2s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,199 @@
|
||||||
|
<template>
|
||||||
|
<div class="content-section documentation">
|
||||||
|
<TabView>
|
||||||
|
<TabPanel header="Documentation">
|
||||||
|
<h3>Import</h3>
|
||||||
|
<CodeHighlight lang="javascript">
|
||||||
|
import ScrollPanel from 'primevue/scrollpanel';
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
|
<h3>Getting Started</h3>
|
||||||
|
<p>ScrollPanel usage is similar to any container element.</p>
|
||||||
|
<CodeHighlight>
|
||||||
|
<ScrollPanel style="width: 100%; height: 200px">
|
||||||
|
content
|
||||||
|
</ScrollPanel>
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
|
<h3>Customization</h3>
|
||||||
|
<p>Look and feel can easily be customized, here is an example with custom scrollbars.</p>
|
||||||
|
<CodeHighlight>
|
||||||
|
<ScrollPanel style="width: 100%; height: 200px" class="custom">
|
||||||
|
content
|
||||||
|
</ScrollPanel>
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
|
<CodeHighlight lang="css">
|
||||||
|
.custom .p-scrollpanel-wrapper {
|
||||||
|
border-right: 9px solid #f4f4f4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom .p-scrollpanel-bar {
|
||||||
|
background-color: #1976d2;
|
||||||
|
opacity: 1;
|
||||||
|
transition: background-color .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom .p-scrollpanel-bar:hover {
|
||||||
|
background-color: #135ba1;
|
||||||
|
}
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
|
<h3>Properties</h3>
|
||||||
|
<p>Any property such as style and class are passed to the main container element. There are no component specific properties.</p>
|
||||||
|
|
||||||
|
<h3>Styling</h3>
|
||||||
|
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
|
||||||
|
<div class="doc-tablewrapper">
|
||||||
|
<table class="doc-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Element</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>p-scrollpanel</td>
|
||||||
|
<td>Container element.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-scrollpanel-wrapper</td>
|
||||||
|
<td>Wrapper of content section.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-scrollpanel-content</td>
|
||||||
|
<td>Content section.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-scrollpanel-bar</td>
|
||||||
|
<td>Scrollbar handle.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-scrollpanel-bar-x</td>
|
||||||
|
<td>Scrollbar handle of a horizontal bar.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-scrollpanel-bar-y</td>
|
||||||
|
<td>Scrollbar handle of a vertical bar</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>Dependencies</h3>
|
||||||
|
<p>None.</p>
|
||||||
|
</TabPanel>
|
||||||
|
|
||||||
|
<TabPanel header="Source">
|
||||||
|
<a href="https://github.com/primefaces/primevue/tree/master/src/views/scrollpanel" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||||
|
<span>View on GitHub</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<CodeHighlight>
|
||||||
|
<template v-pre>
|
||||||
|
<div class="p-grid">
|
||||||
|
<div class="p-col-12 p-md-4">
|
||||||
|
<ScrollPanel style="width: 100%; height: 200px">
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
Vitae et leo duis ut diam.
|
||||||
|
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
|
||||||
|
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
|
||||||
|
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
|
||||||
|
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
|
||||||
|
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
|
||||||
|
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
|
||||||
|
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
|
||||||
|
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
|
||||||
|
Mattis aliquam faucibus purus in massa tempor nec.
|
||||||
|
</p>
|
||||||
|
</ScrollPanel>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-md-4">
|
||||||
|
<ScrollPanel style="width: 100%; height: 200px" class="custombar1">
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
Vitae et leo duis ut diam.
|
||||||
|
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
|
||||||
|
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
|
||||||
|
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
|
||||||
|
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
|
||||||
|
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
|
||||||
|
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
|
||||||
|
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
|
||||||
|
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
|
||||||
|
Mattis aliquam faucibus purus in massa tempor nec.
|
||||||
|
</p>
|
||||||
|
</ScrollPanel>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-md-4">
|
||||||
|
<ScrollPanel style="width: 100%; height: 200px" class="custombar2">
|
||||||
|
<p style="width: 600px">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
Vitae et leo duis ut diam.
|
||||||
|
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
|
||||||
|
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
|
||||||
|
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
|
||||||
|
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
|
||||||
|
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
|
||||||
|
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
|
||||||
|
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
|
||||||
|
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
|
||||||
|
Mattis aliquam faucibus purus in massa tempor nec.
|
||||||
|
</p>
|
||||||
|
</ScrollPanel>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
|
<CodeHighlight lang="js">
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
|
<CodeHighlight lang="css">
|
||||||
|
/deep/ .p-scrollpanel {
|
||||||
|
p {
|
||||||
|
padding: .5rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.custombar1 {
|
||||||
|
.p-scrollpanel-wrapper {
|
||||||
|
border-right: 9px solid var(--layer-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-scrollpanel-bar {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
opacity: 1;
|
||||||
|
transition: background-color .2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #007ad9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.custombar2 {
|
||||||
|
.p-scrollpanel-wrapper {
|
||||||
|
border-right: 9px solid var(--layer-1);
|
||||||
|
border-bottom: 9px solid var(--layer-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-scrollpanel-bar {
|
||||||
|
background-color: var(--layer-2);
|
||||||
|
border-radius: 0;
|
||||||
|
opacity: 1;
|
||||||
|
transition: background-color .2s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</CodeHighlight>
|
||||||
|
</TabPanel>
|
||||||
|
</TabView>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
Loading…
Reference in New Issue