Web Components 버튼 오버view

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

    Web Components 버튼 예시

    EXAMPLE
    TS
    HTML
    ButtonOverviewStyle.css
    index.css
    Edit in:

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

    용법

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

    npm install igniteui-webcomponents
cmd

    그런 다음 다음과 같이 필요한 CSS인 IgcButtonComponent 가져오고 해당 모듈을 등록해야 합니다.

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

defineComponents(IgcButtonComponent);
ts

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

    사용을 IgcButtonComponent 시작하는 가장 간단한 방법은 다음과 같습니다.

    <igc-button>Click me</igc-button>
html
    Ignite UI for Web Components | CTA 배너

    접두사 접미사

    와 함께 prefix 그리고 suffix 슬롯 IgcButtonComponent 구성 요소를 사용하면 버튼의 기본 콘텐츠 앞뒤에 다양한 콘텐츠를 추가할 수 있습니다.

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

    유형

    ​href 속성이 설정되면 버튼 구성 요소의 내부 구조가 <button>에서 <a> 유형 요소로 변경됩니다. 이 경우 버튼은 일반 링크로 간주될 수 있습니다. href 속성을 설정하면 rel, target 및 download 속성도 설정할 수 있습니다. 버튼 구성 요소가 내부적으로 실제 <button> 요소를 사용하는 경우 속성을 다음 값 중 하나로 설정하여 Type 지정할 수 있습니다.

    • Submit- 양식 데이터를 제출하려는 경우
    • reset- 양식 데이터를 초기 값으로 재설정하려는 경우
    • button- 웹페이지 어디든 맞춤 기능이 있는 버튼을 추가하고 싶을 때

    버튼 변형

    포함된 버튼

    구성요소 템플릿에 간단한 포함된 버튼을 추가하려면 variant 속성을 사용하세요. 변형을 설정하지 않으면 기본적으로 포함됨으로 설정됩니다.

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    윤곽선 버튼

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

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    플랫 버튼

    유사하게 flat 변형으로 전환할 수 있습니다.

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    플로팅 작업 버튼

    ​variant 속성을 fab로 설정하여 플로팅 작업 버튼을 만들 수 있습니다.

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    버튼 크기

    사용자는--ig-size CSS 변수를 사용하여 button 구성 요소의 크기를 변경할 수 있습니다. 다음 예에서는 모든 크기 값을 표시하기 위해 일부 라디오 버튼을 추가합니다. 이렇게 하면 하나가 선택될 때마다 버튼의 크기가 변경됩니다.

    import { defineComponents, IgcButtonComponent, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
defineComponents(IgcButtonComponent, IgcRadioComponent, IgcRadioGroupComponent);
ts
    <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>
html
    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})`);
}); 
ts

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

    EXAMPLE
    TS
    HTML
    ButtonSizingStyle.css
    index.css
    Edit in:

    다운로드

    ​download 속성을 설정하면 사용자에게 링크된 URL로 이동하는 대신 링크된 URL을 저장하라는 메시지가 표시됩니다.

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    스타일링

    이 컴포넌트는 IgcButtonComponent 스타일링에 사용할 수 있는 세 가지 CSS 부분을 노출합니다.

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

    CSS 부분을 사용하면 base 래핑된 요소(<button> or <a>)의 스타일을 지정할 수 있습니다.

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

    EXAMPLE
    TS
    HTML
    ButtonStyle.css
    index.css
    Edit in:

    API 참조

    추가 리소스