기록하는삶

quasar에서는 페이지 및 페이지 헤더의 형식을 지정하고, 특정 태그로 불러와 사용할 수 있다. 그 중 페이지 헤더에 대해서 살펴보자. components/Page/PageHeader.vue 파일에 다음과 같이 형식을 지정할 수 있다. 태그: header의 형식 지정하기 태그: header에 툴바를 놓고, 나열할 방식 지정 태그: 활용할 버튼/타이틀(string)의 이름과 위치 지정(name으로 불러다 사용할 예정) 위의 예시 코드에서는 가운데 타이틀을 기준으로 왼쪽과 오른쪽에 각각 2개의 버튼을 위치시킬 수 있다. 이제 해당 페이지헤더에 추가한 버튼의 예시를 보자. 해당 코드는 뒤로가기 버튼의 구현 예시다. 버튼의 아이콘과 색깔, 기능 등을 지정한 뒤 PageHeaderBtnBack.vue의 이름으로..

quasar는 css 폴더 하에 색상의 이름을 지정해두고, global하게 불러다 사용할 수 있다. [참고] https://quasar.dev/style/color-palette#util-getcssvar Color Palette | Quasar Framework How to use and customize the Quasar Color Palette. quasar.dev 색상의 id는 adobe color에서 확인할 수 있다. https://color.adobe.com/ https://color.adobe.com/ko/create/color-wheel color.adobe.com 해당 이름들로 지정한 색들을 다른 페이지에서 불러다 사용할 수 있다. 또한 모듈을 이용해 새롭게 색을 지정하거나, 지정한 색..

어플이나 브라우저에서 언어설정을 바꿀 수 있는 경우가 있다. quasar에서는 i18n이라는 모듈을 활용해 이 기능을 개발할 수 있다. app-internationalization이라 부른다. https://quasar.dev/options/app-internationalization#introduction App Internationalization (i18n) | Quasar Framework How to use vue-i18n in a Quasar app. quasar.dev 위 링크의 설명 순서대로 진행하면 된다. 1. i18n 설치 node.js prompt에서 아래의 npm을 활용하면 된다. $ yarn add vue-i18n@next // or: $ npm install vue-i18n@ne..

Quasar에서 제공하는 기본 스크립트들을 잘 활용하면 보다 쉽게 원하는 것을 구현할 수 있다. https://quasar.dev/vue-components/ajax-bar Ajax Bar | Quasar Framework The QAjaxBar Vue component displays a loading bar whenever an Ajax call is in progress. quasar.dev Quasar dev의 Vue-components, Quasar plugins 등에는 활용할 수 있는 예시가 많다. 이외에도 quasar에서 활용하는 css 문법 등에 대한 설명이 있다. https://quasar.dev/style/spacing CSS Spacing Classes | Quasar Framewor..