學習 Vuetify 的一些筆記
安裝
CDN
<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@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
</script>
基礎
Global 配置
Vuetify.config 進行配置全局設定
Breakpoints
<template>
<v-dialog :fullscreen="$vuetify.breakpoint.mobile">
...
</v-dialog>
</template>
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
export default new Vuetify({
breakpoint: {
mobileBreakpoint: 'sm' // This is equivalent to a value of 960
},
})
個別組件可以覆蓋
<template>
<v-banner mobile-breakpoint="1024">
...
</v-banner>
</template>
Icons
I18n
Presets
SASS Variables
Scrolling
常用組件列表
- Application
- v-app
- v-main
- v-footer
- v-app-bar
- v-navigation-drawer
- Grid
- v-container
- v-row
- v-col
- v-spacer
- Alert
- v-alert
- Avatar
- v-avatar
- Button
- v-btn
- v-btn-toggle
- Card
- v-card
- v-card-title
- v-card-text
- v-card-subtitle
- v-card-actions
- Chip
- v-chip
- Date Picker
- v-date-picker
- Dialog
- v-dialog
- Divider
- v-divider
- Hover
- v-hoevr
- Icon
- v-icon
- Image
- v-img
- Lazy
- v-lazy
- Forms
- Form
- v-form
- Autocomplete
- v-autocomplete
- Checkbox
- v-checkbox
- v-simple-checkbox
- Combobox
- v-combobox
- File Input
- v-file-input
- Input
- v-input
- OTP Input
- v-otp-input
- Overflow buttons
- v-overflow-btn
- Radio buttons
- v-radio
- v-radio-group
- Range Sliders
- v-range-slider
- Selects
- v-select
- Slider
- v-slider
- Switches
- v-switch
- Textareas
- v-textarea
- Text Fields
- v-text-field
- Form
- List
- v-list
- v-list-group
- v-list-item
- v-list-item-action
- v-list-item-action-text
- v-list-item-avatar
- v-list-item-content
- v-list-item-group
- v-list-item-icon
- v-list-item-subtitle
- v-list-item-title
- Menu
- v-menu
- Overlay
- v-overlay
- Progress Circular
- v-progress-circular
- Progress Linear
- v-progress-linear
- Rating
- v-rating
- Responsive
- v-responsive
- Sheet
- v-sheet
- Skeleton Loader
- v-skeleton-loader
- Snackbar
- v-snackbar
- Stepper
- v-stepper
- v-stepper-content
- v-stepper-header
- v-stepper-items
- v-stepper-step
- Subheader
- v-subheader
- Tables
- Data Iterator
- v-data-iterator
- Simple Table
- v-simple-table
- Data Table
- v-data-table
- v-data-table-header
- v-data-footer
- v-edit-dialog
- v-simple-checkbox
- Data Iterator
- Tabs
- v-tabs
- v-tab
- v-tabs-items
- v-tab-item
- v-tabs-slider
- Tooltip
- v-tooltip
- Virtual Scroll
- v-virtual-scroll
特殊組件列表
- Badge
- v-badge
- Bottom Navigation
- v-bottom-navigation
- Bottom Sheet
- v-bottom-sheet
- Breadcrumbs
- v-breadcrumbs
- v-breadcrumbs-item
- Calendar
- v-calendar
- v-calendar-daily
- v-calendar-monthly
- v-calendar-weekly
- Carousel
- v-carousel
- v-carousel-item
- Color Picker
- v-color-picker
- Expansion Panel
- v-expansion-panels
- v-expansion-panel
- v-expansion-panel-header
- v-expansion-panel-content
- Group
- Button Group
- v-btn-toggle
- Chip Group
- v-chip-group
- Item Group
- v-item-group
- v-item
- List Group
- v-list-group
- v-list-item-group
- Slide Group
- v-slide-group
- v-slide-item
- Windows
- v-window
- v-window-item
- Button Group
- Pagination
- v-pagination
- Parallax
- v-parallax
- Time Picker
- v-time-picker
- Toolbar
- v-toolbar
- v-toolbar-items
- v-toolbar-title
- Timeline
- v-timeline
- v-timeline-item
- TreeView
- v-treeview
載入狀態
<v-progress-circular
indeterminate
color="grey lighten-5"
></v-progress-circular>
<v-text-field
color="success"
loading
disabled
></v-text-field>
Overlay
<v-overlay
:absolute="absolute"
:opacity="0.5"
:value="overlay"
>
<v-btn
color="success"
@click="overlay = false"
>
Hide Overlay
</v-btn>
</v-overlay>