你如何在移动网站/应用程序上调用该元素

Question

我尝试使用HTML / CSS / JS

从Google地图构建类似此元素的内容

对于研究我试图找到其他人如何用HTML解决这个问题的例子，但却找不到任何东西。所以我猜我只是在寻找错误的流行语。

我尝试了抽屉＆＃39;＆＃39;可拖动的内容＆＃39; ＆＃39;内容高于固定背景＆＃39;等等......所以我正在寻找提示，示例或最佳实践，以便尽可能顺利地实现移动设备。

Answer 1

为什么不只是提供图片 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <EditText android:id="@+id/edt_groupName" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="top" android:paddingLeft="@dimen/_10dp" android:paddingRight="@dimen/_10dp" android:textSize="@dimen/textSize" android:textColor="@color/colorPrimaryDark" android:textColorHint="@color/colorText" android:hint="@string/enter_groupName" android:inputType="textCapWords" android:singleLine="true" android:layout_marginTop="@dimen/_10dp" android:background="@null" android:maxLines="1" android:scrollbars="vertical" /> </LinearLayout> 和position: fixed，然后让其他内容都有z-index: 1，以便在向下滚动时覆盖地图？

这就是你要找的东西吗？

Answer 2

我不小心偶然发现了这个元素的名字。

在googles材料设计中，它被称为＆＃34;底页＆＃34;

请参阅https://material.io/guidelines/components/bottom-sheets.html

Answer 3

我正在搜索与谷歌地图上的移动版本相同的元素和行为。

这是我能找到的最接近谷歌地图的行为。拖出它，如果有更多内容就可以滚动。

https://mui.wertarbyte.com/#!/ExpandableBottomSheet/3

工作表的CSS部分为margin-top: 50vh，我猜一些JS用于拖动/滚动行为。

不幸的是，使用这种方法，即使工作表只覆盖屏幕的一半，也无法再访问下面的地图。