需要一个使用清晰度角度和输入容器的搜索框

【问题标题】：Need a searchbox using clarity angular with input container需要一个使用清晰度角度和输入容器的搜索框
【发布时间】：2020-05-02 14:22:37
【问题描述】：

我正在尝试构建一个带有嵌入式 X 按钮的搜索栏。我使用清晰度和角度。 Clarity 没有提供直接符合我需求的组件。

但是我遇到了 2 个组件，即 clr-password-container 和 clr-date-container，它们看起来与我想要的相似。

https://github.com/vmware/clarity/blob/master/packages/angular/projects/clr-angular/src/forms/datepicker/date-container.ts

但它不会以呈现 clr-date-container 或 clr-password-container 的方式呈现我的搜索框。这是我得到的：

https://stackblitz.com/edit/clarity-form-reset-wrmqn4 我哪里错了？

【问题讨论】：

标签： angular vmware-clarity clarity

【解决方案1】：

您可以使用内置的网格来布局表单控件。

这是表单标记：

    <form class="clr-form">
        <div class="clr-control-container">
            <div class="clr-input-wrapper clr-row">
                <input clrInput placeholder="Filter your list here..." name="filter" [(ngModel)]="filter" class="clr-col-10"/>
                <button class="clr-input-group-icon-action" type="button">
          <clr-icon shape="times" title="filter" class="searchbar-input"></clr-icon>
      </button>
            </div>
        </div>
    </form>

请记住，如果您使用的是 Angular 表单 clrForm，那么某些类 (.clr-form) 将被自动添加。这里要注意的重要一点是，我将.clr-row 添加到输入包装器，然后将相应的类添加到输入和按钮。

这是一个有效的堆栈闪电战：https://stackblitz.com/edit/clarity-form-reset-9aguhf

【讨论】：