Material UI卡片副标题介绍水平滚动条
Material UI是一个流行的React UI组件库，提供了丰富的可重用组件，用于构建现代化的Web应用程序。其中一个常用的组件是卡片（Card），它用于展示信息和内容。
卡片副标题是卡片组件中的一个可选属性，用于显示在卡片标题下方的附加信息。副标题可以用于提供更多的上下文信息，或者用于描述卡片中的内容。
水平滚动条是一种滚动条的样式，用于在水平方向上滚动内容。它通常在内容宽度超过容器宽度时使用，以便用户可以水平滚动查看隐藏的内容。
Material UI提供了一个名为Scrollbar的组件，可以用于实现水平滚动条。该组件可以包裹需要水平滚动的内容，并自动显示水平滚动条。你可以通过设置组件的属性来自定义滚动条的样式和行为。
在腾讯云的产品中，可以使用腾讯云的云服务器（CVM）来部署和运行使用Material UI开发的应用程序。腾讯云的CVM提供了稳定可靠的计算资源，可以满足应用程序的需求。你可以通过腾讯云的云服务器产品页面（https://cloud.tencent.com/product/cvm）了解更多关于腾讯云云服务器的信息。
另外，腾讯云还提供了云函数（SCF）和容器服务（TKE）等产品，可以用于部署和运行使用Material UI开发的应用程序。云函数是一种无服务器计算服务，可以根据实际请求量弹性地分配计算资源。容器服务是一种基于Kubernetes的容器管理服务，可以帮助你更方便地管理和运行容器化的应用程序。
总结起来，Material UI是一个流行的React UI组件库，卡片副标题是卡片组件中的一个可选属性，用于显示在卡片标题下方的附加信息。水平滚动条是一种滚动条的样式，用于在水平方向上滚动内容。腾讯云的云服务器、云函数和容器服务等产品可以用于部署和运行使用Material UI开发的应用程序。
相关·内容
我在卡片中遇到了这个问题，当副标题变长时，卡片会在进入下一行之前开始一个水平滚动条。有没有办法解决这个问题？请看我在这里所说的演示。
我希望在没有水平滚动的情况下打破字幕，任何帮助都将不胜感激。谢谢
浏览 2提问于2017-07-06得票数 0
回答已采纳
我正试着在一张纸上有一个带有水平滚动条的适当大小的卡片.我一直在尝试“溢出”，但是在这种情况下，它不起作用吗？
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import Cards from './Cards';
con
浏览 1提问于2020-09-09得票数 1
回答已采纳
我无法在material-ui next中增加对话框宽度。它将水平滚动条添加到日志中。接下来有没有办法增加material-ui中日志的宽度？有谁能帮上忙吗？
浏览 1提问于2017-11-08得票数 44
回答已采纳
我正在尝试创建一个react组件，它将显示3张卡片，每张卡片水平地包含一个数组中的一些信息。将有左/右按钮，允许用户水平地前后滚动到另外3张卡，直到阵列完成。 我一直在做一些研究，真的很难找到一个解决方案来轻松完成这项任务。这是我第一次使用Material-UI，所以这一切都是很新的。 我可以做些什么来获得我正在寻找的东西？是否可以为material-UI提供某种滚动功能，以便轻松创建这些左/右滚动按钮？ 谢谢! 示例： ?
浏览 46提问于2020-07-21得票数 5
我已经构建了一个react组件，它映射水平行中的许多产品卡片。当这些卡片比屏幕长时，就会发生溢出，并且组件底部会显示一个滚动条，允许用户沿着卡片向左和向右滚动。我还希望在卡片上方有一个滚动条可见，所以我添加了一个额外的div，它从产品卡片div (通过ref)中获取其大小，并显示一个带有滚动条的空div。然后，我将这个div滚动位置与产品卡滚动位置链接起来，反之亦然，以确保两者是相同的。这是可行的，但滚动时会出现断断续续的情况，尤其是在移动设备上。 我认为这可能是由于每个onScroll事件多次触发/相互矛盾，但无法弄清楚如何让它工作。任何帮助都将不胜感激！ 呈现的组件： <div&g
浏览 22提问于2020-07-14得票数 1
回答已采纳
1回答
我有一个基于mini variant drawer的material-ui抽屉。在抽屉内容中，我有一组基于prevent scroll buttons tabs的选项卡。我使用material-ui版本4.12.3。 不幸的是，抽屉中的选项卡超出了屏幕的宽度，并添加了一个水平滚动条。有关代码和示例，请参阅此codesandbox。我希望选项卡只填充抽屉内容的宽度，并变成可滚动的，就像material-ui示例中那样。 有没有办法让这些标签像上面链接的material-ui示例那样工作，同时保持抽屉的功能不变？
浏览 15提问于2021-09-29得票数 0
我想在屏幕中央的卡片上居中放置一个按钮。到目前为止，我还没能做到。 这就是我到目前为止所得到的： import React from 'react'
import Button from '@material-ui/core/Button'
import { makeStyles } from '@material-ui/core/styles'
import { Card } from '@material-ui/core'
import Grid from '@material-ui/core/Grid'
浏览 17提问于2020-07-19得票数 2
1回答
我有一个带有多张卡片的div，因为我使用的是
overflow-x: scroll;
我得到一个水平滚动条在我的div下，我想要。也就是说，该条占用了div的宽度，但我更希望有一个更自定义的滚动条，它只占div的50%-75%。
在css/js中是否有一种方法允许我更改水平滚动条的宽度，所有的标记似乎都指向no。如果是这样的话，任何人都有创建自定义滚动条的经验吗？
我最初的想法是创建一个输入滑块，该滑块具有相同的每张卡片的滴答数，并滚动到每个卡片onChange，但是我可以知道Window.scrollTo()是否适用于水平滚动。
浏览 2提问于2018-10-24得票数 3
1回答
带卡片组的引导4水平卷轴
、、、
我使用的是引导4角和SCSS。
我的下列卡片组如下：
<div class="row">
<div class="list">
<div class="card-group">
<div class="card" ng-repeat="">
data components are here
</div>
浏览 0提问于2018-05-20得票数 2
回答已采纳
2回答
我正在我的网页中添加一个卡片视图。但是卡片中的内容被加载到普通视图而不是卡片视图中。下面是我尝试过的示例代码：
import React, { Component } from "react";
import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
浏览 27提问于2019-09-06得票数 0
1回答
在条样中生成项目
、、、、
我在Typescript中实现了React Material-UI组件： <Grid container direction="row" justifyContent="flex-start" alignItems="flex-start">
<Grid item xs={5}>
<Box m={5} pl={10}>
...... some body text..........
浏览 20提问于2021-09-23得票数 1
回答已采纳
我正在尝试仅使用Grid来创建SPA。我习惯了material-ui Grid，并且经常使用它，然而在我的新项目中，我不确定我做错了什么。 现在的问题是： ? 在右侧有一个页边距和一个水平滚动条。 我知道负边距限制，但如果我对父元素应用填充(如文档所述)，那么我的Grid元素将失去全宽功能： ? 水平滚动条消失了，但是我的元素上有一个填充，如果我在其中一个元素中设置了一个background color，它不会应用到整个宽度，因为有一个填充。 使用overflow-x: hidden添加了第二个垂直滚动条，似乎我必须垂直滚动两次才能滚动页面。 唯一的解决方案是使用Grid s
浏览 23提问于2020-07-17得票数 1
回答已采纳
2回答
我使用包含Card组件的Paper组件，我希望它的高度适合整个页面屏幕。我试图重现这个问题并使它变得简单，所以使用下面的代码：
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Card from "@material-ui/core/Card";
import CardContent from "@mate
浏览 18提问于2020-02-29得票数 2
回答已采纳
1回答
? 我有使用material-UI创建的卡片。问题是，当页面加载或重新加载时，卡片看起来就像左边的卡片。上面似乎没有任何css。几秒钟后，它看起来应该是这样的。这是因为我自己做了什么，还是仅仅是Material-UI的工作方式 import React, { Component } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardAction
浏览 29提问于2019-05-30得票数 3
回答已采纳
5回答
我对react有点陌生，这是第一次尝试从API调用中获取信息，通过它进行映射，并为每个响应制作Material-UI卡片。当我制作一张卡片时，它的效果很好。当我映射整个响应时，会为每个响应制作卡片，并将文本正确地输入到字段中，但图像不会加载。即使使用不是从响应加载的静态图像，图像也不会显示。这就是我所看到的：
//调用接口，映射结果，构建卡片
import React, {Component} from 'react'
import Request from 'superagent'
import Grid from '@material-ui/co
浏览 28提问于2018-07-26得票数 6
1回答
我正在从底部完全移除水平滚动条。我尝试了下面的方法。
1路
这种方式是在第一次加载页面时工作的。但是当我点击UI的时候。出现底部滚动条，但不能滚动和禁用。因此，UI稍微缩小，禁用滚动条显示在底部。
第二路
::-webkit-scrollbar {
display: none;
}
::-moz-scrollbar {
display: none;
}
::-o-scrollbar {
display: none;
}
这从UI中删除了所有滚动条。甚至没有显示垂直滚动条。即使是onclick，也不显示垂直滚动条和水平滚动条。
是否有一种方式完全删除水平滚动条以这种方式
浏览 3提问于2015-11-27得票数 1
3回答
下面的沙箱显示了非常适合放置在带有粘性标题的Paper组件中的材料UI Table的代码：
我希望滚动条(水平和垂直)分别出现在浏览器页面的边缘，底部和右侧，但仍然控制Table本身的滚动。
目前，我只能在从Paper中删除表格并使其直接成为页面的子级--或将跨越整个页面高度的主div的子级时才能做到这一点。然而，我需要Paper组件留在那里，其他组件将放置在它的上方和下方。
对如何实现这一点有什么想法吗？
更新:在附着的草图中，浏览器边框显示为黑色，理想情况下滚动条显示为绿色。在页面的中间有一个容器div，其中包含红色的表。表的标题应该是粘性的，并且表不应该出现在容器div之外，容器div对
浏览 0提问于2020-09-26得票数 1
我对Ui和ReactJ的材料很陌生。我试图水平地显示卡片，每一行都有3张卡片。但现在它只显示了一列。
这是一个调用卡片的文件
import * as React from 'react';
import Jobs from './Jobs'
const jobs1=[{
company:"razer",
jobtitle:"Data engineer",
},{
company:"Huawei",
jobtitle:"Data Engineer"
},{
浏览 7提问于2022-11-06得票数 0
2回答
如何使这些卡片的宽度相同？
当我在材料中使用柔性盒时，这些卡片的用户界面宽度不是相同的大小。我怎么才能解决这个问题？我应该使用网格吗？这是卡片组件和屏幕。柔性盒我申请了屏幕。
卡组件
import React from 'react'
import Card from '@material-ui/core/Card'
import CardActionArea from '@material-ui/core/CardActionArea'
import CardActions from '@material-ui/core/Ca
浏览 4提问于2021-03-03得票数 3
回答已采纳
我想要显示一张有更多列的水平卡片。如果它超过col-12大小，则还需要在启用滚动条的卡片中显示其余内容。
我的HTML代码：
<div class="container-fluid">
<div class="card">
<div class="card-body">
<div class="row flex-nowrap">
<div class="col-2">
Name
浏览 14提问于2021-03-05得票数 1
我有一个Rally.ui.cardboard.CardBoard作为Ext.tab.Panel中的一个项目。当有足够的卡片导致垂直滚动条出现时，吃掉16 of的宽度，而不是动态地拟合新的宽度，也会出现一个水平滚动条。当CardBoard被呈现到document.body时，这种情况不会发生。
我一直在寻找合适的配置选项集，以使TabPanel及其子items[]自动调整大小。经过两天的徒劳尝试，我即将放弃，只要求个人电脑和Mac电脑的宽度分别为1902px和2862‘m。如果有人有更好的主意，我很乐意尝试.现在任何事都行。
浏览 0提问于2014-08-06得票数 1
回答已采纳
我正在尝试有3个相同高度的水平卡，它必须是响应性的。所以问题来了，如果一张卡片的内容比另一张卡片的内容大，那么这张卡片的高度就不一样了，一张卡片看起来比另一张卡片的高度大。所以我通常希望这3张卡片的高度是固定的，这样无论内容是少还是多，所有的3张卡片都必须有相同的高度。
我在这里使用了"Material-UI“，并使用了其中的Card组件。
<Grid container spacing={2}>
<Grid item>
<Card>
Card 1
</Card>
</Grid>
<Grid i
浏览 15提问于2019-07-23得票数 0
回答已采纳
1回答
我正在研究ASP.net MVC。我有许多动态和静态的jq网格在我的应用程序和面对水平滚动条的问题。
我为溢出属性执行了以下代码：
.ui-jqgrid .ui-jqgrid-bdiv {
overflow-y: auto !important;
overflow-x: auto !important;
}
.ui-jqgrid .ui-jqgrid-btable {
overflow-y: auto !important;
overflow-x: auto !important;
}
我设定了autowidth=true;。我不能设置shrinkToFit=
浏览 5提问于2015-12-17得票数 0
回答已采纳
1回答
我正在尝试构建一个垂直的卡片面板，如果大于屏幕，将使用Semantic-UI打开垂直滚动条：
我看到了下面的HTML代码：
<div className="ui fluid container">
<div className="Panel">
<div className="ui card">
<div className="content">
<div className="header">
浏览 14提问于2017-06-28得票数 1
回答已采纳
这是资料用户界面中卡片的示例代码。当鼠标在卡媒体上盘旋时，我怎样才能使卡片媒体中的图片弹出一点呢？或者当鼠标在图片上盘旋时，就像变焦一样
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core
浏览 1提问于2021-04-01得票数 0
回答已采纳
我想有一个有粘性副标题的material-ui列表项目。我设法获得了这个粘性，但当滚动时，副标题与项目重叠：
如何防止这种情况发生？完整代码：
<List
{...rest}
className={clsx(classes.root, className)}
subheader={<li />}
>
{pages.map(group => (
<li>
<ul className={classes.ul}>
浏览 0提问于2020-01-07得票数 6
我使用的是MaterialUI。我的仪表板上有一个卡片列表。My Dash是一个扩展React.Component的类。我的卡片是一个使用钩子useState的函数。我的仪表盘是使用.map()来构建卡片列表。我的卡片有“显示数据”的功能。
Dashboard.js
import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import
浏览 14提问于2019-11-17得票数 0
我有一个水平滑块和很多“卡片”。
定义其CSS的JS代码如下：
cardCarouselSlider: {
zIndex: 0,
overflow: 'hidden',
width: 300 * cardsNumber,
height: 200,
position: 'absolute',
left: (targetedPlanIndex >= 0)
? -281 * targetedPlanIndex + 40
: -281 * (t
浏览 10提问于2022-05-25得票数 1
回答已采纳
我正在使用angularjs ui-grid，但我的网格上没有水平滚动条，所有的列标题都混合在一起，因为网格中没有滚动条。如何启用水平滚动条？
浏览 4提问于2015-12-15得票数 4
2回答
这是我第一次使用material ui，我想创建彩色圆形正方形，里面有一个字母，放置在卡片组件上，如下图所示。
如您所见，带有"A“的彩色正方形就像卡片组件上的徽章。我想使用material ui在我的卡片上实现相同的功能，但我不知道在哪里可以找到这个功能。这是我的卡片的样子：
显示组件的代码：
import React from 'react';
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
浏览 11提问于2021-03-02得票数 1
回答已采纳
我有两个滚动条(水平和垂直)在网页(css+html)。此滚动条是浏览器默认控件。
我的问题是:编码的UI不能识别垂直滚动条和水平滚动条作为单个控件，所以不确定在哪里单击滚动。
开发人员正在使用滚动条的css属性。因此，它会自动检测定义的容器(水平和垂直)中的数据溢出。
感谢在这个问题上的帮助，请让我知道如何在网页中水平和垂直滚动。
向你致以最好的问候，Sunil
浏览 1提问于2014-06-25得票数 0
我已经建立了一个卡片页面，我在一个页面上呈现多张卡片。点击每一张卡，弹出卡呈现为模态组件，但我的关闭按钮对卡片没有响应。
这是一张图片。当我打开按钮检查时，看到它的位置不对。
这是我的，可以在codesandbox中完成代码。
带有关闭按钮的imagePopup.js模态组件
import React from "react";
import { makeStyles } from "@material-ui/core";
import Modal from "@material-ui/core/Modal";
import Backdro
浏览 1提问于2021-05-11得票数 0
回答已采纳
我试图隐藏一个角度ui-网格的水平滚动条，但我找不到正确的属性。(属性enableScrollbars=false同时删除两者。)
是否可以只删除水平滚动条？
浏览 6提问于2014-09-24得票数 25
回答已采纳
我有一个网页与大表全屏。行数固定为20，并且应该可以水平滚动。目前我使用overflow功能来获取水平滚动条。
overflow: 'hidden', overflowX: 'scroll',
但是我需要向下滚动才能看到水平滚动条。我想在页面底部固定滚动条。因此，它始终是可见的，用户可以轻松地导航表。请看下面的图片示例。如何添加这样的滚动条？
PS:我使用的是react-semantic-ui
浏览 1提问于2018-08-13得票数 0
1回答
嗨，我对<div id="blue">元素使用jqueryui/resizable，该元素包含带有一些内部html文本内容的子<div id="red">。蓝色是$(".resizable").resizable();，如果我调整蓝色的大小小于红色的内容，我希望滚动条出现。
问题是，由于类.ui-resizable-s .ui-resizable-e，滚动条总是可见的。
看看这个JSFiddle
如果我现在隐藏了JSFiddle中的水平和垂直句柄，它就能工作(只有在需要时，才会出现溢出滚动条。
如果我查看DOM树，我就能
浏览 6提问于2016-07-28得票数 1
回答已采纳
1回答
我有一张设计成反应的卡片。卡片需要在整个项目中出现(在不同的页面上)。
每张卡将有不同的标题，字幕和金额。
我该怎么做呢？我想要创建一个对象，然后遍历它。调用不同页面上的卡片组件，但这不允许我根据页面更改内容。
Card.js
const cards = [
{title: Card A, subtitle: Card A Subtitle},
{title: Card A2, subtitle: Card A2 Subtitle},
{title: Card A3, subtitle: Card A3 Subtitle},
]
{cards.map through car
浏览 1提问于2022-01-12得票数 2
希望你做得很好。我只是在使用ReactJS，我利用axios请求从第三方API获取新闻。现在，API返回了20篇不同的文章。因此，我尝试使用map函数来映射和迭代这20篇文章，并创建20张卡片(我创建了一个卡片组件，api信息将填充到其中)。有20篇文章，这意味着应该有20张卡片。然而，只有一张牌显示。请看下面我的代码。谢谢!
[
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
