Merge pull request #631 from enisn/inputfield-styling

More styling options for InputField & TextField
enisn · Mar 20, 2024 · c66c5ed · c66c5ed
2 parents d0cdeb0 + 46ef291
commit c66c5ed
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 5 deletions.
diff --git a/docs/en/themes/material/components/InputField.md b/docs/en/themes/material/components/InputField.md
@@ -51,4 +51,41 @@ public class TimePickerField : InputField
 
 `HasValue` property should be overriden. That property is responsible for determining if the control has a value or not. If the control has a value, the title will be moved up. If the control does not have a value, the title will be moved down when unfocused. The following example shows how to implement the `HasValue` property for the Editor control.
 
-![MAUI Material Input](images/inputfield-demo-custom.gif)
+![MAUI Material Input](images/inputfield-demo-custom.gif)
+
+
+## Styling
+InputField has the following style classes that can be used to style the control:
+
+```xml
+<Style TargetType="Label" Class="InputField.Title">
+    <Setter Property="FontAttributes" Value="Bold" />
+    <!--...-->
+</Style>
+
+<Style TargetType="Border" Class="InputField.Border">
+    <Setter Property="MaximumHeightRequest" Value="80" />
+    <!--...-->
+</Style>
+
+<Style TargetType="Image" Class="InputField.Icon">
+    <Setter Property="HeightRequest" Value="10" />
+    <Setter Property="WidthRequest" Value="10" />
+    <!--...-->
+</Style>
+
+<Style TargetType="HorizontalStackLayout" Class="InputField.Attachments">
+    <Setter Property="Spacing" Value="8" />
+    <!--...-->
+</Style>
+<Style TargetType="Path" Class="InputField.ValidationIcon">
+    <Setter Property="Fill" Value="MediumVioletRed" />
+    <Setter Property="Data" Value="M7 11V1H8V11H7ZM8 13V14.01H7V13H8Z" />
+    <!--...-->
+</Style>
+
+<Style TargetType="Label" Class="InputField.ValidationLabel">
+    <Setter Property="TextColor" Value="MediumVioletRed" />
+    <!--...-->
+</Style>
+```
diff --git a/docs/en/themes/material/components/TextField.md b/docs/en/themes/material/components/TextField.md
@@ -143,4 +143,47 @@ TextField is fully compatible with [FormView](https://enisn-projects.io/docs/en/
 
 | Light | Dark |
 | --- | --- |
-| ![MAUI Material Input](images/textfield-formview-light-android.gif) | ![MAUI Material Input](images/textfield-formview-dark-windows.gif) |
+| ![MAUI Material Input](images/textfield-formview-light-android.gif) | ![MAUI Material Input](images/textfield-formview-dark-windows.gif) |
+
+
+## Styling
+TextField has the following style classes that can be used to style the control:
+
+```xml
+<Style TargetType="Label" Class="InputField.Title">
+    <Setter Property="FontAttributes" Value="Bold" />
+    <!--...-->
+</Style>
+
+<Style TargetType="Border" Class="InputField.Border">
+    <Setter Property="MaximumHeightRequest" Value="80" />
+    <!--...-->
+</Style>
+
+<Style TargetType="Image" Class="InputField.Icon">
+    <Setter Property="HeightRequest" Value="10" />
+    <Setter Property="WidthRequest" Value="10" />
+    <!--...-->
+</Style>
+
+<Style TargetType="HorizontalStackLayout" Class="InputField.Attachments">
+    <Setter Property="Spacing" Value="8" />
+    <!--...-->
+</Style>
+<Style TargetType="Path" Class="InputField.ValidationIcon">
+    <Setter Property="Fill" Value="MediumVioletRed" />
+    <Setter Property="Data" Value="M7 11V1H8V11H7ZM8 13V14.01H7V13H8Z" />
+    <!--...-->
+</Style>
+
+<Style TargetType="Label" Class="InputField.ValidationLabel">
+    <Setter Property="TextColor" Value="MediumVioletRed" />
+    <!--...-->
+</Style>
+
+<Style TargetType="Path" Class="TextField.ClearIcon">
+    <Setter Property="Fill" Value="LightGray" />
+    <Setter Property="Data" Value="M1.5 1.5L13.5 13.5M1.5 13.5L13.5 1.5" />
+    <!--...-->
+</Style>
+```
diff --git a/src/UraniumUI.Material/Controls/InputField.Validation.cs b/src/UraniumUI.Material/Controls/InputField.Validation.cs
@@ -19,13 +19,15 @@ public partial class InputField : IValidatable
         Margin = new Thickness(0, 0, 5, 0),
         Content = new Path
         {
+            StyleClass = new[] { "InputField.ValidationIcon" },
             Fill = ColorResource.GetColor("Error", "ErrorDark", Colors.Red),
             Data = UraniumShapes.ExclamationCircle,
         }
     });
 
     protected Lazy<Label> labelValidation = new Lazy<Label>(() => new Label
     {
+        StyleClass = new[] { "InputField.ValidationLabel" },
         HorizontalOptions = LayoutOptions.Start,
         TextColor = ColorResource.GetColor("Error", "ErrorDark", Colors.Red),
     });

diff --git a/src/UraniumUI.Material/Controls/InputField.cs b/src/UraniumUI.Material/Controls/InputField.cs
@@ -32,7 +32,7 @@ public virtual View Content
 
     protected Label labelTitle = new Label()
     {
-        Text = "Title",
+        StyleClass = new [] { "InputField.Title" },
         HorizontalOptions = LayoutOptions.Start,
         VerticalOptions = LayoutOptions.Start,
         InputTransparent = true,
@@ -41,7 +41,7 @@ public virtual View Content
 
     protected Border border = new Border
     {
-        Padding = 0,
+        StyleClass = new [] { "InputField.Border" },
         StrokeThickness = 1,
         StrokeDashOffset = 0,
         BackgroundColor = Colors.Transparent,
@@ -53,6 +53,7 @@ public virtual View Content
     {
         return new Image
         {
+            StyleClass = new [] { "InputField.Icon" },
             HorizontalOptions = LayoutOptions.Start,
             VerticalOptions = LayoutOptions.Center,
             WidthRequest = 20,
@@ -61,7 +62,10 @@ public virtual View Content
         };
     });
 
-    protected HorizontalStackLayout endIconsContainer = new HorizontalStackLayout();
+    protected readonly HorizontalStackLayout endIconsContainer = new HorizontalStackLayout
+    {
+        StyleClass = new[] { "InputField.Attachments" },
+    };
 
     public IList<IView> Attachments => endIconsContainer.Children;
 

diff --git a/src/UraniumUI.Material/Controls/TextField.cs b/src/UraniumUI.Material/Controls/TextField.cs
@@ -30,6 +30,7 @@ public partial class TextField : InputField
         Margin = new Thickness(0, 0, 5, 0),
         Content = new Path
         {
+            StyleClass = new[] { "TextField.ClearIcon" },
             Data = UraniumShapes.X,
             Fill = ColorResource.GetColor("OnBackground", "OnBackgroundDark", Colors.DarkGray).WithAlpha(.5f),
         }