React 체크박스 개요
React Checkbox는 React 앱에 체크박스를 추가할 수 있는 구성 요소입니다. 표준 HTML 체크박스처럼 작동하여 사용자가 기본 선택 및 선택 취소 상태 또는 추가 불확정 상태를 선택할 수 있습니다. 또한 React 체크박스 구성 요소의 스타일을 완벽하게 제어하고 양식과 함께 사용할 수 있습니다.
체크박스 예
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrCheckbox } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
export default class CheckboxOverview extends React.Component <any, any> {
constructor (props: any ) {
super (props);
}
public render (): JSX .Element {
return (
<div className ="sample" >
<IgrCheckbox >
<span > Checkbox</span >
</IgrCheckbox >
</div >
);
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<CheckboxOverview /> );
tsx コピー
용법
기본적으로 IgrCheckbox
선택됨/선택 취소됨 상태 중에서 선택할 수 있습니다. 기본 스타일은 머티리얼 디자인 지침의 선택 제어 사양에 따라 수행됩니다.
먼저, 다음 명령을 실행하여 Ignite UI for React 설치해야 합니다.
npm install igniteui-react
cmd
그런 다음 다음과 같이 와 필요한 CSS를 가져와야 IgrCheckbox
합니다.
import { IgrCheckbox } from 'igniteui-react' ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
tsx
IgrCheckbox
사용을 시작하는 가장 간단한 방법은 다음과 같습니다.
<IgrCheckbox > </IgrCheckbox >
tsx
IgrCheckbox 구성 요소는 표준 <form> 요소에서 작동하지 않습니다. 대신 Form을 사용합니다.
예
상표
확인란에 의미 있는 레이블을 제공하려면 여는 태그와 닫는 태그 사이에 텍스트를 배치하면 됩니다.
<IgrCheckbox > <span > Label</span > </IgrCheckbox >
tsx
확인란의 label-position
속성을 설정하여 레이블을 확인란 토글 앞 또는 뒤에 배치해야 하는지 지정할 수 있습니다. 허용되는 값은 before
과 after
입니다(기본값):
<IgrCheckbox labelPosition ="before" > </IgrCheckbox >
tsx
확인란은 확인란 외부의 요소로 레이블을 지정할 수도 있습니다. 이 경우 사용자는 필요에 따라 라벨의 위치와 스타일을 지정할 수 있는 모든 권한을 갖게 됩니다.
<span id ="checkbox-label" > Label</span >
<IgrCheckbox aria-labelledby ="checkbox-label" labelPosition ="before" > </IgrCheckbox >
tsx
EXAMPLE
TSX
CheckboxLabelStyles.css
index.css
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import './CheckboxLabelStyles.css'
import { IgrCheckbox } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
export default class CheckboxLabel extends React.Component <any, any> {
constructor (props: any ) {
super (props);
}
public render (): JSX .Element {
return (
<div className ="sample" >
<div className ="wrapper" >
<span id ="checkbox-label" > Label</span >
<IgrCheckbox aria-labelledby ="checkbox-label" labelPosition ="before" > </IgrCheckbox >
</div >
</div >
);
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<CheckboxLabel /> );
tsx コピー .wrapper {
display : flex;
align-items : center;
}
css コピー
체크됨
구성 요소의 checked
속성을 사용하여 확인란을 기본적으로 켜거나 끌지 여부를 결정할 수 있습니다.
<IgrCheckbox checked ={true} > </IgrCheckbox >
tsx
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrCheckbox } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
export default class CheckboxChecked extends React.Component <any, any> {
constructor (props: any ) {
super (props);
}
public render (): JSX .Element {
return (
<div className ="sample" >
<IgrCheckbox checked ={true} >
<span > Label</span >
</IgrCheckbox >
</div >
);
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<CheckboxChecked /> );
tsx コピー
미정
구성 요소의 indeterminate
속성을 사용하여 확인란의 값을 true 또는 false 로 설정할 수 없습니다.
<IgrCheckbox indeterminate ={true} > </IgrCheckbox >
tsx
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrCheckbox, IgrCheckboxModule } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
export default class CheckboxIndeterminate extends React.Component <any, any> {
constructor (props: any ) {
super (props);
}
public render (): JSX .Element {
return (
<div className ="sample" >
<IgrCheckbox indeterminate ={true} >
<span > Label</span >
</IgrCheckbox >
</div >
);
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<CheckboxIndeterminate /> );
tsx コピー
필수의
required
속성을 사용하여 확인란을 필수로 표시할 수 있습니다.
<IgrCheckbox required ={true} > </IgrCheckbox >
tsx
유효하지 않은
invalid
속성을 사용하여 확인란을 잘못된 것으로 표시할 수 있습니다.
<IgrCheckbox invalid ={true} > </IgrCheckbox >
tsx
장애가 있는
disabled
속성을 사용하여 확인란을 비활성화할 수 있습니다.
<IgrCheckbox disabled ={true} > </IgrCheckbox >
tsx
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrCheckbox } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
export default class CheckboxDisabled extends React.Component <any, any> {
constructor (props: any ) {
super (props);
}
public render (): JSX .Element {
return (
<div className ="sample" >
<IgrCheckbox disabled ={true} >
<span > Label</span >
</IgrCheckbox >
</div >
);
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<CheckboxDisabled /> );
tsx コピー
확인란을 사용할 때 and 속성을 사용할 name
수 있습니다 Form
. value
<IgrCheckbox name ="wifi" value ="enabled" > </IgrCheckbox >
tsx
스타일링
이 컴포넌트는 IgrCheckbox
스타일링에 사용할 수 있는 4개의 CSS 부분을 노출합니다.
이름
설명
base
확인란의 기본 래퍼입니다.
control
확인란 입력 요소입니다.
indicator
확인란 표시기 아이콘입니다.
label
확인란 레이블입니다.
이 네 가지 CSS 부분을 통해 Checkbox 스타일을 완전히 제어할 수 있습니다.
igc-checkbox::part (indicator) {
stroke: var (--ig-secondary-500 -contrast);
}
igc-checkbox::part (control checked)::after {
border-radius : 4px ;
background : var (--ig-secondary-500 );
}
css
API 참조
추가 리소스