@ansible/ansible-ui-framework 0.0.192 → 0.0.193
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +3 -3
- package/docs/framework.md +97 -0
- package/docs/{Table-Guide.md → tables.md} +0 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
# Ansible UI Framework
|
|
1
|
+
# Ansible UI Framework [](https://www.npmjs.com/package/@ansible/ansible-ui-framework)
|
|
2
2
|
|
|
3
|
-
Framework for building web applications using PatternFly.
|
|
3
|
+
Framework for building consistent responsive web applications using [PatternFly](https://www.patternfly.org).
|
|
4
4
|
|
|
5
|
-
Developed by the Ansible UI developers
|
|
5
|
+
Developed by the Ansible UI developers.
|
|
6
6
|
|
|
7
7
|
## Getting Started
|
|
8
8
|
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
# Framework
|
|
2
|
+
|
|
3
|
+
A framework for creating performant, consistent, and responsive web applications using [PatternFly](https://www.patternfly.org).
|
|
4
|
+
|
|
5
|
+
The framework is made up of high level components using PatternFly components underneath.
|
|
6
|
+
This allows the framework to adjust the web application for responsive layout.
|
|
7
|
+
Basic structure of the framework can be seen in the tree below.
|
|
8
|
+
|
|
9
|
+
- [PageLayout](#pagelayout)
|
|
10
|
+
- [PageHeader](#pageheader)
|
|
11
|
+
- [PageBody](#pagebody)
|
|
12
|
+
- [PageTable](#pagetable)
|
|
13
|
+
- [PageTabs](#pagetabs)
|
|
14
|
+
- [PageForm](#pageform)
|
|
15
|
+
|
|
16
|
+
## PageLayout
|
|
17
|
+
|
|
18
|
+
The PageLayout is used at the start of each page. It provides a consistent layout of header elements. It supports responsive layout based on the size of the window.
|
|
19
|
+
|
|
20
|
+
```tsx
|
|
21
|
+
(
|
|
22
|
+
<Page>
|
|
23
|
+
<PageLayout>
|
|
24
|
+
<PageHeader {...}/>
|
|
25
|
+
<PageBody> ... </PageBody>
|
|
26
|
+
</PageLayout>
|
|
27
|
+
</Page>
|
|
28
|
+
)
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### PageHeader
|
|
32
|
+
|
|
33
|
+
The PageHeader is used at the start of each page. It provides a consistent layout of header elements. It supports responsive layout based on the size of the window.
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
<Page>
|
|
37
|
+
<PageHeader
|
|
38
|
+
breadcrumbs={breadcrumbs}
|
|
39
|
+
title="Page title"
|
|
40
|
+
titleHelp="Page title popover description."
|
|
41
|
+
description="Page description"
|
|
42
|
+
headerActions={actions}
|
|
43
|
+
/>
|
|
44
|
+
</Page>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
| Property | Description |
|
|
48
|
+
| -------------: | -------------------------------------------------------------------------- |
|
|
49
|
+
| breadcrumbs | The breadcrumbs for the page. |
|
|
50
|
+
| title | The title of the page. |
|
|
51
|
+
| titleHelp | The help for the title popover. |
|
|
52
|
+
| titleHelpTitle | The title of help popover. |
|
|
53
|
+
| description | The description of the page. |
|
|
54
|
+
| actions | The actions for the page. Actions are used on details pages. |
|
|
55
|
+
| controls | Support for extra page controls that show up at the top right of the page. |
|
|
56
|
+
|
|
57
|
+
### PageBody
|
|
58
|
+
|
|
59
|
+
The page table handles the responsive layout of the body section of the page.
|
|
60
|
+
|
|
61
|
+
#### PageTable
|
|
62
|
+
|
|
63
|
+
The page table handles the logic for tables on a page.
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
<PageTable<User>
|
|
67
|
+
toolbarFilters={toolbarFilters}
|
|
68
|
+
toolbarActions={toolbarActions}
|
|
69
|
+
tableColumns={tableColumns}
|
|
70
|
+
rowActions={rowActions}
|
|
71
|
+
{...view}
|
|
72
|
+
/>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
#### PageTabs
|
|
76
|
+
|
|
77
|
+
The page tabs are used for details pages in the application.
|
|
78
|
+
|
|
79
|
+
```tsx
|
|
80
|
+
(
|
|
81
|
+
<Page>
|
|
82
|
+
<PageHeader ... />
|
|
83
|
+
<PageTabs >
|
|
84
|
+
<PageTab title="Tab title" >
|
|
85
|
+
...
|
|
86
|
+
</PageTab>
|
|
87
|
+
<PageTab title="Tab title" >
|
|
88
|
+
...
|
|
89
|
+
</PageTab>
|
|
90
|
+
</PageTabs>
|
|
91
|
+
</Page>
|
|
92
|
+
)
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
#### PageForm
|
|
96
|
+
|
|
97
|
+
The page form handles form input on a page. It uses [react-hook-form](https://react-hook-form.com/) for performance.
|
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ansible/ansible-ui-framework",
|
|
3
|
-
"description": "Framework for building web applications using PatternFly.",
|
|
4
|
-
"version": "0.0.
|
|
3
|
+
"description": "Framework for building consistent responsive web applications using PatternFly.",
|
|
4
|
+
"version": "0.0.193",
|
|
5
5
|
"author": "Red Hat",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"repository": {
|