A MagicScript Components catalog app provides examples of the available UI Components. This topic covers a list of examples available in the app. For a list of all the MagicScript Components, see https://components.magicscript.org/docs/components.
- Complete MagicScript Setup
- Download the catalog app from GitHub: https://github.com/magic-script/magic-script-components-catalog
Component Examples in the Catalog App
|Alignment Shows how different components behave when changing the alignment property.||TextEdit Shows example usage of the TextEdit component including different input types like phone or password.|
|RectLayout Presents Alignment and ContentAlignment within the RectLayout component for positioning content.||LinearLayout Presents how items behave inside the LinearLayout and allows the user to change properties in the layout: orientation, item size, item alignment, and item padding.|
|GridLayout Presents how items behave inside a GridLayout and allow the user to change properties of layout size, item alignment, and item padding.||ScrollView Presents the ScrollView with the ScrollBar component and allows the user to change orientation and item alignment.|
|ListView Presents the ListView component and allows the user to change the layout orientation.||Video Presents the Video component and controls for it such as start, stop, and loop|
|ToggleGroup Presents different configurations of the ToggleGroup component.||Audio-MSA Shows the Audio component. Includes enabling and disabling spatial sound as well as local and remote sources. Works only on physical devices.|
|Dialogs Shows various features of the Dialog component, such as length of text and the addition of icons.||DatePicker Shows the DatePicker component. Includes different date formats.|
|TimePicker Shows the TimePicker component. Includes different time formats.||ColorPicker Shows how a ColorPicker component can be used in an app.|
|ButtonProperties This is an overview of the various properties that can be set on a button tag.||Line Showcases drawing line segments.|
|DropDown List This is a UI element which can have single-selection or multi-selection of items in a collapsible list.||Image Slider This is a demo for cycling between images based on button input.|
How to View
To view individual Components in the Component Catalog App, complete the following:
- Connect a Magic Leap device to your computer via USB or start the Simulator (see Zero Iteration MagicScript for details).
- Open a command line session from The Lab.
- In the command-line session, navigate to the Catalog app project folder that you downloaded from GitHub and enter: magic-script build -i.
- On the device, launch the Catalog app. A component example appears.
- Interact with the example using the Control to select the provided options in the example.
- Switch between examples using the Control by selecting Previous or Next at the top of the prism.