mirror of
https://github.com/aurora-opensource/xviz.git
synced 2026-01-25 14:16:45 +00:00
e141c9421f
To make the declarative UI more accessible we: - Move declarative UI to it's own top level section - Broke it up into several pages To help with the flow of the documentation we: - Separated `core-protocol.md` into `core-types.md` and `introduction.md` - Move style and geometry specific content to those pages
36 lines
2.8 KiB
Markdown
36 lines
2.8 KiB
Markdown
# Layout Elements
|
|
|
|
Layout elements are different from components in that they do not directly consume XVIZ stream data.
|
|
Layout elements provide information about how to arrange components as well as additional
|
|
information about their contents.
|
|
|
|
## Panels
|
|
|
|
Panels are typically grouped together in tabs along the edge of an application. Panels group
|
|
together related pieces of data at a high level. Panels provide a convenient way for a team to group
|
|
all of their data together.
|
|
|
|
_TODO: screentshot: panel from streetscape.gl demo app_
|
|
|
|
| **Name** | **Type** | **Description** |
|
|
| -------------- | ------------------------------ | -------------------------------------------------------------------------------------------------------- |
|
|
| `name` | `string` | The name of this panel, will be displayed at the top of the panel |
|
|
| `layout` | `layout_type` | One of the supported layout types; defines how the elements inside of the panel should be arranged. |
|
|
| `interactions` | `list<interaction_type>` | A list of all of the interactions supported by this panel. |
|
|
| `children` | `list<component OR container>` | All of the components and containers inside of this panel and the order in which they should be rendered |
|
|
|
|
## Containers
|
|
|
|
Containers are used to group components together into logical groupings of information that should
|
|
be displayed together. To some extent, they can be thought of as HTML `<div>`s. Components within
|
|
the container will be rendered above any other containers that are nested inside of the container.
|
|
|
|
_TODO: screentshot: panel with containers from streetscape.gl demo app_
|
|
|
|
| **Name** | **Type** | **Description** |
|
|
| -------------- | ------------------------------ | -------------------------------------------------------------------------------------------------------- |
|
|
| `name` | `string` | The name of this container, will be displayed at the top of the container |
|
|
| `layout` | `layout_type` | One of the supported layout types; defines how the elements inside of the panel should be arranged. |
|
|
| `interactions` | `list<interaction_type>` | A list of all of the interactions supported by this panel. |
|
|
| `children` | `list<component OR container>` | All of the components and containers inside of this panel and the order in which they should be rendered |
|