> For the complete documentation index, see [llms.txt](https://narro.gitbook.io/tinyts-handbook-cn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://narro.gitbook.io/tinyts-handbook-cn/controls.md).

# 使用控件

我们把实现了一定功能的组件称之为控件，如果你使用过.NET windows form或者asp.net,那么你对控件应该是挺熟悉的了。控件在tinyts中是以类的形式被实现的，比如说Button类实现了一个按钮的基本功能，TextBox类实现了一个输入框的基本功能。tinyts包含了一个功能丰富的控件库以供用户使用。下面看一个控件使用的示例：

```typescript
import {TextView} from 'tinyts/core/TextView';

var txtDemo = new TextView();
txtDemo.BindBySelector("#some-label");
txtDemo.SetText("Hello world!");
```

我们定义了一个TextView类的实例，并调用他的BindBySelector方法将其与DOM中id为some-label的元素进行绑定，最后调用了该类的SetText方法为该元素设置文本内容为Hello world。这就是一个使用控件的完整示例。不过就这样看起来，使用控件似乎有点事倍功半，并没有得到很大的好处。那么，请看下一个示例：

```css
 .overlay{
   background-color:#eee;
   position:absolute;
   width:100px;
   height:100px;
 }
```

```markup
 <div id="dialog" class="overlay" data-draggable="true"></div>
```

```typescript
import {EditDialog} from 'tinyts/controls/EditDialog';

var dialog = new EditDialog();
dialog.SetID('dialog');
dialog.LoadView();
```

在这个示例中，我们在html中定义了一个id为dialog的div元素，并为该元素添加了data-draggable属性。最终，我们将得到一个带有拖拽功能的div。而在typescript代码中，只是将该div元素绑定到了一个EditDialog对象dialog，并调用了他的LoadView方法。现在，你应该能体会到使用控件的方便之处了吧？控件是tinyts的一个基础功能，我们将在后续的章节中介绍如何开发tinyts控件。下一章将会介绍tinyts的核心内容——视图模型！