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="可接受大量文字">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <label class="control-label">基本用法</label>
                <Textarea placeholder="请输入 ..." rows="4"></Textarea>
            </div>
        </div>
    </div>
</Block>

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

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

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

<Block Title="双向绑定" Introduction="绑定组件内变量,数据自动同步">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <label class="control-label">基本用法</label>
                <Textarea placeholder="请输入 ..." rows="4" @bind-Value="@Text"></Textarea>
            </div>
            <div class="form-group col-12">
                <label class="control-label">绑定值</label>
                <div class="form-control textarea-demo">@Text</div>
            </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群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload