2.2 Components Catalog

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.

Pre-requisites

Component Examples in the Catalog App

ComponentComponent
Alignment AlignmentCatalogAppExample Shows how different components behave when changing the alignment property.TextEdit TextEditCatalogAppExample Shows example usage of the TextEdit component including different input types like phone or password.
RectLayout Rect Layout Catalog App Example Presents Alignment and ContentAlignment within the RectLayout component for positioning content.LinearLayout Linear Layout Catalog App Example 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 Grid Layout Catalog App Example Presents how items behave inside a GridLayout and allow the user to change properties of layout size, item alignment, and item padding.ScrollView Scroll View Catalog App Example Presents the ScrollView with the ScrollBar component and allows the user to change orientation and item alignment.
ListView List View Catalog App Example Presents the ListView component and allows the user to change the layout orientation.Video Video Catalog App Example Presents the Video component and controls for it such as start, stop, and loop
ToggleGroup Toggle Group Catalog App Example Presents different configurations of the ToggleGroup component.Audio-MSA Audio Catalog App Example Shows the Audio component. Includes enabling and disabling spatial sound as well as local and remote sources. Works only on physical devices.
Dialogs Dialogs Catalog App Example Shows various features of the Dialog component, such as length of text and the addition of icons.DatePicker Date Picker Catalog App Example Shows the DatePicker component. Includes different date formats.
TimePicker Time Picker Catalog App Example Shows the TimePicker component. Includes different time formats.ColorPicker Color Picker Catalog App Example Shows how a ColorPicker component can be used in an app.
ButtonProperties Button Properties Catalog App Example This is an overview of the various properties that can be set on a button tag.Line Line Catalog App Example Showcases drawing line segments.
DropDown List Dropdown List Catalog App Example This is a UI element which can have single-selection or multi-selection of items in a collapsible list.Image Slider ImageSliderCatalogAppExample 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:

  1. Connect a Magic Leap device to your computer via USB or start the Simulator (see Zero Iteration MagicScript for details).
  2. Open a command line session from The Lab.
  3. In the command-line session, navigate to the Catalog app project folder that you downloaded from GitHub and enter: magic-script build -i.
  4. On the device, launch the Catalog app. A component example appears.
  5. Interact with the example using the Control to select the provided options in the example.
  6. Switch between examples using the Control by selecting Previous or Next at the top of the prism.

}