Question

我正在研究Material-UI，但我无法在Demo（示例）中找到与他们网站中的内容类似的内容。

我的问题是我要复制此example，所以我尝试使用<Card />组件重现容器（而不是内容），但它不能很好地重现，所以我想知道是否有一个特定的组件可供使用。

Answer 1

如果我正确理解了您的问题，那么您正在寻找一种方法来模拟可折叠的演示容器，该容器会在Material-UI的文档中显示演示背后的代码（并且您希望使用Material-UI组件来实现）。 / p>

该特定容器在docs网站中以internal component的形式实现，由Material-UI组件组成，依赖于JSS进行样式化。它也是开源的，所以查看the code应该可以帮到你。

以下是render方法的摘录：

  <div className={classes.root}>
    <IconButton onClick={this.handleCodeButtonClick} className={classes.codeButton}>
      <CodeIcon />
    </IconButton>
    <Collapse in={this.state.codeOpen}>
      <MarkdownElement className={classes.code} text={`\`\`\`js\n${raw}\n\`\`\``} />
    </Collapse>
    <div className={classes.demo} data-mui-demo={name}>
      <DemoComponent />
    </div>
  </div>

这是一个用于在Material-UI文档中进行演示的组件。它只是带有IconButton的样式div。

MarkdownElement包含由容器右上角显示的代码按钮切换的代码。它包含在Collapse组件中，该组件处理在切换该代码的可见性时发生的动画过渡。

DemoComponent是展示演示的地方。

使用样式表对象中定义的JSS处理所有样式。

我确信您可以按照此模式将其构建为Card。它应该是非常简单的，例如向CardHeader添加一个触发状态更改的操作，并切换您要扩展的内容。

如何重现Material-UI卡样式

1 个答案: