Interaction States
SEED React 컴포넌트가 디바이스 환경에 따라 상호작용 스타일을 적용하는 방식을 설명합니다.
SEED React 컴포넌트는 모바일 터치 환경과 데스크톱 마우스 환경 모두에서 적절한 상호작용 피드백을 제공합니다. 별도의 설정이 불필요하며 SEED React 컴포넌트에 포함되어 있습니다.
디바이스 적응형 스타일
SEED에서 컴포넌트 스펙 및 색상 토큰은 pressed 상태만 정의합니다. SEED React는 이 pressed 스타일을 디바이스 환경에 따라 다른 시점에 표시합니다.
| 디바이스 환경 | 트리거 | 표시되는 스타일 |
|---|---|---|
| 마우스 | 요소에 커서를 올릴 때 | pressed 스타일 |
| 터치 | 요소를 누르고 있을 때 | pressed 스타일 |
마우스 환경에서의 hover 스타일과 터치 환경에서의 active 스타일은 일반적으로 동일합니다.
| 이름 | 값 |
|---|---|
$color.bg.brand-solid-pressed 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (solid-pressed) | |
$color.bg.brand-weak-pressed 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (weak-pressed) | |
$color.bg.critical-solid-pressed 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (solid-pressed) | |
$color.bg.critical-weak-pressed 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (weak-pressed) | |
$color.bg.informative-solid-pressed 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (solid-pressed) | |
$color.bg.informative-weak-pressed 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (weak-pressed) | |
$color.bg.layer-default-pressed basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠가 이 레이어 위에서 표현됩니다. (pressed) | |
$color.bg.layer-floating-pressed 앱의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 모달성 요소들이 여기에 속합니다. (pressed) | |
$color.bg.neutral-inverted-pressed 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted-pressed) | |
$color.bg.neutral-solid-muted-pressed 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-muted-pressed) | |
$color.bg.neutral-weak-alpha-pressed 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak-alpha-pressed) `$color.layer.basement` 위에서 컴포넌트의 가시성을 보장하기 위해 사용됩니다. | |
$color.bg.neutral-weak-pressed 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak-pressed) | |
$color.bg.positive-solid-pressed 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (solid-pressed) | |
$color.bg.positive-weak-pressed 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (weak-pressed) | |
$color.bg.warning-solid-pressed 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (solid-pressed) | |
$color.bg.warning-weak-pressed 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (weak-pressed) |
CSS
SEED CSS는 @media (hover) 미디어 쿼리를 사용하여 디바이스를 구분합니다.
/* 마우스 환경: hover 시 pressed 색상 적용 */
@media (hover: hover) {
.seed-action-button--variant_brandSolid:is(:hover, [data-hover]) {
background: var(--seed-color-bg-brand-solid-pressed);
}
}
/* 터치 환경: active 시 pressed 색상 적용 */
@media (hover: none) {
.seed-action-button--variant_brandSolid:is(:active, [data-active]) {
background: var(--seed-color-bg-brand-solid-pressed);
}
}키보드 포커스 스타일
웹 페이지를 키보드로 탐색하는 경우, 사용자가 현재 포커스된 요소를 시각적으로 인식할 수 있도록 focus ring이 표시됩니다. SEED React 컴포넌트에는 키보드 해당 스타일이 기본적으로 포함되어 있습니다.
키보드 포커스 스타일은 디바이스 환경과 관계없이 키보드 탐색 시에 항상 표시됩니다.
import { ActionButton } from "seed-design/ui/action-button";
export default function ActionButtonPreview() {
return <ActionButton>라벨</ActionButton>;
}Last updated on