语义用户界面反应--对卡片中的图像添加显示效果

Semantic UI React - Adding Reveal Effect to Images in Cards(语义用户界面反应--对卡片中的图像添加显示效果)

问题描述

标题说明了一切。 是否可以将Semantic UI Reveal effect添加到Cards中的Images？

这将是一个非常好的功能，当设计电子商务网站与语义化的UI+反应，例如有两个图像为每个产品，当悬停。 此外，在使用无反应的语义界面时，it is totally possible。

推荐答案

我自己回答是因为我已经找到了(我承认不是很聪明)解决此问题的方法。目前，它正在使用以下版本的语义UI+语义UI反应。

上次更新时间：2018年3月：

"semantic-ui": "^2.3.1",
"semantic-ui-react": "^0.79.0"

在我的组件中，我只是去掉了直接的<Image>或<Reveal>组件，而使用了一个普通的<div>JSX组件(包含两个Images来模拟Reveal行为)：

...
<Card>
    <div className={'ui slide masked reveal image'}>
        <Image src='/img/products/1.jpg' className={'visible content'} />
        <Image src='/img/products/2.jpg' className={'hidden content'} />
    </div>
    <Card.Content>
        <Card.Header textAlign={'center'}>
            Product name
        </Card.Header>
    ...

这会使所需功能的影响降至最低：)

这篇关于语义用户界面反应--对卡片中的图像添加显示效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！