Skip to content

Commit 8381d66

Browse files
fblettnerfblettner
committed
Add styled elements
1 parent ca016c0 commit 8381d66

File tree

93 files changed

+15329
-92
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

93 files changed

+15329
-92
lines changed

‎docs/liberty/core/components/styled-elements/button.md

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
# Styled Button Components
2+
3+
## Description
4+
The `Button` component in Liberty Core is a styled button that provides consistent theming and behavior across applications. The framework also includes multiple predefined `Button` components for specific use cases.
5+
6+
## Props
7+
| Prop | Type | Default | Description |
8+
|-----------------|-------------------|----------|-----------------------------------------------|
9+
| `variant` | `"text", "contained", "outlined"` | `"text"` | Defines the button's appearance. |
10+
| `disabled` | `boolean` | `false` | Disables the button when set to true. |
11+
| `size` | `"small", "medium", "large"`, `"medium"` | Defines the size of the button. |
12+
| `onClick` | `() => void` | `undefined` | Callback function triggered when clicked. |
13+
14+
## Example Usage
15+
16+
### Basic Styled Button
17+
```typescript
18+
import { Button } from '@nomana-it/liberty-core';
19+
20+
export const StyledButtonExample = () => {
21+
return (
22+
<Button variant="contained">
23+
Click Me
24+
</Button>
25+
);
26+
};
27+
```
28+
29+
---
30+
31+
# Predefined Styled Buttons
32+
33+
Liberty Core provides a collection of predefined styled `Button` components to simplify UI development.
34+
35+
### **General Styled Buttons**
36+
- `Button_Login`
37+
- `Button_UISettings`
38+
- `Button_TableImport`
39+
- `Button_Tools`
40+
- `Button_Popper`
41+
42+
### **Detailed Predefined Buttons**
43+
44+
#### **Button_Login**
45+
Used for login forms with hover effects and scaling.
46+
47+
```tsx
48+
import { Button_Login } from '@nomana-it/liberty-core';
49+
50+
<Button_Login variant="contained">
51+
Login
52+
</Button_Login>
53+
```
54+
55+
#### **Button_UISettings**
56+
Styled button for user interface settings.
57+
58+
```tsx
59+
import { Button_UISettings } from '@nomana-it/liberty-core';
60+
61+
<Button_UISettings variant="outlined">
62+
Settings
63+
</Button_UISettings>
64+
```
65+
66+
#### **Button_TableImport**
67+
A button designed for importing data into tables.
68+
69+
```tsx
70+
import { Button_TableImport } from '@nomana-it/liberty-core';
71+
72+
<Button_TableImport variant="contained">
73+
Import Data
74+
</Button_TableImport>
75+
```
76+
77+
#### **Button_Tools**
78+
A prominent button for tool-related actions with custom padding and border-radius.
79+
80+
```tsx
81+
import { Button_Tools } from '@nomana-it/liberty-core';
82+
83+
<Button_Tools variant="contained">
84+
Tools
85+
</Button_Tools>
86+
```
87+
88+
#### **Button_Popper**
89+
A floating button positioned at the bottom-right corner of the UI.
90+
91+
```tsx
92+
import { Button_Popper } from '@nomana-it/liberty-core';
93+
94+
<Button_Popper variant="contained">
95+
Popper Action
96+
</Button_Popper>
97+
```
98+
99+
## Useful Links
100+
🔗 **GitHub Repository (Core):** [Liberty Core](https://github.com/fblettner/liberty-core/)
101+
🔗 **GitHub Repository (Test Project):** [Liberty Test](https://github.com/fblettner/liberty-test/)
102+
📖 **Live Documentation:** [Liberty Core Docs](https://docs.nomana-it.fr/liberty-core/)
103+
💖 **Sponsor & Support:** [Sponsor Liberty Core](https://github.com/sponsors/fblettner)

‎docs/liberty/core/components/styled-elements/div.md

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
# Styled Div Components
2+
3+
## Description
4+
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.
5+
6+
## Props
7+
| Prop | Type | Default | Description |
8+
|-----------------|-------------------|----------|-----------------------------------------------|
9+
| `display` | `string` | `block` | Defines the CSS display property. Supports 'flex', 'grid', etc. |
10+
| `flexDirection` | `'row' | 'row-reverse' | 'column' | 'column-reverse'` | `undefined` | Sets the flex direction when using flexbox. |
11+
| `justifyContent` | `string` | `undefined` | Aligns children within the div along the main axis. |
12+
| `alignItems` | `string` | `undefined` | Aligns children within the div along the cross-axis. |
13+
| `gap` | `string, number` | `undefined` | Specifies the spacing between child elements. |
14+
| `padding` | `string, number` | `undefined` | Defines padding inside the div. |
15+
| `margin` | `string, number` | `undefined` | Defines margin outside the div. |
16+
| `position` | `'static', 'relative', 'absolute', 'fixed', 'sticky'` | `undefined` | Sets the CSS positioning of the div. |
17+
| `width` | `string, number` | `undefined` | Defines the width of the div. |
18+
| `elevation` | `number` | `0` | Applies Material-like shadow elevation to the div (0-5 levels supported). |
19+
20+
## Example Usage
21+
22+
### Basic Styled Div
23+
```tsx
24+
import { Div } from '@nomana-it/liberty-core';
25+
26+
export const StyledDivExample = () => {
27+
return (
28+
<Div display="flex" justifyContent="center" alignItems="center" padding="16px" background="#f0f0f0">
29+
This is a styled div with flexbox properties.
30+
</Div>
31+
);
32+
};
33+
```
34+
35+
### Predefined Styled Components
36+
37+
Liberty Core provides a collection of predefined styled `Div` components to simplify UI development.
38+
39+
### **General Styled Divs**
40+
- `Div`
41+
- `Div_Users`
42+
- `Div_UISettings`
43+
- `Div_AppsLogin`
44+
- `Div_ColumnsFilter`
45+
- `Div_Export`
46+
- `Div_Loading`
47+
- `Div_Login`
48+
- `Div_AutoComplete`
49+
- `Div_AutoCompleteInput`
50+
- `Div_FormsToolsCard`
51+
- `Div_ContentWrapper`
52+
53+
### **Dialog and Widget Components**
54+
- `Div_DialogToolbar`
55+
- `Div_DialogToolbarButtons`
56+
- `Div_DialogToolbarButtonsEnd`
57+
- `Div_DialogWidget`
58+
- `Div_DialogWidgetTitle`
59+
- `Div_DialogWidgetTitleButtons`
60+
- `Div_DialogWidgetContent`
61+
- `Div_DialogWidgetButtons`
62+
- `Div_DialogTabPanel`
63+
64+
### **Table and Grid Components**
65+
- `Div_TableToolbar`
66+
- `Div_TableToolbarButtons`
67+
- `Div_TableProgress`
68+
- `Div_TableHeaderContent`
69+
- `Div_TableHeaderButtons`
70+
- `Div_TableHeaderReisze`
71+
- `Div_TableResultsOverlay`
72+
- `Div_TableFooter`
73+
- `Div_TableFooterContent`
74+
- `Div_TableCell`
75+
- `Div_TableGrid`
76+
- `Div_TableGridContent`
77+
- `Div_TableTreeTitle`
78+
- `Div_TableList`
79+
- `Div_TableFilters`
80+
- `Div_TableToolbarButtons`
81+
- `Div_TableExpander`
82+
- `Div_TableSearch`
83+
- `Div_TableColumnsChooser`
84+
- `Div_TableAllColumnsChooser`
85+
86+
### **Chat and AI Components**
87+
- `Div_ChatContent`
88+
- `Div_ChatActions`
89+
- `Div_ChatScrollButtons`
90+
- `Div_FormsChat`
91+
- `Div_InputChat`
92+
- `Div_AIProgress`
93+
- `Div_AIError`
94+
95+
### **Header and Navigation Components**
96+
- `Div_Header`
97+
- `Div_HeaderDrawer`
98+
- `Div_HeaderIcons`
99+
- `Div_HeaderToolbar`
100+
- `Div_HeaderAppBar`
101+
102+
### **Drawer Components**
103+
- `Div_DrawerOverlay`
104+
- `Div_DrawerContainer`
105+
- `Div_DrawerContent`
106+
- `Div_DrawerHeader`
107+
- `Div_DrawerPanel`
108+
- `Div_DrawerPanelDynamic`
109+
110+
### **Specialized UI Components**
111+
- `Div_ExportGroup`
112+
- `Div_Markdown`
113+
- `Div_Inline`
114+
- `Div_TableFab`
115+
- `Div_ResizeBox`
116+
- `Div_ColorPicker`
117+
- `Div_ColorPickerPreview`
118+
- `Div_InputColor`
119+
- `Div_ListItem`
120+
- `Div_ListItemText`
121+
- `Div_FormsListView`
122+
- `Div_StyledGridOverlay`
123+
- `Div_ChatTitle`
124+
- `Div_DialogWidgetTitle`
125+
- `Div_DialogWidgetButtons`
126+
- `Div_TabPanelContent`
127+
- `Div_AppsLayout`
128+
- `Div_AppsTabsHeader`
129+
- `Div_AppsDialogTabPanel`
130+
```

‎mkdocs.yml

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,9 @@ nav:
111111
- Forms Components:
112112
- Dashboard: liberty/core/components/forms-components/dashboard.md
113113
- Advanced Grid: liberty/core/components/forms-components/advanced-grid.md
114-
114+
- Styled Elements:
115+
- Button: liberty/core/components/styled-elements/button.md
116+
- Div: liberty/core/components/styled-elements/div.md
115117
- API Documentation: liberty/api/liberty-api.md
116118
- Release Notes: liberty/release-notes.md
117119
- Issues: liberty/issues.md

‎site/404.html

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2318,6 +2318,97 @@
23182318

23192319

23202320

2321+
2322+
2323+
2324+
2325+
2326+
2327+
2328+
2329+
2330+
2331+
2332+
2333+
2334+
<li class="md-nav__item md-nav__item--nested">
2335+
2336+
2337+
2338+
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_4_7" >
2339+
2340+
2341+
<label class="md-nav__link" for="__nav_2_4_7" id="__nav_2_4_7_label" tabindex="0">
2342+
2343+
2344+
<span class="md-ellipsis">
2345+
Styled Elements
2346+
2347+
</span>
2348+
2349+
2350+
<span class="md-nav__icon md-icon"></span>
2351+
</label>
2352+
2353+
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_2_4_7_label" aria-expanded="false">
2354+
<label class="md-nav__title" for="__nav_2_4_7">
2355+
<span class="md-nav__icon md-icon"></span>
2356+
Styled Elements
2357+
</label>
2358+
<ul class="md-nav__list" data-md-scrollfix>
2359+
2360+
2361+
2362+
2363+
2364+
2365+
2366+
<li class="md-nav__item">
2367+
<a href="/liberty/core/components/styled-elements/button/" class="md-nav__link">
2368+
2369+
2370+
<span class="md-ellipsis">
2371+
Button
2372+
2373+
</span>
2374+
2375+
2376+
</a>
2377+
</li>
2378+
2379+
2380+
2381+
2382+
2383+
2384+
2385+
2386+
2387+
2388+
<li class="md-nav__item">
2389+
<a href="/liberty/core/components/styled-elements/div/" class="md-nav__link">
2390+
2391+
2392+
<span class="md-ellipsis">
2393+
Div
2394+
2395+
</span>
2396+
2397+
2398+
</a>
2399+
</li>
2400+
2401+
2402+
2403+
2404+
</ul>
2405+
</nav>
2406+
2407+
</li>
2408+
2409+
2410+
2411+
23212412
</ul>
23222413
</nav>
23232414

0 commit comments

Comments
 (0)