한 줄 요약
This is a plugin that enables utilizing popup which is provided from browser system
브라우저가 제공하는 기본 팝업을 사용할 수 있는 플러그인입니다.
후원 받은 커피는 더 많은 플러그인을 만드는 원동력이 됩니다.
Intro
1. Why
For user experience, there are times when pop-ups are necessary. However, when creating MVPs or prototype services with Bubble, it can be challenging to manage pop-ups alongside everything else. Additionally, maintaining consistent designs for all pop-ups is not easy. To streamline the process of creating pop-ups and ensure consistency, you can use this plugin, which allows you to leverage the default pop-ups provided by the browser.
사용자 경험을 위해서 팝업을 사용할 때가 필요합니다. 다만 버블로 MVP, 프로토타입 서비스를 만들 때, 팝업까지 신경써서 관리하기 힘듭니다. 또한, 모든 팝업의 디자인을 통일성 있게 관리하는 것도 쉽지 않습니다. 귀찮은 팝업을 더 빠르게 작업할 수 있도록, 브라우저가 제공하는 기본 팝업들을 사용할 수 있는 플러그인입니다.
2. ChangeLog
1.0.0
•
show alert popup
안내용 팝업 출력하기
•
show prompt popup
유저 입력 팝업 출력하기
•
show confirm popup
확인 팝업 출력하기
Core
1. Instruction
Each browser provides its own default pop-up design, which may differ in appearance and behavior.
크롬, 사파리 등 각 브라우저마다 제공하는 팝업의 디자인이 다른 점을 유의해주세요.
2. Related Docu
플러그인 페이지
데모 링크
에디터 링크
3. Element
a. popup operator
Element that activate the popup provided from browser. If use action event, this element must be in page. and, this element save the return value which user inputs
브라우저가 제공하는 팝업을 사용하게 만드는 요소입니다. 액션 이벤트를 사용하려면, 해당 요소가 페이지에 있어야 합니다. 또한, 유저가 입력한 값이 해당 요소에 저장됩니다.
Status
status | type | desc |
promptValue
| string | save the return value from [show prompt] action
[show prompt] 액션의 결과 값을 저장합니다. |
confirmValue | Boolean | save the return value from [show confirm] action
[show confirm] 액션의 결과 값을 저장합니다. |
4. Action
a. show alert
show alert popup
기본 알림창을 보여줍니다.
Input
field | type | Required | 설명 |
message | string | | input the message body in alert popup
팝업창에 들어갈 내용을 입력합니다. |
return
b. show prompt
show prompt popup where user input some value as string type
유저에게 문자열 타입의 인풋 값을 받는 팝업창을 보여줍니다.
Input
field | type | Required | 설명 |
message | string | | input the message body in alert popup
팝업창에 들어갈 내용을 입력합니다. |
defaultValue | string | | Input the default value in input field
인풋 필드의 기본 값을 입력합니다.
|
return
elem_status | type | desc |
promptValue
| string | save the return value from [show prompt] action
[show prompt] 액션의 결과 값을 저장합니다. |
c. show confirm
show confirm popup where user input some value as boolean type
유저에게 참/거짓 타입의 응답 값을 받는 팝업창을 보여줍니다.
Input
field | type | Required | 설명 |
message | string | | input the message body in alert popup
팝업창에 들어갈 내용을 입력합니다. |
return
elem_status | type | desc |
confirmValue
| booelan | save the return value from [show confirm] action
[show confirm] 액션의 결과 값을 저장합니다. |
Tutorial
1. setting
On the page, create a [popup operator] element.
페이지에 [popup operator] 요소를 생성합니다.
Now, instead of using Bubble's provided [show popup] action when you need to show a popup, use the actions provided by the plugin: [show alert / prompt / confirm popup operator].
이제 팝업을 보여줘야 하는 워크플로우에서 버블이 제공하는 [show popup] 액션이 아니라, 플러그인이 제공하는 [show alert / prompt / confirm popup operator ] 액션을 사용합니다.
2. prompt popup
If you need the user to input a specific value, use the [show prompt popup operator] action.
만약 유저에게 특정 값을 입력 받아야 한다면, [show prompt popup operator] 액션을 사용합니다.
This will display a popup with an input field.
그러면, 인풋 필드가 있는 팝업이 출력됩니다.
The value entered by the user will then be stored in the [promptValue] state of the [popup operator] element on the page.
이때, 유저가 입력한 값은 페이지에 있는 [popup operator] 요소의 [promptValue]로 저장됩니다.
3. Confirm popup
If you need the user to confirm or cancel something, use the [show confirm popup operator] action.
만약 유저에게 참/거짓을 입력 받아야 한다면, [show confirm popup operator] 액션을 사용합니다.
This will display a popup with confirm and cancel buttons.
그러면, 확인과 취소 버튼이 있는 팝업이 출력됩니다.
The value chosen by the user (True or False) will be stored in the [confirmValue] state of the [popup operator] element on the page.
이때, 유저가 선택한 값(True or False)은 페이지에 있는 [popup operator] 요소의 [confirmValue]로 저장됩니다.
후원 받은 커피는 더 많은 플러그인과 자료를 만드는 원동력이 됩니다.
