반응형
모바일에서의 여백/패딩 - Quasar Framework (VueJ)
사용방법spacing
반응성이 좋을 때.예를 들어, 나는 marging을 설정하고 싶다.q-ma-md
휴대폰일 때만 사용했으면 좋겠어요.그럼 어떻게 하는 거죠?
이런 스타일로q-ma-md
md는 여백 값을 의미하며 화면 폭을 지정하지 않습니다.
Quasar는 현재 부트스트랩 및 순풍과 유사한 기능을 제공합니다.문서에서
newable로 하면(quasar.conf.js > framework > cssAddon: true 경유), 간격에 관련된 모든 CSS 클래스에 브레이크 포인트 대응 버전이 제공됩니다.이 기능을 유효하게 하면, CSS 풋 프린트에 현저한 범프가 생기는 것에 주의해 주세요.그러니까 꼭 필요할 때만 하세요.
사용방법:
.q-(p|m)(t|r|b|l|a|x|y)-<bp>-(none|auto|xs|sm|md|lg|xl)
예:
q-pa-xs-md q-pa-sm-sm q-px-md-lg q-py-md-md q-ma-md-sm
탑재된 기능에서 다음을 사용하여 플랫폼을 확인합니다.
if(this.$q.platform.is.mobile){
this.class_variable='q-ma-md'
}
else{
this.class_variable=''
}
그리고 앞부분에 묶으세요.
<div :class='class_variable'></div>
언급URL : https://stackoverflow.com/questions/50948572/margin-padding-on-mobile-quasar-framework-vuejs
반응형
'programing' 카테고리의 다른 글
Java에서 문자열 값에서 열거 값을 가져오는 방법 (0) | 2022.08.16 |
---|---|
웹 팩 및 Vuejs 툴바와 함께 전체 PDF.js 뷰어를 사용하는 방법 (0) | 2022.08.16 |
Vue 컴포넌트에 동적으로 속성 추가 (0) | 2022.08.16 |
Java 제네릭스에서 ?와 오브젝트의 차이점은 무엇입니까? (0) | 2022.08.16 |
C은 무엇인가"정적"기능을 합니까? (0) | 2022.08.16 |