这个问题是为了跟踪将新的 Search 组件添加到 @mui/material-next 的工作，推进 Material You 项目( #29345 )
Material You Search 规范： https://m3.material.io/components/search/overview
想法：
- 创建一个带有
variant属性的组件，可以是'searchbar'或'searchview' - 创建两个组件：
SearchBar,在聚焦时渲染SearchViewSearchView
我认为第二个选项更好，因为这样 SearchView 也可以在没有 SearchBar 的情况下使用，而且不需要不必要地实现 SearchBar 的逻辑。
然而，我想收集进一步的建议或批准，然后开始实施。
如果我的建议被接受，我将首先实现 SearchView ,然后实现 SearchBar 。
注意：此评论将更新以显示进度、想法和列出可能的问题。
@DiegoAndai
7条答案
按热度按时间p3rjfoxz1#
@lhilgert9,我们如何实现搜索栏和搜索视图之间的过渡？我认为这可以指导实现。
我想到的另一个选项是，
SearchBar始终可见，选项是切换(可见/隐藏),而“搜索视图”是在选项可见时。类似于Select组件的实现方式。flseospp2#
@DiegoAndai 实施类似于Select组件的想法对我来说非常有前途。然后我将
SearchView实现为插槽组件，这样您就可以用自己的组件替换它。xa9qqrwz3#
我认为这将是很多的试错，所以我建议打开一个草稿并尝试使用SearchBar组件。然后我们可以查看结果并进行更改。然而，问题在于在哪里以及是否我们为它创建一个Playground，在文档中创建一个新的页面或使用现有的一个。有任何建议吗？
brgchamk4#
我建议打开草稿并尝试使用SearchBar组件。
这很合理，@lhilgert9 👍🏼
我们还应该考虑Autocomplete组件与此Search组件相似。值得思考它们之间的关系。我们是否应该同时拥有两者？
关于文档页面，我们首先需要确定实现方式，然后可以稍后添加所需的页面。目前，让我们使用实验页面作为示例。您可以在
docs/pages/experiments/material-next中添加一个页面，它将出现在/experiments/material-next/file-name路径下。rslzwgfq5#
我们可以考虑在SearchView中使用BaseUI的useAutocomplete钩子，最好将其作为一种插槽组件，因为这可能是最常用的SearchView类型。如果您有另一个用于SearchView的应用程序，您可以覆盖此功能。或者，我们可以设计一个指南，展示如何将自动完成集成到SearchView中。
ux6nzvsh6#
我们可以考虑在SearchView中使用BaseUI的useAutocomplete hook。这是一个好主意~尽管在Base中，我认为我们应该(至少)将
useAutocomplete转换为TS,并尽量使其与contributing guide中制定的标准保持一致😬我们还需要先处理一些相关的组件，例如
Icon、IconButton、Paper、Popper等。efzxgjgh7#
我同意你的看法。我已经看到你在处理
IconButton了。你列出的其他组件在哪里？我在这里找不到它们：#29345。它们应该只添加到 material-next 还是 BaseUI?我建议你先在 #29345 中将搜索组件设置为“暂停”(Switch和ProgressIndicator也可以设置为“进行中”)。然后，我会尝试修复useAutocomplete钩子。