更改清晰度设计上的标题输入项的大小答案

【问题标题】：Change the size of header input item on clarity design更改清晰度设计上的标题输入项的大小
【发布时间】：2019-03-02 20:23:53
【问题描述】：

我正在使用clarity.design 示例中的标题栏，我对其进行了修改，试图使搜索输入占据标题栏中心的 100%，但我无法做到。

代码：

<clr-header class="header-6">
    <div class="branding">
      <a [routerLink]="['/']" routerLinkActive="router-link-active"  class="nav-link">
        <span class="title">Project Clarity</span>
      </a>
    </div>

    <form class="search" (ngSubmit)="onSearchSubmit(f)" #f="ngForm">
      <label for="search_input"></label>
      <input id="search_input" name="search_input" type="text" placeholder=" Search for keywords or paste link..." ngModel required>
    </form>

    <div class="header-actions">
      <div class="header-nav" [clr-nav-level]="1">
        <a class="nav-link nav-text">
          My menu
        </a>
      </div>

      <clr-dropdown>
        <button class="nav-icon" clrDropdownTrigger>
          <clr-icon shape="user"></clr-icon>
          <clr-icon shape="caret down"></clr-icon>
        </button>
        <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
          <a clrDropdownItem>Preferences</a>
          <a clrDropdownItem>Log out</a>
        </clr-dropdown-menu>
      </clr-dropdown>
    </div>
  </clr-header>

这就是它的样子，我希望标题使用所有剩余的宽度。

谢谢。

【问题讨论】：

标签： javascript html angular vmware-clarity

【解决方案1】：

您的问题的解决方案是 CSS。

我在下面给了你一个例子，告诉你可以从哪里开始。

如果这对你有帮助，请告诉我。

/* First, make your elements float to the left or right */
.header-6 div
, .header-6 form {
  float: left;
}

div.header-actions{
  float: right;
}

/* Then give them some space */
div.branding
, form.search
, div.header-actions {
  padding-left: 20px;
  padding-right: 20px;;
}

 /* The rest is using FontAwesome and CSS to add the icons and the other stuff */

<clr-header class="header-6">
    <div class="branding">
      <a [routerLink]="['/']" routerLinkActive="router-link-active"  class="nav-link">
        <span class="title">Project Clarity</span>
      </a>
    </div>

    <form class="search" (ngSubmit)="onSearchSubmit(f)" #f="ngForm">
      <label for="search_input"></label>
      <input id="search_input" name="search_input" type="text" placeholder=" Search for keywords or paste link..." ngModel required>
    </form>

    <div class="header-actions">
      <div class="header-nav" [clr-nav-level]="1">
        <a class="nav-link nav-text">
          My menu
        </a>
      </div>

      <clr-dropdown>
        <button class="nav-icon" clrDropdownTrigger>
          <clr-icon shape="user"></clr-icon>
          <clr-icon shape="caret down"></clr-icon>
        </button>
        <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
          <a clrDropdownItem>Preferences</a>
          <a clrDropdownItem>Log out</a>
        </clr-dropdown-menu>
      </clr-dropdown>
    </div>
  </clr-header>

【讨论】：

我知道。它并不完美。我相信还有其他方法可以做到这一点，但这应该是一个好的开始。
感谢您的帮助。目前的解决方案不起作用，我添加了这个：form { width: 50%; min-width: 50%; } form > input { width: 100%; } 它不是全宽的，它是一个 hacky 解决方案，但至少它适用于标题的响应行为。

【解决方案2】：

标题使用弹性框进行布局。

这是一个POC stackblitz，它使用下面的 css 来覆盖默认搜索样式。

CSS

.search {
  border: 1px solid deeppink;
  flex: 1 1 auto;
  max-width: none;
}

.search > label {
  flex: 1 1 auto;
  max-width: 90%;
}

.search > label > input {
  width: 100%;
}

它应该为您提供一个调整应用视觉风格的起点。您可能还需要解决响应式用例。

【讨论】：