基础知识 - 组件

组件是Radzen应用程序的基本构建块。每个页面都由组件组成：页面标题显示在Heading组件中，导航由Sidebar组件内部的PanelMenu处理。用户浏览DataGrid组件中显示的应用程序数据，并通过TextBox，DatePicker和其他输入组件进行更新。

Radzen组件在工具箱中可用。要使用组件，请将其从工具箱中拖放到页面上。

选择组件的另一种方法是通过Radzen右上角的“选择”下拉列表。

属性

每个组件都有一组控制其行为的属性。一些属性启用或禁用某些组件功能，其他属性指定组件外观（宽度，高度）。

某些组件属性可以数据绑定到页面属性。这样，您就可以通过处理事件来显示应用程序数据并根据用户操作配置组件。

查看“属性”文章以获取有关页面属性的其他信息。

以下是大多数组件共享的属性的列表：

Name 属性

每个组件都有一个名称，该名称在当前页面中应该是唯一的。 Name属性是少数无法与页面属性进行数据绑定的属性之一，因为组件名称应该是代码生成过程中已知的常量。

Visible 属性

Visible属性控制组件是否显示在页面上。默认情况下，它设置为true。将其设置为false将隐藏该组件。 Visible属性可以绑定到page属性，这将允许您基于应用程序数据或用户操作来隐藏或显示某些组件。

1. 创建一个名为textBoxVisible的页面属性，并将其设置为true。选中创建属性以获取提示。

2. 拖放一个TextBox组件。将其Visible属性设置为 ${textBoxVisible}。此数据将Visible组件属性绑定到textBoxVisible页面属性。

3. 拖放一个Button组件。将其文本设置为隐藏。处理其Click事件并添加Set属性操作。将“名称”设置为textBoxVisible，将“值”设置为false。单击按钮会将textBoxVisible属性设置为false，这将隐藏按钮。

Attributes 属性

Attributes属性允许指定自定义属性，这些自定义属性不能作为内置属性使用。这些通常是HTML属性和事件。

自定义事件 Custom events

要处理TextBox的输入DOM事件，请单击“+”按钮添加一个新属性。将“名称 Name”设置为 @input，将“值 Value”设置为 @MyCustomMethod。 @input语法是用于处理DOM事件的特殊Blazor语法。

Radzen将生成以下代码：

<RadzenTextBox@oninput="@MyCustomMethod"></RadzenTextBox>

实际事件处理程序（MyCustomMethod）应该在xxx.razor.cs文件中定义，其中xxx是页面的名称。

void MyCustomMethod(Microsoft.AspNetCore.Components.ChangeEventArgs args) { var value = args.Value; }

自定义属性 Custom attributes

一个常见的用例是将自定义CSS类设置为Radzen组件。为此，请添加一个自定义属性，将“名称”设置为“类”，将“值”设置为所需的类名，例如 my-class。

Radzen将生成以下代码：

<RadzenTextBoxclass="my-component"></RadzenTextBox>

Text 属性

Text属性使组件显示确定的值：文字（例如，Hide，Show）或页面属性（${text}, ${textBoxVisible}, ${counter}）。选中显示属性值以获取更多信息。

Value 属性

输入组件具有Value属性。它具有“特殊权力”。它只能与页面属性数据绑定：不接受文字值。它还会自动更新数据绑定到的页面属性。您可以选中获取用户输入以获取更多详细信息。

Data 属性

显示数据的组件通过Data属性执行此操作。这些是DataGrid，DropDown，Scheduler，DataList等。

Style 属性

这是一个复杂的属性：它具有控制组件外观的子属性。例如，宽度或高度。 Style属性映射到样式HTML属性。

Events 属性

有些组件会在某些条件下触发事件，例如，当用户与其交互时。例如，在TextBox中键入会触发其Change事件。单击一个按钮将触发Click事件。检查事件处理以获取有关Radzen中事件处理的其他信息。

Categories 属性

Radzen将组件归为以下类别：

一般 General

这些是常用的通用组件：按钮 Button，行 Row，列 Column，图标 Icon，图像 Image，链接 Link等。

容器 Containers

包含其他组件的组件。手风琴 Accordion，卡片 Card，字段集 Fieldset，面板 Panel，步骤（向导）Steps (wizard) 和选项卡 Tabs。

表单 Forms

所有输入组件都在那里：TextBox，CheckBox，DatePicker，DropDown，ListBox等。

数据 Data

这些组件显示数据（通常来自诸如数据库之类的数据源）：DataGrid，DataList，Tree，TreeGrid等。

验证器 Validators

这些可以验证您的用户输入并提供以下形式：RequiredValidator，LenghtValidator等。