Material Design风格神框架vuetify 学习笔记(十) 基础组件6 对话框 响应式长宽比 徽标 横幅

一. 对话框

v-dialog 组件通知用户特定的任务,可能包含关键信息、需要决策或涉及多个任务。 请尽量少用对话框,因为它们会中断(流程)。

1. 对话框

对话框包含两个插槽,一个用于它的激活器,另一个用于它的内容(默认)。




2. 全屏对话框 fullscreen

  
    
      
      
        
          
          
          OK
        
         欢迎您 
        
          The literal Latin meaning of the Illuminati means "people who have
          received special revelation." Naturally, there are many unrelated
          groups in history who call themselves Illuminati. Usually, they claim
          to possess Gnostic texts or other similar mysterious information.
        
        
      
    
  

3. 弹出方向 transition

(1). 顶部弹出
    
(2). 底部弹出


4. 禁用空白处点击关闭 persistent

    

5. 可滚动内容 scrollable

    

6. 隐藏对话框蒙版 hide-overlay

    

7. 另类应用: 弹出加载条




二. 长宽比 v-responsive

1. 长宽比 aspect-ratio

v-responsive 组件可用于将任何部分固定到特定的宽高比。

    
      
        
          这个卡片永远是16:9, 除非内容放不下了
        
      
    

2. 最大宽度 max-width


3. 最大高度 max-height

最大高度的行为, 风格和最大宽度不统一
其行为如下:

三. 徽章/角标 v-badge

1. 简单徽章

    
      新消息
    

2. 头像徽章

    
      
        
      
    

3. 内容叠性 overlap

    
      
        
      
    

4. 徽章的图标 icon

    
      
        
      
    

5. 徽章的文本 content

    
      
        
      
    

6. 徽标的样式

(1). 徽标的边框 bordered
    
      未读消息
    
(2). 瓦片徽标 tile
    
      未读消息
    
(3). 小点型徽标(不显示内容) dot
    
      未读消息
    

7. 徽标的位置

  • left : 左置
  • bottom : 置底
  • offset-x : 水平偏移
  • offset-y : 垂直偏移

8. 徽标插槽 v-slot:badge

我们可以使用v-slot:badge 插槽来自定义徽标的组件细节
v-slot:badge 插槽可以插入任何类型的插件

9. 插槽头像徽标

如果我们在v-slot:badge 插槽中插入头像, 同时在徽标中添加 avatar属性

    
      
      text
    

10. 插槽图标徽标

    
      
      联系我们
    

四. 横幅 v-banner

1. 最简单的横幅

这是一个简单的banner

2. 横幅的阴影 elevation

这是一个简单的banner

3. 带图标的横幅 icon

这是一个简单的banner
图标也可以设置颜色
这是一个简单的banner
图标点击事件


 
 

4. 横幅的样式

(1). 线型边框 outlined
这是一个简单的banner
(2). 圆角 rounded
这是一个简单的banner
(3). shaped样式
    这是一个简单的banner

5. 单行横幅 single-line

横幅可以有 1-2 行文本, 也可以设置single-line使其只有单行. 单行 VBanner 用于少量信息,建议仅用于桌面实现。

    这是一个简单的banner, 他只有单行, 如果文本长度超出组件宽度, 就会缩略

6. 横幅贴在浏览器窗口上

您可以选择启用粘性道具以确保内容固定在屏幕上(注意:在 IE11 中不起作用)

    这是一个简单的banner

7. 横幅的动作插槽 v-slot:actions

    这是一个简单的banner
      
    

8. 横幅的图标插槽 v-slot:icon

    这是一个简单的banner
      
    

你可能感兴趣的:(Material Design风格神框架vuetify 学习笔记(十) 基础组件6 对话框 响应式长宽比 徽标 横幅)