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

有没有办法让material ui抽屉固定高度(并固定在底部)?

是的,可以通过设置CSS样式来实现让Material UI抽屉固定高度并固定在底部的效果。以下是一种实现方式:

首先,在抽屉的外层容器上添加一个自定义的CSS类名,例如"fixed-drawer"。

代码语言:txt
复制
<Drawer className="fixed-drawer">
  {/* 抽屉内容 */}
</Drawer>

然后,在你的CSS文件中定义这个类名的样式:

代码语言:txt
复制
.fixed-drawer {
  position: fixed;
  bottom: 0;
  height: 200px; /* 设置抽屉的固定高度 */
}

通过设置position: fixed将抽屉固定在底部,bottom: 0将其与底部对齐,height属性设置抽屉的固定高度。

这样,你就可以实现让Material UI抽屉固定高度并固定在底部的效果了。

关于Material UI的更多信息和使用方法,你可以参考腾讯云的产品介绍页面:腾讯云Material UI产品介绍

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

相关·内容

【软件开发规范七】《Android UI设计规范》

编辑 从父界面进入子界面,需要抬升子元素的海拔高度展开至整个屏幕,反之亦然。 ​编辑 多个相似元素,动画的设计要有先后次序,起到引导视线的作用。 ​编辑 相似元素的运动,要符合统一的规律。...卡片有固定的宽度和可变的高度。最大高度限制于可适应平台上单一视图的内容,但如果需要它可以临时扩展(例如,显示评论栏)。卡片不会翻转以展示其背后的信息。 ​...编辑 滚动时,如果列表较长,小标题会固定在顶部,直到下一个小标题将它顶上去。 ​编辑 存在浮动按钮时,小标题要让出位置,与文字对齐。 ​...编辑 文本字段(Text fields) ​编辑 文本框可以用户输入文本。它们可以是单行的,带或不带滚动条,也可以是多行的,并且带有一个图标。点击文本框后显示光标,自动显示键盘。...手机端的侧边抽屉距离屏幕右侧56dp。 ​编辑 侧边抽屉支持滚动。如果内容过长,设置和帮助反馈可以固定在底部抽屉收起时,会保留之前的滚动位置。 ​

5K20

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

差不多翻译完iOS组建后,回来翻译MD~ Navigation drawer(抽屉式导航/汉堡导航) Material Design链接:Navigation drawer Navigation drawer...导航抽屉表可以从屏幕左侧出现 (1),或者在与 bottom app bar (2)同时使用时从屏幕底部打开。 范围小于62.5% ?...---- Bottom drawer 用法 Bottom navigation drawers 是固定在屏幕底部而不是左侧或右侧边缘的 modal drawers。...·如果抽屉内容低于屏幕高度的50%,则 drawer 全部打开 ·如果 drawer 内容大于屏幕高度的50%,请先将其打开至50%,然后允许用户将 drawer 向上拖动至其全高或屏幕高度(以先到者为准...在滚动时,drawer 的标题变成了一个高的 top app bar,具有很好的可供性。 ?

3.8K40
  • flutter 起步

    在代码中引用第三方库使用针对english_words这个第三方库来讲,具体使用参见如下代码import 'package:flutter/material.dart';import 'package...persistentFooterButtons - 固定在下方显示的按钮,比如对话框下方的确定、取消按钮。drawer - 抽屉菜单控件。...persistentFooterButtons - 固定在下方显示的按钮,比如对话框下方的确定、取消按钮。drawer - 抽屉菜单控件。...flexibleSpace → Widget - 一个显示在 AppBar 下方的控件,高度和 AppBar 高度一样,可以实现一些特殊的效果,该属性通常在 SliverAppBar 中使用。...toolbarOpacity → double1.BottomNavigationBarType.fixed:(代表tab固定不变,也是默认格式)(1).底部tab数: 不超过4个(2).导航栏背景色,

    4.5K20

    Flutter开发-容器类组件

    例如,如果你想子组件的最小高度是80像素,你可以使用const BoxConstraints(minHeight: 80.0)作为子组件的约束。...一个完整的路由页可能会包含导航栏、抽屉菜单(Drawer)以及底部Tab导航菜单等。...BottomNavigationBar 底部导航栏 FloatingActionButton 漂浮按钮 AppBar AppBar是一个Material风格的导航栏,通过它可以设置导航栏标题、导航栏菜单...抽屉菜单页由顶部和底部组成,顶部由用户头像和昵称组成,底部是一个菜单列表,用ListView实现 FloatingActionButton FloatingActionButton是Material设计规范中的一种特殊...Button,通常悬浮在页面的某一个位置作为某种常用动作的快捷入口 SafeArea 使用 SafeArea 可以 child widget 在顶部和底部腾出足够的空间方便处理 iPhoneX 这类的手机

    3.6K20

    Flutter | 容器组件

    需要变化是,可以通过矩阵变换来达到视觉上的 UI 变化,而不是重新 build 流程,这样会节省 layout 的开销,所以性能会比较好,例如 Flow 组件,内部就是使用矩阵变换来更新 UI ,除此之外..., ), ), 复制代码 实际上就是给最外层套了一个Padding Scaffold,TabBar,底部导航 一个完整的路由页面可能会包含导航栏,抽屉菜单(Drawer) 以及底部 Tab 导航栏菜单等...BottomNavigationBar:底部导航栏 FloatingActionButton:漂浮按钮 AppBar Appbar 是一个 Material 风格的导航栏,通过他可以设置标题,导航栏菜单...,导航底部tab等 AppBar({ Key key, this.leading, //导航栏最左侧Widget,常见为抽屉菜单按钮或返回按钮。...Scaffold 的 BottomNavigationBar 属性来设置底部导航,如上面的示例,我们通过 Material 组件提供的 BottomNavigationBar 和 BottomNavigationBarItem

    5.5K10

    Flutter容器类组件

    由于矩阵变化只会作用在绘制阶段,所以在某些场景下,在UI需要变化时,可以直接通过矩阵变化来达到视觉上的UI改变,而不需要去重新触发build流程,这样会节省layout的开销,所以性能会比较好。...Scaffold(脚手架) 5.1 Scaffold介绍 一个完整的路由页可能会包含导航栏、抽屉菜单(Drawer)以及底部 Tab 导航菜单等。...bottomNavigationBar 底部导航栏 floatingActionButton 浮动按钮 5.2 AppBar AppBar是一个Material风格的导航栏,通过它可以设置导航栏标题...5.5 BottomNavigationBar介绍 我们可以通过Scaffold的bottomNavigationBar属性来设置底部导航,如本节开始示例所示,我们通过Material组件库提供的BottomNavigationBar...和BottomNavigationBarItem两种组件来实现Material风格的底部导航栏。

    3.9K40

    干货!iOS 与 Android 的APP 设计差异

    左侧就是抽屉导航;右侧是标签栏 在Material Design中还有一个组件叫做底部导航。这个组件对于安卓原生应用来说也非常重要。底部的菜单项很容易点击和操作。...但是安卓规范其实不建议同时使用底部导航和标签,因为它可能会在导航时引起混乱。 底部导航(Material Design) 在Apple的人机交互规范中,没有类似抽屉菜单的标准导航控件。...标签栏放在应用的底部应用的核心功能能够快速切换。 通常,底部栏标签不会超过5个。正如你看到的那样,这个组件非常像安卓端的底部导航,只是在iOS中这种形式的导航更加常用。...例如,当一个UI元素展开以填充整个屏幕时,展开后的新界面是点开元素的子级,返回可以回到父级。...标签选项卡固定在一个位置不变,内容界面在水平方向上进行移动 在应用的最上层,切换目标通常被分在主要任务(这些任务可能彼此不相关)上。这些界面通过改变不透明度和缩放值来进行适当的转换。

    3.4K10

    Material Design — App bars: bottomApp bars: bottom

    自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚...App bars: bottom Material Design链接:App Bars:bottom Bottom app bar 在手机屏幕底部展示导航和关键操作。...2、嵌入:FAB处于与 bottom app bar 相同的高度,并且 bar 的形状转换为 FAB 嵌入在 bottom app bar 中。...底部的导航抽屉底部的应用栏打开。 抽屉底部应用程序栏前打开,显示顶部应用程序栏以在达到完整高度时关闭抽屉。...Drawer 在 bottom app bar 前面打开,显示 top app bar 以在达到完整高度时关闭抽屉

    2.4K80

    Material Design技术分享

    Part1:什么是Material design   自2014年谷歌在I/O大会发布Material Design,至今已经两年多,其遵循纸片与墨水的视觉设计,并将物理运动带入到UI设计中,google...因为Material Design本是一种考虑事物本质的设计,将电子屏幕里的UI元素看成是一种不存在于现实世界的新的材质,赋予它类似纸片与墨水的物理特性。...二、Material 属性   Material即材料,被定义为一种有固定行为且特性不可变的实体,Material Design的设计构想亦是如此,材料的长宽随意变化,但是厚度保持均匀,即1dp。...高度包含了静态高度与组件高度,一般UI高度是个固定值,只有状态不一致可能上下移动,但是在变化过后都会自动恢复到自身的静态高度。下面的图表对比了多种元素的静止高度和动态高度偏移。 ?...layout_scrollFlags中的几个值:   scroll:所有想滚动出屏幕的view都需要设置这个flag, 没有设置这个flag的view将被固定在屏幕顶部。

    2.2K60

    深入浅出 NavigationUI | MAD Skills

    在本文中,我们将为大家讲解另外一个用例,即类似操作栏 (Action Bar)、底部标签栏或者抽屉型导航栏之类的 UI 组件如何在应用中实现导航功能。...我需要在应用中增加一些页面,所以有必要使用抽屉式导航栏或者底部标签栏来辅助用户导航。但是我们该如何使用这些 UI 组件来集成导航功能呢?通过点击监听器手动触发导航动作吗? 不需要!无需任何监听器。...只要目的页面的 id 和 MenuItem 的 id 相匹配,该函数会导航到绑定在 MenuItem 上的目的页面。...抽屉式导航栏 虽然看上去不错,但是如果您设备的屏幕尺寸较大,那么底部标签栏恐怕无法提供最佳的用户体验。...Donut Tracker 应用并不需要底部标签栏或者抽屉式导航栏,但是添加了新的功能和目的页面后,NavigationUI 可以很大程度上帮助我们处理应用中的导航功能。

    3K30

    为任意屏幕尺寸构建 Android 界面

    △ 基于宽度的窗口大小类的表示 除了以上三种基于宽度的断点外,我们还引入了具有相同类别名称的基于高度的断点,以便适用于更高级别的布局场景,赋予更多的灵活性。...△ 警告窗口 展开警告可以查看到 Android Studio 是否提供了修改建议,这里关于底部应用栏警告的修改建议就是使用 Navigation Rail、抽屉式导航栏,或使用顶部应用栏代替。...△ JetNews 侧边抽屉导航栏展示 回到 JetNews,我们可以看到在大屏状态下,侧边的抽屉导航栏会以模态的方式出现,但它会延伸到整个屏幕而出现大量空白区域。...为了并排显示 Feed 和 Post,JetNews 简单地使用 Row 包裹两个组件,第一个组件具有固定宽度,第二个组件填充屏幕的其余部分。...维护支持所有不同尺寸的界面会大大引入测试复杂性,我们一直努力在不提高工作量的情况下,通过新的自动化测试工具和 API,您能够配置更多设备来增加测试覆盖率。

    4.2K20

    一文彻底搞清楚 Material Design

    声明 首先声明以下介绍的关于 Material Design 的介绍,都是基于在 Android 环境下,其实 Material Design 是一种为了 UI 页面更加美观的设计规范,也可以按照这种规范应用到...Material Design 是 Google 在 2014 年 I/O 大会上发布的一种新的设计规范。这种设计风格给 Android UI 设计带来了很多的变化。页面变得美感十足。...这里的材料在Android 世界中就是一个个的控件,我们可以把控件想象成现实世界中的物体,规定每个物体的厚度都是固定不变的,永远是 1dp,x,y就对应了控件的长和宽。...2dp 按下状态:8dp 浮动操作按钮(FAB)静止:6dp 按下:12dp 卡片 静止:2dp 浮动状态:8dp 菜单和子菜单:菜单:8dp 子菜单:9dp(每个子菜单+1) 对话框 24dp 抽屉式导航...轮廓(Outlines) 代表图形对象的外形状,确定了对于触摸反馈的波纹区域。 每个 view 都有默认的轮廓(其实有的 View 也没有默认的轮廓,比如 TextView)。

    2.6K10

    UI时卡在了动效这关?看谷歌设计师如何为你出招!

    动效UI更加富有表现力更加易用,这是不争的事实。尽管动效拥有巨大的潜力,但是,在很大程度上依然算是 UI 设计领域当中的边缘学科,难以否认的是,它确实是整个设计家族中的新成员。...2、UI元素在容器内缩放,过程中基于宽度自适应调整。容器内的元素被固定在容器的顶部,会随着顶部的延伸而自然延伸,并且所有元素都会被遮盖在容器内。这样的设计,元素和容器之间的相互关系更加清晰。 ?...如果容器是从屏幕边缘进入,它会逐渐淡入放大。但是,动画所呈现的元素大小并不是从0%开始的,而是从 95%开始的,这一点和macOS 种窗口最小化的神奇效果是截然不同的,这是为了避免用户过度关注动画。...不存在容器情况下的转场动效 有很多动画效果也是在没有容器的承载下,就开始构建的,比如在APP的界面中点击底部的导航按钮,将用户完全带到一个全新的界面当中。...缓动本身描述了动效的加速和减速的速率特征,绝大多数的动效可以直接采用 Material Design 中的标准缓动就行了,这是一种不对称的缓动类型,这种缓动的特征是开始加速快,然后较为缓慢地减速,这样会用户更容易注意到整个变化的结果

    1.5K30

    Flutter实现电影院选座效果!

    由于左边的导航条是固定在最左侧的,而座位表可以全屏拖动,所以这座位表和导航条不能放在一个缩放组件里, 不然座位表放大的时候,直接将导航条放大出屏幕了。...所以左侧导航栏使用ListView,中间座位表使用InteractiveViewer嵌套GridView, 然后将ListView和GridView的ScrollController绑定在一起实现同步滚动...就是方法一的思路,但是用InteractiveViewer开放的接口和控制器,无法完成,这个时候就需要去阅读理解InteractiveViewer的源码,看看有没有什么启发。...这里讲一个UI适配的注意事项: 由于笔者项目用了ScreenUtil(UI自适应),所以在竖屏的时候,传入竖屏的UI尺寸图,且尺寸结尾使用.w进行适配,当横屏时,传入横屏的UI尺寸图(其实就是将竖屏的width...height(横屏悬浮框如果不在底部,则为0)-标题栏高度以及自己加的一些其他布局的高度

    1.5K30

    Flutter实现电影院选座效果!

    由于左边的导航条是固定在最左侧的,而座位表可以全屏拖动,所以这座位表和导航条不能放在一个缩放组件里, 不然座位表放大的时候,直接将导航条放大出屏幕了。...所以左侧导航栏使用ListView,中间座位表使用InteractiveViewer嵌套GridView, 然后将ListView和GridView的ScrollController绑定在一起实现同步滚动...就是方法一的思路,但是用InteractiveViewer开放的接口和控制器,无法完成,这个时候就需要去阅读理解InteractiveViewer的源码,看看有没有什么启发。...这里讲一个UI适配的注意事项: 由于笔者项目用了ScreenUtil(UI自适应),所以在竖屏的时候,传入竖屏的UI尺寸图,且尺寸结尾使用.w进行适配,当横屏时,传入横屏的UI尺寸图(其实就是将竖屏的width...height(横屏悬浮框如果不在底部,则为0)-标题栏高度以及自己加的一些其他布局的高度

    1.5K10

    【Web技术】522- 设计体系的响应式设计

    Resize - 调整大小 调整大小是最基础的设计模式,是一个容器默认的响应式模式,通常有等比缩放、固定高度、或是在不同尺寸下按不同比例规格缩放三种形式,即便在无响应式设计的体系里,容器跟随屏幕尺寸而变化也是一个常见的应用方式...Reposition Reflow - 重新排列 改变 UI 元素的排列方式,这在内容弹性布局里较常见,通常是基于某种排列规则自动向下折行,结合调整大小与栅格系统应用在响应式布局方面,例如 Carbon...UI 表现。...在响应式设计中,Flex 布局通常结合 Breakpoints 使用,在两个 Breakpoints 之间界面做更平滑的过度。...- 通常情况下常驻 Sidenav - 分为左侧右侧两种情况,一般用于放置导航,在不同设备会有展开,收缩,隐藏三种状态 Content - 内容区,通常由 Grid 控制布局 Footer - 如有,固定在页面底部

    1.8K20
    领券