import { pug, styl } from 'startupjs'
import { faUserCircle } from '@fortawesome/free-solid-svg-icons'
import Popover from './'
import Icon from '../../Icon'
import Button from '../../Button'
import Span from '../../typography/Span'

# Popover
Всплывающее окно для показа дополнительного контента, связанного каким-то образом с определённым элементом на странице и появляющееся при нажатии на него.

```jsx
import { Popover } from '@startupjs/ui'
```

## Инициализация
Перед использованием нужно настроить [Portal](/docs/components/Portal)

## Простой пример
- children (ReactNode): видимая часть
- renderContent (function: ReactNode): функция возвращает скрытую часть

```jsx example
function renderContent () {
  return pug`
    Span Контент
  `
}

return pug`
  Popover.caption(renderContent=renderContent)
    Icon(icon=faUserCircle size='xl')
`

styl`
  .caption
    width 3u
`
```

## Позиция
- position (string - 'top', 'bottom', 'left', 'right'): позиция относительно видимой части
- attachment (string - 'start', 'center', 'end'): дополнительный параметр для смещения
- placements (array): какие позиции можно использовать при автофиксе

```jsx example
function renderContent () {
  return pug`
    Span Контент
  `
}

return pug`
  Popover(
    position='top'
    attachment='center'
    renderContent=renderContent
  )
    Button Открыть
`
```

## Стилизация
- style (CSSProperties): стили для видимой части
- attachmentStyle (CSSProperties): стили для скрытой части
- arrowStyle (CSSProperties): стили для стрелки
- arrow (boolean): показывать стрелку
- matchAnchorWidth (boolean): ширина скрытой части равна ширине видимой

```jsx example
function renderContent () {
  return pug`
    Span.text Контент
  `
}

return pug`
  Popover.caption(
    arrow
    renderContent=renderContent
    attachmentStyle={ backgroundColor: '#333' }
    attachment='center'
    matchAnchorWidth
  )
    Button Открыть
`

styl`
  .caption
    alignSelt flex-start
  .text
    color #fff
    text-align center
`
```

## Дополнительные параметры
- durationOpen (number): время анимации при открытии
- durationClose (number): время анимации при закрытии
- renderWrapper (function: ReactNode): образует обертку для children