Clarity Forms - 将多个输入元素放在同一行

Question

我正在尝试使用 Clarity Forms 创建如下内容：

但是，看起来所有在表单中使用的 Clarity 输入元素都被包装到 <clr-xxx-container> 中，其中应用了 class clr-row。因此，似乎不可能将两个输入元素并排放置并利用 Clarity Form Elements。

我的理解是正确的还是我遗漏了什么？

我的代码如下所示：

   <form clrForm clrLayout="horizontal">
        <clr-input-container>
            <label>Disk Capacity</label>
            <input clrInput type="text" [(ngModel)]="model" name="example" required />

            <clr-control-helper>Disk capacity to add to VM</clr-control-helper>
            <clr-control-error>Error message that appears after focus is lost and control is invalid</clr-control-error>
        </clr-input-container>
        <select clrSelect name="options" [(ngModel)]="options">
            <option value="GB">GB</option>
            <option value="TB">TB</option>
            <option value="PB">PB</option>
        </select>
    </form>

StackBlitz：https://stackblitz.com/edit/clarity-v2-forms-issue

Answer 1

Clarity 具有基本设计，但尚未内置 Angular 支持。为此，您将不得不使用表单的 HTML/CSS 版本，因为我们尚未定义如何在同一行中使用多个控件进行内置验证。

在此处查看演示源：https://github.com/vmware/clarity/tree/master/src/dev/src/app/forms/input-group

长期来看，这是一个功能请求：https://github.com/vmware/clarity/issues/3778

Clarity Forms - 将多个输入元素放在同一行

Clarity Forms - Place multiple input elements on same row

angular

vmware-clarity