reactjs - 自定义列表布局

Question

我正在使用 rest-admin 框架。

我想更改列表的布局，并添加自定义组件。

目前的布局是:

我想要的是添加一个快速搜索组件。过滤器面板通过操作显示或隐藏它。因为我认为放置快速搜索过滤器会浪费屏幕上的很多空间。我的想法是更好地利用空白空间。

下一张图片就是我需要的布局:

我基于 Google 分析用户管理 UI:

我的问题是:我可以通过重用框架的列表组件而不创建新的“列表”组件来做到这一点吗？

Answer 1

您必须实现自己的 List 组件。然而，大部分 List 工作实际上是由 ra-core 的 ListController 组件完成的，我们没有时间正确记录但是实现起来应该不会太难。您可以从 List 组件中复制/粘贴代码，并根据需要进行调整。

有两点需要注意:

1. 快速搜索已经可以使用永远在线的过滤器。因此，如果您可以在没有确切布局的情况下生活，那就是要走的路。查看示例源代码:https://marmelab.com/react-admin-demo/#/customers

2. 我们正在研究将 child 作为某些 ra-ui-material 组件(List 是其中之一)的功能来支持，以实现这种更容易定制