Float Labels and Text help Material Design

General
1

Hi,

how I can do this?

https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B7WCemMG6e0VcHFla0dwOE5pVVE/forms-supportive-content-v3_xhdpi.webm

-Float Label

-Text Help

-Style Inputs Errors

video extracted from: https://www.google.com/design/spec/components/text-fields.html#text-fields-required-fields

2

Hi!

Great question, making a float label should be easy in UX. Have a look at this example:

<App Theme="Basic">
    <StackPanel Alignment="VerticalCenter" Width="75%" >
        <Panel>
            <TextEdit ux:Name="_textEdit" >
                <StateGroup Active="idle" ux:Name="_stategroup" >
                    <State ux:Name="idle" />
                    <State ux:Name="active" >
                        <Move Target="_placeholder" RelativeTo="Size" Y="-1" Duration="0.2" Easing="CubicOut" EasingBack="CubicIn" />
                        <Change Target="_placeholder.TextColor" Value="#f00" Duration="0.2" Easing="CubicOut" EasingBack="CubicIn" />
                    </State>
                </StateGroup>
                <WhileFocused>
                    <Change _stategroup.Active="active" />
                </WhileFocused>
                <WhileNotFocused>
                    <WhileContainsText >
                        <Change _stategroup.Active="active" />
                    </WhileContainsText>
                </WhileNotFocused>
            </TextEdit>
            <Text ux:Name="_placeholder" Value="Placeholder" TextColor="#555" />
        </Panel>
        <Rectangle Layer="Background">
            <Stroke Offset="2">
                <SolidColor Color="#000" />
            </Stroke>
        </Rectangle>
    </StackPanel>
</App>

I hope this helps :slight_smile:

Do you have an example for what you mean by Text Help and Style Inputs Errors?

3

Probably there are API changes to fuse.

4

@Sanket: yes, that snippet shows deprecated code.

You might find this repository useful: Fuse.MaterialDesign