[dev-v5] Add FluentField component #3267
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
✅ All tests passed successfully Details on your Workflow / Core Tests page. |
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 99.1%
|
vnbaaij
requested changes
Feb 8, 2025
vnbaaij
approved these changes
Feb 8, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
[dev-v5] Add
FluentFieldcomponentField adds a label, validation message, and hint text to a control.
Label
The
Labelassociated with the field.This text is usually displayed above the component to describe it to the user.
You can position it on the left or right using
LabelPosition.In this case, the attribute
LabelWidthcan be used to set an identical label widthto multiple
FluentField.This label can be fully customized (bold, italic, icons, ...) using
LabelTemplate.Validation Message
The
Messageis used to give the user feedback about the value entered.The field can validate itself using the rules defined in
MessageCondition.It can be used to signal the result of form validation.
This message can be fully customized (bold, italic, icons, ...) using
MessageTemplate.The
MessageStateaffects the behavior and appearance of the message:Error- The validation message has the red textAn error occuredwith a red error icon.Success- The validation message has gray textValid datawith a green checkmark icon.Warning- The validation message has gray textPlease, check this valuewith a yellow exclamation icon.<null>- The validation message must be defined usingMessageorMessageTemplate.These default messages can be located using the localization service.
Optionally,
MessageandMessageIconattributes can be used to overridethe default text and icon (or add an icon in the case of
MessageState = null).Message Conditions
The
MessageConditionattribute specifies when to display the messageat the bottom of the
FluentField.This condition is a lambda expression (or method) whose input parameter
is the current
IFluentFieldand output istrueto display the messageor
falseto hide the message.Examples:
@(field => field.FocusLost == true)will display the messagewhen the user will leave the component.
To help you implement these rules, you can use the
IFluentField.Wheremethod associated with the
Displaymethod. You must finalize the ruledefinition using the method
Build()(to start the validation of the rules).Rules are evaluated in order of creation: the first rule checked applies
the associated
DisplayactionUsage in other Input components
Example for the FluentTextInput:
Using
InputComponent=‘@this’allows the FluentField to retrieve all the parameters ofIFluentField, likeLabel,LabelTemplate,LabelPosition,LabelWidth,Required,Disabled,Message,MessageIcon,MessageTemplate, andMessageCondition.Examples
See the documentation and live samples: https://fluentui-blazor-v5.azurewebsites.net/Field
Unit Tests