Web Components 입력 개요

Ignite UI for Web Components 입력은 사용자가 데이터를 입력할 수 있는 구성 요소입니다.

Web Components 입력 예제

import { defineComponents, IgcInputComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcInputComponent);
export class InputOverview {
    constructor() {
    }
}

new InputOverview();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Input Overview</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-input type="email" label="Subscribe" placeholder="john.doe@mail.com">
          <span slot="prefix">Email</span>
        </igc-input>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

시작하려면 TypeScript 파일에서 IgcInputComponent 가져오고 다음과 같이 DefineComponents() 함수를 호출하여 구성 요소를 등록해야 합니다.

import { defineComponents, IgcInputComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcInputComponent);
ts

Ignite UI for Web Components에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

컴포넌트를 IgcInputComponent 임포트한 후 사용할 준비가 되었으니 첫 번째 입력을 추가해 보겠습니다.

<igc-input type="email" label="Subscribe" placeholder="john.doe@mail.com"></igc-input>
html

접두사 접미사

prefix 및 suffix 슬롯을 사용하면 입력의 기본 콘텐츠 앞뒤에 다양한 콘텐츠를 추가할 수 있습니다. 다음 샘플에서는 텍스트 접두사와 아이콘 접미사가 있는 새 입력 필드를 만듭니다.

import { defineComponents, IgcIconComponent, IgcInputComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcIconComponent, IgcInputComponent);
const phoneIcon =
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>';

export class InputPrefixSuffix {
    constructor() {
        registerIconFromText("phone", phoneIcon);
    }
}

new InputPrefixSuffix();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Input Prefix & Suffix</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-input type="tel" label="Phone" placeholder="888 123456">
          <span slot="prefix">+359</span>
          <igc-icon name="phone" slot="suffix"></igc-icon>
        </igc-input>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

도우미 텍스트

helper-text 슬롯은 입력 아래에 배치된 힌트를 제공합니다. 전화기 입력에 도우미 텍스트를 추가해 보겠습니다.

import { defineComponents, IgcIconComponent, IgcInputComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcIconComponent, IgcInputComponent);
const phoneIcon =
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>';

export class InputHelperText {
    constructor() {
        registerIconFromText("phone", phoneIcon);
    }
}

new InputHelperText();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Input Helper Text</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-input type="tel" label="Phone">
          <span slot="prefix">+359</span>
          <igc-icon name="phone" slot="suffix"></igc-icon>
          <span slot="helper-text">Ex.: +359 888 123 456</span>
        </igc-input>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

입력 크기 조정

사용자가 크기를 변경하도록 허용할 수 있습니다. IgcInputComponent 사용하여--ig-size CSS 변수. 이를 위해 모든 크기 값을 표시하는 라디오 버튼을 추가하겠습니다. 이렇게 하면 하나가 선택될 때마다 입력 크기가 변경됩니다.

import { defineComponents, IgcIconComponent, IgcInputComponent, IgcRadioComponent, IgcRadioGroupComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './InputSizingStyle.css';

defineComponents(IgcIconComponent, IgcInputComponent, IgcRadioComponent, IgcRadioGroupComponent);
const phoneIcon =
    '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>';

export class InputSize {
    radioGroup: IgcRadioGroupComponent;
    inputRequired: IgcInputComponent;
    inputDisabled: IgcInputComponent;
    inputReadonly: IgcInputComponent;

    constructor() {
        this.radioGroup = document.getElementById('radio-group') as IgcRadioGroupComponent;
        this.inputRequired = document.getElementById('input-required') as IgcInputComponent;
        this.inputDisabled = document.getElementById('input-disabled') as IgcInputComponent;
        this.inputReadonly = document.getElementById('input-readonly') as IgcInputComponent;
        registerIconFromText("phone", phoneIcon);

        this.radioGroup.addEventListener('click', (radio: any) => {
            this.inputRequired.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
            this.inputDisabled.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
            this.inputReadonly.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
        });
    }
}

new InputSize();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Input Size</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-radio-group id="radio-group" alignment="horizontal">
          <igc-radio name="size" value="small" label-position="after">Small</igc-radio>
          <igc-radio name="size" value="medium" label-position="after" checked>Medium</igc-radio>
          <igc-radio name="size" value="large" label-position="after">Large</igc-radio>
        </igc-radio-group>

        <igc-input id="input-required" type="text" label="Required" value="This input is required" required></igc-input>
        <igc-input id="input-disabled" type="text" label="Disabled" value="This input is disabled" disabled></igc-input>
        <igc-input id="input-readonly" type="text" label="Readonly" value="This input is readonly" readonly></igc-input>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

.button-container {
    display: flex;
    justify-content: space-evenly;
    margin-top: 20px;
}

#radio-group {
    display: flex;
    margin: 0 auto;
    width: 15%;
}css

위 샘플에서는 다음 속성의 사용을 보여주었습니다.

required- 입력을 필수로 표시하는 데 사용됩니다.
disabled- 입력을 비활성화하는 데 사용됩니다.
readonly- 입력을 읽기 전용으로 표시하는 데 사용됩니다.

전체 속성 목록은 IgcInputComponent API에서 찾을 수 있습니다.

스타일링

구성 요소는 IgcInputComponent 거의 모든 내부 요소에 대한 CSS 부분을 노출합니다. 다음 표에는 노출된 모든 CSS 부분이 나열되어 있습니다.

이름	설명
`container`	모든 기본 입력 요소를 보유하는 기본 래퍼입니다.
`input`	기본 입력 요소입니다.
`label`	기본 레이블 요소입니다.
`prefix`	접두사 래퍼.
`suffix`	접미사 래퍼.
`helper-text`	도우미 텍스트 래퍼입니다.

igc-input::part(input) {
  background-color: var(--ig-primary-100);
  border-color: var(--ig-secondary-500);
  box-shadow: none;
}

igc-input::part(label) {
  color: var(--ig-gray-700);
}

igc-input::part(prefix),
igc-input::part(suffix) {
  color: var(--ig-primary-600-contrast);
  background-color: var(--ig-primary-600);
  border-color: var(--ig-secondary-600);
}
scss

import { defineComponents, IgcIconComponent, IgcInputComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './InputStyling.css';

defineComponents(IgcIconComponent, IgcInputComponent);
const phoneIcon =
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>';

export class InputStyling {
    constructor() {
        registerIconFromText("phone", phoneIcon);
    }
}

new InputStyling();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Input Styling</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-input type="tel" label="Phone" placeholder="888 123456">
          <span slot="prefix">+359</span>
          <igc-icon name="phone" slot="suffix"></igc-icon>
        </igc-input>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-input::part(input){
    background-color: rgb(169, 214, 229);
    border-color: rgb(42, 111, 151);
}

igc-input::part(label){
    color: rgb(1, 42, 74);
}

igc-input::part(prefix),
igc-input::part(suffix){
    color: white;
    border-color: rgb(42, 111, 151);
    background-color: rgb(70, 143, 175);
}
css