{"id":24108301,"url":"https://github.com/reactgular/layouts","last_synced_at":"2025-02-28T03:21:57.064Z","repository":{"id":57138747,"uuid":"247281728","full_name":"reactgular/layouts","owner":"reactgular","description":"Layouts is an Angular component library that implements a *border layout* using a container that can dock child panels into Top, Left, Right, Bottom  and Center regions.","archived":false,"fork":false,"pushed_at":"2020-09-16T18:21:29.000Z","size":2807,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"develop","last_synced_at":"2024-10-29T17:00:00.387Z","etag":null,"topics":["angular","angular-library","layout","ui-components"],"latest_commit_sha":null,"homepage":"https://reactgular.github.io/layouts/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reactgular.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-14T13:28:10.000Z","updated_at":"2024-09-15T14:45:09.000Z","dependencies_parsed_at":"2022-09-03T01:20:45.398Z","dependency_job_id":null,"html_url":"https://github.com/reactgular/layouts","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactgular%2Flayouts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactgular%2Flayouts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactgular%2Flayouts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactgular%2Flayouts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reactgular","download_url":"https://codeload.github.com/reactgular/layouts/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240511221,"owners_count":19813235,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-library","layout","ui-components"],"created_at":"2025-01-10T23:35:46.421Z","updated_at":"2025-02-28T03:21:57.015Z","avatar_url":"https://github.com/reactgular.png","language":"TypeScript","readme":"[![Build Status](https://travis-ci.org/reactgular/layouts.svg?branch=master)](https://travis-ci.org/reactgular/layouts)\n[![Coverage Status](https://coveralls.io/repos/github/reactgular/layouts/badge.svg?branch=master)](https://coveralls.io/github/reactgular/layouts?branch=master)\n[![npm version](https://badge.fury.io/js/%40reactgular%2Flayouts.svg)](https://badge.fury.io/js/%40reactgular%2Flayouts)\n\n# What is Layouts?\n\nLayouts is an Angular component library that implements a *border layout* using a container that can dock child panels into Top, Left, Right, Bottom \nand Center regions. Containers can be nested allowing for a variety of usages, and panels can be animated to enhance the user experience.\n\nLayouts was designed to support *nesting* of inner Layouts allowing for a wide range of design usages.\n\n# Why use this library?\n\nLayouts was developed mainly to solve the problem of transitioning between desktop and mobile screens while using a *border layout* strategy. It makes\nit really easy to move a side menu from being on screen to floating off screen without much effort.\n\nLayouts is *unopinionated* about how panels should be arranged, sized or positioned in the border layout. Allowing the developer to have full control\nover how panels transition between different states. That means you can use layouts to create narrow, wide, overlaying and animated panels that fit\nyour design goals. \n\nLayouts does it's best to transition between different states without restructuring of the DOM elements. This reduces flickering of elements and\navoids unwarned life-cycle changes for components being displayed on the page.\n\n# Installation\n\nYou need to have an Angular project with the supported Angular version. This project was last updated to work with Angular 8.\n\n```bash\nnpm install --save @reactgular/layouts\n```\n\nLayouts depends upon the following peer dependencies.\n\n```bash\nnpm install --save @reactgular/destroyable @reactgular/observables @reactgular/stateful\n```\n\nOnce installed you need to import the Layouts module into your project.\n\n```typescript\nimport {LayoutsModule} from '@reactgular/layouts';\n\n@NgModule({\n    ...\n    imports: [LayoutsModule, ...],\n    ...\n})\nexport class AppModule {\n}\n```\n\n# Usage\n\nStart by adding the `\u003crg-layout\u003e` component, and then adding upto *four* `*rgPanel` structural directives and a *single* `*rgCenter`.\n\n```html\n\u003crg-layout\u003e\n    \u003cdiv *rgPanel=\"'top'; size: 50\"\u003e\n        TOP MENU\n    \u003c/div\u003e\n    \u003cdiv *rgPanel=\"'left'; size: 200\"\u003e\n        SIDE MENU\n    \u003c/div\u003e\n    \u003cdiv *rgCenter\u003e\n        CENTER\n    \u003c/div\u003e\n\u003c/rg-layout\u003e\n```\n\nThe above creates a border layout where the top panel has a height of `50`, a side panel with a width of `200` and center content. Layouts will animate\nchanges in panel parameters such as their size and position along the edge of borders. \n\nEach panel has additional parameters such as;\n\n- `order` will sort panels changing how they overlap each other.\n- `push` will push content away from that panel's edge.\n- `pull` will pull the panel off screen.\n- `overlay` will display a background overlay on top of inner content.\n\n## Configuring Panels\n\nYou can configure a panel using individual properties, or a single `config` object.\n\nThe following example configures the `order`, `size` and `overlay`:\n\n```html\n\u003crg-layout\u003e\n    \u003cdiv *rgPanel=\"'left'; order:2, size: 200, overlay: true\"\u003e\n        SIDE MENU\n    \u003c/div\u003e\n    \u003cdiv *rgCenter\u003e\n        CENTER\n    \u003c/div\u003e\n\u003c/rg-layout\u003e\n```\n\nThe following example configures the panel using a `config` object:\n\n```html\n\u003crg-layout\u003e\n    \u003cdiv *rgPanel=\"'left'; config: {order:2, size: 200, overlay: true}\"\u003e\n        SIDE MENU\n    \u003c/div\u003e\n    \u003cdiv *rgCenter\u003e\n        CENTER\n    \u003c/div\u003e\n\u003c/rg-layout\u003e\n```\n\nYou can mix the usage of `config` and properties for easier programming of panels.\n\n## Using Observable config objects\n\nThe easiest way to animate the transition between panel properties is to create an observable using\none of the present functions. There are a collection of present functions that create different panel effects.\n\n```typescript\n@Component({\n   template: `\n    \u003crg-layout\u003e\n        \u003cdiv *rgPanel=\"'left'; config: left$ | async\"\u003e\n              ....\n        \u003c/div\u003e\n    \u003c/rg-layout\u003e\n   `\n})\nexport class ExampleComponent implements OnInit {\n    public left$: Observable\u003cPanelConfig\u003e;\n\n    public ngOnInit() {\n       this.left$ = PanelStatic(1,100);    \n    }\n}\n```\n\n## Understanding how Order works\n\nOrder is one of the more important parameters to understand, because order controls how panels overlap each other and what content an overlay covers.\n\nPanels are first added to a collection and then sorted by their order. The page is then split, a panel is rendered on one side and the remaining panels are rendered \non the other side. This process repeats until there are no more panels in the collection, and the center content is rendered last. \n\nEach panel is rendered like this:\n\n```text\n+=========+=================+\n|         |                 |\n|  panel  |  [...panels]    |\n|         |                 |\n+=========+=================+\n```\n\nSince panels are rendered by splitting parts of the page it means their order has an effect on how panels overlap each other. Just by changing the order parameter\nyou can change how the board layout appears on the page.\n\nPanels have the following default order: \n\n```text\n+=============================+\n|              0              |\n+=====+=================+=====+\n|     |                 |     |\n|  1  |                 |  2  |\n|     |                 |     |\n|     +=================+     |\n|     |        3        |     |\n|     +=================+     |\n```\n\nYou can change the above layout pattern just by using a different order value for each panel:\n\n```text\n+=====+=======================+\n|     |        1              |\n|     +=================+=====+\n|     |                 |     |\n|  0  |                 |  3  |\n|     |                 |     |\n|     +=================+=====+\n|     |        2              |\n+=====+=======================+\n```\n\nChanging panel orders is the most common way to rearrange panels to accommodate differences between desktop and mobile screen.\n\n# Panel Presents\n\nPresents are functions that create an observable that emits a panel configuration. Often taking other observables as input parameters. I've \ncreated a few present functions that are most commonly used in applications.\n\n### PanelIfElse\n\nEmits one of two PanelConfig objects based upon a condition.\n\n### PanelPartialResize\n\nEmits a PanelConfig object that changes sized based upon a boolean value.\n\n### PanelPartialReveal\n\nCreates a panel config that shows only a partial part of the panel, and toggles revealing the full size. When\nit is toggled the panel is moved to reveal all and overlay center content.\n\nThis preset is useful when you want to hide a partial part of the panel and then reveal it without changing\nthe side of the panel (which might causes flickering of panel content).\n\n### PanelSlide\n\nCreates an observable that emits a panel config which slides a panel on/off the screen.\n\nIf overlay is True the panel floats over top of content, and when False it pushes content.\n\n### PanelStatic\n\nCreates an observable that emits a panel that doesn't push or pull content. Often used to add a top menu bar.\n\n# Getting help\n\nYou are welcome to open issues for general support questions as well as bug reports and feature requests.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactgular%2Flayouts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freactgular%2Flayouts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactgular%2Flayouts/lists"}