Aller au contenu principal

Styled Div Components

Description​

The Div component is a styled wrapper based on styled.div from Emotion. It provides a flexible and reusable way to apply styles consistently across different UI elements. The library also includes multiple predefined Div components for various use cases.

Props​

PropTypeDefaultDescription
displaystringblockDefines the CSS display property. Supports 'flex', 'grid', etc.
flexDirection'row' | 'row-reverse' | 'column' | 'column-reverse'undefinedSets the flex direction when using flexbox.
justifyContentstringundefinedAligns children within the div along the main axis.
alignItemsstringundefinedAligns children within the div along the cross-axis.
gapstring, numberundefinedSpecifies the spacing between child elements.
paddingstring, numberundefinedDefines padding inside the div.
marginstring, numberundefinedDefines margin outside the div.
position'static', 'relative', 'absolute', 'fixed', 'sticky'undefinedSets the CSS positioning of the div.
widthstring, numberundefinedDefines the width of the div.
elevationnumber0Applies Material-like shadow elevation to the div (0-5 levels supported).

Example Usage​

Basic Styled Div​

import { Div } from '@nomana-it/liberty-core';

export const StyledDivExample = () => {
  return (
    <Div display="flex" justifyContent="center" alignItems="center" padding="16px" background="#f0f0f0">
      This is a styled div with flexbox properties.
    </Div>
  );
};

Predefined Styled Components​

Liberty Core provides a collection of predefined styled Div components to simplify UI development.

General Styled Divs​

  • Div
  • Div_Users
  • Div_UISettings
  • Div_AppsLogin
  • Div_ColumnsFilter
  • Div_Export
  • Div_Loading
  • Div_Login
  • Div_AutoComplete
  • Div_AutoCompleteInput
  • Div_FormsToolsCard
  • Div_ContentWrapper

Dialog and Widget Components​

  • Div_DialogToolbar
  • Div_DialogToolbarButtons
  • Div_DialogToolbarButtonsEnd
  • Div_DialogWidget
  • Div_DialogWidgetTitle
  • Div_DialogWidgetTitleButtons
  • Div_DialogWidgetContent
  • Div_DialogWidgetButtons
  • Div_DialogTabPanel

Table and Grid Components​

  • Div_TableToolbar
  • Div_TableToolbarButtons
  • Div_TableProgress
  • Div_TableHeaderContent
  • Div_TableHeaderButtons
  • Div_TableHeaderReisze
  • Div_TableResultsOverlay
  • Div_TableFooter
  • Div_TableFooterContent
  • Div_TableCell
  • Div_TableGrid
  • Div_TableGridContent
  • Div_TableTreeTitle
  • Div_TableList
  • Div_TableFilters
  • Div_TableToolbarButtons
  • Div_TableExpander
  • Div_TableSearch
  • Div_TableColumnsChooser
  • Div_TableAllColumnsChooser

Chat and AI Components​

  • Div_ChatContent
  • Div_ChatActions
  • Div_ChatScrollButtons
  • Div_FormsChat
  • Div_InputChat
  • Div_AIProgress
  • Div_AIError

Header and Navigation Components​

  • Div_Header
  • Div_HeaderDrawer
  • Div_HeaderIcons
  • Div_HeaderToolbar
  • Div_HeaderAppBar

Drawer Components​

  • Div_DrawerOverlay
  • Div_DrawerContainer
  • Div_DrawerContent
  • Div_DrawerHeader
  • Div_DrawerPanel
  • Div_DrawerPanelDynamic

Specialized UI Components​

  • Div_ExportGroup
  • Div_Markdown
  • Div_Inline
  • Div_TableFab
  • Div_ResizeBox
  • Div_ColorPicker
  • Div_ColorPickerPreview
  • Div_InputColor
  • Div_ListItem
  • Div_ListItemText
  • Div_FormsListView
  • Div_StyledGridOverlay
  • Div_ChatTitle
  • Div_DialogWidgetTitle
  • Div_DialogWidgetButtons
  • Div_TabPanelContent
  • Div_AppsLayout
  • Div_AppsTabsHeader
  • Div_AppsDialogTabPanel


## Useful Links
🔗 **GitHub Repository (Core):** [Liberty Core](https://github.com/fblettner/liberty-core/)  
🔗 **GitHub Repository (Test Project):** [Liberty Test](https://github.com/fblettner/liberty-test/)  
📖 **Live Documentation:** [Liberty Core Docs](https://docs.nomana-it.fr/liberty-core/)  
💖 **Sponsor & Support:** [Sponsor Liberty Core](https://github.com/sponsors/fblettner)