文本域 (TextArea)

多行文本框输入组件。

概述

  • 多行文本字符输入框

代码演示

1.默认示例

namespace WebSite.Docus.Inputs.TextAreas;

class TextArea1 : BaseComponent
{
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Field<TextArea>("默认:", "TextArea1").Build();
        builder.Field<TextArea>("赋值:", "TextArea2").Value("test").Build();
        builder.Field<TextArea>("禁用:", "TextArea3").Enabled(false).Build();
        builder.Field<TextArea>("提示:", "TextArea4").Set(f => f.Placeholder, "输入提示").Build();
    }
}

2.事件示例

namespace WebSite.Docus.Inputs.TextAreas;

class TextArea2 : BaseComponent
{
    private string? message;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        //ValueChanged事件
        builder.Field<TextArea>("示例:", "TextArea").ValueChanged(OnValueChanged).Build();
        builder.Div("tips", message);
    }

    private void OnValueChanged(string value)
    {
        message = value;
        StateChanged();
    }
}

3.控制示例

namespace WebSite.Docus.Inputs.TextAreas;

class TextArea3 : BaseComponent
{
    private TextArea? textArea;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Component<FieldControl>()
               .Set(c => c.OnVisibleChanged, OnVisibleChanged)
               .Set(c => c.OnEnabledChanged, OnEnabledChanged)
               .Set(c => c.OnReadOnlyChanged, OnReadOnlyChanged)
               .Set(c => c.SetValue, SetValue)
               .Set(c => c.GetValue, GetValue)
               .Build();

        builder.Field<TextArea>("示例:", "TextArea").Build(value => textArea = value);
    }

    private void OnVisibleChanged(bool value) => textArea?.SetVisible(value);
    private void OnEnabledChanged(bool value) => textArea?.SetEnabled(value);
    private void OnReadOnlyChanged(bool value) => textArea?.SetReadOnly(value);
    private void SetValue() => textArea?.SetValue("孙膑");
    private string? GetValue() => textArea?.Value;
}