- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我希望我能够在我的应用程序中从 material ui 网站重新创建这个小菜单:
现在我有一个带有列表和链接的组件:
import { Link, List, ListItem } from '@material-ui/core';
const burgerRecipe = [
{
id: 0,
name: "bread",
quantity: 2
},
{
id: 1,
name: "steak",
quantity: 1
},
{
id: 2,
name: "cheddar",
quantity: 1
},
{
id: 3,
name: "pickles",
quantity: 2
}
]
/**
* MenuInteractiveColumn :
* @description
*/
const MenuInteractiveColumn = props => {
return (
<>
<List>
{burgerRecipe.map(value => {
return (
<ListItem key={value.id}>
<Link href={`/reservations#${value.name}`}
underline="none"
onClick={() => {
console.info("bip bop");
}}
>
{value.name}
</Link>
</ListItem>
)
})}
</List>
<List>
{burgerRecipe.map(value => {
return (
<div id={value.name}>
{value.name} -------------
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in lectus sit amet est mollis pharetra nec non augue. Phasellus eleifend ac erat non aliquam. Donec varius vel orci vel tempus. Suspendisse non dolor est. Duis at consequat diam. Etiam at bibendum orci, at tincidunt nulla. Integer vel quam non urna malesuada auctor. Quisque feugiat ligula dolor, vitae consequat magna mattis nec. Nulla massa nisl, fringilla et felis nec, lobortis placerat lectus. Praesent eget vehicula nulla. Cras lobortis metus sed pellentesque maximus. Proin nisi diam, euismod sit amet lacinia in, fringilla eget dolor. Nunc molestie magna id varius facilisis. Pellentesque sit amet posuere justo. Nullam faucibus lectus at mauris efficitur, sit amet hendrerit massa auctor.
Fusce a dapibus nibh, at dignissim nulla. Donec tempus ut justo eu volutpat. Pellentesque eget diam ipsum. Nullam vehicula lorem et rhoncus mattis. Duis arcu libero, consectetur a sodales eget, malesuada at purus. Integer a mattis eros. Etiam sagittis, lectus cursus commodo molestie, ante justo maximus diam, pellentesque hendrerit nibh est sed ex. Cras pharetra interdum sagittis. Nulla tincidunt scelerisque purus, eget varius ipsum venenatis porta. Etiam fermentum, diam vitae tempor tempus, quam diam iaculis eros, id fringilla sapien felis ut metus. Quisque et mi condimentum, semper justo ultrices, euismod metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras posuere et nisl ac ultrices. Donec eu dolor tincidunt, maximus augue quis, suscipit metus. Praesent convallis ut metus vel eleifend.
Sed eu dignissim urna. Quisque sit amet risus sollicitudin, lobortis purus nec, consequat justo. Vestibulum non mauris faucibus, maximus nulla eu, convallis augue. Aenean vel libero nec felis ullamcorper auctor. Mauris efficitur sed tellus eget semper. Etiam blandit et lectus ut lacinia. Suspendisse faucibus enim convallis, placerat eros vitae, ullamcorper mauris. Quisque quis quam vestibulum, mollis justo ac, pellentesque nisl. Nunc iaculis tortor sit amet ex tristique convallis sit amet sit amet augue. Nulla aliquam sit amet enim eget placerat. Ut quis ex tincidunt, dignissim ligula non, euismod mauris. Sed euismod faucibus massa, vel aliquam elit euismod in.
Aliquam id sapien nibh. Sed eu tellus eros. Cras interdum magna quis arcu dignissim, eget posuere felis dictum. Donec dictum euismod lectus, nec ornare erat suscipit at. Fusce mi nibh, ullamcorper porttitor orci sit amet, placerat ultrices eros. Nam rutrum mauris sit amet magna iaculis aliquet. Sed venenatis urna in metus volutpat, id sagittis nulla tempor. Curabitur odio metus, porttitor sit amet urna ac, posuere rhoncus neque. Morbi tortor libero, dapibus vitae finibus rutrum, placerat quis leo. Vivamus nunc leo, vehicula vulputate cursus ac, placerat vitae ex. Nullam eu nisl purus. Curabitur vitae egestas turpis, quis volutpat felis. Quisque sit amet purus facilisis, posuere ante in, laoreet nisl. Pellentesque ornare dolor nec lectus porttitor, et venenatis orci auctor. Vestibulum ultrices id enim vel interdum. Ut non tortor placerat, consectetur sem at, viverra elit.
Etiam non tellus in nisl facilisis pharetra. Vivamus porttitor justo at fringilla euismod. Nunc neque lacus, scelerisque sed pellentesque quis, ullamcorper nec leo. Nullam sed dolor metus. Vivamus aliquet at erat eu blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis neque at eros feugiat, nec lacinia lorem finibus. In semper vel lacus eu porttitor. Curabitur mollis lectus ac purus pretium, non facilisis odio viverra. Aliquam erat volutpat. Pellentesque ultrices nulla et nisi placerat, non tempus nisl elementum. Sed dui dui, vestibulum posuere enim vitae, sollicitudin rhoncus metus.
</div>
)
})}
</List>
</>
)
};
export default MenuInteractiveColumn;
我希望它像在 material ui website 上那样转到我页面中的某个 div
编辑:现在有点用了,但它隐藏了我的导航栏下的 lorem Ipsum 的顶部
最佳答案
虽然我没有时间根据您的代码制作示例,但这里有一些您可能感兴趣的资源:
另见 material-ui: issue 16359了解更多信息
关于reactjs - Material UI 中的交互式目录,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61209231/
我正在开发一个使用 JTable 的简单 Java 应用程序。我正在尝试实现我所看到的here 。给定链接上的表格的行为与我在表格中想要的行为完全相同。我已完全按照引用链接上显示的方式进行操作。 但是
我需要将 *.ml 文件加载到 Ocaml 顶层(交互式解释器,当您在 shell 中键入“ocaml”时),然后从 Matlab 进程发送指令,获取指令结果,发送返回另一条指令,... 我编写了这个
我正在尝试实现交互式 UILocalNotifications。 以下是我的代码。我无法获得接收通知的 3 个操作按钮。 UIMutableUserNotificationAction *nActio
我不是一个干净的 CSS 编码器,所以这可能是我问题的症结所在……但是……我从本教程中拼凑了一张交互式 map :http://www.noobcube.com/tutorials/html-css/
这个问题在这里已经有了答案: 关闭 13 年前。 Possible Duplicate: How to save a Python interactive session? 我可以在“头脑 Stor
我试图在不扩展 ListActivity 类的情况下创建交互式 ListView。布局应该是左侧的 RatingBar 和标签向右。这是我目前的代码,没有任何编译错误,但在应用程序启动时崩溃: pub
我正在尝试使用 antlr 编写一种简单的交互式(使用 System.in 作为源)语言,但我遇到了一些问题。我在网上找到的例子都是使用每行循环,例如: while(readline) resul
我想创建一个交互式 JTable。为此,我想在表格的单元格中添加 JPanel。一旦 JPanel 位于单元格中,我就可以将我的各种组件添加到 JPanel 中,从而使表格具有交互性。每个 JPane
我有两个具有完全相同文件的分支(如果您想知道它是一个 .sql 文件),我想以交互方式 merge 它。 我非常想像在发生冲突(或命令行)时那样打开一个 diff 程序,然后准确选择行到哪里。 有什么
我想用交互式 rebase 编辑一个提交。当我用 edit 替换 pick 时,此提交的更改仍应用于 repo(以便我可以编辑提交)但我想从头开始重写它。我该怎么做? 最佳答案 在交互式 rebase
来自 Python relative imports for the billionth time : 要使 from .. import 起作用,模块名称中的点数必须至少与 import 语句中的点
如何使条形与一整天一样宽?现在,条形图更像是划分一天的开始的线。我是否从条形标记切换到矩形标记?我会玩带秤吗?或者我是否在不修改数据的情况下强制分箱? 现在条形图太细了。因为图形是交互式的,所以我无法
是否有任何命令行技巧可以让 SVN 添加来自 svn stat 的所有丢失的文件?互动? 例如,类似于: svn add --interactive $ new file: file1.tmp
我想知道这是否可以(可能不是)使用 R 中的并行处理后端之一来完成。 .我尝试了一些谷歌搜索,但一无所获。 我目前遇到的一般问题: 我有一些大物体需要大约半小时才能到达 load 我想在数据上生成一系
我一直在关注问题 here 的建议暂时将各种提示/信息放在我在 Altair 中的地 block 上。但是,如果 Altair 绘图设置为 interactive(),则此建议不起作用 - 在我看来,
简短的问题是,如果 shell 位于不拥有 tty 的孤立进程组中,它应该做什么?但我建议阅读长问题,因为它很有趣。 这是一种有趣且令人兴奋的方法,可以使用您最喜欢的 shell 将您的笔记本电脑变成
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 这个问题似乎不是关于 a specific programming problem, a software
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的,因为
有没有办法实现交互式 cli,允许您从多个选项中进行选择? 我想要实现如下目标: 显示的示例是使用 JavaScript 中的 Quirer.js 库实现的,但我似乎找不到在 Java 中实现类似功能
我正在尝试使用运行一些命令的输入脚本来运行交互式 R (Windows XP),然后让我进入 R 命令行提示符。但是,当我运行它时,它会退出。 例如,这是输入文件: test.r: x = 1 x 以
我是一名优秀的程序员,十分优秀!