Version: latest

Text

<Text> on lumin

Description

This is the base component of any static text element placed in your prism. These are single or multi-line text areas of UTF-8 encoded 2D text. Use them inside your prism as is, or call them from other components. Text cannot be modified by a user, but can be copied with the cursor.

Example

import React from 'react';
import { Text, View, Image, Prism, Scene } from 'magic-script-components';
export default class MyApp extends React.Component {
render() {
return (
<Scene>
<Prism size={[1, 1, 0.2]} >
<View name="main-view" alignment={'center-center'} localPosition={[-0.31, 0, 0]}>
<Text alignment={'center-left'} textSize={0.1} weight={"bold"} textColor={"#85D834"} localPosition={[0, 0.12, 0]}>
Lorem Ipsum
</Text>
<Image alignment={'center-left'} height={0.07} width={0.07} icon={"phone"} />
<Text alignment={'center-left'} textSize={0.05} textColor={"#B5B5B5"} localPosition={[0.1, 0, 0]}>
(555)-123-1234
</Text>
<Image alignment={'center-left'} height={0.07} width={0.07} icon={"send"} localPosition={[0, -0.1, 0]} />
<Text alignment={'center-left'} textSize={0.05} textColor={"#e0e0e0"} localPosition={[0.1, -0.1, 0]}>
lorem.lpsum@magicleap.com
</Text>
</View>
</Prism>
</Scene>
);
}
}

Common Events

Common Properties

Create Properties

NameTypeDefault ValueRequiredDescription
textstringn/aNThe UTF-8 encoded text to initially set the text to.
stylestringnormalNThe style of the Magic Leap font.
weightstringregularNThe weight (i.e., thickness) of the Magic Leap font.

If text is empty, the content of the <text> tag will be used as text.

style options: FontStyle

weight options: FontWeight

Element Properties

NameTypeDefault ValueDescription
allCapsbooleann/aDisplays the text in all caps if true.
charSpacingnumber0Sets the additional character spacing that is applied between characters.
lineSpacingnumber1.0Sets the line spacing to adjust the distance between lines of text; e.g., use 1 for single-spaced text, 2 for double-spaced text.
stylestringnormalSets the style of the Magic Leap font.
weightstringregularSets the weight (i.e., thickness) of the Magic Leap font.
textstringn/aSets the UTF-8 encoded text. This call is ignored if there is a current localization key set. Set the localization key to an empty string, "", to unset it.
textAlignmentstringleftAligns the text to the left, center, or right or justifies it.
textColorverc4whiteSets the RGBA color of the rendered text.
textSizenumbern/aSets the text render size height in scene units.
boundsSizeobject0,0Sets the text bounds size in scene units. The default value of 0,0 indicates there is no bounds and the text can grow and does not wrap or truncate. Setting the bounds greater than 0 in both X and Y will set the text bounds and cause the text to wrap or truncate within.
fontParametersobjectn/aSets the font parameters, including style, weight, pixel size, and tracking. This uses one of the default sets of Magic Leap font resources that support style and weight.

boundsSize

{
boundsSize: vec2,
wrap: boolean
}

fontParams

{
style: string,
weight: string,
fontSize: number,
tracking: number,
allCaps: boolean
}

textAlignment options: HorizontalTextAlignment