html - 如何模拟 Google 应用模式?

标签 html css vue.js vue-material

在 Google 的所有应用程序中,它们都有一个小的 apps 按钮 ( https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_apps_black_24px.svg ),可以打开如下模式:

Image of modal

我将如何模拟这种模态类型(模态和标签图标)?我正在使用 VueJS 和 Vue Material但我有一种强烈的感觉,这超出了两者的范围。

最佳答案

您或许可以使用 flexbox 来创建类似表格的布局,其中的行和列为 <span> s 与图像,然后是居中的 <p>在它下面。

关于html - 如何模拟 Google 应用模式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42475772/

相关文章:

Flex 3 库中的 CSS

css - 我应该在哪里添加 <link rel ='stylesheet' 行?

html - 如何在 VueJS 中下载本地存储的文件

javascript - v-toolbar-title 中的字体大小未更新

html - HTTP POST 方法是否将数据作为 QueryString 发送?

html - 悬停效果不适用于 Bootstrap 下拉菜单内的 anchor 标记?

javascript - 随机化 Logo 颜色并相应地更改 CSS 链接颜色

javascript - 使用 Vue 数据设置复选框

css - CSS 会影响 HTML 语义吗?

html - 将不安全的 HTML 字符编码为 HTML 字符实体引用的 T-SQL 算法