Piral-page-layouts NPM

Piral Page Layouts ·

This is a plugin that only has a peer dependency to piral-core. What piral-page-layouts brings to the table is a set of Pilet API extensions that can be used with piral or piral-core for using different layouts on different pages.

By default, these API extensions are not integrated in piral, so you'd need to add them to your Piral instance.

Why and When

tbd

Documentation

The following functions are brought to the Pilet API.

`registerPageLayout()`

Adds the definition of a page layout to the app shell.

`unregisterPageLayout()`

Removes a page layout from the app shell. Pages using this layout will fall back to the default layout.

Usage

::: summary: For pilet authors

You can use the registerPageLayout function from the Pilet API to add a new page layout in the app shell.

Example use:

import { PiletApi } from '<name-of-piral-instance>';
import { FullscreenLayout } from './FullscreenLayout';

export function setup(piral: PiletApi) {
  piral.registerPageLayout('fullscreen', FullscreenLayout);
}

You can use the unregisterPageLayout function from the Pilet API to remove a previously added page layout from the app shell.

Example use:

import { PiletApi } from '<name-of-piral-instance>';
import { FullscreenLayout } from './FullscreenLayout';

export function setup(piral: PiletApi) {
  // first register a page layout
  piral.registerPageLayout('fullscreen', FullscreenLayout);
  // and unregister; maybe some time later?
  piral.unregisterPageLayout('fullscreen');
}

Note: A page layout is accessible across all pilets, however, only the pilet that has registerd a page layout can also unregister it. Once a page layout has been taken no other pilet can override it - it first needs to be unregistered.

:::

::: summary: For Piral instance developers

The provided library only brings API extensions for pilets to a Piral instance.

For the setup of the library itself you'll need to import createPageLayoutsApi from the piral-page-layouts package.

import { createPageLayoutsApi } from 'piral-page-layouts';

The integration looks like:

const instance = createInstance({
  // important part
  plugins: [createPageLayoutsApi()],
  // ...
});

Via the options the initially available layouts can be defined.

Consider for example:

const instance = createInstance({
  // important part
  plugins: [createPageLayoutsApi({
    layouts: {
      default: DefaultLayout,
      empty: EmptyLayout,
    }
  })],
  // ...
});

Furthermore, the name of the default layout can be chosen with the fallback option, too. By default, the name is set to be default. If you want to change it to, e.g., standard you can do the following:

const instance = createInstance({
  // important part
  plugins: [createPageLayoutsApi({
    fallback: 'standard',
  })],
  // ...
});

:::

License

Piral is released using the MIT license. For more information see the license file.

piral pilet-api smapiot portal modules api plugin plugin-component page layouts

@infinitebrahmanuniverse/nolb-pir @everything-registry/sub-chunk-2440

1 day ago

11 days ago

12 days ago

16 days ago

16 days ago

18 days ago

18 days ago

23 days ago

24 days ago

23 days ago

26 days ago

27 days ago

29 days ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

7 months ago

7 months ago

6 months ago

6 months ago

7 months ago

7 months ago

5 months ago

5 months ago

5 months ago

5 months ago

7 months ago

7 months ago

6 months ago

6 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

6 months ago

5 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

5 months ago

6 months ago

6 months ago

5 months ago

7 months ago

7 months ago

7 months ago

8 months ago

7 months ago

12 months ago

12 months ago

12 months ago

10 months ago

12 months ago

12 months ago

10 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

8 months ago

8 months ago

8 months ago

10 months ago

8 months ago

11 months ago

10 months ago

11 months ago

10 months ago

10 months ago

11 months ago

11 months ago

9 months ago

11 months ago

8 months ago

9 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

11 months ago

12 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

12 months ago

1 year ago

1 year ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago