首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

MaterializeCSS在卡片中心设置水平FAB

MaterializeCSS是一个现代化的响应式前端框架,它提供了丰富的UI组件和样式,可以帮助开发者快速构建漂亮的网页界面。在卡片中心设置水平FAB是指在MaterializeCSS的卡片组件中,将浮动操作按钮(FAB)水平居中显示。

卡片是MaterializeCSS中常用的一种UI组件,它可以用来展示信息、图片、链接等内容。FAB是一种浮动操作按钮,通常用于触发常用的操作,比如创建、分享、删除等。将FAB水平居中显示可以提升用户体验,使界面更加美观和易用。

在MaterializeCSS中,可以通过以下步骤在卡片中心设置水平FAB:

  1. 创建一个卡片组件,可以使用MaterializeCSS提供的.card类来定义卡片的样式和布局。
  2. 在卡片的内容区域中添加一个容器,可以使用MaterializeCSS提供的.card-content类来定义内容区域的样式。
  3. 在内容区域中添加一个容器来放置FAB按钮,可以使用MaterializeCSS提供的.center-align类来实现水平居中。
  4. 在FAB容器中添加一个FAB按钮,可以使用MaterializeCSS提供的.btn-floating和.btn-large类来定义按钮的样式和大小。
  5. 可以通过设置FAB按钮的图标和点击事件来实现具体的功能。

以下是一个示例代码:

代码语言:txt
复制
<div class="card">
  <div class="card-content">
    <div class="center-align">
      <a class="btn-floating btn-large waves-effect waves-light red" onclick="doSomething()">
        <i class="material-icons">add</i>
      </a>
    </div>
  </div>
</div>

在这个示例中,我们创建了一个卡片组件,并在内容区域中添加了一个容器来放置FAB按钮。FAB按钮使用红色背景和加号图标,点击按钮时会触发名为doSomething()的函数。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供可扩展的云服务器实例,适用于各种规模的应用程序和工作负载。详情请参考:腾讯云云服务器
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的对象存储服务,适用于存储和管理大量非结构化数据。详情请参考:腾讯云对象存储

通过使用腾讯云的云服务器和对象存储服务,可以轻松部署和扩展应用程序,并实现高效的数据存储和管理。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Oxylabs住宅代理和数据中心代理AdsPower中设置讲解

集成操作流程官网(www.adspower.com/download)下载AdsPower并完成安装工作后,单击新建配置文件(New profile),然后代理部分指定代理。...图片如果您要设置住宅代理,请选择HTTP代理类型或Oxylabsauto,再输入pr.oxylabs.io和7777。接着,请输入Oxylabs子用户凭据,填写用户名和密码。...使用您所使用的相同凭据,同时代理控制面板中创建新的子用户。图片您还可以使用国家/地区特定的条目。...如要配置数据中心专用代理,请根据您的购买,选择HTTP或SOCKS5,并输入60000作为端口。请从获取的列表中选择一个IP地址。...图片如要设置数据中心共享代理,代理类型请选择HTTP,输入dc.pr.oxylabs.io,端口请设置为10000。您还可以使用国家/地区特定的条目。

79340
  • 项目需求讨论 — 用Transition做一个漂亮的登录界面

    (所以动画是第二个Activity中完成的,只是按钮的起始状态是以第一个Activity传过来的按钮的状态信息相同,然后到最终用户设置的位置。)...并且其实动画是绘制ViewOverlay上面 第二步让fab按钮通过曲线路径变化: 我们直接不做任何处理,默认是fab按钮的位置变化是直线。 我们更希望是: ?...如果点之间的水平距离小于垂直距离,则圆的中心点将与终点水平对齐。 如果垂直距离小于水平距离,则圆的中心点将与终点垂直对齐。 当两点接近水平或垂直时,运动的曲线将会变小,因为圆的中心距两点都很远。...其他参考文章: 曲线运动-1 曲线运动 - 2 第三步fab按钮动画结束后出现注册界面: 我们上一步对fab按钮设置了过渡的动画。...所以我们fab按钮过渡动画结束后,不是简单的对cardView设置View.VISIBLE就可以。

    1.8K20

    WPF UNO 测试固定尺寸且水平和垂直对齐设置 Stretch 的元素容器内的布局行为

    本文将告诉大家我对 WPF 的自定义布局容器和自定义控件进行的布局行为测试中的一个小点,即测试固定元素的尺寸的情况下或元素尺寸为有限尺寸的情况下,同步设置元素的水平和垂直对齐为 Stretch 来测试元素容器内的布局行为...WPF 之上 UNO 框架里的元素行为和 WPF 原生布局行为是完全相同的,本文也作为 UNO 的元素布局测试记录内容 如下面代码,编写一个自定义的继承于 Panel 类型的自定义布局容器,重写布局容器设置其布局行为为将自身的尺寸传入给到里层控件...,设置水平和垂直对齐为 Stretch 的元素会如何布局 给以上的这个自定义容器插入一个元素,设置元素给定尺寸且设置水平和垂直对齐,如下面代码 var grid = new Grid...VerticalAlignment = VerticalAlignment.Stretch, } 为了更好的进行测试,我还给以上的 Grid 添加一圈的带背景的 Border 控件,用来测试布局尺寸空间超过元素所需尺寸时的行为...,和测试布局尺寸空间小于元素所需尺寸时的压缩元素裁剪行为 对 WPF 和跑 WPF 框架之上的 UNO 框架的测试行为都符合下图 根据上图可以知道,当上层容器给定元素的可布局尺寸大于元素所需尺寸时,

    17610

    Android材料设计Material Design 开篇前言

    Design是为了帮助开发者的,而不是谷歌闲着没事弄个东西刁难我们 所有的代码都我都亲自测试过,文章的语言也尽量用我的话来叙述,大量的动图和图片也是我一个一个截的 属性介绍以xml里为主,代码中动态设置使用...toolbar常用属性.png ---- 2.CardView资料卡片: 国籍:View 城市:ViewGroup(FrameLayout) 爱好:梳妆打扮,圆角阴影 一句话:姐怎么能这么好看......CardView.gif ---- 3.FloatingActionButton资料卡片: 国籍:View 城市:ImageView 爱好:游离不定、抱大腿、随用随到 一句话:没关系,我小,不碍事 额外依赖...fab的属性.png ---- 4.Snackbar资料卡片: 国籍:非View 城市:BaseTransientBottomBar 爱好:show 一句话:虽然我不是View,但我体内燃烧着View的灵魂...fab_sna.gif ---- 5.bottom_sheet资料卡片: 国籍:非View 城市:Behavior族 爱好:暗杀、潜藏、show 一句话:哥是迷一样的存在----Behavior族 额外依赖

    84410

    个人博客搭建

    增加网站运行时间显示 增加动漫模型 整体替换Banner图片和文章特色图片 增加分类相册功能 修改了一些控件的参数 修改部分样式,比如: 文章卡片,固定高度,使其不至于因为文章摘要的长短不同导致卡片大小不一使页面布局很不美观...,类似的还有友链卡片,优化了页面内容布局,视觉更整齐美观 解决首页文章列表卡片上方 border-radius圆角失效的bug 添加页面樱花飘落动效 添加鼠标点击烟花爆炸动效 加入天气接口控件 加入鼠标点击文字特效...以下是常用社交图标的标识,供你参考: Facebook: fab fa-facebook Twitter: fab fa-twitter Google-plus: fab fa-google-plus...Linkedin: fab fa-linkedin Tumblr: fab fa-tumblr Medium: fab fa-medium Slack: fab fa-slack Sina Weibo:...fab fa-weibo Wechat: fab fa-weixin QQ: fab fa-qq Zhihu: fab fa-zhihu 注意: 本主题中使用的 Font Awesome 版本为 5.11.0

    2.2K140

    【案例分析】薄荷健康APP设计思路深入解析

    002.菜单设置 静电说过,菜单设置并不是随意的,而是基于产品的功能和场景的考量,薄荷健康的菜单如下“首页”,“发现”,“记录”,“商店”,“我的”,除了我的这个基本所有应用都必备的栏目外,菜单布置兼顾推荐...另外薄荷健康没有采用传统的轮播图+金刚区的形式,而是全部用卡片方式来展示信息,独树一帜。...下方版块均采用灰色背景加上白色卡片的设计,区分度更好。 005.记录栏目设计 静电首先发现的就是右下角的FAB按钮,同样的设计和位置,让用户形成使用习惯。...“我的”模块设计 我的模块的重要内容是用户的个人信息以及一些常用的工具入口,设计师在这里采用了更宽松的排版,卡片也更加圆润,另外更高更宽的列表,方便用户点击和查看,同时辅以薄荷绿色的icon,点睛色分布应用的所有页面中...而LOGO文字也是充分设计过的,这是很多初级设计师最容易忽视的设计点,重页面排版不重品牌塑造,这样就造成页面风格薄弱,就像一个没有名字的孩子一样,别人眼中缺少足够的印象。

    1.7K40

    Material Design 实战 之第三弹—— 悬浮按钮和可交互提示

    下面实战悬浮按钮的点击事件: MainActivity的onCreate()中添加以下代码: //悬浮按钮点击事件 FloatingActionButton fab = (FloatingActionButton...接着这里又调用了一个setAction()方法来设置一个动作,从而让Snackbar不仅仅是一个提示,而是可以和用户进行交互的。 简单起见,我们动作按钮的点击事件里面弹出一个Toast提示。...可以看到,Snackbar从屏幕底部出现了,上面有我们所设置的提示文字,还有一个Undo按钮,按钮是可以点击的。 ? 过一段时间后Snackbar会自动从屏幕底部消失。...其实道理很简单,还记得我们Snackbar的make()方法中传入的第一个参数吗?...本节的内容就到这里,接下来我们继续丰富MaterialTest项目,加人卡片式布局效果。

    1.8K30

    【Hexo】Hexo 主题 Matery 配置

    但现在大部分信息都是默认数据,所以我们需要根据需要进行自定义设置,不同主题的配置文件都不太一样,因此设置方法也有所不同,这里仅介绍 Matery 主题的设置方法。...以下是常用社交图标的标识,供你参考: Facebook: fab fa-facebook Twitter: fab fa-twitter Google-plus: fab fa-google-plus...Linkedin: fab fa-linkedin Tumblr: fab fa-tumblr Medium: fab fa-medium Slack: fab fa-slack Sina Weibo:...fab fa-weibo Wechat: fab fa-weixin QQ: fab fa-qq Zhihu: fab fa-zhihu 修改打赏的二维码图片 主题文件的 source/medias...summary 无 文章摘要,自定义的文章摘要内容,如果这个属性有值,文章卡片摘要就显示这段文字,否则程序会自动截取文章的部分内容作为摘要 categories 无 文章分类,本主题的分类表示宏观上大的分类

    1.9K10

    nicegui布局细节补充——绝对定位,固定定位

    这是因为卡片有一个规则,里面的 第一个 子元素设置的圆角会自动保持与卡片的圆弧一样。如果你尝试去掉 column 会发现设置的圆角弧度不起作用。 还有其他相关样式,后面会有独立的章节讲解。...但我们希望数字图案可以脱离这种规则,它可以很容易放置容器(卡片)任意角落。...通过另一个属性,可以控制元素的移动: transform:translateX(-50%) ,x轴,就是水平位置。这里的百分比的参照物是元素本身的宽度。...设置卡片的上内边距为0( padding-top ) 圆形图标往上偏移 50% 设置卡片中第一个元素(文字)的上外边距( margin-top ) 虽然各种细节设置,可以让我们灵活应对各种情况。...并且以自身中心为圆点。看原理图:

    76810

    6.hexo插件篇(必看)

    以下是常用社交图标的标识,供你参考: Facebook: fab fa-facebook Twitter: fab fa-twitter Google-plus: fab fa-google-plus...Linkedin: fab fa-linkedin Tumblr: fab fa-tumblr Medium: fab fa-medium Slack: fab fa-slack Sina Weibo:...fab fa-weibo Wechat: fab fa-weixin QQ: fab fa-qq Zhihu: fab fa-zhihu 注意: 本主题中使用的 Font Awesome 版本为 5.11.0...文件中也需要开启才行 summary 无 文章摘要,自定义的文章摘要内容,如果这个属性有值,文章卡片摘要就显示这段文字,否则程序会自动截取文章的部分内容作为摘要 categories 无 文章分类,本主题的分类表示宏观上大的分类...CDN 是构建在网络之上的内容分发网络,依靠部署各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。

    4.6K20

    带你领略 ConstraintLayout 1.1 的新功能

    您可以设置它的值为 spread,spread_inside 或者 packed。...spread:均匀分配链中的所有视图 spread_inside:将第一个元素和最后一个元素放置边缘上,并均匀分布其余元素 packed:将元素包裹在链条的中心 屏障 如果您有几个视图会在运行时更改大小...profile.visibility = GONE profile.visibility = VISIBLE 圆形约束 约束布局中,大多数约束由屏幕尺寸指定——水平和垂直。...约束布局 1.1 版本中,有一个新的类型约束 constraintCircle,它允许您指定沿着一个圆形进行约束。您不必提供水平和垂直边距,而是指定圆的角度和半径。...在这个例子中,你将按如下方式指定中间的 fab: <android.support.design.widget.FloatingActionButton android:id="@+id/middle_expanded_<em>fab</em>

    1.5K20

    如何用最经典的迪士尼动画设计原则赋予 UI 灵性?

    水平滚动的控件通常会展示出某些元素的一部分,让用户意识到可以滑动交互。 3、时间控制 传统的动画当中,时间控制决定了帧数的绘制数量和内容。帧数越多,动画就越流畅,相应的内容变化也可能更慢。...5、表演与呈现方式 为角色设置舞台,让角色像登上舞台一样进入场景。换句话说,你需要借用动画效果来进行「叙事」,考虑如何让它进入场景,如何呈现,怎样表演,如何借用镜头语言来引导用户的注意力。...Material Design 当中的 FAB 动效就是一个最典型的夸张式的动效,它最终的静态效果是很吸引人的,因为它将一个按钮的色彩扩展到整个界面,并且在所有元素的最上层,强调到了极致。...使用 FAB 动效来进行夸张 支付类APP中使用夸张的效果来强化 9、跟随动作和重叠动作 没有任何一种物体会突然停滞,通常运动是一个接着一个的。还有一个更加简洁的表述为「动者恒动」。...滚动的时候,卡片和底部的元素以不同的速率运动,类似视差。

    93030

    带你领略 ConstraintLayout 1.1 的新功能前言带你领略 ConstraintLayout 1.1 的新功能

    您可以设置它的值为 spread,spread_inside 或者 packed。...spread:均匀分配链中的所有视图 spread_inside:将第一个元素和最后一个元素放置边缘上,并均匀分布其余元素 packed:将元素包裹在链条的中心 屏障 如果您有几个视图会在运行时更改大小...profile.visibility = GONE profile.visibility = VISIBLE 圆形约束 约束布局中,大多数约束由屏幕尺寸指定——水平和垂直。...约束布局 1.1 版本中,有一个新的类型约束 constraintCircle,它允许您指定沿着一个圆形进行约束。您不必提供水平和垂直边距,而是指定圆的角度和半径。...在这个例子中,你将按如下方式指定中间的 fab: <android.support.design.widget.FloatingActionButton android:id="@+id/middle_expanded_<em>fab</em>

    1.7K20
    领券