Radzen components with Material Design?

Is it possible to use Material Design framework with Radzen component?
If no, Could it be possible in (near) future?

thank!

2 Likes

Hi @ctnet,

Do you mean a Material Design theme? We may create one in the future.

2 Likes

hi @korchev,

Yes, I mean a Material Design Theme. (It'd be great! and with float label animations, awesome! for future, of course! :smiley:)
Thank you!

1 Like

Bump to say, this would indeed look lovely.

I agree with previous ppl material design theme would be great!

1 Like

I have found this reading interesting : https://auralinna.blog/post/2018/how-to-create-material-design-like-form-text-fields/

It's only for form text fields, but it's using bootstrap. Two versions, with javascript and without.

I just wanted to jump in that we don't believe floating labels are good from user experience point of view. We probably won't add floating label support in Radzen.

More info available in the following resources:



http://www.webaxe.org/floated-labels-still-suck/

By popular vote, the floating label is now available with our new FormField component. The component works with input type form components like RadzenTextBox, RadzenDropDown, RadzenPassowrd, etc.

RadzenBlazorFormFieldVariants

In addition to the floating label, you can also add a helper text, a prefix/suffix content, or an action to an input. For example, you can use an icon button to hide or reveal a password.

password

P.S. Make sure you read the posts that @korchev shared above to be aware of the floating label pitfalls.

Hi Yordanov, I set Variant to be Outlined and the content is a textbox. Is it possible to keep the header stays still (no animation) when the textbox has value or not. What I want is a Groupbox control like Windows Form.

Hi @andy.mai1,

It is not possible at the moment to keep the header always on top. Perhaps you should use the RadzenFieldSet component instead as it works pretty much like the Groupbox control in Windows Form.

<RadzenFieldset>
    <HeaderTemplate>
        Label
    </HeaderTemplate>
    <ChildContent>
        <RadzenTextBox Style="width: 100%;"/>
    </ChildContent>
</RadzenFieldset>