Syncfusion JavaScript UI Layout and Design Controls

SyncfusionUI 레이아웃 및 디자인 컨트롤JavaScript

JavaScript 애플리케이션 인터페이스를 구조화하기 위한 레이아웃 및 디자인 컴포넌트입니다.

  • 구성 가능한 대시보드 및 분할 레이아웃 컴포넌트를 사용해 패널을 배치합니다.
  • 카드, 목록, 시각적 식별 요소로 콘텐츠를 그룹화하고 표시합니다.
  • 오버레이와 인라인 UI 힌트를 사용해 문맥적 콘텐츠를 표시합니다.
Syncfusion logo

가격:

로딩 중...
다음에서 사용 가능
Syncfusion Essential Studio UI Component Suite로딩 중
Syncfusion Essential Studio Enterprise로딩 중
Syncfusion JavaScript UI Layout and Design Controls 제품 이미지
Syncfusion JavaScript UI Layout and Design Controls는 JavaScript 애플리케이션에서 페이지 구조를 구성하고 콘텐츠를 표시하기 위한 컴포넌트 모음입니다. 패널 기반 레이아웃, 크기 조정 가능한 영역, 콘텐츠 그룹화, 목록 표시, 문맥적 오버레이를 지원하여 개발자가 화면과 콘텐츠가 변경되어도 일관성을 유지하는 명확한 UI 구성을 구축할 수 있도록 돕습니다.

대시보드 패널 레이아웃

그리드 내에서 패널을 배치할 수 있는 대시보드 스타일의 레이아웃 컴포넌트를 제공합니다. 패널을 정의된 위치에 배치하고 단일 보기 내에서 패널 레이아웃을 관리할 수 있어, 구성 가능한 작업 영역과 정보 밀도가 높은 화면을 구축하는 데 적합합니다.

크기 조정 가능한 분할 영역

사용 가능한 공간을 여러 영역으로 나누는 splitter 컴포넌트를 포함합니다. 사용자가 패널의 크기를 조정할 수 있게 하여, 탐색 및 상세 보기와 같은 나란한 콘텐츠 영역이나 다중 패널 작업 영역을 애플리케이션에서 제공할 수 있도록 돕습니다.

카드 기반 콘텐츠 그룹화

관련 콘텐츠를 구조화된 컨테이너로 묶는 카드 컴포넌트를 제공합니다. 시각적 계층 구조를 확립하고, 페이지의 섹션을 구분하며, 여러 보기에서 콘텐츠 블록을 일관되게 표시하는 데 도움이 됩니다.

오버레이 콘텐츠 컨테이너

오버레이에서 콘텐츠를 표시하는 dialog 컴포넌트를 제공합니다. 기본 페이지 레이아웃을 변경하지 않고 보조 콘텐츠, 확인 메시지 또는 집중된 보기를 표시할 수 있습니다.

구조화된 목록 표시

일관된 레이아웃으로 항목 컬렉션을 표시하는 list view 컴포넌트를 포함합니다. 반복 가능한 콘텐츠 행을 렌더링하고, 템플릿화된 항목 표시를 지원하며, 복잡한 인터페이스에서도 목록의 가독성을 유지하는 데 도움이 됩니다.

문맥적 UI 힌트

UI 요소 근처에 문맥 정보를 표시하는 tooltip 컴포넌트를 제공합니다. 화면에 영구적인 콘텐츠를 추가하지 않고도 의미와 사용법을 전달할 수 있어 레이아웃을 깔끔하게 유지하고 빠르게 훑어보기 쉽게 만듭니다.

시각적 식별 요소

이미지나 이니셜과 같은 식별 시각 요소를 표시하는 avatar 컴포넌트를 제공합니다. 헤더, 목록, 그룹화된 콘텐츠 영역에서 사용자나 엔터티 표현을 일관되게 배치할 수 있도록 지원합니다.

순차적 콘텐츠 레이아웃

순차 구조로 항목을 표시하는 timeline 컴포넌트를 포함합니다. 시간 순서나 진행이 중요한 레이아웃에서, 정렬된 이벤트나 단계를 명확한 시각적 흐름으로 표시하는 데 도움이 됩니다.

제품 호환성

아래의 세부 정보를 확인하여 이 제품이 사용 환경에서 지원되는지 확인하세요.

컴포넌트 유형

  • JavaScript

JavaScript 플랫폼

  • Vanilla JavaScript