Question

我对Office UI架构非常陌生。我正在尝试为hoverCard 仅显示紧凑型卡。我试图提供mode : ExpandingcardMode.compact，但它不起作用。

我如何使其工作？

render() 
{
    const expandingCardProps = {
        onRenderCompactCard: this.renderCompactCard,
        mode : ExpandingCardMode.compact,
    };
    return (
        <div>
            <HoverCard
                expandingCardProps={expandingCardProps}
                instantOpenOnClick={true}
                expandedCardOpenDelay={0}
                trapFocus={true}

                openHotKey={KeyCodes.enter}
            >
                <button> new York City</button>
            </HoverCard>
        </div>
    );
}
renderCompactCard = item => {
    return (
        <div >
            In the HoverCard
        </div>
    )
}
</div>
);
};

Answer 1

从文档中

expandingCardProps：与设置为HoverCardType.expanding的type道具一起使用。 ICardProps和IExpandingCardProps中的参考详细信息属性。

如果您还在HoverCardType.expanding的{{1}}中添加类型，是否可以解决您的问题？

React Office UI Fabric-hoverCard模式

1 个答案: