xviz/docs/declarative-ui/layout-elements.md
Joseph Lisee e141c9421f Re-organize XVIZ schema and declarative UI docs (#218)
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
2018-11-26 16:19:02 -05:00

2.8 KiB

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