我目前正在尝试将Menu.Item中的Icon和文本与Semantic UI React V.0.68.2对齐。
目前我的HTML输出如下所示:
<a class="active item pointer">
<i aria-hidden="true" class="icon ti-icon ti-home large"></i>
Dashboard
</a>
我的JSX就像这样:
<Menu vertical className="some classes" icon=''>
<Menu.Item
active={active}
onClick={onClick}
className="some class"
>
<Icon name="home" large /> Dashboard
</Menu.Item>
</Menu>
我写了一个新的Icon组件来使用我自己的Icon字体,看起来像这样。我试图保持与Remantic Implementation of Semantic UI中的原始Icon类接近。
import React, { Component } from "react";
import classnames from "classnames";
/**
* @class Icon
* @extends {Component}
* @description Icon class for themify icons. Replacement for semantic ui Icon class
*/
class Icon extends Component {
render() {
var iconClass = classnames("icon ti-icon ti-" + this.props.name, {
big: this.props.big,
large: this.props.large,
close: this.props.close
});
return (
<i
aria-hidden={true}
className={this.props.close ? iconClass.replace("icon", "") : iconClass}
onClick={this.props.onClick}
/>
);
}
}
export default Icon;
现在我希望文本和图标垂直居中,但我不能让它工作,它们的文本似乎总是位于其父节点的顶部。但实际上我希望它在Menu.Item中垂直居中显示。任何尺寸的图标。因此,当我将Icon的大小更改为大时,文本应始终垂直居中。大小类与语义UI中的大小相同。
有谁知道如何实现这一目标?在此先感谢:)
答案 0 :(得分:0)
您好,您正面临一个非常常见的问题,可能的解决方案在以下codepen中描述 https://codepen.io/anon/pen/XEKZwq
我建议你做的是将文本换成一个跨度,而不是:
<a class="active item pointer">
<i aria-hidden="true" class="icon ti-icon ti-home large"></i>
Dashboard
</a>
您执行以下操作
<a class="active item pointer">
<i aria-hidden="true" class="icon ti-icon ti-home large"></i>
<span>Dashboard</span>
</a>
完成此操作后,您可以轻松地使用上面的codepen中的解决方案。