From 25dd4cb08eab27fc34cc3880b8fda72745861e80 Mon Sep 17 00:00:00 2001 From: habubey Date: Fri, 8 Sep 2023 17:39:28 +0300 Subject: [PATCH] Add Tailwind Demo Panel --- components/doc/splitter/theming/styleddoc.js | 51 ++++++++ .../doc/splitter/theming/tailwinddoc.js | 64 ++++++++++ components/doc/tabview/theming/styleddoc.js | 43 +++++++ components/doc/tabview/theming/tailwinddoc.js | 110 ++++++++++++++++++ pages/splitter/index.js | 24 +++- pages/tabview/index.js | 41 ++++++- 6 files changed, 328 insertions(+), 5 deletions(-) create mode 100644 components/doc/splitter/theming/styleddoc.js create mode 100644 components/doc/splitter/theming/tailwinddoc.js create mode 100644 components/doc/tabview/theming/styleddoc.js create mode 100644 components/doc/tabview/theming/tailwinddoc.js diff --git a/components/doc/splitter/theming/styleddoc.js b/components/doc/splitter/theming/styleddoc.js new file mode 100644 index 0000000000..7c00deffb9 --- /dev/null +++ b/components/doc/splitter/theming/styleddoc.js @@ -0,0 +1,51 @@ +import { DocSectionText } from '../../common/docsectiontext'; + +export function StyledDoc(props) { + return ( + <> + +

List of class names used in the styled mode.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameElement
p-splitterContainer element.
p-splitterContainer element during resize.
p-splitter-horizontalContainer element with horizontal layout.
p-splitter-verticalContainer element with vertical layout.
p-splitter-panelSplitter panel element.
p-splitter-gutterGutter element to use when resizing the panels.
p-splitter-gutter-handleHandl element of the gutter.
+
+ + ); +} diff --git a/components/doc/splitter/theming/tailwinddoc.js b/components/doc/splitter/theming/tailwinddoc.js new file mode 100644 index 0000000000..fec4b24ffb --- /dev/null +++ b/components/doc/splitter/theming/tailwinddoc.js @@ -0,0 +1,64 @@ +import Link from 'next/link'; +import { DocSectionCode } from '../../common/docsectioncode'; +import { DocSectionText } from '../../common/docsectiontext'; + +export function TailwindDoc(props) { + const code = { + basic: ` +const Tailwind = { + splitter: { + root: ({ context }) => ({ + className: classNames('bg-white dark:bg-gray-900 rounded-lg text-gray-700 dark:text-white/80', { + 'border border-solid border-gray-300 dark:border-blue-900/40': !context.nested + }) + }), + splitterpanel: { + root: 'flex grow' + }, + gutter: ({ props }) => ({ + className: classNames('flex items-center justify-center shrink-0', 'transition-all duration-200 bg-gray-100 dark:bg-gray-800', { + 'cursor-col-resize': props.layout == 'horizontal', + 'cursor-row-resize': props.layout !== 'horizontal' + }) + }), + gutterhandler: ({ props }) => ({ + className: classNames('bg-gray-300 dark:bg-gray-600 transition-all duration-200', { + 'h-7': props.layout == 'horizontal', + 'w-7 h-2': props.layout !== 'horizontal' + }) + }) + } +} + ` + }; + + const code2 = { + javascript: ` +import React from 'react'; +import { Splitter, SplitterPanel } from 'primereact/splitter'; + +export default function UnstyledDemo() { + return ( + + Panel 1 + Panel 2 + + ) +} + ` + }; + + return ( + <> + +

+ PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '} + Tailwind Customization section for an example. +

+ +

A playground sample with the pre-built Tailwind theme.

+ + + + ); +} diff --git a/components/doc/tabview/theming/styleddoc.js b/components/doc/tabview/theming/styleddoc.js new file mode 100644 index 0000000000..f4874003a8 --- /dev/null +++ b/components/doc/tabview/theming/styleddoc.js @@ -0,0 +1,43 @@ +import { DocSectionText } from '../../common/docsectiontext'; + +export function StyledDoc(props) { + return ( + <> + +

List of class names used in the styled mode.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameElement
p-tabviewContainer element.
p-tabview-navContainer of headers.
p-tabview-selectedSelected tab header.
p-tabview-panelsContainer panels.
p-tabview-panelContent of a tab.
+
+ + ); +} diff --git a/components/doc/tabview/theming/tailwinddoc.js b/components/doc/tabview/theming/tailwinddoc.js new file mode 100644 index 0000000000..3cb3a6e1a0 --- /dev/null +++ b/components/doc/tabview/theming/tailwinddoc.js @@ -0,0 +1,110 @@ +import Link from 'next/link'; +import { DocSectionCode } from '../../common/docsectioncode'; +import { DocSectionText } from '../../common/docsectiontext'; + +export function TailwindDoc(props) { + const code = { + basic: ` +const Tailwind = { + tabview: { + navContainer: ({ props }) => ({ + className: classNames( + 'relative', // Relative positioning. + { 'overflow-hidden': props.scrollable } // Overflow condition. + ) + }), + navContent: 'overflow-y-hidden overscroll-contain overscroll-auto scroll-smooth [&::-webkit-scrollbar]:hidden', // Overflow and scrollbar styles. + previousButton: { + className: classNames('h-full flex items-center justify-center absolute top-0 z-20', 'left-0', 'bg-white text-blue-500 w-12 shadow-md rounded-none', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 )') // Flex and absolute positioning styles. + }, + nextButton: { + className: classNames('h-full flex items-center justify-center absolute top-0 z-20', 'right-0', 'bg-white text-blue-500 w-12 shadow-md rounded-none', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 ') // Flex and absolute positioning styles. + }, + nav: { + className: classNames('flex flex-1 list-none m-0 p-0', 'bg-white border border-gray-300 border-0 border-b-2', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 ') // Flex, list, margin, padding, and border styles. + }, + tabpanel: { + header: ({ props }) => ({ + className: classNames('mr-0', { 'cursor-default pointer-events-none select-none user-select-none opacity-60': props?.disabled }) // Margin and condition-based styles. + }), + headerAction: ({ parent, context }) => ({ + className: classNames( + 'items-center cursor-pointer flex overflow-hidden relative select-none text-decoration-none user-select-none', // Flex and overflow styles. + 'border-b-2 p-5 font-bold rounded-t-lg transition-shadow duration-200 m-0', // Border, padding, font, and transition styles. + 'transition-colors duration-200', // Transition duration style. + 'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // Focus styles. + { + 'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80': + parent.state.d_activeIndex !== context.index, // Condition-based hover styles. + 'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': parent.state.d_activeIndex === context.index // Condition-based active styles. + } + ), + style: { marginBottom: '-2px' } // Negative margin style. + }), + headerTitle: { + className: classNames('leading-none whitespace-nowrap') // Leading and whitespace styles. + }, + content: { + className: classNames('bg-white p-5 border-0 text-gray-700 rounded-bl-2xl rounded-br-2xl', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80') // Background, padding, border, and text styles. + } + } + } +} + ` + }; + + const code2 = { + javascript: ` +import React from 'react'; +import { TabView, TabPanel } from 'primereact/tabview'; + +export default function UnstyledDemo() { + return ( +
+ + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+ + +

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, + eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo + enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui + ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +

+ + +

+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti + quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in + culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. + Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. +

+ + + +
+ ) +} + ` + }; + + return ( + <> + +

+ PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '} + Tailwind Customization section for an example. +

+ +

A playground sample with the pre-built Tailwind theme.

+ + + + ); +} diff --git a/pages/splitter/index.js b/pages/splitter/index.js index 0399b1797c..39eeeb614b 100644 --- a/pages/splitter/index.js +++ b/pages/splitter/index.js @@ -8,6 +8,8 @@ import { PTDoc } from '../../components/doc/splitter/pt/ptdoc'; import { Wireframe } from '../../components/doc/splitter/pt/wireframe'; import { SizeDoc } from '../../components/doc/splitter/sizedoc'; import { StyleDoc } from '../../components/doc/splitter/styledoc'; +import { StyledDoc } from '../../components/doc/splitter/theming/styleddoc'; +import { TailwindDoc } from '../../components/doc/splitter/theming/tailwinddoc'; import { VerticalDoc } from '../../components/doc/splitter/verticaldoc'; const SplitterDemo = () => { @@ -72,7 +74,27 @@ const SplitterDemo = () => { } ]; - return ; + const themingDocs = [ + { + id: 'styled', + label: 'Styled', + component: StyledDoc + }, + { + id: 'unstyled', + label: 'Unstyled', + description: 'Theming is implemented with the pass through properties in unstyled mode.', + children: [ + { + id: 'tailwind', + label: 'Tailwind', + component: TailwindDoc + } + ] + } + ]; + + return ; }; export default SplitterDemo; diff --git a/pages/tabview/index.js b/pages/tabview/index.js index b8598d7273..16aa6a0aa7 100644 --- a/pages/tabview/index.js +++ b/pages/tabview/index.js @@ -1,3 +1,4 @@ +import DocApiTable from '../../components/doc/common/docapitable'; import { DocComponent } from '../../components/doc/common/doccomponent'; import { AccessibilityDoc } from '../../components/doc/tabview/accessibilitydoc'; import { BasicDoc } from '../../components/doc/tabview/basicdoc'; @@ -6,12 +7,13 @@ import { ControlledDoc } from '../../components/doc/tabview/controlleddoc'; import { DisabledDoc } from '../../components/doc/tabview/disableddoc'; import { HeaderIconDoc } from '../../components/doc/tabview/headericondoc'; import { ImportDoc } from '../../components/doc/tabview/importdoc'; +import { PTDoc } from '../../components/doc/tabview/pt/ptdoc'; +import { Wireframe } from '../../components/doc/tabview/pt/wireframe'; import { ScrollableDoc } from '../../components/doc/tabview/scrollabledoc'; import { StyleDoc } from '../../components/doc/tabview/styledoc'; import { TemplateDoc } from '../../components/doc/tabview/templatedoc'; -import { Wireframe } from '../../components/doc/tabview/pt/wireframe'; -import { PTDoc } from '../../components/doc/tabview/pt/ptdoc'; -import DocApiTable from '../../components/doc/common/docapitable'; +import { StyledDoc } from '../../components/doc/tabview/theming/styleddoc'; +import { TailwindDoc } from '../../components/doc/tabview/theming/tailwinddoc'; const TabViewDemo = () => { const docs = [ @@ -90,7 +92,38 @@ const TabViewDemo = () => { } ]; - return ; + const themingDocs = [ + { + id: 'styled', + label: 'Styled', + component: StyledDoc + }, + { + id: 'unstyled', + label: 'Unstyled', + description: 'Theming is implemented with the pass through properties in unstyled mode.', + children: [ + { + id: 'tailwind', + label: 'Tailwind', + component: TailwindDoc + } + ] + } + ]; + + return ( + + ); }; export default TabViewDemo;