@ansible/ansible-ui-framework 0.0.285 → 0.0.287
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +76 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,13 +1,87 @@
|
|
|
1
1
|
# Ansible UI Framework
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A framework for building responsive web applications using [PatternFly](https://www.patternfly.org).
|
|
4
4
|
|
|
5
5
|
Developed by the Ansible UI developers.
|
|
6
6
|
|
|
7
|
+
While PatternFly provides the building blocks and guidance on building applications,
|
|
8
|
+
PatternFly does not manage state for the developer.
|
|
9
|
+
|
|
10
|
+
This framework adds state management and abstractions for common patterns of application development.
|
|
11
|
+
|
|
12
|
+
The framework:
|
|
13
|
+
|
|
14
|
+
- does not use any state libraries other than the built in react context state management.
|
|
15
|
+
- does not assume any specific translation libraries, but does provide a hook for internal translations.
|
|
16
|
+
- does not assume any specific navigation libraries, but does provide a hook for internal navigation.
|
|
17
|
+
|
|
18
|
+
There is an [Ansible UI Framework Demo](https://github.com/jamestalton/ansible-ui-framework-demo) repo showing an example of using the framework.
|
|
19
|
+
|
|
7
20
|
## Getting Started
|
|
8
21
|
|
|
9
|
-
###
|
|
22
|
+
### Install the NPM package
|
|
10
23
|
|
|
11
24
|
```
|
|
12
25
|
npm install @ansible/ansible-ui-framework
|
|
13
26
|
```
|
|
27
|
+
|
|
28
|
+
### Add PageFramework to your application
|
|
29
|
+
|
|
30
|
+
Near the top of your application add the `<PageFramework>` component.
|
|
31
|
+
|
|
32
|
+
The `PageFramework` component bundles up all the context providers in the Ansible UI framework in a convienent component for framework consumers. Examples of internal context providers are translations, navigation, settings, alerts, and dialogs.
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
<PageFramework navigate={navigate}>...</PageFramework>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Use PageLayout in your pages
|
|
39
|
+
|
|
40
|
+
The `PageLayout` is used at the start of each page. It provides a consistent layout of page elements. It enables responsive layout based on the size of the window.
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
(
|
|
44
|
+
<Page>
|
|
45
|
+
<PageLayout>
|
|
46
|
+
<PageHeader {...}/>
|
|
47
|
+
<PageBody> ... </PageBody>
|
|
48
|
+
</PageLayout>
|
|
49
|
+
</Page>
|
|
50
|
+
)
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Use PageHeader at the top of your pages
|
|
54
|
+
|
|
55
|
+
The `PageHeader` is used at the top of each page. It provides a consistent layout of header elements. It supports responsive layout based on the size of the window.
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
(
|
|
59
|
+
<Page>
|
|
60
|
+
<PageLayout>
|
|
61
|
+
<PageHeader
|
|
62
|
+
breadcrumbs={breadcrumbs}
|
|
63
|
+
title="Page title"
|
|
64
|
+
titleHelp="Page title popover description."
|
|
65
|
+
description="Page description"
|
|
66
|
+
headerActions={actions}
|
|
67
|
+
/>
|
|
68
|
+
...
|
|
69
|
+
</PageLayout>
|
|
70
|
+
</Page>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
#### Adding a page with a table
|
|
74
|
+
|
|
75
|
+
The `PageTable` handles the logic for tables on a page. It supports responsive layout based on the size of the window.
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
<PageTable<User>
|
|
79
|
+
toolbarFilters={toolbarFilters}
|
|
80
|
+
toolbarActions={toolbarActions}
|
|
81
|
+
tableColumns={tableColumns}
|
|
82
|
+
rowActions={rowActions}
|
|
83
|
+
{...view}
|
|
84
|
+
/>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
See the [Table Guide](./docs/tables.md) for details.
|
package/package.json
CHANGED