Change TextInput divider color

How-to Discussions
1

I need to change the TextInput divider color when it is in rest and focus state. I can’t find the way to do this, can you help me? I think that it is a very important thing in order to customize our apps.

2

Look here for the default styling of TextInput:

https://gist.github.com/kusma/f6094c3d55127c07fec2

And here for information about styling:

https://www.fusetools.com/learn/fuse#styling-and-resources

3

In 0.9.5 there is also TextEdit which is an unstyled text input control.

4 
        <Panel ux:Class="MyTextInput" Height="48">
            <TextEdit Alignment="VerticalCenter" Font="RobotoRegular" FontSize="16" TextColor="#fff">
                <WhileFocused>
                    <Change divider.Height="2" Duration="0.2" Easing="CubicInOut" />
                    <Change dividerColor.Color="#ffc107" Duration="0.2" Easing="CubicInOut" />
                    <Change dividerColor.Opacity="1" Duration="0.2" Easing="CubicInOut" />
                </WhileFocused>
            </TextEdit>
            <Rectangle ux:Name="divider" Alignment="Bottom" Margin="0,0,0,8" Height="1">
                <SolidColor ux:Name="dividerColor" Color="#fff" Opacity="0.12" />
            </Rectangle>
        </Panel>

I finally got what I wanted, but now I have a problem, TextEdit doesn’t have the PlaceholderText attribute. What should I do?

5

Hi,

If you look at the link I posted, you can see how TextInput does to get PlaceholderText. You should be able to do the same thing.

https://gist.github.com/kusma/f6094c3d55127c07fec2

6

You are right. Thanks guys, topic solved.