Expose ripple as a directive
cagataycivici
parent
c23d1431c7
commit
2dda15957a
|
|
@ -0,0 +1 @@
|
|||
export * from './components/ripple/Ripple';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
'use strict';
|
||||
module.exports = require('./components/ripple/Ripple.js');
|
||||
|
|
@ -236,6 +236,7 @@
|
|||
<router-link to="/inplace">Inplace</router-link>
|
||||
<router-link to="/progressbar">ProgressBar</router-link>
|
||||
<router-link to="/progressspinner">ProgressSpinner</router-link>
|
||||
<router-link to="/ripple">Ripple</router-link>
|
||||
<router-link to="/terminal">Terminal</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,4 +6,5 @@
|
|||
@import '../../components/inputtext/InputText.css';
|
||||
@import '../../components/password/Password.css';
|
||||
@import '../../components/radiobutton/RadioButton.css';
|
||||
@import '../../components/ripple/Ripple.css';
|
||||
@import '../../components/tooltip/Tooltip.css';
|
||||
|
|
@ -152,26 +152,3 @@ button {
|
|||
width: 1px;
|
||||
word-wrap: normal !important;
|
||||
}
|
||||
|
||||
.p-ink {
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 100%;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
.p-ink-active {
|
||||
animation: ripple 0.4s linear;
|
||||
}
|
||||
|
||||
.p-ripple-disabled .p-ink {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(2.5);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
.p-ripple {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-ink {
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 100%;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
.p-ink-active {
|
||||
animation: ripple 0.4s linear;
|
||||
}
|
||||
|
||||
.p-ripple-disabled .p-ink {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(2.5);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import Directive from 'vue';
|
||||
|
||||
export declare interface Ripple extends Directive {}
|
||||
|
|
@ -52,6 +52,7 @@ import ProgressSpinner from './components/progressspinner/ProgressSpinner';
|
|||
import Rating from './components/rating/Rating';
|
||||
import RadioButton from './components/radiobutton/RadioButton';
|
||||
import Row from './components/row/Row';
|
||||
import Ripple from './components/ripple/Ripple';
|
||||
import ScrollPanel from './components/scrollpanel/ScrollPanel';
|
||||
import SelectButton from './components/selectbutton/SelectButton';
|
||||
import Slider from './components/slider/Slider';
|
||||
|
|
@ -90,6 +91,7 @@ import Vuelidate from 'vuelidate';
|
|||
Vue.use(Vuelidate);
|
||||
Vue.use(ToastService);
|
||||
Vue.directive('tooltip', Tooltip);
|
||||
Vue.directive('ripple', Ripple);
|
||||
|
||||
Vue.prototype.$appState = Vue.observable({inputStyle: 'outlined', darkTheme: false});
|
||||
Vue.prototype.$primevue = Vue.observable({ripple: true});
|
||||
|
|
|
|||
|
|
@ -290,6 +290,11 @@ export default new Router({
|
|||
path: '/dialog',
|
||||
name: 'dialog',
|
||||
component: () => import('./views/dialog/DialogDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/display',
|
||||
name: 'display',
|
||||
component: () => import('./views/display/DisplayDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/dropdown',
|
||||
|
|
@ -366,6 +371,16 @@ export default new Router({
|
|||
name: 'listbox',
|
||||
component: () => import('./views/listbox/ListboxDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/flexbox',
|
||||
name: 'flexbox',
|
||||
component: () => import('./views/flexbox/FlexBoxDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/floatlabel',
|
||||
name: 'floatlabel',
|
||||
component: () => import('./views/floatlabel/FloatLabelDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/megamenu',
|
||||
name: 'megamenu',
|
||||
|
|
@ -456,6 +471,11 @@ export default new Router({
|
|||
name: 'rating',
|
||||
component: () => import('./views/rating/RatingDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/ripple',
|
||||
name: 'ripple',
|
||||
component: () => import('./views/ripple/RippleDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/scrollpanel',
|
||||
name: 'scrollpanel',
|
||||
|
|
@ -481,26 +501,6 @@ export default new Router({
|
|||
name: 'spacing',
|
||||
component: () => import('./views/spacing/SpacingDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/display',
|
||||
name: 'display',
|
||||
component: () => import('./views/display/DisplayDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/flexbox',
|
||||
name: 'flexbox',
|
||||
component: () => import('./views/flexbox/FlexBoxDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/floatlabel',
|
||||
name: 'floatlabel',
|
||||
component: () => import('./views/floatlabel/FloatLabelDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/text',
|
||||
name: 'text',
|
||||
component: () => import('./views/text/TextDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/splitbutton',
|
||||
name: 'splitbutton',
|
||||
|
|
@ -525,11 +525,6 @@ export default new Router({
|
|||
path: '/steps/confirmation',
|
||||
component: () => import('./views/steps/ConfirmationDemo.vue')
|
||||
}]
|
||||
},
|
||||
{
|
||||
path: '/textarea',
|
||||
name: 'textarea',
|
||||
component: () => import('./views/textarea/TextareaDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/tabmenu',
|
||||
|
|
@ -560,6 +555,16 @@ export default new Router({
|
|||
name: 'tabview',
|
||||
component: () => import('./views/tabview/TabViewDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/text',
|
||||
name: 'text',
|
||||
component: () => import('./views/text/TextDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/textarea',
|
||||
name: 'textarea',
|
||||
component: () => import('./views/textarea/TextareaDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/terminal',
|
||||
name: 'terminal',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,74 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Ripple</h1>
|
||||
<p>Ripple directive adds ripple effect to the host element.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<div class="card-container p-d-flex">
|
||||
<div class="card primary-box p-ripple" v-ripple>Default</div>
|
||||
<div class="card styled-box-green p-ripple" v-ripple>Green</div>
|
||||
<div class="card styled-box-orange p-ripple" v-ripple>Orange</div>
|
||||
<div class="card styled-box-purple p-ripple" v-ripple>Purple</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<RippleDoc />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RippleDoc from './RippleDoc';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'RippleDoc': RippleDoc
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/deep/ .card-container {
|
||||
.card {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 1rem;
|
||||
user-select: none;
|
||||
padding: 0;
|
||||
|
||||
&.primary-box {
|
||||
background-color: var(--primary-color);
|
||||
padding: 0;
|
||||
color: var(--primary-color-text);
|
||||
}
|
||||
|
||||
&.styled-box-green {
|
||||
.p-ink {
|
||||
background: rgba(#4baf50, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&.styled-box-orange {
|
||||
.p-ink {
|
||||
background: rgba(#ffc106, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&.styled-box-purple {
|
||||
.p-ink {
|
||||
background: rgba(#9c27b0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<h5>Getting Started</h5>
|
||||
<p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at
|
||||
your app's entry file (e.g. main.js) using the <i>$primevue</i> instance variable.
|
||||
</p>
|
||||
<CodeHighlight class="language-javascript">
|
||||
Vue.prototype.$primevue = {ripple: true};
|
||||
</CodeHighlight>
|
||||
|
||||
<p><span class="p-text-bold">Note</span>: That would be it to enable ripple on PrimeVue components, next section describes how to use it with your own components and standard elements.</p>
|
||||
|
||||
<h5>Directive</h5>
|
||||
<p>Ripple is directive that needs to be imported and configured with a name of your choice. Global configuration is done with the <i>Vue.directive</i> function.</p>
|
||||
<CodeHighlight lang="js">
|
||||
import Ripple from 'primevue/ripple';
|
||||
|
||||
Vue.directive('ripple', Ripple);
|
||||
</CodeHighlight>
|
||||
|
||||
<p>Ripple can also be configured locally using the directives property of your component.</p>
|
||||
<CodeHighlight lang="js">
|
||||
directives: {
|
||||
'ripple': Ripple
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
<p>Once the ripple is configured, add <i>.p-ripple</i> class to the target and attach the directive with the v- prefix.</p>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div class="p-ripple" v-ripple></div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<h5>Styling</h5>
|
||||
<p>Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of <i>.p-ink</i> element.</p>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div class="p-ripple purple" v-ripple></div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="css">
|
||||
.p-ripple.purple .p-ink {
|
||||
background: rgba(256,39,176,.3);
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
|
||||
<h5>Styling</h5>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Element</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-ripple</td>
|
||||
<td>Host element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-ink</td>
|
||||
<td>Ripple element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-ink-active</td>
|
||||
<td>Ripple element during animating.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h5>Dependencies</h5>
|
||||
<p>None.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/ripple" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div class="card-container p-d-flex">
|
||||
<div class="card primary-box p-ripple" v-ripple>Default</div>
|
||||
<div class="card styled-box-green p-ripple" v-ripple>Green</div>
|
||||
<div class="card styled-box-orange p-ripple" v-ripple>Orange</div>
|
||||
<div class="card styled-box-purple p-ripple" v-ripple>Purple</div>
|
||||
</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
export default {}
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="css">
|
||||
/deep/ .card-container {
|
||||
.card {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 1rem;
|
||||
user-select: none;
|
||||
padding: 0;
|
||||
|
||||
&.primary-box {
|
||||
background-color: var(--primary-color);
|
||||
padding: 0;
|
||||
color: var(--primary-color-text);
|
||||
}
|
||||
|
||||
&.styled-box-green {
|
||||
.p-ink {
|
||||
background: rgba(#4baf50, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&.styled-box-orange {
|
||||
.p-ink {
|
||||
background: rgba(#ffc106, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&.styled-box-purple {
|
||||
.p-ink {
|
||||
background: rgba(#9c27b0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -13,7 +13,7 @@ Vue.directive('tooltip', Tooltip);
|
|||
<p>Tooltip can also be configured locally using the directives property of your component.</p>
|
||||
<CodeHighlight lang="js">
|
||||
directives: {
|
||||
tooltip: Tooltip
|
||||
'tooltip': Tooltip
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue