Version: latest

TextEdit

<Textedit> on lumin

Description

The TextEdit component creates an editable text box for text entry on a single or multiple lines. The last line includes a white underline to clearly delineate that the text box is editable. Include a UTF-8 compatible font in your project if you expect characters outside of the ISO Latin-1 character set.

Example

import React from 'react';
import { TextEdit, LinearLayout, Text, Button, View, 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'}>
<LinearLayout
orientation='horizontal'
defaultItemAlignment='center-center'
defaultItemPadding={[0.01, 0.01, 0.01, 0.01]}
localPosition={[-0.2, 0.1, 0]}
>
<Text textSize={0.05} textColor={"#B5B5B5"} localPosition={[0.1, 0, 0]}>Login:</Text>
<TextEdit text='LoremIpsum' height={0.054} textSize={0.05} width={0.3} />
</LinearLayout>
<LinearLayout
orientation='horizontal'
defaultItemAlignment='center-center'
defaultItemPadding={[0.01, 0.01, 0.01, 0.01]}
localPosition={[-0.2, 0, 0]}
>
<Text textSize={0.05} textColor={"#B5B5B5"} localPosition={[0.1, 0, 0]}>Password:</Text>
<TextEdit password={true} text='secretpassword' height={0.054} textSize={0.05} width={0.3} />
</LinearLayout>
<Button localPosition={[0, -0.2, 0]} text='login' textSize={0.05} />
</View>
</Prism>
</Scene>
);
}
}

Common Events

Common Properties

Create Properties

NameTypeDefault ValueRequiredDescription
textstringn/aNThe initial UTF-8 encoded text in the text box.
widthnumbern/aNThe width of the text edit area.
heightnumbern/aNThe height of the text edit area.

Aditional (optional) parameters for create step.

NameTypeDefault ValueDescription
fontDescriptionobjectn/aA 2D font that is a font rendered onto a planar image (whatever the format), as opposed to a 3D model of the glyphs or other graphical representation.
filePathstringn/aThe font file from which the glyphs are loaded. By default this is assumed to be a relative path from the executable file.
absolutePathbooleanfalseFlags that the filePath is an absolute path name, instead of a relative path.

fontDescription

{
advanceDirection: <string>,
flowDirection: <string>,
tileSize: <number>,
quality: <string>,
minAlpha: <number>,
}

AdvanceDirection options: AdvanceDirection

FlowDirection options: FlowDirection

Quality options: Quality

Element Properties

NameTypeDefault ValueDescription
charLimitnumber0Sets the maximum number of characters allowed in the text box. 0 means no limit.
charSpacingnumber0Sets the additional character spacing that is applied between characters. Note that 0 is the default spacing.
cursorEdgeScrollModestringn/aSets the cursor edge scroll mode for this text box.
stylestringnormalSets the style of the Magic Leap font.
weightstringregularSets he weight (i.e., thickness) of the Magic Leap font.
hintstringn/aSets the UTF-8 encoded text for hint text.
hintColorvec4n/aSets the text color of the hint.
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
multilinebooleanfalseSets whether the text box is in multiline mode or not.
passwordbooleanfalseSets whether the text box is in password mode or not.
scrollBarVisibilitystringn/aCreates and shows the scrollbar in the vertical direction. If a scrollbar already exists, only its visibility is affected. This function also attaches the scrollbar to the ScrollView that manages it.
scrollingbooleanfalseSets whether scrolling is enabled or not.
scrollSpeednumbern/aSets the scroll speed in scene units per second.
scrollValuenumbern/aManually scrolls the textEdit content position using a normalized value between 0 and 1.
selectedBeginnumbern/aThe first index for text selection.
selectedEndnumbern/aThe last index for text selection.
textstringn/aSets the UTF-8 encoded text.
textAlignmentstringn/aAligns the text to the left, center, or right or justifies it.
textColorvec4n/aSets the RGBA color of the rendered text.
textEntrystringn/aSets the current text entry mode of the text box.
textPaddingvec4n/aSets the padding around the text within the text edit area. This defaults to half the text size unless explicitly set. The padding order is: top, right, bottom, left.
textSizenumbern/aSets the text render size height in scene units.
fontParametersobjectn/aSets the font parameters, including syle, weight, pixel size, and tracking. This uses one of the default sets of Magic Leap font resources that support style and weight.

fontParameters

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

style options: FontStyle

weight options: FontWeight

textAlignment options: HorizontalTextAlignment

cursorEdgeScrollMode options: CursorEdgeScrollMode

scrollBarVisibility options: ScrollBarVisibility

textEntry options: TextEntryMode