Input

Input (입력)

Bulma input CSS 클래스는 <input> HTML 요소를 위한 클래스예요. 색상·크기·상태별 수정자(modifier)를 지원해요.

출처: 문서

본문

Bulma input CSS 클래스는 <input> HTML 요소를 위해 만들어졌어요. 다음 type 속성들이 지원돼요:

  • type="text"
  • type="password"
  • type="email"
  • type="tel"

다음 수정자들이 지원되며 각각에 영향을 줘요:

<input class="input" type="text" placeholder="Text input" />

색상 (Colors)

Primary, Link, Info, Success, Warning, Danger 등 각 색상 수정자를 적용할 수 있어요.

<input
  class="input is-link"
  type="text"
  placeholder="Link input"
/>

<input
  class="input is-primary"
  type="text"
  placeholder="Primary input"
/>

<input
  class="input is-info"
  type="text"
  placeholder="Info input"
/>

<input
  class="input is-success"
  type="text"
  placeholder="Success input"
/>

<input
  class="input is-warning"
  type="text"
  placeholder="Warning input"
/>

<input
  class="input is-danger"
  type="text"
  placeholder="Danger input"
/>

크기 (Sizes)

is-small, is-normal, is-medium, is-large 등 4가지 크기 수정자를 적용할 수 있어요.

<input
  class="input is-small"
  type="text"
  placeholder="Small input"
/>

<input
  class="input is-normal"
  type="text"
  placeholder="Normal input"
/>

<input
  class="input is-medium"
  type="text"
  placeholder="Medium input"
/>

<input
  class="input is-large"
  type="text"
  placeholder="Large input"
/>

스타일 (Styles)

is-rounded 수정자를 붙이면 둥근 모서리 입력을 만들 수 있어요.

<input class="input is-rounded" type="text" placeholder="Rounded input" />

상태 (States)

일반 (Normal)

<div class="control">
  <input class="input" type="text" placeholder="Normal input" />
</div>

호버 (Hover)

<div class="control">
  <input class="input is-hovered" type="text" placeholder="Hovered input" />
</div>

포커스 (Focus)

<div class="control">
  <input class="input is-focused" type="text" placeholder="Focused input" />
</div>

로딩 (Loading)

control 컨테이너에 is-loading을 붙이면 로딩 스피너가 표시돼요.

<div class="control is-loading">
  <input class="input" type="text" placeholder="Loading input" />
</div>

control 컨테이너에 is-small, is-medium, is-large를 붙이면 로딩 스피너의 크기를 조절할 수 있어요.

<div class="field">
  <div class="control is-small is-loading">
    <input
      class="input is-small"
      type="text"
      placeholder="Small loading input"
    />
  </div>
</div>
<div class="field">
  <div class="control is-loading">
    <input class="input" type="text" placeholder="Normal loading input" />
  </div>
</div>
<div class="field">
  <div class="control is-medium is-loading">
    <input
      class="input is-medium"
      type="text"
      placeholder="Medium loading input"
    />
  </div>
</div>
<div class="field">
  <div class="control is-large is-loading">
    <input
      class="input is-large"
      type="text"
      placeholder="Large loading input"
    />
  </div>
</div>

비활성 (Disabled)

<div class="control">
  <input class="input" type="text" placeholder="Disabled input" disabled />
</div>

읽기 전용와 정적 입력 (Readonly and static inputs)

readonly HTML 속성을 사용하면 입력이 일반 입력과 비슷해 보이지만, 편집할 수 없고 그림자도 없어요.

<div class="control">
  <input class="input" type="text" value="This text is readonly" readonly />
</div>

여기에 is-static 수정자를 추가하면 배경, 테두리, 그림자, 가로 패딩을 제거하면서 세로 간격은 유지해요. 그래서 가로 폼 같은 어떤 컨텍스트에서도 입력을 쉽게 정렬할 수 있어요.

From · To

<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label">From</label>
  </div>
  <div class="field-body">
    <div class="field">
      <p class="control">
        <input
          class="input is-static"
          type="email"
          value="[email protected]"
          readonly
        />
      </p>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label">To</label>
  </div>
  <div class="field-body">
    <div class="field">
      <p class="control">
        <input class="input" type="email" placeholder="Recipient email" />
      </p>
    </div>
  </div>
</div>

Font Awesome 아이콘과 함께 쓰기 (With Font Awesome icons)

컨트롤에 2가지 수정자 중 하나를 붙일 수 있어요:

  • has-icons-left
  • 그리고/또는 has-icons-right

아이콘에도 수정자를 추가해야 해요:

  • has-icons-left를 쓰면 icon is-left
  • has-icons-right를 쓰면 icon is-right

입력의 크기가 아이콘 컨테이너의 크기를 결정해요.

<div class="field">
  <p class="control has-icons-left has-icons-right">
    <input class="input" type="email" placeholder="Email" />
    <span class="icon is-small is-left">
      <i class="fas fa-envelope"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-check"></i>
    </span>
  </p>
</div>
<div class="field">
  <p class="control has-icons-left">
    <input class="input" type="password" placeholder="Password" />
    <span class="icon is-small is-left">
      <i class="fas fa-lock"></i>
    </span>
  </p>
</div>

컨트롤에 아이콘이 있으면, Bulma는 입력이나 아이콘의 크기와 관계없이 아이콘이 가운데 유지되도록 보장해요.

<div class="control has-icons-left has-icons-right">
  <input class="input is-small" type="email" placeholder="Email" />
  <span class="icon is-small is-left">
    <i class="fas fa-envelope"></i>
  </span>
  <span class="icon is-small is-right">
    <i class="fas fa-check"></i>
  </span>
</div>

<div class="control has-icons-left has-icons-right">
  <input class="input" type="email" placeholder="Email" />
  <span class="icon is-small is-left">
    <i class="fas fa-envelope"></i>
  </span>
  <span class="icon is-small is-right">
    <i class="fas fa-check"></i>
  </span>
</div>

<div class="control has-icons-left has-icons-right">
  <input class="input is-medium" type="email" placeholder="Email" />
  <span class="icon is-left">
    <i class="fas fa-envelope"></i>
  </span>
  <span class="icon is-right">
    <i class="fas fa-check"></i>
  </span>
</div>

<div class="control has-icons-left has-icons-right">
  <input class="input is-large" type="email" placeholder="Email" />
  <span class="icon is-medium is-left">
    <i class="fas fa-envelope"></i>
  </span>
  <span class="icon is-medium is-right">
    <i class="fas fa-check"></i>
  </span>
</div>

Sass와 CSS 변수 (Sass and CSS variables)

Sass 변수 CSS 변수 값
```sass
$input-h
``` ```css
var(--bulma-input-h)
``` ```css
var(--bulma-scheme-h)
```
```sass
$input-s
``` ```css
var(--bulma-input-s)
``` ```css
var(--bulma-scheme-s)
```
```sass
$input-l
``` ```css
var(--bulma-input-l)
``` ```css
var(--bulma-scheme-main-l)
```
```sass
$input-border-l
``` ```css
var(--bulma-input-border-l)
``` ```css
var(--bulma-border-l)
```
```sass
$input-border-l-delta
``` ```css
var(--bulma-input-border-l-delta)
``` ```css
0%
```
```sass
$input-hover-border-l-delta
``` ```css
var(--bulma-input-hover-border-l-delta)
``` ```css
var(--bulma-hover-border-l-delta)
```
```sass
$input-active-border-l-delta
``` ```css
var(--bulma-input-active-border-l-delta)
``` ```css
var(--bulma-active-border-l-delta)
```
```sass
$input-color-l
``` ```css
var(--bulma-input-color-l)
``` ```css
var(--bulma-text-strong-l)
```
```sass
$input-background-l
``` ```css
var(--bulma-input-background-l)
``` ```css
var(--bulma-scheme-main-l)
```
```sass
$input-background-l-delta
``` ```css
var(--bulma-input-background-l-delta)
``` ```css
0%
```
```sass
$input-height
``` ```css
var(--bulma-input-height)
``` ```css
var(--bulma-control-height)
```
```sass
$input-shadow
``` ```css
var(--bulma-input-shadow)
``` ```css
inset 0 0.0625em 0.125em hsla(
var(--bulma-scheme-h),
var(--bulma-scheme-s),
var(--bulma-scheme-invert-l),
0.05
)
```
```sass
$input-placeholder-color
``` ```css
var(--bulma-input-placeholder-color)
``` ```css
hsla(
var(--bulma-text-h),
var(--bulma-text-s),
var(--bulma-text-strong-l),
0.3
)
```
```sass
$input-focus-h
``` ```css
var(--bulma-input-focus-h)
``` ```css
var(--bulma-focus-h)
```
```sass
$input-focus-s
``` ```css
var(--bulma-input-focus-s)
``` ```css
var(--bulma-focus-s)
```
```sass
$input-focus-l
``` ```css
var(--bulma-input-focus-l)
``` ```css
var(--bulma-focus-l)
```
```sass
$input-focus-shadow-size
``` ```css
var(--bulma-input-focus-shadow-size)
``` ```css
var(--bulma-focus-shadow-size)
```
```sass
$input-focus-shadow-alpha
``` ```css
var(--bulma-input-focus-shadow-alpha)
``` ```css
var(--bulma-focus-shadow-alpha)
```
```sass
$input-disabled-color
``` ```css
var(--bulma-input-disabled-color)
``` ```css
var(--bulma-text-weak)
```
```sass
$input-disabled-background-color
``` ```css
var(--bulma-input-disabled-background-color)
``` ```css
var(--bulma-background)
```
```sass
$input-disabled-border-color
``` ```css
var(--bulma-input-disabled-border-color)
``` ```css
var(--bulma-background)
```
```sass
$input-disabled-placeholder-color
``` ```css
var(--bulma-input-disabled-placeholder-color)
``` ```css
hsla(
var(--bulma-text-h),
var(--bulma-text-s),
var(--bulma-text-weak-l),
0.3
)
```
```sass
$input-arrow
``` ```css
var(--bulma-input-arrow)
``` ```css
var(--bulma-link)
```
```sass
$input-icon-color
``` ```css
var(--bulma-input-icon-color)
``` ```css
var(--bulma-text-light)
```
```sass
$input-icon-hover-color
``` ```css
var(--bulma-input-icon-hover-color)
``` ```css
var(--bulma-text-weak)
```
```sass
$input-icon-focus-color
``` ```css
var(--bulma-input-icon-focus-color)
``` ```css
var(--bulma-link)
```
```sass
$input-radius
``` ```css
var(--bulma-input-radius)
``` ```css
var(--bulma-radius)
```

더 알아보기 (Learn more)