Update pass-through docs
Cagatay Civici
parent
5a6fd64bf7
commit
bee6a7f0f1
|
|
@ -1,8 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>
|
<p>
|
||||||
The <i>global</i> property has a <i>css</i> option to define custom css that belongs to a global <i>pt</i> configuration. Common use case of this feature is defining global styles and animations related to the pass through props
|
The <i>global</i> property has a <i>css</i> option to define custom css that belongs to a global <i>pt</i> configuration. Common use case of this feature is defining global styles and animations related to the pass through configuration.
|
||||||
configuration.
|
|
||||||
</p>
|
</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
|
|
||||||
|
|
@ -23,30 +22,13 @@ app.use(PrimeVue, {
|
||||||
pt: {
|
pt: {
|
||||||
global: {
|
global: {
|
||||||
css: \`
|
css: \`
|
||||||
button {
|
.my-button {
|
||||||
padding: 2rem;
|
border-width: 2px;
|
||||||
}
|
|
||||||
|
|
||||||
.p-ink {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
border-radius: 100%;
|
|
||||||
transform: scale(0);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-ink-active {
|
|
||||||
animation: ripple 0.4s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes ripple {
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(2.5);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
\`
|
\`
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
root: 'my-button'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>
|
||||||
|
In traditional 3rd party UI libraries, users are limited to the API provided by component author. This API commonly consists of props, events and slots. Whenever a requirement emerges for a new customization option in the API, the
|
||||||
|
component author needs to develop and publish it with a new release.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Vision of PrimeTek is <i>Your components, not ours</i>. The pass through feature is a key element to implement this vision by exposing the component internals in order to apply arbitrary attributes and listeners to the DOM elements. The
|
||||||
|
main advantage of this approach is that it prevents you from being locked into the component author. We recommend considering the pass-through feature whenever you need to tailor a component that lacks a built-in feature for your specific
|
||||||
|
requirement.
|
||||||
|
</p>
|
||||||
|
<p>Two videos are available at PrimeTV youtube channel, first one is an introduction and second one covers a unique case that is solved by the pass-through.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<div class="video-container">
|
||||||
|
<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?si=gBh1ow-f0JfGWPrv&list=PLC9bp-OHi-Wk9fMhxOM1u6Si82i6AxqUM" frameborder="0" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<Head>
|
<Head>
|
||||||
<Title>PrimeVue - Pass Through</Title>
|
<Title>PrimeVue - Pass Through</Title>
|
||||||
<Meta name="description" content="The Pass Through props is an API to access the internal DOM Structure of the components." />
|
<Meta name="description" content="The Pass Through attributes is an API to access the internal DOM Structure of the components." />
|
||||||
</Head>
|
</Head>
|
||||||
<div class="doc">
|
<div class="doc">
|
||||||
<div class="doc-main">
|
<div class="doc-main">
|
||||||
<div class="doc-intro">
|
<div class="doc-intro">
|
||||||
<h1>Pass Through</h1>
|
<h1>Pass Through</h1>
|
||||||
<p>The Pass Through props is an API to access the internal DOM Structure of the components.</p>
|
<p>The Pass Through attributes is an API to access the internal DOM Structure of the components.</p>
|
||||||
</div>
|
</div>
|
||||||
<DocSections :docs="docs" />
|
<DocSections :docs="docs" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -20,6 +20,7 @@ import BasicDoc from '@/doc/passthrough/BasicDoc.vue';
|
||||||
import CustomCSSDoc from '@/doc/passthrough/CustomCSSDoc.vue';
|
import CustomCSSDoc from '@/doc/passthrough/CustomCSSDoc.vue';
|
||||||
import DeclarativeDoc from '@/doc/passthrough/DeclarativeDoc.vue';
|
import DeclarativeDoc from '@/doc/passthrough/DeclarativeDoc.vue';
|
||||||
import GlobalDoc from '@/doc/passthrough/GlobalDoc.vue';
|
import GlobalDoc from '@/doc/passthrough/GlobalDoc.vue';
|
||||||
|
import IntroductionDoc from '@/doc/passthrough/IntroductionDoc.vue';
|
||||||
import LifecycleDoc from '@/doc/passthrough/LifecycleDoc.vue';
|
import LifecycleDoc from '@/doc/passthrough/LifecycleDoc.vue';
|
||||||
import PCPrefixDoc from '@/doc/passthrough/PCPrefixDoc.vue';
|
import PCPrefixDoc from '@/doc/passthrough/PCPrefixDoc.vue';
|
||||||
import UsePassThroughDoc from '@/doc/passthrough/UsePassThroughDoc.vue';
|
import UsePassThroughDoc from '@/doc/passthrough/UsePassThroughDoc.vue';
|
||||||
|
|
@ -28,6 +29,11 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
docs: [
|
docs: [
|
||||||
|
{
|
||||||
|
id: 'introduction',
|
||||||
|
label: 'Introduction',
|
||||||
|
component: IntroductionDoc
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 'basic',
|
id: 'basic',
|
||||||
label: 'Basic',
|
label: 'Basic',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue