Text

Text

Here is a tiny app that renders text:

<App>
    <Text>Hello, world!</Text>
</App>

This is great but when you have longer passages of text, such as a Lorem Ipsum, you most likely want to enable word wrapping. In Fuse, this is done with the TextWrapping property on the Text control:

<Text TextWrapping="Wrap">Lorem Ipsum(...)</Text>

텍스트를 표현하는 태그는 <Text> 이다. 그런데 텍스트 옵션 중 TextWrapping이 있고, 이 옵션은 Wrap, NoWrap 두 개의 값을 가지고 있다. 기본은 NoWrap으로 잡혀있다. 둘의 차이는 긴 텍스트를 표현할 때의 차이다. NoWrap인 상태에서는 화면의 해상도와 관계 없이 한 줄로 쭉 나열된다. 하지만 Wrapping할 경우 화면 해상도에 맞춰 줄바꿈을 자동으로 해준다.

아래 코드를 보자.

<App Theme="Basic">
    <StackPanel>
        <Text TextWrapping="NoWrap" Height="50">Hello, World Hello, World Hello, World Hello, World Hello, World Hello, World </Text>
        <Text TextWrapping="Wrap" Height="50">Hello, World Hello, World Hello, World Hello, World Hello, World Hello, World </Text>
    </StackPanel>
</App>

두 텍스트는 같은 길이를 가졌다. 하지만 출력 결과는 아래와 같다.

래핑된 쪽은 자동으로 줄바꿈을 해준 것을 볼 수 있다.

Text의 프로퍼티는 TextAlignment, TextColor, FontSize, LineSpacing 4가지가 있다.

<Text TextColor="#999">Left</Text>
<Text TextAlignment="Center">Center</Text>
<Text FontSize="24" TextAlignment="Right">Right</Text>
<Text LineSpacing="10">
Multiple
Lines
</Text>




각각의 효과를 적용한 결과는 아래와 같다.