EditorURL：
https://bubble.io/page?id=demo-toggle&tab=Design&name=index
Toggle Button by TechFighter 利用方法
このドキュメントはBubble開発者向けに、プラグイン『Toggle Button by TechFighter』の導入および基本的な利用方法を解説します。
概要
『Toggle Button by TechFighter』はBubbleアプリケーションにおいて、カスタマイズ可能なトグルボタンを簡単に実装できるプラグインです。豊富なデザイン設定やワークフローによる柔軟な状態管理が可能です。
事前準備
特別な事前設定は必要ありません。Bubbleのプラグイン画面から本プラグインをインストールすることで、すぐにご利用いただけます。
基本的な利用手順
プラグインのインストールBubbleのプラグイン画面で「Toggle Button by TechFighter」を検索し、インストールします。
エレメントの配置Bubbleエディター上で、本プラグインが提供するトグルボタンエレメントを画面上に配置します。
プロパティの設定配置したエレメントのプロパティエディターで以下のプロパティを任意に設定できます。
ActiveColor：オン時の背景色
InactiveColor：オフ時の背景色
CircleColor：トグルの円部分の色
roundness：トグルの丸み（単位：px）
TransitionSpeed：切替時のアニメーション速度（単位：秒）
defaultValue：トグルの初期状態（オン／オフ）
ワークフローでの操作設定Bubbleのワークフローエディターを使用して、以下のイベントとアクションを設定できます。
イベント：onToggleOn（オン時発火）、onToggleOff（オフ時発火）、onToggleChange（状態変更時発火）
アクション：turn_on（オンにする）、turn_off（オフにする）、change（状態を切り替える）
また、現在のトグルの状態はエレメントのstate「value（yes/no型）」から取得可能です。
以上の手順でToggle Button by TechFighterを効果的にご利用いただけます。
English：
Toggle Button by TechFighter Usage Guide
This document provides Bubble developers with instructions on installing and using the "Toggle Button by TechFighter" plugin.
Overview
"Toggle Button by TechFighter" allows developers to easily implement customizable toggle buttons within Bubble applications. It supports extensive design customization and flexible state management through workflows.
Preliminary Setup
No special preliminary setup is required. Simply install the plugin through the Bubble plugin directory to start using it immediately.
Basic Usage Steps
Plugin InstallationSearch for "Toggle Button by TechFighter" in Bubble’s plugin directory and install it.
Element PlacementPlace the provided toggle button element onto your page using the Bubble editor.
Property ConfigurationYou can configure the following properties in the property editor of the placed element:
ActiveColor: Background color when toggle is ON.
InactiveColor: Background color when toggle is OFF.
CircleColor: Color of the toggle's circle.
roundness: Roundness of the toggle (in px).
TransitionSpeed: Animation speed during state transitions (in seconds).
defaultValue: Initial state of the toggle (ON/OFF).
Workflow OperationsUse Bubble’s workflow editor to set up the following events and actions:
Events: onToggleOn (triggers when toggled ON), onToggleOff (triggers when toggled OFF), onToggleChange (triggers whenever state changes).
Actions: turn_on (set toggle ON), turn_off (set toggle OFF), change (toggle state).
Additionally, the current toggle state can be accessed via the element's state called "value" (yes/no).
Follow these steps to effectively utilize the Toggle Button by TechFighter plugin.
Built on Bubble
