Aller au contenu principal

Styled Paper Components

Description

The Paper components are predefined styled wrappers based on the Div component. They provide structured and reusable layouts for different UI sections, such as login forms, dashboards, and dialogs.

Styled Paper Components

Component NameDescription
Paper_LoginA styled paper container for login forms.
Paper_TableA full-width, full-height wrapper for tables.
Paper_TableDialogA paper container for table dialogs.
Paper_DialogsA flexible wrapper for dialog sections.
Paper_DashboardA structured container for dashboard sections.
Paper_UploadFileA wrapper specifically for file upload areas.
Paper_FormsAIA styled container for FormsAI interface.
Paper_TableToolbarA sticky toolbar for tables.
Paper_DialogToolbarA styled toolbar for dialogs.
Paper_FormsChartA paper wrapper for charts.
Paper_PopupA popup-style modal container.
Paper_FormsChatA styled wrapper for FormsChat messages.
Paper_TableTreeA structured container for tree-like table structures.

Example Usage

Basic Styled Paper Components

import { Paper_Login, Paper_Dashboard } from '@nomana-it/liberty-core';

export const PaperExample = () => {
return (
<>
<Paper_Login>
<h2>Login Form</h2>
</Paper_Login>

<Paper_Dashboard>
<h1>Dashboard Content</h1>
</Paper_Dashboard>
</>
);
};

Notes

  • These components ensure consistent layout structure across the application.
  • Paper_Login provides a semi-transparent background with adaptive styling.
  • Paper_Table and Paper_TableDialog are optimized for data tables.
  • Paper_FormsAI and Paper_FormsChat enable intelligent form processing and chat interactions.

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core