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

Add RTL doc

pull/6711/head
Cagatay Civici 2024-11-01 14:09:12 +03:00
parent 812dfa3bc0
commit 64385e38ba
4 changed files with 74 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/showcase/assets/menu/menu.json
View File

@ -566,6 +566,11 @@
{ {
"name": "PrimeTV", "name": "PrimeTV",
"href": "https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" "href": "https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw"
},
{
"name": "RTL",
"to": "/guides/rtl",
"badge": "NEW"
} }
] ]
}, },

24
apps/showcase/doc/guides/rtl/ConfigurationDoc.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
The PrimeVue components natively support Right-to-Left (RTL) text direction through a modern CSS implementation utilizing FlexBox and classes like <i>*-inline-start</i> and <i>*-block-end</i>. Consequently, no JavaScript configuration is
necessary; setting the document's text direction to RTL is sufficient to enable this feature.
</p>
<p>The RTL setting can either be set using the <i>dir</i> attribute or with the <i>direction</i> style property.</p>
</DocSectionText>
<div class="doc-section-description font-bold mb-4">With Markup</div>
<pre v-code><code>
&lt;html dir="rtl"&gt;
</code></pre>
<div class="doc-section-description my-4 font-bold">With CSS</div>
<pre v-code.css><code>
html {
direction: rtl
}
</code></pre>
</template>

5
apps/showcase/doc/guides/rtl/LimitationsDoc.vue Normal file
View File

@ -0,0 +1,5 @@
<template>
<DocSectionText v-bind="$attrs">
<p>RTL is widely supported by the UI suite except the Galleria and Carousel components. These components will be enhanced with a modern implementation in upcoming versions with built-in support for RTL.</p>
</DocSectionText>
</template>

40
apps/showcase/pages/guides/rtl/index.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<Head>
<Title>RTL - PrimeVue</Title>
<Meta name="description" content="Right-to-Left direction support of PrimeVue." />
</Head>
<div class="doc">
<div class="doc-main">
<div class="doc-intro">
<h1>RTL Support</h1>
<p>Right-to-left direction support of PrimeVue.</p>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</div>
</template>
<script>
import ConfigurationDoc from '@/doc/guides/rtl/ConfigurationDoc.vue';
import LimitationsDoc from '@/doc/guides/rtl/LimitationsDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'configuration',
label: 'Configuration',
component: ConfigurationDoc
},
{
id: 'tailwindcss',
label: 'Limitations',
component: LimitationsDoc
}
]
};
}
};
</script>