# MaterialTextField

**Repository Path**: HarmonyOS-tpc/MaterialTextField

## Basic Information

- **Project Name**: MaterialTextField
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-17
- **Last Updated**: 2023-04-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MaterialTextField

TextField with Material design for openharmony

# Usage Instructions

```xml
<com.github.florent37.materialtextfield.MaterialTextField
    ohos:id="$+id:testfield"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:margin="20vp"
    app:mtf_backgroundColor="$color:white"
    app:mtf_cardCollapsedHeight="4vp"
    app:mtf_hasFocus="true"
    app:mtf_labelColor="$color:white"
    app:mtf_openKeyboardOnFocus="true">

    <TextField
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:hint="Password"
        ohos:layout_alignment="vertical_center"
        ohos:max_text_lines="1"
        ohos:padding="8vp"
        ohos:text_alignment="vertical_center"
        ohos:text_color="$color:black"
        ohos:text_input_type="pattern_password"
        ohos:text_size="15fp"/>
</com.github.florent37.materialtextfield.MaterialTextField>

```

Also you can Add drawable to **mtf_image**

```xml
<com.github.florent37.materialtextfield.MaterialTextField
    ohos:id="$+id:testfield"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:margin="20vp"
    app:mtf_backgroundColor="$color:white"
    app:mtf_cardCollapsedHeight="4vp"
    app:mtf_hasFocus="true"
    app:mtf_labelColor="$color:white"
    app:mtf_openKeyboardOnFocus="true"
    app:mtf_image="$graphic:ic_mail_grey600_24dp">

    <TextField
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:hint="Password"
        ohos:layout_alignment="vertical_center"
        ohos:max_text_lines="1"
        ohos:padding="8vp"
        ohos:text_alignment="vertical_center"
        ohos:text_color="$color:black"
        ohos:text_input_type="pattern_password"
        ohos:text_size="15fp"/>
</com.github.florent37.materialtextfield.MaterialTextField>

```

# Available attributes

```xml
<com.github.florent37.materialtextfield.MaterialTextField
    ohos:height="match_content"
    ohos:width="match_parent"

    app:mtf_cardCollapsedHeight="4dp"
    app:mtf_image="$graphic:ic_mail_grey600_24dp"
    app:mtf_animationDuration="1000"
    app:mtf_labelColor="$color:red"
    app:mtf_openKeyboardOnFocus="true"/>
```
## Installation Instructions
1. For using MaterialTextField module in sample application,include the below library dependency to generate hap/layout.har.
    Modify entry build.gradle as below :
```gradle
dependencies {
    implementation project(path: ':materialtextfield')
}
```

2.For using MaterialTextField in separate application, make sure to add the "materialtextfield.har" in libs folder of "entry" module.

Modify entry build.gradle as below :
```gradle
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.har'])
}
```

3.For using MaterialTextField from a remote repository in separate application, add the below dependency in entry/build.gradle file.

Modify entry build.gradle as below :
```gradle
dependencies {
       implementation 'io.openharmony.tpc.thirdlib:MaterialTextField:1.0.0'
}
```

License
--------

    Copyright 2015 florent37, Inc.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.