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

本教程将介绍语义用户界面反应--对卡片中的图像添加显示效果的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

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

问题描述

标题说明了一切。
是否可以将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>
 ...

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

好了关于语义用户界面反应--对卡片中的图像添加显示效果的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。