플로팅 UI를 사용하여 도구 설명을 만드는 방법

소프트웨어 개발에서 좋은 사용자 경험은 일반적으로 소프트웨어를 구축할 때 고려해야 할 가장 중요한 사항 중 하나입니다. 사용자가 소프트웨어 응용 프로그램을 사용하는 방법을 추측하게 만들 필요가 없습니다. 이는 귀하가 원하는 것이 아닌 애플리케이션의 유용성에 영향을 미칠 수 있습니다.

대부분의 사용자는 참을성이 없고 앱이 어떻게 작동하는지 탐색하고 확인할 만큼 인내심이 부족할 수 있지만 툴팁을 사용하면 여행 가이드처럼 애플리케이션을 쉽게 안내할 수 있습니다.

오늘은 플로팅 UI를 이용하여 쉽게 툴팁을 작성하는 방법에 대해 알아보겠습니다.

도구 설명

도구 설명은 사용자가 요소 위로 마우스를 가져가거나, 클릭하거나, 요소에 초점을 맞출 때 표시되는 작지만 유용한 팝업입니다. 일부 도구 설명은 사용자가 도구 설명을 트리거하도록 요구하지 않을 수도 있습니다. 대신 사용자가 애플리케이션을 처음 방문할 때 가이드 역할을 하여 자동으로 컨텍스트와 지침을 제공할 수 있습니다.

플로팅 UI

플로팅 UI는 화면 크기에 따라 위치를 쉽게 조정할 수 있는 멋진 툴팁을 만들 수 있는 놀라운 라이브러리입니다. 반응성에 대해 걱정할 필요가 없습니다. 플로팅 UI가 이를 처리해 드립니다.

때때로 효율적인 툴팁을 만드는 데는 시간이 많이 걸릴 수 있고, 지루하다고 느낄 수 있는 몇 가지 단계가 포함되므로 플로팅 UI와 같은 라이브러리를 사용해야 합니다.

이 글을 이해하기 위한 전제 조건

1. React js에 대한 기본 지식
2. 자바스크립트에 대한 기본적인 이해
3. 컴퓨터에 Node js가 설치되어 있어야 합니다(React 애플리케이션을 실행하려면)
4. 그리고 마지막으로 Chrome과 같은 웹 브라우저입니다.

플로팅UI를 설치해보자

React js 애플리케이션에 Floating UI를 설치해야 합니다. 이 명령을 실행하면 그렇게 할 수 있습니다.

npm install @floating-ui/react

플로팅 UI 라이브러리에서 많은 기능을 가져와야 합니다. 이러한 기능을 사용하면 툴팁을 쉽게 만들 수 있습니다.

`
수입 {
사용클릭
useFloating,
useInteractions
뒤집어
오프셋
사용해제,
} '@floating-ui/react'에서;

`

Floating 사용 해체

`
const {
참조: Calendar1Refs,
부동 스타일: Calendar1FloatingStyles,
컨텍스트: Calendar1Context,
} = useFloating({
열기: isOpen1,
onOpenChange: setIsOpen1,
배치: '하단',
미들웨어: [
뒤집기({
fallbackPlacements: ['right'],
}),

offset({ mainAxis: 20, crossAxis: 70 }),
],
});
`

참고

이를 통해 툴팁을 참조 자료와 쉽게 연결할 수 있습니다. 우리의 참조는 다음과 같아야 합니다.

<i
      className="fa-light fa-calendar cursor-pointer text-gray-500"
            ref={calendar1Refs.setReference}
           ></i>

툴팁은 다음과 같아야 합니다.

{isOpen1 && (
            <div
             className="absolute z-10 bg-white"
             ref={calendar1Refs.setFloating}

            >
             <Calendar onChange={handleSelectDate1} />
            </div>
           )}The difference here is that our tooltip reference has “setReference” while our tooltip has “setFloating”. This will enable them to be connect, making sure that the tooltip floats around it`s reference.

플로팅 스타일

floatingStyles는 참조 요소와 관련하여 플로팅 요소(예: 툴팁)의 정확한 위치와 크기를 결정하는 CSS 스타일이 포함된 개체입니다.

{isOpen2 && (
          <div
           className="z-[9999]"
           ref={calendar1Refs.setFloating}
          >



<p><strong>Context</strong></p>

<p>In Floating UI, context (like calendar1Context in this case) provides a way to manage and share state and interactions across multiple hooks. This helps us to share events like click, hover etc. It also helps to dismiss the interactions seamlessly, ensuring that each tooltip or floating element behaves consistently.<br>
</p>

<pre class="brush:php;toolbar:false">const click1 = useClick(calendar1Context);
 const dismissCalendar1ToolTip = useDismiss(calendar1Context);

열기

오픈 소품은 툴팁의 가시성을 위해 매우 중요합니다. 이는 구성 요소의 내부 상태를 기반으로 툴팁의 가시성을 관리하는 데 도움이 됩니다.

먼저 사용자가 클릭할 때까지 툴팁을 숨길 수 있도록 기본값이 false인 useState를 생성합니다. 이 useState는 툴팁이 현재 열려 있는지 여부를 추적합니다.

const [isOpen, setIsOpen] = useState(false);

onOpenChange

이 콜백은 setIsOpen 값을 업데이트하는 데 도움이 됩니다. 따라서 사용자가 이벤트를 클릭하거나 트리거할 때마다 isOpen의 false 값을 true로 설정하고 그 반대로 설정합니다.

배치

이는 참조와 관련하여 툴팁을 배치할 위치를 결정하는 데 도움이 됩니다. 툴팁을 이러한 위치 중 하나에 배치할 수 있습니다.

1. 하단
2. 하위
3. 하단 시작
4. 왼쪽
5. 왼쪽 끝
6. 왼쪽 시작
7. 그렇습니다
8. 오른쪽 끝
9. 오른쪽 시작
10. 상단
11. 최고급
12. 최고의 시작

뒤집기

미들웨어 배열 내부에 있는 플립 미들웨어는 지정된 방향으로 공간이 충분하지 않으면 플로팅 요소의 위치를 ​​자동으로 조정합니다. 여기서 아래 공간이 충분하지 않으면 대체 배치(['bottom-end'])를 사용하여 위치를 지정하려고 시도합니다. 사용 가능한 공간에 따라 원하는 위치를 선택할 수 있습니다.

middleware: [
   flip({
    fallbackPlacements: ['bottom-end'],
   }),

    ],

오프셋

이 미들웨어는 참조 요소와 플로팅 요소 사이에 간격을 만듭니다. mainAxis: 20은 기본 방향(이 경우 참조 아래)에 20px 간격을 생성하는 반면, crossAxis: 50은 수직 축을 따라 50px 오프셋을 생성합니다.

middleware: [
   offset({ mainAxis: 20, crossAxis: 50 }),
  ],

구성은 다음과 같습니다

const [isOpen, setIsOpen] = useState(false);
 const {
  refs: calendar1Refs,
  floatingStyles: calendar1FloatingStyles,
  context: calendar1Context,
 } = useFloating({
  open: isOpen,
  onOpenChange: setIsOpen,
  placement: 'bottom-end',

  middleware: [
   flip({
    fallbackPlacements: ['bottom-end'],
   }),

   offset({ mainAxis: 20, crossAxis: 50 }),
  ],
 });

 const click = useClick(calendar1Context);
 const dismissImageToolTip = useDismiss(calendar1Context);

 const {
  getReferenceProps: calendar1TooltipReference,
  getFloatingProps: calendar1TooltipFloatingProps,
 } = useInteractions([click, dismissImageToolTip]);

데모

데모 동영상을 보려면 이 링크를 클릭하세요.

동영상을 보면 공간이 부족할 경우 툴팁이 위치를 조정하는 것을 확실히 볼 수 있습니다. 우리가 정의한 fallbackPlacements의 위치를 ​​사용합니다.

결론

플로팅 UI는 React 애플리케이션에서 도구 설명을 구현하는 강력하고 유연한 방법을 제공합니다. 자동 위치 지정 및 풍부한 사용자 정의 옵션을 사용하면 다양한 장치와 화면 크기에서 안정적인 기능을 유지하면서 애플리케이션의 사용자 경험을 향상시키는 도구 설명을 만들 수 있습니다.

다음과 같은 많은 기능과 개체가 포함됩니다. refs, floatStyles, context, 상태 관리를 위한 useState, onOpenChange, 배치, 뒤집기 및 오프셋.

이 가이드를 따르면 이제 React 애플리케이션에서 반응성이 뛰어나고 사용자 친화적인 툴팁을 구현하는 방법을 알게 되었습니다. 다양한 구성과 미들웨어를 실험하여 사용자에게 완벽한 도구 설명 경험을 만들어보세요.

행복한 코딩 ?

위 내용은 플로팅 UI를 사용하여 도구 설명을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!