@ansible/ansible-ui-framework 0.0.343 → 0.0.345
Sign up to get free protection for your applications and to get access to all the features.
- package/docs/{BulkActionDialog.md → components/BulkActionDialog.md} +1 -1
- package/docs/{PageFramework.md → components/PageFramework.md} +1 -1
- package/docs/{PageHeader.md → components/PageHeader.md} +1 -1
- package/docs/{PageLayout.md → components/PageLayout.md} +1 -1
- package/docs/components/PageTable.md +5 -0
- package/docs/guides/GettingStarted.md +90 -0
- package/docs/{PageTableGuide.md → guides/PageTableGuide.md} +0 -0
- package/package.json +1 -1
- package/docs/GettingStarted.md +0 -90
- package/docs/PageTable.md +0 -5
- package/docs/index.md +0 -19
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
[Ansible UI Framework](Framework.md) ▸ [Guides](Guides.md) ▸ Getting Started
|
|
2
|
+
|
|
3
|
+
# Getting Started
|
|
4
|
+
|
|
5
|
+
## Install the NPM package
|
|
6
|
+
|
|
7
|
+
NPM Package: [@ansible/ansible-ui-framework](https://www.npmjs.com/package/@ansible/ansible-ui-framework)
|
|
8
|
+
|
|
9
|
+
```
|
|
10
|
+
npm install @ansible/ansible-ui-framework
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Add the PageFramework to your application
|
|
14
|
+
|
|
15
|
+
Near the top of your application add the [PageFramework](components/PageFramework.md) component.
|
|
16
|
+
|
|
17
|
+
This component adds the state management needed by the framework.
|
|
18
|
+
|
|
19
|
+
## Use the framework in your application pages
|
|
20
|
+
|
|
21
|
+
### Use PageLayout to control the layout in your pages
|
|
22
|
+
|
|
23
|
+
The [PageLayout](components/PageLayout.md) is used as the container for the contents of the page. It enables page components to leverage full page layout and scrolling of sub content. An example is a full page table where the page header, toolbar, column headers, and pagination stay fixed, but the rows of the table can scroll.
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
<Page>
|
|
27
|
+
<PageLayout>
|
|
28
|
+
<PageHeader ... />
|
|
29
|
+
...
|
|
30
|
+
</PageLayout>
|
|
31
|
+
</Page>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### Use PageHeader for the heading of your pages
|
|
35
|
+
|
|
36
|
+
The [PageHeader](components/PageHeader.md) is used at the top of each page. It provides a consistent layout of header elements.
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
<Page>
|
|
40
|
+
<PageLayout>
|
|
41
|
+
<PageHeader ... />
|
|
42
|
+
...
|
|
43
|
+
</PageLayout>
|
|
44
|
+
</Page>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
### Add content to the page
|
|
48
|
+
|
|
49
|
+
#### Table Pages
|
|
50
|
+
|
|
51
|
+
For pages containing a table, use the [PageTable](components/PageTable.md) component. The PageTable support table, list, and card views of the data.
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
<Page>
|
|
55
|
+
<PageLayout>
|
|
56
|
+
<PageHeader ... />
|
|
57
|
+
<PageTable ... />
|
|
58
|
+
</PageLayout>
|
|
59
|
+
</Page>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
<!-- #### Form Pages
|
|
63
|
+
|
|
64
|
+
For pages containing an input form, use the [PageForm](components/PageForm.md) component.
|
|
65
|
+
|
|
66
|
+
```tsx
|
|
67
|
+
<Page>
|
|
68
|
+
<PageLayout>
|
|
69
|
+
<PageHeader ... />
|
|
70
|
+
<PageForm ... />
|
|
71
|
+
</PageLayout>
|
|
72
|
+
</Page>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
#### Detail Pages
|
|
76
|
+
|
|
77
|
+
TODO
|
|
78
|
+
|
|
79
|
+
#### Page sub navigation
|
|
80
|
+
|
|
81
|
+
TODO -->
|
|
82
|
+
|
|
83
|
+
### Other Useful Components
|
|
84
|
+
|
|
85
|
+
<!-- - [PageAlertToaster](components/PageAlertToaster.md) -->
|
|
86
|
+
|
|
87
|
+
- [BulkActionDialog](components/BulkActionDialog.md)
|
|
88
|
+
<!-- - [BulkConfirmationDialog](components/BulkConfirmationDialog.md) -->
|
|
89
|
+
<!-- - [SelectDialog](components/SelectDialog.md) -->
|
|
90
|
+
<!-- - [SelectMultipleDialog](components/SelectMultipleDialog.md) -->
|
|
File without changes
|
package/package.json
CHANGED
package/docs/GettingStarted.md
DELETED
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
[Ansible UI Framework](Framework.md) ▸ [Guides](Guides.md) ▸ Getting Started
|
|
2
|
-
|
|
3
|
-
# Getting Started
|
|
4
|
-
|
|
5
|
-
## Install the NPM package
|
|
6
|
-
|
|
7
|
-
NPM Package: [@ansible/ansible-ui-framework](https://www.npmjs.com/package/@ansible/ansible-ui-framework)
|
|
8
|
-
|
|
9
|
-
```
|
|
10
|
-
npm install @ansible/ansible-ui-framework
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
## Add the PageFramework to your application
|
|
14
|
-
|
|
15
|
-
Near the top of your application add the [PageFramework](PageFramework.md) component.
|
|
16
|
-
|
|
17
|
-
This component adds the state management needed by the framework.
|
|
18
|
-
|
|
19
|
-
## Use the framework in your application pages
|
|
20
|
-
|
|
21
|
-
### Use PageLayout to control the layout in your pages
|
|
22
|
-
|
|
23
|
-
The [PageLayout](PageLayout.md) is used as the container for the contents of the page. It enables page components to leverage full page layout and scrolling of sub content. An example is a full page table where the page header, toolbar, column headers, and pagination stay fixed, but the rows of the table can scroll.
|
|
24
|
-
|
|
25
|
-
```tsx
|
|
26
|
-
<Page>
|
|
27
|
-
<PageLayout>
|
|
28
|
-
<PageHeader ... />
|
|
29
|
-
...
|
|
30
|
-
</PageLayout>
|
|
31
|
-
</Page>
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
### Use PageHeader for the heading of your pages
|
|
35
|
-
|
|
36
|
-
The [PageHeader](PageHeader.md) is used at the top of each page. It provides a consistent layout of header elements.
|
|
37
|
-
|
|
38
|
-
```tsx
|
|
39
|
-
<Page>
|
|
40
|
-
<PageLayout>
|
|
41
|
-
<PageHeader ... />
|
|
42
|
-
...
|
|
43
|
-
</PageLayout>
|
|
44
|
-
</Page>
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
### Add content to the page
|
|
48
|
-
|
|
49
|
-
#### Table Pages
|
|
50
|
-
|
|
51
|
-
For pages containing a table, use the [PageTable](PageTable.md) component. The PageTable support table, list, and card views of the data.
|
|
52
|
-
|
|
53
|
-
```tsx
|
|
54
|
-
<Page>
|
|
55
|
-
<PageLayout>
|
|
56
|
-
<PageHeader ... />
|
|
57
|
-
<PageTable ... />
|
|
58
|
-
</PageLayout>
|
|
59
|
-
</Page>
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
#### Form Pages
|
|
63
|
-
|
|
64
|
-
For pages containing an input form, use the [PageForm](PageForm.md) component.
|
|
65
|
-
|
|
66
|
-
```tsx
|
|
67
|
-
<Page>
|
|
68
|
-
<PageLayout>
|
|
69
|
-
<PageHeader ... />
|
|
70
|
-
<PageForm ... />
|
|
71
|
-
</PageLayout>
|
|
72
|
-
</Page>
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
#### Detail Pages
|
|
76
|
-
|
|
77
|
-
TODO
|
|
78
|
-
|
|
79
|
-
#### Page sub navigation
|
|
80
|
-
|
|
81
|
-
TODO
|
|
82
|
-
|
|
83
|
-
### Other Useful Components
|
|
84
|
-
|
|
85
|
-
<!-- - [PageAlertToaster](PageAlertToaster.md) -->
|
|
86
|
-
|
|
87
|
-
- [BulkActionDialog](BulkActionDialog.md)
|
|
88
|
-
<!-- - [BulkConfirmationDialog](BulkConfirmationDialog.md) -->
|
|
89
|
-
<!-- - [SelectDialog](SelectDialog.md) -->
|
|
90
|
-
<!-- - [SelectMultipleDialog](SelectMultipleDialog.md) -->
|
package/docs/PageTable.md
DELETED
package/docs/index.md
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
Ansible UI Framework
|
|
2
|
-
|
|
3
|
-
# Ansible UI Framework
|
|
4
|
-
|
|
5
|
-
A framework for building applications using [PatternFly](https://www.patternfly.org).
|
|
6
|
-
|
|
7
|
-
- [Getting Started](GettingStarted.md)
|
|
8
|
-
- [Guides](Guides.md)
|
|
9
|
-
- [Components](Components.md)
|
|
10
|
-
|
|
11
|
-
While PatternFly provides the building blocks and guidance on building applications, PatternFly does not manage state for the developer. This framework adds state management and abstractions for common patterns of application development.
|
|
12
|
-
|
|
13
|
-
This framework:
|
|
14
|
-
|
|
15
|
-
- does not use any state libraries other than the built in react context state management.
|
|
16
|
-
- does not assume any specific translation libraries, but does provide a hook for internal translations.
|
|
17
|
-
- does not assume any specific navigation libraries, but does provide a hook for internal navigation.
|
|
18
|
-
|
|
19
|
-
There is an [Ansible UI Framework Demo](https://github.com/jamestalton/ansible-ui-framework-demo) repo showing an example of using the framework.
|