获取 UIKit - 附加带有电子邮件地址的表单

Question

在 UIKit 上，如何创建一个带有内联文本的电子邮件表单，以便用户可以输入文本并且表单后面有 @example.com。

您可以在 bootstrap 此处执行此操作：https://getbootstrap.com/docs/4.0/components/input-group/

但是我无法在 UiKit 上重新创建它？

Answer 1

只是 "borrow" 来自 bootstrap 的概念。将grid内的元素包裹起来，用class名称分组，在分组内添加flexbox显示的元素，会自动适应。从我在消息来源中看到的 - 他们给了他 1% 的宽度 - 也许有这种情况，但无论如何只适用于 display:flex.

这是我的提议：

HTML

<form class="uk-grid-small" uk-grid>

    <div class="uk-width-1-2@s input-group">
        <input class="uk-input" type="text" placeholder="50">
      <div class="input-group-append">
        <div class="input-group-text">
          @email
        </div>
      </div>
    </div>
</form>

CSS

.input-group {
  display: flex;
}
.input-group-append {
  display:flex;
  align-items:center;
}
.input-group-text {
    display: flex;
    align-items: center;
    font-weight: 400;
    height:38px;
    color: #495057;
    padding: 0 10px 0;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
  border-left:none;
}

我也做了一个代码笔供参考https://codepen.io/arysom/pen/QzGjyo

获取 UIKit - 附加带有电子邮件地址的表单

Get UIKit - Append form with email address

getuikit