У меня есть две колонки, каждая из которых содержит значок в углу.Карты отображаются в нижней половине экрана.Когда пользователь щелкает значок, действие приставки извлекает данные, которые необходимо отобразить во всплывающем окне рядом со значком.
Я пробовал Callout (https://developer.microsoft.com/en-us/fabric#/components/callout),, но он не закрывается, когда я щелкаю вне егоЧто еще более странно, так это то, что, если я открою другую выноску, данные из нового запроса будут отражены в обеих выносках. Я использую версию 16.5
Чем я пытался использовать bootrstraps Overlay (https://react -bootstrap.github.io / components / popovers / )
popoverRight = () => {
return (<Popover id = "popover-positioned-right" title = "Popover right">
{this.state.loading && (< div > Loading... < /div>)}
{this.state.loaded && [...Here goes data rendering...]}
</Popover>)
}
render() {
return ( <OverlayTrigger trigger = "click"
placement = "right"
overlay = {
this.popoverRight
} >
<
Button > Show top 10 < /Button> < /
OverlayTrigger > )
}
Появилось 3 проблемы:
- , когда значок находится внизу, наложение тупо отрисовывается за пределами нижней части экрана.(размещение = "вправо")
- всплывающее окно не изменяет размеры автоматически, чтобы соответствовать содержимому
- при прокрутке окна всплывающее окно остается фиксированным там, где оно было
Кто-нибудьзнать о некоторых компонентах (или о том, как заставить упомянутые 2) соответствовать следующим требованиям:
- Должен располагаться аккуратно, близко к якору, но быть видимым (второй пример выноски, кажется, позиционируется правильно)
- Автоматическое изменение размера (или в худшем случае разрешить установку параметров измерения, чтобы оно перерисовывалось после завершения действия приведения)
- Когда окно прокручивается, оно должно либо закрываться, либо привязываться к привязке)
- Когдапользователь нажимает за пределами (и внутри) всплывающего окна, оно должно закрываться