Web Components 버튼 오버view

    Web Components Button Component를 사용하면 Web Components 앱에서 작업을 트리거하는 클릭 가능한 요소를 활성화할 수 있습니다. 버튼 변형을 설정하고, 래핑된 요소의 스타일을 구성하고, 크기를 정의하는 방법을 완전히 제어할 수 있습니다. 또한 Button Component는 Web Components Button OnClick 이벤트를 통해 유연성을 제공하고, Web Components 버튼을 토글하고, Web Components 버튼을 비활성화하는 등의 작업을 수행할 수 있습니다.

    Web Components Button Example

    Usage

    먼저 다음 명령을 실행하여 Ignite UI for Web Components 설치해야 합니다.

    npm install igniteui-webcomponents

    그 다음에는 필요한 CSS를 가져오IgcButtonComponent 고, 그 모듈을 등록해야 합니다. 다음과 같습니다:

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

defineComponents(IgcButtonComponent);

    Ignite UI for Web Components에 대한 완전한 소개는 '시작 주제'를 읽어보세요.

    사용하기 가장 간단한 방법은IgcButtonComponent 다음과 같습니다:

    <igc-button>Click me</igc-button>

    Prefix / Suffix

    ​prefix그리고suffix 슬롯IgcButtonComponent 컴포넌트에서는 버튼의 주요 콘텐츠 앞뒤에 다른 콘텐츠를 추가할 수 있습니다.

    <igc-button type="button" variant="contained">
    <span slot="prefix">+</span>Click me<span slot="suffix">-</span>
</igc-button>

    Type

    속성이<button> 설정되면 버튼 컴포넌트는 내부 구조를 a<a>에서 타입 요소로href 변경합니다. 이 경우 버튼은 일반 링크로 생각할 수 있습니다. 속성을 설정하면href 그리고 속성도 설정할rel​target​download 수 있습니다. 버튼 컴포넌트가 내부적으로 실제<button> 요소를 사용할 경우, 속성 값을 다음 중 하나로 설정하여 지정할Type 수 있습니다:

    • Submit- 양식 데이터를 제출할 때
    • reset- 폼 데이터를 초기 값으로 리셋하고 싶을 때
    • button- 웹페이지 어디에나 커스텀 기능이 있는 버튼을 추가하고 싶을 때

    Button Variants

    Contained Button

    속성 기능을variant 사용해 컴포넌트 템플릿에 간단한 포함된 버튼을 추가하세요. 변형을 설정하지 않으면 기본적으로 '포함된'으로 설정됩니다.

    <igc-button variant="contained">Contained</igc-button>

    Outlined Button

    버튼을 만들기outlined 위해 해야 할 일은 속성의 값을 변경하는 것뿐입니다variant:

    <igc-button variant="outlined">Outlined</igc-button>

    Flat Button

    비유적으로 변이로 전환flat 할 수 있습니다.

    <igc-button variant="flat">Flat</igc-button>

    Floating Action Button

    속성 설정을variant​fab 통해 플로팅 액션 버튼을 만들 수 있습니다:

    <igc-button variant="fab">Fab</igc-button>

    Button Sizing

    사용자는IgcButtonComponent 사용--ig-size CSS 변수. 다음 예시에서는 모든 크기 값을 표시하는 라디오 버튼을 추가할 것입니다. 이렇게 하면 선택될 때마다 버튼 크기를 변경할 수 있습니다.

    import { defineComponents, IgcButtonComponent, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
defineComponents(IgcButtonComponent, IgcRadioComponent, IgcRadioGroupComponent);

    <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>

    this.radioGroup = document.getElementById('radio-group') as IgcRadioGroupComponent;
this.outlinedButton = document.getElementById('outlined-btn') as IgcButtonComponent;
this.flatButton = document.getElementById('flat-btn') as IgcButtonComponent;
this.containedButton = document.getElementById('contained-btn') as IgcButtonComponent;
this.fabButton = document.getElementById('fab-btn') as IgcButtonComponent;

this.radioGroup.addEventListener('click', (radio: any) => {
    this.outlinedButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
    this.flatButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
    this.containedButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
    this.fabButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
});

    위 코드를 구현한 결과는 다음과 같아야 합니다.

    Download

    속성을 설정하면download 사용자가 링크된 URL을 저장하라는 메시지가 나옵니다.

    <igc-button
    href=""
    variant="contained"
    download="url_to_content"
    target="_blank">
    Download
</igc-button>

    Styling

    이 문서는IgcButtonComponent 스타일링에 사용할 수 있는 세 가지 CSS 부품을 공개합니다:

    이름 설명
    base igc-button 구성 요소의 기본 button 요소입니다.
    prefix igc-button 구성 요소의 접두사 컨테이너입니다.
    suffix igc-button 구성 요소의 접미사 컨테이너입니다.

    CSS 부분은base 랩된 요소(or<button>)<a>를 스타일링할 수 있게 해줍니다.

    igc-button::part(base) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
  padding: 18px;
}

    API References

    Additional Resources