Question

我在我的应用程序中使用Material-UI卡。目前这张卡很平面，有头衔。我想在卡片的最左侧有一个缩略图，旁边是卡片的瓷砖，例如某些应用程序中的歌曲列表。我尝试过，但我无法实现。有没有办法将图像作为缩略图添加到卡（最左侧）。我想将缩略图高度与卡片高度相匹配，缩略图应从左边缘开始（无边距）。有人能帮助我吗？

这是我当前卡的代码：

render(){  
    return (
        <div>
            <MuiThemeProvider>
                <Card style= {{marginBottom: 2}} 
                      onTouchTap={() => {this.props.handleClick(this.props.id)}}
                      zDepth={this.state.shadow}>
                    <CardHeader
                      style={{fontFamily: 'Roboto, sans-serif', fontWeight:600}}
                        title={this.props.title}
                        //subtitle={value.description}
                        actAsExpander={false}
                        showExpandableButton={false}
                    />
                </Card>
            </MuiThemeProvider>
        </div>
    );
}

Answer 1

你可能最好创建自己的组件，或者在左翼中使用带有方形图像的List / ListItem：

jsFiddle：https://jsfiddle.net/42f81uvv/1/

<List style={{ width: 400 }}>
  <ListItem
    innerDivStyle={{ paddingLeft: 80 }}
    leftAvatar={
      <img style={{ height: '100%', margin: -16 }} src="https://zartnerds.files.wordpress.com/2015/10/thumbnail.png" />
    }
    primaryText="Some Title"
    secondaryText="That's a good looking thumbnail"
    />
</List>

将缩略图添加到素材ui卡

1 个答案: