ClassFlex Plugin - Unleash Dynamic CSS Classes & Data Attributes!

Showcase Plugins
1

Hello All,

We’re thrilled to announce our latest addition to the plugin library - the ClassFlex Plugin!

Have you ever wished for more flexibility in manipulating HTML elements directly in Bubble.io? Perhaps you wanted to dynamically add or remove CSS classes, or manage data attributes without diving deep into complex workflows. If that’s the case, ClassFlex is for you!

ClassFlex is a lightweight and powerful plugin designed to make managing HTML elements a breeze. This plugin reads JSON commands from the id attribute of your Bubble.io elements, and dynamically adds or removes CSS classes and data attributes based on your input.

Using the ClassFlex Plugin

The ClassFlex plugin allows you to dynamically manipulate HTML elements in your Bubble.io app using JSON commands embedded in the element’s id attribute. With this plugin, you can add and remove CSS classes and data attributes.

Installation

  1. Navigate to your Bubble.io application dashboard.
  2. Go to the “Plugins” section and click on “Add plugins”.
  3. In the plugins search bar, type “ClassFlex” and click on the plugin from the list.
  4. Click the “Install” button.

Usage

ClassFlex reads JSON commands from the id attribute of your Bubble.io elements. There are four commands available: addClass, removeClass, addData, removeData. You can add these commands to the id attribute of your elements to apply changes.

Here’s how to add commands:

  1. Navigate to your Bubble.io application editor.
  2. Select the element you wish to modify.
  3. In the “Element inspector” panel on the left, find the “ID Attribute” field.
  4. Add your JSON command to the ID Attribute field.

Examples

Please note that elementID is optional :grinning_face_with_smiling_eyes:

1. Add a class to an element:

To add a class, use the addClass command in the id attribute field:

elementID {"addClass":"myClass"}

This will add the class myClass to the element with the ID elementID.

2. Remove a class from an element:

To remove a class, use the removeClass command in the id attribute field:

elementID {"removeClass":"myClass"}

This will remove the class myClass from the element with the ID elementID.

3. Add a data attribute to an element:

To add a data attribute, use the addData command in the id attribute field:

elementID {"addData":{"myAttribute": "myValue"}}

This will add the data attribute myAttribute with the value myValue to the element with the ID elementID.

4. Remove a data attribute from an element:

To remove a data attribute, use the removeData command in the id attribute field:

elementID {"removeData":"myAttribute"}

This will remove the data attribute myAttribute from the element with the ID elementID.

Advanced Usage

You can also chain multiple commands together by placing them in an array:

elementID [{"addClass":"myClass"},{"addData":{"myAttribute": "myValue"}}]

This will add the class myClass and the data attribute myAttribute with the value myValue to the element with the ID elementID.

The ClassFlex plugin is designed to execute the command once the page loads and subsequently observes for any changes in the DOM or the ID attribute of elements. If the new ID is empty after processing, it removes the ID attribute from the element.

Always ensure to use valid JSON in your commands. Also, be careful not to interfere with other functionalities in your Bubble.io app when adding or removing classes and data attributes. Enjoy the flexibility that ClassFlex brings to your Bubble.io app!

3 Likes