이 문서에서는 Tailwind의 Hover, Focus 및 기타 상태에 최소 높이 속성을 적용하는 절차를 제공합니다.
메모: Tailwind의 최소 높이 클래스에 대해 자세히 알아보려면 다음을 읽어보세요. 기사 우리 웹사이트에서.
Tailwind의 호버, 포커스 및 기타 상태에 최소 높이 속성을 적용하는 방법은 무엇입니까?
Tailwind는 디자인 속성과 함께 제공될 수 있는 기본 상태 변형을 제공합니다. 이러한 상태 변형에는 'hover', 'focus' 및 'active'가 포함됩니다. 이러한 상태 변형에 대한 설명은 다음과 같습니다.
- 그만큼' 호버링 ” 상태는 마우스 커서가 요소 위에 놓일 때마다 트리거됩니다.
- “ 집중하다 ” 상태는 요소에 포커스가 있을 때마다 트리거됩니다.
- “ 활동적인 ” 상태는 요소가 활성화되거나 클릭될 때마다 트리거됩니다.
이러한 각 상태에 대해 하나씩 최소 높이 속성을 사용해 보겠습니다.
호버 상태에서 최소 높이 속성 사용
“를 사용하려면 최소 높이 Tailwind에서 hover 상태 변형이 있는 ” 클래스를 사용하는 경우 다음 구문이 사용됩니다.
< div 수업 = 'hover:min-h-{크기}...' > < / div >
위에서 정의한 구문을 데모에서 사용해 보겠습니다. 이 예에서는 마우스 커서를 요소 위로 이동할 때마다 요소의 최소 높이를 늘립니다.
< div 수업 = 'min-h-fit rounded-md bg-blue-700 텍스트 중심 텍스트-흰색 hover:min-h-screen' >최소값을 높이려면 마우스를 올리세요. 키 < / div >위 코드에 대한 설명은 다음과 같습니다.
- “ 최소 맞춤 ” 클래스는 콘텐츠에 맞게 div 요소에 필요한 높이로 최소 높이 제한을 설정합니다.
- “ hover:min-w-screen ” 클래스는 화면 크기의 100%에 해당하는 최소 높이 제한을 제공합니다.
- “ 반올림-MD ', ' bg-{색상}-{번호} ', ' 텍스트 센터 ', 그리고 ' 텍스트 흰색 ” 클래스는 각각 div 요소의 둥근 모서리, 배경색, 중앙 정렬 텍스트 및 흰색 텍스트 색상을 담당합니다. div 요소의 모서리가 둥글게 처리되었습니다.
산출:
아래 출력에서 마우스 커서를 요소 위로 가져가면 요소의 최소 높이가 화면 크기의 100%로 증가한다는 것이 분명해졌습니다.
포커스 상태와 함께 최소 높이 속성 사용
“를 사용하려면 최소 높이 Tailwind의 포커스 상태가 있는 ” 클래스에는 다음 구문이 사용됩니다.
< div 수업 = '초점:분-h-{크기}...' > < / div >위에서 정의한 구문을 데모에서 사용해 보겠습니다. 이 예에서는 사용자가 입력 필드에 초점을 맞추면 입력 필드의 최소 높이가 증가합니다.
< 입력 자리 표시자 = '이 입력 필드에 집중하세요' 수업 = 'min-h-0 h-fit w-48 rounded-md bg-gray-200 텍스트 중심 포커스:min-h-[35%]' >< / 입력 >위 코드에 대한 설명은 다음과 같습니다.
- “ 입력 ” 필드는 자리 표시자 속성의 일부 텍스트로 생성됩니다.
- “를 사용하여 최소 높이 제한을 0px로 제공합니다. 분-시간-0 ' 수업. 따라서 개발자는 '를 사용하여 콘텐츠에 맞게 필요한 높이와 동일하게 요소의 기본 높이를 설정했습니다. h-핏 ' 수업.
- “ 초점:분-시간-[35%] ” 클래스는 사용자가 입력 필드에 집중할 때 입력 필드의 최소 높이 제한을 늘립니다.
산출:
아래 출력에서 사용자가 초점을 맞추면 입력 필드의 높이가 증가한다는 것이 분명해졌습니다. 이는 최소 높이 제한이 화면 높이의 0px에서 35%로 증가하기 때문입니다.
Tailwind에서 활성 상태로 최소 높이 속성 사용
“를 사용하려면 최소 높이 ” 속성을 Tailwind의 활성 상태 변형과 함께 사용하는 경우 다음 구문이 사용됩니다.
< div 수업 = '활성:최소-h-{크기}...' > < / div >위에서 정의한 구문을 데모에서 사용해 보겠습니다. 이 예에서는 사용자가 버튼을 클릭하면 버튼의 최소 높이가 증가합니다.
< 단추 수업 = 'min-h-0 h-fit w-48 rounded-md bg-blue-300 텍스트 중심 활성:min-h-[35%]' > 클릭하면 증가합니다. 키 < / 단추 >버튼은 최소 높이 제한이 0px로 생성됩니다. 그러나 “ 활성:분-시간-[35%] ” 버튼을 클릭할 때마다 최소 높이 제한이 0px에서 화면 크기의 35%로 증가합니다.
산출:
다음 출력에서는 사용자가 버튼을 클릭할 때 버튼의 최소 높이가 증가하는 것을 볼 수 있습니다.
이는 Tailwind 호버, 포커스 및 Tailwind의 기타 상태에 최소 높이 속성을 적용하는 것입니다.
결론
Tailwind의 hover, focus, active와 같은 상태 변형을 통해 사용자는 동적 디자인 레이아웃을 만들 수 있습니다. Tailwind에서 상태 변형과 함께 최소 높이 클래스를 사용하려면 ' hover:min-h-{값} ', ' 초점:min-h-{값} ', 그리고 ' 활성:최소-h-{값} ” 클래스가 사용됩니다. 이 문서에서는 Tailwind에서 최소 높이 클래스를 사용하여 호버, 포커스 및 기타 상태를 적용하는 절차를 제공했습니다.