재사용 가능한 구성 요소로 React에서 토글 스위치 생성-JS 튜토리얼-php.cn

재사용 가능한 구성 요소로 React에서 토글 스위치 생성 이 기사에서는 iOS에서 영감을 얻은 토글 반응 구성 요소를 생성합니다. 이것은 향후 프로젝트에서 재사용 할 수있는 작고 자체 포함 된 구성 요소가 될 것입니다. 우리는 또한 사용자 정의 토글 스위치 구성 요소를 사용하는 간단한 데모 반응 앱도 구축 할 것입니다. 이를 위해 타사 라이브러리를 사용할 수 있지만 구성 요소를 처음부터 구축 할 수 있지만 코드의 작동 방식을 더 잘 이해하고 구성 요소를 완전히 사용자 정의 할 수 있습니다. 체크 박스는 전통적으로 예 또는 아니오, 참 또는 거짓, 활성화 또는 비활성화, 켜기 또는 꺼짐 등과 같은 이진 데이터를 수집하는 데 전통적으로 사용됩니다. 더 큰 접근성으로 인해 여기에서 그들과 함께.

다음은 구축 할 구성 요소의 스크린 샷입니다

키 테이크 아웃

반응 앱 생성을 사용하여 새로운 React 응용 프로그램을 신속하게 설정하고 재사용 가능한 iOS에서 영감을 얻은 토글 스위치 구성 요소를 구축하십시오. 토글 스위치 스타일링을 위해 SCS를 활용하여 시각적으로 매력적이며 현대적인 디자인 표준과 일치합니다. 주 및 동작을 동적으로 관리하기 위해 소품을 사용하여 React의 제어 된 구성 요소로 토글 스위치를 구현합니다. 토글 스위치 키보드에 액세스 할 수 있고 적절한 ARIA 속성을 사용하여 접근성을 향상시킵니다. 필요한 데이터가 전달되고 올바른 유형인지 확인하기 위해 구성 요소 내에서 유형 검사를 위해 proptypes를 사용합니다. 다른 장치에서 토글 스위치의 모양을 조정하기 위해 SCSS 변수와 미디어 쿼리를 통합하여 고급 테마 및 응답 성을 탐색하십시오.

1 단계 - 반응 앱 생성

반응 앱 생성을 사용하여 토글 스위치 반응 구성 요소를 빠르게 가져오고 실행하겠습니다. React 앱 작성에 익숙하지 않은 경우 시작하기 가이드 를 확인하십시오.

모든 것이 설치되면 새로 생성 된 디렉토리로 변경하고 원사 시작으로 서버를 시작하십시오 (또는 원하는 경우 NPM 시작). 이렇게하면

http : // localhost : 3000

마지막으로 다음과 같이 App.js를 Alter :

2 단계 - 마크 업 우리는 기본 HTML 체크 박스 입력 양식 요소를 필수 특성으로 설정할 수 있습니다.

create-react-app toggleswitch

로그인 후 복사

그런 다음

태그 주위에

태그를 추가하고 태그 바로 아래에 태그를 추가하여 라벨을 작성하고 토글을 토글합니다!

모든 것을 추가하면 다음과 같은 것을 얻어야합니다

mkdir src/ToggleSwitch

로그인 후 복사

우리는 또한 레이블 텍스트를 제거하고 태그 자체를 사용하여 확인란 입력 컨트롤을 확인하거나 선택 취소 할 수 있습니다. 이를 위해 태그 내부에 두 개의 태그를 추가하여 스위치 홀더와 토글링 스위치를 구성하십시오.

3 단계 - 반응 구성 요소로 변환

이제 우리는 HTML로 들어가야 할 것이 무엇인지 알았으므로 HTML을 React 구성 요소로 변환하기 만하면됩니다. 기본 구성 요소부터 시작하겠습니다. 우리는 이것을 클래스 구성 요소로 만들고, 새로운 개발자가 반응 스위치 버튼을 구축 할 때

이 시점에서 ID의 반복으로 인해 동일한보기 나 페이지에 여러 개의 토글 스위치 슬라이더가있을 수 없습니다. 여기서 React의 구성 방식을 활용할 수는 있지만 propss

를 사용하여 값을 동적으로 채우게됩니다.

this.props.name은 id, name의 값을 채우고 (반응 JS의 htmlfor 임) 동적으로 다른 값을 전달하고 같은 페이지에 여러 인스턴스를 가질 수 있도록합니다.

touch ToggleSwitch.js ToggleSwitch.scss

로그인 후 복사

가 눈치 채면 태그에는 끝 태그가 없습니다. 대신 와 같은 시작 태그에서 닫히고

에서 완전히 정상입니다. 아래 코드로 app.js를 업데이트 하여이 구성 요소를 테스트 할 수 있습니다.

http : // localhost : 3000/(브라우저의 개발 도구를 사용하여)에서 출력을 검사하고 모든 것이 올바르게 작동하는지 확인하십시오. 4 단계 - 스타일링 및 SCSS 나는 최근에

스타일링 반응 구성 요소

에 대해 썼는데, 여기서 이것이 가능한 다양한 방법을 비교했습니다. 이 기사에서 SCSS가 최고의 방법이라고 결론을 내 렸습니다. 이것이 바로 우리가 여기서 사용할 것입니다.

import React from 'react';
import ToggleSwitch from './ToggleSwitch/ToggleSwitch'

function App() {
  return (
    <ToggleSwitch />
  );
}

export default App;

로그인 후 복사

SCSS가 Create React App과 함께 작동하려면 Sass 패키지 를 설치해야합니다. 노 그러나 Node-Sass 라이브러리는 이제 더 이상 사용되지 않았으며 SASS 또는 SASS- embedded를 사용하는 것이 좋습니다. 🎜>

우리는 또한 올바른 파일을 구성 요소로 가져와야합니다 :

<input type="checkbox" name="name"  />

로그인 후 복사

create-react-app toggleswitch

로그인 후 복사

이제 스타일링을 위해 지금. 이것은 React Switch 버튼의 스타일링에 대한 우리가 후에 대한 대략적인 개요입니다.

기본적으로, 스위치는 폭 75px에 불과하고 인라인 블록으로 수직으로 정렬되어 텍스트가 인라인되어 레이아웃 문제가 발생하지 않도록합니다.

사용자가 컨트롤을 선택할 수 없도록 사용자가 드래그 앤 드롭을 드롭 할 수 없도록합니다. 우리는 원래 확인란 입력을 숨길 것입니다 <:> a :: 이후와 :: pseudo-elements 이전의 pseudo elements는 그들을 돔으로 데려 가서 스타일을 지정하기 위해 요소로 만들어야합니다.

. 우리는 또한 멋진 애니메이션 효과를 위해 CSS 전환을 추가 할 것입니다.

그리고 이것은 SCSS에서 보이는 것입니다. SRC/TogglesWitch/TogglesWitch.scss : 에 다음을 추가하십시오

이제 http : // localhost : 3000/

에서 서버를 다시 실행하면 4 가지 스타일의 토글 스위치가 표시됩니다. 그들을 토글링하십시오. 그들은 모두 일해야합니다.

또한 위의 코드를 살펴 보는 데 시간이 걸립니다. 확실하지 않은 것이 있으면 sass 문서 에 문의하거나

itepoint 포럼 . 동적 레이블 현재 토글 옵션은 하드 코딩됩니다 :

구성 요소를보다 유연하게 만들려면 html5 Data-Attributes를 사용하여 컨트롤에서 동적으로 이들을 잡을 수 있습니다.

테스트를위한 데이터 속성을 하드 코드하지만 최종 버전에서는 더 유연하게 만듭니다.

응용 프로그램을 실행하면 다음과 같은 것을 볼 수 있습니다.

6 단계 - 작은 구성 요소 버전 생성 mkdir src/ToggleSwitch 또한 작은 버전의 스위치 구성 요소를 더 작은 화면을 위해 텍스트없이 반응하는 것이 좋은 아이디어입니다. 최소 크기로 스타일을 추가하고 텍스트를 제거해 봅시다 : .

응답 성과 관련하여 전체 크기를 변경해야하므로 CSS 척도 기능을 사용해 보겠습니다. 여기서 우리는 모든 부트 스트랩 기반 반응 형 장치의 비 너비를 다루었습니다. 당신은 toggleswitch.js의 부모

요소에 작은 스위치 클래스를 추가하여 이러한 변경 사항을 테스트 할 수 있습니다. DEV 서버로 돌아가서 변경 사항을 테스트하십시오. 완성 된 SCSS 파일에 대해 가지고있는 내용을 확인하려면