퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 컨트롤들
  4. 텍스트인풋[TextInput]

텍스트인풋[TextInput]

TextInput 클래스

단일 행 text input 컨트롤.

TextInput은 사용자 이름, 비밀번호, 숫자, 전자 메일, 검색 필드 등과 같이 한 줄만 필요로 하는 입력 필드를 만들 때 일반적으로 사용하거나 서브 클래스로 사용합니다. 기본적으로 표시되지 않으므로 스타일링을 하거나 텍스트 값을 제공해야 제대로 확인할 수 있습니다.

기본 모양으로 텍스트 입력 컨트롤을 사용하려면 TextBox를 참조하십시오. 여러 줄의 텍스트를 허용하려면 TextView를 사용하십시오.

예제

이 예제는 기본적인 스타일을 가진 TextInput과 내용을 지우는 버튼을 보여줍니다.

1
2
3
4
5
6
7
8
9
10
11
12
<Panel>
    <Button Alignment="CenterRight" Text="Clear" Margin="5">
        <Clicked>
            <Set text.Value="" />
        </Clicked>
    </Button>
    <TextInput ux:Name="text" PlaceholderText="Text field" PlaceholderColor="#ccc" Height="50" Padding="5" >
        <Rectangle Layer="Background">
            <Stroke Width="2" Brush="#BBB" />
        </Rectangle>
    </TextInput>
</Panel>

다음 예제는 TextInput을 서브 클래싱하여 앱 전체에서 일관된 모양을 구현하는 방법을 보여줍니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- TextInput 서브클래싱 -->
<TextInput ux:Class="MyTextInput" FontSize="20" PlaceholderColor="#ccc" Padding="5">
    <Rectangle Layer="Background" CornerRadius="3">
        <Stroke Width="1" Color="#ccc" />
        <SolidColor Color="White" />
    </Rectangle>
</TextInput>

<!-- 사용예 -->
<StackPanel Margin="10" ItemSpacing="10">
    <MyTextInput PlaceholderText="Username" />
    <MyTextInput PlaceholderText="Password" IsPassword="true" />
    <MyTextInput PlaceholderText="Repeat password" IsPassword="true" />
    <MyTextInput />
</StackPanel>

이 예제는 InputHint, AutoCorrectHint, AutoCapitalizationHint 및 ActionStyle 속성을 사용하여 TextInput에 포커스가 있을 때 온 스크린 키보드의 레이아웃과 동작을 구성하는 방법을 보여줍니다.

1
2
3
4
5
6
7
<TextInput PlaceholderText="Search..." ActionStyle="Search" AutoCapitalizationHint="None" />
<TextInput PlaceholderText="Email" InputHint="Email" ActionStyle="Send" AutoCorrectHint="Disabled" AutoCapitalizationHint="None" />
<TextInput PlaceholderText="http://" InputHint="URL" ActionStyle="Go" AutoCorrectHint="Disabled" AutoCapitalizationHint="None" />
<TextInput PlaceholderText="+47 123 456 789" InputHint="Phone" />
<TextInput PlaceholderText="1234" InputHint="Number" />
<TextInput PlaceholderText="1.234" InputHint="Decimal" />
<TextInput PlaceholderText="1" InputHint="Integer" />

TextInput의 인터페이스

링크로 대신합니다: https://www.fusetools.com/docs/fuse/controls/textinput#section-table-of-contents

Was this article helpful to you? Yes No

How can we help?