@ansible/ansible-ui-framework 0.0.288 → 0.0.290
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +2 -2
- package/cjs/PageLayout.d.ts +1 -1
- package/cjs/PageLayout.js +10 -7
- package/package.json +1 -1
package/README.md
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
# Ansible UI Framework
|
2
2
|
|
3
|
-
[NPM Package](https://www.npmjs.com/package/@ansible/ansible-ui-framework)
|
3
|
+
[NPM Package: @ansible/ansible-ui-framework](https://www.npmjs.com/package/@ansible/ansible-ui-framework)
|
4
4
|
|
5
5
|
A framework for building responsive web applications using [PatternFly](https://www.patternfly.org).
|
6
6
|
|
@@ -54,7 +54,7 @@ The `PageLayout` is used at the start of each page. It provides a consistent lay
|
|
54
54
|
|
55
55
|
### Use PageHeader at the top of your pages
|
56
56
|
|
57
|
-
The
|
57
|
+
The [PageHeader](https://github.com/ansible/ansible-ui/blob/main/framework/PageHeader.tsx) 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.
|
58
58
|
|
59
59
|
```tsx
|
60
60
|
(
|
package/cjs/PageLayout.d.ts
CHANGED
package/cjs/PageLayout.js
CHANGED
@@ -1,4 +1,8 @@
|
|
1
1
|
"use strict";
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
4
|
+
return cooked;
|
5
|
+
};
|
2
6
|
var __assign = (this && this.__assign) || function () {
|
3
7
|
__assign = Object.assign || function(t) {
|
4
8
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
@@ -32,10 +36,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
32
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
33
37
|
exports.PageLayout = void 0;
|
34
38
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
39
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
35
40
|
var ErrorBoundary_1 = __importDefault(require("./components/ErrorBoundary"));
|
36
41
|
var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
|
37
42
|
/**
|
38
|
-
* PageLayout enables the
|
43
|
+
* PageLayout enables the layout of the page to be responsive.
|
39
44
|
*
|
40
45
|
* @example
|
41
46
|
* <Page>
|
@@ -47,11 +52,9 @@ var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
|
|
47
52
|
*/
|
48
53
|
function PageLayout(props) {
|
49
54
|
var _a = __read((0, useFrameworkTranslations_1.useFrameworkTranslations)(), 1), translations = _a[0];
|
50
|
-
return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.default, __assign({ message: translations.errorText }, { children: (0, jsx_runtime_1.jsx)(
|
51
|
-
display: 'flex',
|
52
|
-
flexDirection: 'column',
|
53
|
-
height: '100%',
|
54
|
-
maxHeight: '100%',
|
55
|
-
} }, { children: props.children })) })));
|
55
|
+
return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.default, __assign({ message: translations.errorText }, { children: (0, jsx_runtime_1.jsx)(StyledLayout, { children: props.children }) })));
|
56
56
|
}
|
57
57
|
exports.PageLayout = PageLayout;
|
58
|
+
var StyledLayout = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flexdirection: column;\n height: 100%;\n maxheight: 100%;\n"], ["\n display: flex;\n flexdirection: column;\n height: 100%;\n maxheight: 100%;\n"])));
|
59
|
+
StyledLayout.displayName = 'StyledLayout';
|
60
|
+
var templateObject_1;
|
package/package.json
CHANGED