반응형
오른쪽 정렬 버튼 그룹 Vuetify
페이지 오른쪽에 있는 버튼 그룹이 있는데justify-end/justify='end'에서 동작하고 있지 않다.v-row.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-container>
<v-form>
<v-row justify='end'>
<v-col>
<v-btn>Button 1</v-btn>
<v-btn>Button 1</v-btn>
<v-btn>Button 1</v-btn>
</v-col>
</v-row>
</v-form>
</v-container>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
</script>
</body>이 질문을 보았습니다만, 텍스트 얼라인먼트를 사용하는 것은 매우 해답인 것 같습니다만, 더 좋은 해결책이 없을까요?
를 추가합니다.text-right로 분류하다.<v-col>:
<v-col class="text-right">
<v-btn>Button 1</v-btn>
<v-btn>Button 2</v-btn>
<v-btn>Button 3</v-btn>
</v-col>
그리드 시스템을 변경하지 않고 추가해 보십시오.<spacer/>넣기 위한 컴포함v-col다음과 같이 행의 끝에 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-container tag="div">
<v-form>
<v-row justify="end">
<spacer/>
<v-col>
<v-btn>Button 1</v-btn>
<v-btn>Button 1</v-btn>
<v-btn>Button 1</v-btn>
</v-col>
</v-row>
</v-form>
</v-container>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
</script>
</body>클래스 내에서 v-row에서 justice-end를 사용해야만 작동합니다.v-col에서는 사용할 수 없습니다.DOCS: https://vuetifyjs.com/en/api/v-row/ 띄어쓰기를 어디에 두느냐에 따라 띄어쓰기를 할 필요가 있을 수 있지만 클래스를 사용하여 스타일을 피할 수 있습니다.
<v-form>
<v-row class="justify-end">
<v-btn class="mr-2">Button 1</v-btn>
<v-btn class="mr-2">Button 1</v-btn>
<v-btn class="mr-2">Button 1</v-btn>
</v-row>
</v-form>
언급URL : https://stackoverflow.com/questions/57769340/vuetify-right-align-group-of-buttons
반응형
'programing' 카테고리의 다른 글
| 정적 필드와 함께 @Autowired를 사용할 수 있습니까? (0) | 2022.08.28 |
|---|---|
| 0.1을 여러 번 더하는 것은 왜 무손실인 채로 남습니까? (0) | 2022.08.28 |
| Vue 어레이에서 테이블로의 문제 (0) | 2022.08.28 |
| vuex 지속 상태가 전체적으로 변환으로 업데이트되지 않음 (0) | 2022.08.28 |
| Android 권한을 선언해도 작동하지 않음 (0) | 2022.08.28 |