代码之家 › 专栏 › 技术社区 › Hans

材料:纸张或卡片标题

material-ui reactjs

Hans · 技术社区 · 5 年前

设计一个 React 应用程序,我想要的是拥有 Card 或 Paper 在顶部边框上,左侧有一些缩进,如下所示:

我搜索了很多,但找不到通用的方法。我应该创建一个定制的组件,还是有办法做到这一点?

1 回复 | 直到 5 年前

Ryan Cogswell 5 年前

我不知道你到底想要它是什么样子,但是你可以通过使用 fieldset 和 legend 元素。

可能是这样的:

<fieldset>
  <legend>Current</legend>
  // Content within border.
</fieldset>

结果:

此方法由物料UI用于文本字段的“已概述”变量( demo here )处理这个方面的代码是 NotchedOutline 组件(组件) source here )

你也可以很容易地通过 position 属性将标题元素向上移动到边框上。这样你就可以使用 material-ui 组件提供大部分样式,然后将标题移到边框上。

推荐文章

ÐÐºÐ°ÑÐµÑÐ¸Ð½Ð° · 我无法更改全局背景材质ui

2 年前

Tanu · 使用三元运算符时获得Lint无嵌套三元错误

2 年前

user460567 · 在react类中,我在哪里可以编写条件语句?

2 年前

Octavian Niculescu · React material ui responsive drawer-我想从工具栏中删除填充

2 年前

ÐÐ°Ð½Ð°Ð¸Ð» ÐÐ¾Ð±ÑÐµÐ² · 从多次页面点击中获取最新页面

2 年前

Germán · 单击提交时,如果文本字段错误匹配,则显示错误提示

2 年前

code4cash · 无法在三值条件下呈现mui图标

2 年前

user8811409 · 材料界面:重建文本域谷歌文档“添加人员”功能

2 年前

Bug Miser · 如何在MUI输入字段上显示不同的错误消息?

2 年前

gjs · 使用材质UI元素的自适应字体大小功能

2 年前