文本框 (Text)

单行文本框输入组件。

概述

文本字符输入框

代码演示

1.默认示例

默认：

赋值：

禁用：

提示：

namespace WebSite.Docus.Inputs.Texts;

class Text1 : BaseComponent
{
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Field<Text>("默认：", "Text1").Build();
        builder.Field<Text>("赋值：", "Text2").Value("test").Build();
        builder.Field<Text>("禁用：", "Text3").Enabled(false).Build();
        builder.Field<Text>("提示：", "Text4").Set(f => f.Placeholder, "输入提示").Build();
    }
}

2.事件示例

示例：

namespace WebSite.Docus.Inputs.Texts;

class Text2 : BaseComponent
{
    private string? message;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        //ValueChanged事件
        builder.Field<Text>("示例：", "Text").ValueChanged(OnValueChanged).Build();
        builder.Div("tips", message);
    }

    private void OnValueChanged(string value)
    {
        message = value;
        StateChanged();
    }
}

3.控制示例

可见

可用

只读

示例：

namespace WebSite.Docus.Inputs.Texts;

class Text3 : BaseComponent
{
    private Text? text;

    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<Text>("示例：", "Text").Build(value => text = value);
    }

    private void OnVisibleChanged(bool value) => text?.SetVisible(value);
    private void OnEnabledChanged(bool value) => text?.SetEnabled(value);
    private void OnReadOnlyChanged(bool value) => text?.SetReadOnly(value);
    private void SetValue() => text?.SetValue("孙膑");
    private string? GetValue() => text?.Value;
}