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

Update pass-through docs

pull/6674/head
Cagatay Civici 2024-10-27 12:46:57 +03:00
parent 5a6fd64bf7
commit bee6a7f0f1
3 changed files with 31 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
apps/showcase/doc/passthrough/CustomCSSDoc.vue
View File

@ -1,8 +1,7 @@
<template>
<DocSectionText v-bind="$attrs">
<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
configuration.
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.
</p>
</DocSectionText>
@ -23,30 +22,13 @@ app.use(PrimeVue, {
pt: {
global: {
css: \`
button {
padding: 2rem;
}
.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);
}
.my-button {
border-width: 2px;
}
\`
},
button: {
root: 'my-button'
}
}
});

17
apps/showcase/doc/passthrough/IntroductionDoc.vue Normal file
View File

@ -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&amp;list=PLC9bp-OHi-Wk9fMhxOM1u6Si82i6AxqUM" frameborder="0" allowfullscreen></iframe>
</div>
</template>

10
apps/showcase/pages/passthrough/index.vue
View File

@ -1,13 +1,13 @@
<template>
<Head>
<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>
<div class="doc">
<div class="doc-main">
<div class="doc-intro">
<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>
<DocSections :docs="docs" />
</div>
@ -20,6 +20,7 @@ import BasicDoc from '@/doc/passthrough/BasicDoc.vue';
import CustomCSSDoc from '@/doc/passthrough/CustomCSSDoc.vue';
import DeclarativeDoc from '@/doc/passthrough/DeclarativeDoc.vue';
import GlobalDoc from '@/doc/passthrough/GlobalDoc.vue';
import IntroductionDoc from '@/doc/passthrough/IntroductionDoc.vue';
import LifecycleDoc from '@/doc/passthrough/LifecycleDoc.vue';
import PCPrefixDoc from '@/doc/passthrough/PCPrefixDoc.vue';
import UsePassThroughDoc from '@/doc/passthrough/UsePassThroughDoc.vue';
@ -28,6 +29,11 @@ export default {
data() {
return {
docs: [
{
id: 'introduction',
label: 'Introduction',
component: IntroductionDoc
},
{
id: 'basic',
label: 'Basic',