Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Textarea 多行文本框

用于录入大量文字

可接受大量文字

Demo

设置 IsDisabled 属性值为 true 时,组件禁止输入

Demo

设置 readonly 属性时,组件禁止输入

Demo

设置 rows 属性时,组件初始化显示固定行数高度

Demo

绑定组件内变量,数据自动同步

Demo

Attributes

Loading...
@page "/textareas"

<h3>Textarea 多行文本框</h3>

<h4>用于录入大量文字</h4>

<Block Title="基本用法" Introduction="可接受大量文字">
    <label class="form-label">基本用法</label>
    <Textarea placeholder="请输入 ..." rows="4"></Textarea>
</Block>

<Block Title="禁用" Introduction="设置 <code>IsDisabled</code> 属性值为 <code>true</code> 时,组件禁止输入">
    <label class="form-label">基本用法</label>
    <Textarea placeholder="请输入 ..." rows="4" IsDisabled="true"></Textarea>
</Block>

<Block Title="只读" Introduction="设置 <code>readonly</code> 属性时,组件禁止输入">
    <label class="form-label">基本用法</label>
    <Textarea placeholder="请输入 ..." rows="4" readonly></Textarea>
</Block>

<Block Title="高度" Introduction="设置 <code>rows</code> 属性时,组件初始化显示固定行数高度">
    <label class="form-label">基本用法</label>
    <Textarea placeholder="请输入 ..." rows="4"></Textarea>
</Block>

<Block Title="双向绑定" Introduction="绑定组件内变量,数据自动同步">
    <div class="row g-3">
        <div class="col-12">
            <label class="form-label">基本用法</label>
            <Textarea placeholder="请输入 ..." rows="4" @bind-Value="@Text"></Textarea>
        </div>
        <div class="col-12">
            <label class="form-label">绑定值</label>
            <div class="form-control textarea-demo">@Text</div>
        </div>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Shared.Common;
using System.Collections.Generic;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public partial class Textareas
    {
        private string Text { get; set; } = "";

        private IEnumerable<AttributeItem> GetAttributes()
        {
            return new AttributeItem[]
            {
                new AttributeItem() {
                    Name = "ShowLabel",
                    Description = "是否显示前置标签",
                    Type = "bool",
                    ValueList = "true|false",
                    DefaultValue = "false"
                },
                new AttributeItem() {
                    Name = "DisplayText",
                    Description = "前置标签显示文本",
                    Type = "string",
                    ValueList = " — ",
                    DefaultValue = " — "
                },
                new AttributeItem()
                {
                    Name = "IsDisabled",
                    Description = "是否禁用 默认为 fasle",
                    Type = "bool",
                    ValueList = "true|false",
                    DefaultValue = "false"
                }
            };
        }
    }
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload