Leon's Lab

화면 중앙 정렬 로그인 화면은 화면의 가운데에 입력을 받게 만드는데, 이때 필요한게 화면 중앙정렬입니다. 중앙정렬은 q-page 태그에 flex flex-center 속성을 주면 가능합니다. Click Me!  이미지를 백그라운드에 배치하기 사이트를 예쁘게 꾸미려고 백그라운드에 이미지를 넣는데, 일반적인 Grid 시스템으로는 어렵습니다.  여기서는 absolute-full flex flex-center 구문을 이용하여 처리해 보겠습니다.  Echo Test   Gutter-Col와 Col-Size 함께..

Tab 기본적인 사용방법 q-tab과 q-tap-panels를 이용하면 우리가 일반적으로 보는 Tab 컨트롤을 만들수 있습니다.  Mails Lorem ipsum dolor sit amet consectetur adipisicing elit. consectetur adipisicing elit. consectetur adipisicing elit. Send Mail Alarms Lorem ipsum dolor sit amet consectetur adipisicing elit. ..

Padding, Margin Padding은 안쪽 여백, Margin은 바깥쪽 여백 B B  가로 크기 Quasar는 12그리드 시스템을 이용하기 때문에 가로의 크기를 12로 보고 상대적으로 조절해서 사용합니다.만일 숫자의 합이 12를 넘어가면 자동 줄바꿈이 발생합니다. 아래의 예제에서 col-5짜리 3개를 배치하면 12를 넘어가므로 마지막 버튼은 줄바꿈이 일어납니다.  col-3 col-3 col-3 col-5 col-5 col-5 가로 정렬 정렬은 Container에 "justify-[옵션]"속성을 이용하여 적용합니다. col-3 ..

Quasar 기본틀Quasar에서는 하나의 화면을 q-page로 관리합니다.따라서 quasar에서 제공하는 기능을 사용하려면 q-pqge 태그 안에 모든 컴포넌트들이 들어와야 합니다.코드에서 보자면 vue의 UI 태그인 안에 로 감싸기만 하면 됩니다. Push Me.   UI 컴포넌트 배치의 기본 원칙 Quasar는 FlexBox와 Grid 시스템을 이용한 배치를 제공하므로 해당 기능을 최대한 사용하여 배치를 해야합니다. Quasar는 Container와 Items라는 개념으로 FlexBox를 제공하는데, 간단히 말하면 UI 컴포넌트가 Items이고 이것들을 보기 좋게 그룹으로 묶은 것이 Container..