Tagging and Mentioning Input

Demo to preview the plugin:

Introduction

Enhance your app with our dynamic Tag input element. Seamlessly tag other users, hashtags, or other things with a simple touch. Whether you're commenting on a social platform or organizing your content, Tagify empowers you to effortlessly mix text and tags.
  • Simple to use
  • Up to 3 Categories/Things
  • Access every used tag

How to setup

  1. Create few users in the database.
    1. Image without caption
  1. Put element Tagify on the page.
  1. Setup the Tagify:
      • Lists are the database 'Types' that you want to use for tagging. Choose any database type you have.
      • Load the data in the 'List Data' field that should be available for tagging. This can be static or changed in the conditions. For example: a static list of users or a list or pages.
      • Choose the field that should be used for tagging database items. For example: if you want to tag users, you're likely to choose their first name or username. Note: make sure that the field is visible to users by setting the right privacy rules.
      • Set for each list a unique tag opener. This is the symbol that should be used to create tags. For example: tagging users is often done by using the @ symbol.
      Image without caption
  1. Setup the Tagify:
      • Style each list's tags to your own desire. Tags have a regular 'Hovered' state and a 'Remove hover' state which is active when hovering the 'X-button' in a tag. You're also able to style the dropdown element. The dropdown element itself can be styled as well as the items in the list.
      Image without caption
  1. Setup the Tagify:
      • You can use the 'Initial Content' field to set the content of the Tagify element. If the initial content of the Tagify element is formatted as the below example, Tagify will try to automatically convert everything between [[ & ]] to a tag. This only works if the tag exists in the whitelist, so make sure when the Tagify instance is initialized, that it has tags with the correct value property that match the same values that appear between [[ & ]].
      Image without caption
      plain text
      [[{"text":"Bubble.io","value":"Bubble.io","prefix":"#"}]] is supporting Tags now!

Plugin Element Properties

Image without caption
Image without caption
Image without caption
Image without caption
**Title **
Description
Type
List
App Type representing any thing from Database.
App type
List Data
A list of Items from database. Type of items equals to field β€œList”.
List of items representing β€œList ”
List Field
Select which Field Name should be used to tag data items.
List Field: String
List Opener
Which sign should be used to create tags for List.
String
List Tags Styling
Text Color
The text color for tags in List.
Color
Background Color
The background color for tags in List.
Color
Border Radius
The border radius for tags in List as text. Ex: '3px'.
String
Hover Background Color
The tag's background color when hovered.
Color
Padding
Vertical Padding and Horizontal Padding. Ex: '2px 4px'.
String
Remove Hover Background Color
Tag's background color when hovering the 'Remove' button.
Color
Remove Icon Color
Remove Button Background Color
Color
Remove Button Background Color
Background color of the 'Remove' button.
Color
Tag Hide Transition Duration
The transition duration for when a tag is removed. Ex: '0.3s'.
String
Dropdown Styles
Item Background Color
The suggestion's dropdown background color.
Color
Item Hover Font Color
Font color for dropdown item when hovered.
Color
Item Hover Background.
The suggestion's dropdown background color when hovered.
Color
Item Padding
Padding for each dropdown item.
String
Item Border Radius
Border radius for each item in the dropdown.
String
Item Border width
Border width for each item in the dropdown.
String
Dropdown Padding
Vertical Padding and Horizontal Padding. Ex: '2px 4px'.
String
Dropdown Font Size
Size for the dropdown text, may be in px, em, %, etc
String
Dropdown Font Weight
Font weight for dropdown. Ex: '400'.
String
Dropdown Font Color
Font Color for dropdown.
Color
Dropdown Border Radius
Border radius for the entire dropdown element. Ex: '4px'.
String
Dropdown Border Color
Color for the border for the dropdown element.
Color
Item Border Color
Border color for each dropdown item.
Color
Dropdown Separation Width
Separation between dropdown items. Ex: '5px’
String
γ…€
γ…€
γ…€
Initial Content
Initial content for Tagify element. Possible to use dynamic data if you set up List Types correctly and pass Tag Data as [[{"value":"{{value_here}}","prefix":"{{prefix_here}}"}]].
String
Placeholder
Text to show when there is no content.
String
Placeholder Color
Color for the placeholder text.
Color
Disabled
Yes to Disable, No to Enable input.
Boolean (yes/no)
Characters for dropdown
The amount of characters you need to write to deploy dropdown suggestions. Max is 2. Ex: 0 means the dropdown is shown immediately after the opener.
Number
Allow Vertical Scrolling
Yes to allow vertical scrolling when content overflows
Boolean (yes/no)
Enable Debug
Show logs in the dev-tools.
Boolean (yes/no)

Element Actions

  1. Reset -Β Action to clear the content from the Tagify Input.
  1. Focus -Β Action to focus on the Tagify Input.
  1. Disable/Enable -Β Action to Disable/Enable the Tagify Input..
    1. Title
      Description
      Type
      Props
      Yes to Disable, No to Enable input.
      Boolean (yes/no)

Exposed states

Name
Description
Type
Last Used Tag Text Value
Last used Tag value in plain text.
Text
Tags In Use From 1
List of Tags used from List 1.
Text (list)
Tags In Use From 2
List of Tags used from List 2.
Text (list)
Tags In Use From 3
List of Tags used from List 3.
Text (list)
Content Tags
Tagify's input content with tags markup.
Text
Is Focused
Yes when Tagify input is focused.
Boolean (yes/no)
Content Plain Text
Tagify's input content as plain text.
Text
Last Clicked Tag List 1
Last clicked Tag from List 1.
List type
Last Clicked Tag List 2
Last clicked Tag from List 2.
List type
Last Clicked Tag List 3
Last clicked Tag from List 3.
List type

Element Events

Name
Description
A Tag is Removed
Triggered when the tag is removed.
A Tag From List 1 is Clicked
Triggered when the Tag from list 1 is clicked.
A Tag From List 2 is Clicked
Triggered when the Tag from list 2 is clicked.
A Tag From List 3 is Clicked
Triggered when the Tag from list 3 is clicked.
A Tag is Added
Triggered when the tag is added.

Changelogs

Update: 13.04.23 - Version 0.0.1

  • private

Update: 13.04.23 - Version 0.0.2

  • dynamic input

Update: 13.04.23 - Version 0.0.3

  • fix

Update: 19.05.23 - Version 1.0.0

  • dynamic list of objects for one list

Update: 19.05.23 - Version 1.1.0

  • Support 3 lists

Update: 23.05.23 - Version 1.2.0

  • Independent styles for each list

Update: 24.05.23 - Version 1.2.1

  • working on plugin element

Update: 24.05.23 - Version 1.2.2

  • Add bubble properties

Update: 24.05.23 - Version 1.2.3

  • Work as self contained element

Update: 24.05.23 - Version 1.2.4

  • Exposed states for focus

Update: 24.05.23 - Version 1.2.5

  • Content and focus exposed states

Update: 24.05.23 - Version 1.2.6

  • styling

Update: 24.05.23 - Version 1.2.7

  • tag styles fixed

Update: 25.05.23 - Version 1.2.8

  • Add styles for dropdown

Update: 25.05.23 - Version 1.2.9

  • Allow more characters to open a tag

Update: 25.05.23 - Version 1.2.10

  • Fix stylings

Update: 25.05.23 - Version 1.2.11

  • Fix styles when no tags are added

Update: 26.05.23 - Version 1.2.12

  • styles for dropdown

Update: 26.05.23 - Version 1.2.13

  • Add exposed state for plain text

Update: 26.05.23 - Version 1.2.14

  • Add Reset function

Update: 26.05.23 - Version 1.2.15

  • Allow refresh on the fly for initial content

Update: 26.05.23 - Version 1.2.16

  • Add disable mode and action

Update: 26.05.23 - Version 1.2.17

  • Fix height for input

Update: 26.05.23 - Version 1.2.18

  • Fix content plain text

Update: 26.05.23 - Version 1.2.19

  • Allow different styling

Update: 30.05.23 - Version 1.2.20

  • Click events

Update: 31.05.23 - Version 1.2.21

  • stable version

Update: 31.05.23 - Version 1.2.22

  • Updated field names and documentation

Update: 08.06.23 - Version 2.0.0

  • Initial Launch

Update: 08.06.23 - Version 2.0.1

  • Updated description

Update: 13.06.23 - Version 2.0.2

  • Fix background color

Update: 13.06.23 - Version 2.0.3

  • Add checks before creating tags

Update: 14.06.23 - Version 2.0.4

  • Fix infinite inputs

Update: 14.06.23 - Version 2.0.5

  • Gracefully Fail when a field is not found

Update: 19.06.23 - Version 2.0.6

  • Update content plain text algorithm

Update: 19.06.23 - Version 2.0.7

  • Update content plain text function

Update: 11.07.23 - Version 2.0.8

  • Add debug logs

Update: 11.07.23 - Version 2.0.9

  • Add debug messages

Update: 11.07.23 - Version 2.0.10

  • Fix tag creation bug

Update: 12.07.23 - Version 2.0.11

  • Re-render on property changes

Update: 20.07.23 - Version 2.0.12

  • Update used tags and contents on initial value set

Update: 20.07.23 - Version 2.0.13

  • Add option to vertically scroll on overflow

Update: 20.07.23 - Version 2.0.14

  • Add placeholder field

Update: 11.08.23 - Version 2.0.15

  • New name

Update: 16.10.23 - Version 2.0.16

  • Update V4

Update: 16.10.23 - Version 2.0.17

  • Update V4

Update: 07.11.23 - Version 2.0.18

  • Add debug info

Update: 09.11.23 - Version 2.0.19

  • Ignore empty tag values

Update: 26.01.24 - Version 2.0.20

  • Fix whitespace when exposing content tags

Update: 26.01.24 - Version 2.0.21

  • Fix background when hovering delete button

Update: 26.01.24 - Version 2.0.22

  • fix placeholder bug
Share
Content