Quasar 2.34.0, Vue 3 및 @quasar/extras 2.1.0에서 로컬로 번들링한 Material Icons 사용. · 구현 레퍼런스
02
Quasar 디자인 시스템 디자인 레퍼런스
Quasar 2.34.0 및 Vue 3. 색상에는 실제 --q-* 런타임 변수를 사용하고, 간격 및 타이포그래피는 Sass 기본값을 참조합니다. 애플리케이션 제목, 일정 일러스트레이션 및 시스템 글꼴 재정의는 독자적으로 구성했습니다. Material Icons는 @quasar/extras 2.1.0을 통해 로컬로 제공합니다.
Quasar는 Vue 컴포넌트와 스타일링 헬퍼, 애플리케이션 프레임워크를 제공합니다. 이 예시에서는 Vue 3 진입점에서 컴포넌트를 직접 사용합니다. 네이티브 스테퍼가 양식, 라디오 그룹, 슬라이더, 토글 및 최종 확인 단계를 조율합니다. 이러한 컨트롤을 보여주기 위해 전체 화면 QLayout 셸을 사용할 필요는 없습니다.
세션 안내의 목적은 명확합니다. 진행 형식과 그룹 구성을 선택하고, 그에 맞는 일정을 확인할 수 있습니다. 컴포넌트 라이브러리는 컨트롤과 탐색 상태를 제공하며, 독자적으로 구성한 세 가지 일정과 각 일정의 45분 구성은 애플리케이션 콘텐츠입니다. 일정 관리 서비스가 제공되는 것은 아닙니다.
Quasar 디자인 시스템에서는 브랜드 변수와 이름이 지정된 팔레트 클래스가 함께 사용됩니다
브랜드 변수와 이름이 지정된 팔레트 클래스의 공존
검증된 기본 스타일시트에서 런타임 --q-primary 값은 #1976D2입니다. QStepper, QBtn 및 QSlider에 color="primary"를 지정하면 주 색상 스타일이 해당 역할을 따릅니다. secondary, accent, positive, negative, info 및 warning은 각 컨트롤마다 임의의 색상을 지정하는 대신 서로 구분된 이름 있는 역할로 유지됩니다.
저장 완료 배너에는 이름이 지정된 녹색 팔레트 유틸리티를 사용해 연한 배경과 어두운 텍스트를 적용합니다. 성공을 색상뿐 아니라 명시적인 문장으로도 전달합니다. 파란색 링 일러스트레이션은 독자적으로 만든 장식이며 보조 기술에서 숨겨집니다. 이 일러스트레이션은 양식 상태를 추가로 나타내지 않습니다.
Quasar 간격 클래스는 유형, 방향 및 크기를 조합합니다. q-mt-md는 중간 크기의 위쪽 여백을 뜻하며, q-ml-sm은 왼쪽에 작은 여백을 더합니다. 기본 간격은 16픽셀이고 xs는 4, sm은 8, md는 16, lg는 24, xl은 48픽셀입니다. xl로 갈 때는 기본 간격의 3배만큼 늘어나며, 임의로 32픽셀 단계를 가정하지 않습니다.
컨트롤 내부에는 이러한 네이티브 헬퍼를 사용하고, 더 넓은 레이아웃에는 독자적으로 구성한 CSS를 사용합니다. 기본 타이포그래피 유틸리티에는 0.875rem 크기의 text-body2와 1.5rem 크기의 text-h5가 포함됩니다. 페이지 제목은 독자적으로 지정한 34픽셀이며, 글꼴은 system-ui로 명시적으로 전환하고 네이티브 컴포넌트 아이콘에는 Material Icons를 유지합니다.
QStepper는 현재 단계 번호를 관리하고 이름이 지정된 세 개의 QStep 섹션을 포함합니다. 이전 단계로 이동한 뒤에만 해당 단계가 완료로 표시됩니다. 두 레이아웃 모두 세로 방향을 사용해, 휴대폰 화면에서 가로 헤더 세 개를 비좁게 배치하지 않고도 순서를 명확히 보여 줍니다.
첫 번째 계속 작업은 QForm에 속합니다. 핸들러는 validate가 완료될 때까지 기다린 다음 step을 2로 설정합니다. 헤더를 통한 탐색은 활성화되어 있지 않으므로, 이후 단계의 제목을 클릭해 이 검증 과정을 건너뛸 수 없습니다. 뒤로 이동해도 제목, 형식, 그룹 값은 그대로 유지됩니다. 해당 모델은 마운트 해제되는 필드 안이 아니라 부모 SFC에 있기 때문입니다.
Quasar 디자인 시스템: QForm은 모든 네이티브 제약 조건이 아니라 내부 규칙을 사용합니다
QForm은 모든 네이티브 제약 조건이 아니라 내부 규칙을 사용합니다
제목 QInput에는 공백을 제거하고 의미 있는 문자가 5자 이상인지 확인하는 내부 rules 배열이 있습니다. 이 규칙은 QForm.validate에 적용됩니다. 프로그래밍 방식으로 validate를 호출할 때 네이티브 required 또는 email 속성만으로는 규칙을 대체할 수 없으므로, 작동하는 예제에서는 실제 제약 조건을 직접 표현합니다.
잘못된 값을 제출하면 필드 오류가 표시되고 첫 번째 단계에 그대로 머뭅니다. 입력을 수정하면 같은 계속 버튼으로 다음 단계로 이동할 수 있습니다. 60자 제한과 표시되는 글자 수 카운터는 제목 길이를 적절하게 유지하도록 돕고, 인라인 규칙은 제목이 너무 짧거나 비어 있으면 진행할 수 없는 이유를 설명합니다.
QOptionGroup은 Design critique, Sketching session, Research synthesis 중 하나를 선택하는 데 사용됩니다. 선택을 바꾸면 해당 형식에 맞는 의제 배열이 적용됩니다. 의제는 길이가 고정된 샘플 콘텐츠이므로 형식을 바꾸면 활동 항목은 달라지지만 총 45분은 유지됩니다.
QSlider는 참가자 수를 2~16의 정수로 설정합니다. QToggle은 원격 참가자의 포함 여부를 기록합니다. 옆의 안내 문구는 모두 함께 쓰는 테이블에서 공유 보드와 원격 진행 안내로 바뀝니다. 이러한 컨트롤은 단순히 분리된 데모 위젯으로 작동하는 것이 아니라, 화면에 표시되는 세션 안내 내용을 바꿉니다.
검토 단계에는 공백을 제거한 제목, 형식, 참가자 수, 참여 방식이 다시 표시됩니다. 저장을 누르면 로컬 저장 상태가 변경되고 저장 및 뒤로 버튼이 비활성화되며, 그룹 규모를 알리는 배너가 표시됩니다. 다른 항목 시작을 누르면 모든 모델이 초기화되고 첫 번째 단계로 돌아가므로 예제의 전체 흐름을 직접 확인할 수 있습니다.
캘린더나 메시지 API로 요청을 보내지 않습니다. 배너에는 초대장이 발송되지 않았다고 명시하고, 검토 안내에는 저장해도 일정이 생성되지 않는다고 설명합니다. 실제 서비스에서 이러한 내용을 알리려면 날짜, 시간대, 수신자 및 백엔드의 실제 응답이 필요합니다.
Quasar 디자인 시스템: 네이티브 컴포넌트의 의미를 활용하고 실제 포커스 테스트를 수행합니다
네이티브 컴포넌트의 의미를 활용하고 실제 포커스 테스트를 수행합니다
네이티브 컨트롤은 라디오, 슬라이더, 스위치 역할을 제공합니다. 슬라이더에는 Participants라는 레이블이 있고, 제목 필드에는 보이는 레이블과 필드 수준의 유효성 검사 메시지가 있습니다. 스테퍼는 현재 단계를 표시하고 단계 제목을 사용해 콘텐츠에 레이블을 지정합니다. 예제에서는 장식용 그래픽을 접근성 읽기 순서에서 제외합니다.
로컬 테스트에서는 키보드로 슬라이더를 조작하고, 원격 참여를 켜고 끄고, 유효성 검사를 통과한 뒤 9명 규모의 하이브리드 세션 안내를 저장했습니다. 좁은 화면 레이아웃도 확인했습니다. 스테퍼의 정적인 이미지만으로는 이러한 관계를 구현할 수 없으며 유효성 검사 과정이 연결되어 있는지도 입증할 수 없습니다.
엔트리 파일에서 Quasar를 가져오고 플러그인을 등록한 다음 quasar/dist/quasar.css를 불러오고 @quasar/extras의 Material Icons 스타일시트를 가져옵니다. SFC에서는 사용하는 컴포넌트를 가져옵니다. 로컬 번들에 아이콘 폰트 파일을 인라인으로 포함해 원격 폰트를 요청하지 않아도 체크 표시와 수정 표시가 렌더링됩니다.
원본 스타일시트는 Quasar CSS을 따르며, 임베딩에 맞게 문서 높이를 콘텐츠에 맞춰 초기화합니다. 모든 네이티브 컴포넌트에 전역 스타일을 적용하거나 별도의 간격 체계를 만들어 내지 않습니다. 전체 Quasar CLI 또는 Vite 플러그인 애플리케이션에서는 표준 빌드 통합을 사용할 수 있습니다. 이 완성된 샘플은 작은 Vue 엔트리에서 동일한 컴포넌트를 사용하는 방법을 보여 줍니다.
Vue 3에서 Quasar 2.34.0 및 @quasar/extras 2.1.0을 확인했습니다. 기본 단계 표시기에 필요한 로컬 에셋으로 아이콘 폰트를 사용합니다.
자바스크립트
// Create the project first:
// npm create vite@latest quasar-specimen -- --template vue
// cd quasar-specimen && npm install
// In a Vite Vue 3 project:
// npm install [email protected] @quasar/[email protected]
// Save the complete SFC as App.vue and layout as style.css.
import {createApp} from 'vue';
import {Quasar} from 'quasar';
import 'quasar/dist/quasar.css';
import '@quasar/extras/material-icons/material-icons.css';
import './style.css';
import App from './App.vue';
createApp(App).use(Quasar, {plugins: {}}).mount('#app');
// index.html contains <div id="app"></div>.
// Components are explicitly imported in App.vue; no auto-import plugin is required here.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
프로젝트를 위한 프롬프트
에이전트 프롬프트
Quasar 2.34.0과 제공된 세션 안내 예제를 사용하세요. QStepper, QForm, QInput의 유효성 검사, 세션 형식 라디오 컨트롤, 참가자 슬라이더, 의제 토글을 유지하세요. 다음 단계로 이동하기 전에 폼 유효성 검사가 끝날 때까지 기다리고, 뒤로 이동해도 입력값을 보존하며, 동일한 값에서 검토 요약을 구성하세요. 저장 작업은 세션 안내를 로컬에 기록하고, 이후 내용이 변경되면 저장 상태를 무효화합니다. Quasar 스타일시트와 로컬 Material Icons 설정을 포함하고, 전송이나 예약 서비스를 만들어 내지 않으면서 좁은 화면에서도 사용하기 편하도록 하세요.
05
Quasar 디자인 시스템 출처 및 범위
Quasar 2.34.0에는 기본 구성 요소와 로컬 Material Icons가 포함되어 있습니다. 원본 일정과 시각 자료는 샘플 콘텐츠입니다. 저장해도 캘린더 일정이 생성되거나 초대장이 발송되지 않습니다.
