Popover

특정 UI 요소 위에서 해당 요소에 대한 추가적인 정보나 액션을 제공합니다. 단순히 정보를 보여주는 Tooltip과 달리, 내부에 버튼과 같이 사용자가 상호작용할 수 있는 콘텐츠를 포함할 수 있습니다.

Design

Web

iOS

Android

WantedPopover

커스텀 콘텐츠를 포함한 Popover 컴포넌트입니다. 특정 위치에 Popover를 표시하며, 다양한 정렬 옵션을 지원합니다.

val popoverState = rememberPopoverState()

WantedPopover(
    modifier = Modifier,
    state = popoverState,
    align = WantedPopoverAlign.Center,
    body = { Text("Popover 내용") },
    content = {
        Button(onClick = { popoverState.show() }) {
            Text("클릭")
        }
    }
)

Parameters

이름	타입	설명
`modifier`	Modifier	컴포넌트에 적용할 Modifier입니다.
`windowInsets`	WindowInsets	적용할 WindowInsets입니다.
`state`	WantedSimplePopoverState?	Popover의 표시/숨김 상태를 관리하는 객체입니다.
`align`	WantedPopoverAlign	Popover의 정렬 방식입니다.
`positionTop`	Boolean	Popover를 위쪽에 표시할지 여부입니다.
`always`	Boolean	외부 클릭으로 닫히지 않도록 할지 여부입니다.
`body`	(@Composable () -> Unit)	Popover 내부 콘텐츠 슬롯입니다.
`content`	(@Composable () -> Unit)	Popover가 연결될 기준 콘텐츠 슬롯입니다.

Overload

텍스트와 헤딩을 포함한 기본 Popover 컴포넌트입니다. 텍스트, 헤딩, 닫기 버튼, 액션 버튼 등을 제공합니다.

val popoverState = rememberPopoverState()

WantedPopover(
    modifier = Modifier,
    text = "Popover 내용 텍스트",
    heading = "제목",
    state = popoverState,
    closeButton = true,
    action = {
        Button(onClick = { popoverState.dismiss() }) {
            Text("확인")
        }
    },
    content = {
        Button(onClick = { popoverState.show() }) {
            Text("클릭")
        }
    }
)

Parameters

이름	타입	설명
`modifier`	Modifier	컴포넌트에 적용할 Modifier입니다.
`text`	String	Popover에 표시할 본문 텍스트입니다.
`heading`	String	Popover에 표시할 헤딩 텍스트입니다. 빈 문자열인 경우 표시되지 않습니다.
`state`	WantedSimplePopoverState?	Popover의 표시/숨김 상태를 관리하는 객체입니다.
`windowInsets`	WindowInsets	적용할 WindowInsets입니다.
`align`	WantedPopoverAlign	Popover의 정렬 방식입니다.
`closeButton`	Boolean	닫기 버튼 표시 여부입니다.
`positionTop`	Boolean	Popover를 위쪽에 표시할지 여부입니다.
`always`	Boolean	외부 클릭으로 닫히지 않도록 할지 여부입니다.
`action`	(@Composable RowScope.() -> Unit)?	Popover 하단에 표시할 액션 버튼 슬롯입니다.
`content`	(@Composable () -> Unit)	Popover가 연결될 기준 콘텐츠 슬롯입니다.

Advanced

rememberPopoverState

popover 상태를 관리하는 State 객체를 생성하고 관리합니다.

val popoverState = rememberPopoverState(initialVisible = false)

// popover 표시
popoverState.show()

// popover 숨김
popoverState.dismiss()

Parameters

이름	타입	설명
`initialVisible`	Boolean	초기 표시 상태입니다.

Return

타입	설명
WantedSimplePopoverState	popover 상태를 관리하는 객체입니다.

WantedSimplePopoverState

Popover의 표시/숨김 상태를 관리하는 인터페이스입니다.

Enum

WantedPopoverAlign

값	설명
`Left`	왼쪽 정렬입니다.
`Center`	중앙 정렬입니다.
`Right`	오른쪽 정렬입니다.