Enterprise-level component library based on Bootstrap and Blazor

star nuget license download repo commit master coverage

Textarea

Used to enter a large amount of text

A large amount of text is acceptable

Demo

When you set the IsDisabled property value to true , the component suppresses input

Demo

When you set the readonly property, the component prohibits input

Demo

When you set the rows property, component initialization displays a fixed row height

Demo

Binding variables within a component, data is automatically synchronized

Demo

Attributes

Loading...
@page "/textareas"
@inject IStringLocalizer<Textareas> Localizer

<h3>Textarea</h3>

<h4>Used to enter a large amount of text</h4>

<DemoBlock Title="Basic usage" Introduction="A large amount of text is acceptable" Name="Normal">
    <label class="form-label">Basic usage</label>
    <Textarea placeholder="Please enter ..." rows="4"></Textarea>
</DemoBlock>

<DemoBlock Title="Disable" Introduction="When you set the <code>IsDisabled </code> property value to <code>true </code>, the component suppresses input" Name="Disable">
    <label class="form-label">Basic usage</label>
    <Textarea placeholder="Please enter ..." rows="4" IsDisabled="true"></Textarea>
</DemoBlock>

<DemoBlock Title="Readonly" Introduction="When you set the <code>readonly </code> property, the component prohibits input"  Name="Readonly">
    <label class="form-label">Basic usage</label>
    <Textarea placeholder="Please enter ..." rows="4" readonly></Textarea>
</DemoBlock>

<DemoBlock Title="height" Introduction="When you set the <code>rows </code> property, component initialization displays a fixed row height"  Name="Height">
    <label class="form-label">Basic usage</label>
    <Textarea placeholder="Please enter ..." rows="4"></Textarea>
</DemoBlock>

<DemoBlock Title="Two-way binding" Introduction="Binding variables within a component, data is automatically synchronized"  Name="BindToWay">
    <div class="row g-3">
        <div class="col-12">
            <label class="form-label">Basic usage</label>
            <Textarea placeholder="Please enter ..." rows="4" @bind-Value="@Text"></Textarea>
        </div>
        <div class="col-12">
            <label class="form-label">The binding value</label>
            <div class="form-control textarea-demo">@Text</div>
        </div>
    </div>
</DemoBlock>

<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.Samples;

/// <summary>
/// 
/// </summary>
public partial class Textareas
{
    private string Text { get; set; } = "";

    private IEnumerable<AttributeItem> GetAttributes()
    {
        return new AttributeItem[]
        {
                new AttributeItem() {
                    Name = "ShowLabel",
                    Description = Localizer["ShowLabel"],
                    Type = "bool",
                    ValueList = "true|false",
                    DefaultValue = "false"
                },
                new AttributeItem() {
                    Name = "DisplayText",
                    Description = Localizer["DisplayText"],
                    Type = "string",
                    ValueList = " — ",
                    DefaultValue = " — "
                },
                new AttributeItem()
                {
                    Name = "IsDisabled",
                    Description = Localizer["IsDisabled"],
                    Type = "bool",
                    ValueList = "true|false",
                    DefaultValue = "false"
                }
        };
    }
}

B 站相关视频链接

暂无

交流群

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