React Bootstrap Modal의 닫기 버튼 아이콘을 수정하십시오

이 기사에서는 React Bootstrap Modal에서 닫기 버튼의 아이콘을 사용자 정의하는 방법에 대해 설명합니다. React Bootstrap 자체는 닫기 버튼 아이콘을 수정하기위한 API를 직접 제공하지 않으므로 헤더를 사용자 정의하고 이벤트 처리 방법을 추가 하여이 기능을 구현합니다. 이 기사는 자세한 단계와 코드 예제를 제공하여 닫기 버튼 아이콘을 사용자 정의 해야하는 요구 사항을 쉽게 구현할 수 있도록 도와줍니다.

React Bootstrap이 제공하는 모달 구성 요소는 매우 편리하지만 때로는 닫기 버튼의 아이콘 수정과 같이 스타일을 사용자 정의해야합니다. React Bootstrap 자체는 닫기 버튼 아이콘의 속성을 직접 수정하지 않기 때문에이 목표를 달성하기 위해 몇 가지 트릭을 채택해야합니다.

방법 : 헤더를 사용자 정의하고 이벤트 처리를 추가하십시오

핵심 아이디어는 기본 닫기 버튼을 숨기고 모달 헤더에 사용자 정의 아이콘을 추가하고 클릭 이벤트에 바인딩하는 것입니다.

1 단계 : 기본 CloseButton 속성을 제거하십시오

먼저 구성 요소에서 CloseButton 속성을 제거하십시오. 기본 닫기 버튼이 숨겨집니다.

 <modal.header classname="'modal-head'">
   <modal.title> 카트 </modal.title>
</modal.header>

2 단계 : 사용자 정의 닫기 아이콘을 추가하십시오

에 사용자 정의 아이콘을 추가하십시오. Font Awesome, Material Icons 등과 같이 좋아하는 아이콘 라이브러리를 사용할 수 있습니다. 여기서는 글꼴을 예를 들어 awesome을 예로 들어 react fontawelese를 설치했다고 가정합니다.

 npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons

그런 다음 구성 요소에 필요한 아이콘을 소개합니다.

 '@fortawesome/React-fontawesome'에서 {fontawesomeicon} 가져 오기;
'@fortawesome/free-solid-svg-icons'에서 {fatimes} 가져 오기; // 가까운 아이콘을 소개합니다

다음으로 에 아이콘을 추가하십시오.

 <modal.header classname="'modal-head'">
   <modal.title> 카트 </modal.title>
   <div : onclick="{()"> setshow (false)} // setshow는 모달의 표시 상태를 제어하는 ​​함수입니다.
     <fontawesomeicon icon="{fatimes}"></fontawesomeicon>
   </div>
</modal.header>

3 단계 : 클릭 이벤트 처리 기능을 추가하십시오

디스플레이를 제어하고 모달을 숨기는 상태 변수가 있는지 확인하십시오. 이 예에서는이 상태 변수를 쇼라고 가정 하고이 상태를 업데이트하는 세트 쇼 기능이 있다고 가정합니다.

아이콘의 onclick 이벤트에서 세트 쇼 (false)를 호출하여 모달을 끕니다.

완전한 샘플 코드 :

 import React, {usestate} 'react';
'react-bootstrap'에서 {modal, button} 가져 오기;
'@fortawesome/React-fontawesome'에서 {fontawesomeicon} 가져 오기;
'@fortawesome/free-solid-svg-icons'에서 {fatimes} 가져 오기;

함수 myModal () {
  const [show, setshow] = usestate (false);

  반품 (
    
      <button variant="기본" onclick="{()"> setshow (true)}>
        데모 모달을 시작하십시오
      버튼>

       setShow (false)}>
        <modal.header classname="'modal-head'">
          <modal.title> 카트 </modal.title>
          <div : onclick="{()"> setShow (false)}
          >
            <fontawesomeicon icon="{fatimes}"></fontawesomeicon>
          </div>
        </modal.header>
        <modal.body> Woohoo,이 텍스트를 모달로 읽고 있습니다! </modal.body>
        <modal.footer>
          <button variant="secondary" onclick="{()"> setshow (false)}>
            닫다
          버튼>
          <button variant="기본" onclick="{()"> setshow (false)}>
            변경 사항을 저장하십시오
          버튼>
        </button></button></modal.footer>
      
    >
  );
}

내보내기 기본 MyModal;</button>

참고 :

• 스타일 조정 : 특정 요구에 따라 아이콘의 위치와 스타일을 조정하여 모달의 전체 스타일과 일치하는지 확인하십시오.
• 접근성 : 사용자 정의 닫기 버튼에 액세스 할 수 있는지 확인하십시오. 예를 들어, 버튼의 기능을 설명하려면 Aria-Label 속성을 추가하십시오.
• 아이콘 라이브러리 선택 : 프로젝트에 적합한 아이콘 라이브러리를 선택하십시오. 글꼴 굉장하고 재료 아이콘 등은 모두 좋은 선택입니다.

요약 :

React Bootstrap 자체는 Modal Close 버튼 아이콘을 직접 수정하는 API를 제공하지 않지만 헤더를 사용자 정의하고 이벤트 처리를 추가하여 쉽게 달성 할 수 있습니다. 이 접근법은 유연 할뿐만 아니라 닫기 버튼의 모양과 동작을 완전히 제어 할 수 있습니다. 이 튜토리얼을 사용하면 React Bootstrap Modal의 닫기 버튼 아이콘을 성공적으로 사용자 정의하는 데 도움이되기를 바랍니다.

위 내용은 React Bootstrap Modal의 닫기 버튼 아이콘을 수정하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!