Lowcoder Documentation
  • Lowcoder overview
    • The "Hello World" walk
  • 🆕Setup and run
    • Cloud & Private Cloud
    • Self-hosting
      • Google Cloud Platform
      • Easypanel
      • Heroku
      • Raspberry Pi
      • Access local database or API
      • Update MongoDB Versions
      • Lowcoder Version Update
      • Traefik loadbalancer
      • SMTP Server
      • Migration from Openblocks
    • Security
  • 🏨Workspaces & Teamwork
    • Workspaces
      • Multi-Workspace Mode
      • Single Workspace Mode
    • Members and Groups
    • Permissions for Resources
    • OAuth
      • KeyCloak
      • Google
      • GitHub
      • Generic OAuth Provider
    • Query library
    • Lowcoder Marketplace
  • ✨Build Applications
    • Create a new App
      • App(s) Navigation
      • Modules
      • Version and Release Management
    • App Editor
      • Query & Editing Roundtrips
      • Bulk Editing
      • Keyboard shortcuts
      • Data selection & Javascript
      • Layers
      • Visual Components
        • Common Component Settings
        • Messages / Toast
        • Dashboard & Reporting
          • Table
          • Charts and graphs
            • Bar Chart
            • Line Chart
            • Pie Chart
            • Scatter Chart
            • CandleStick Chart
            • Funnel Chart
            • Gauge Chart
            • Graph Chart
            • Heatmap Chart
            • Radar Chart
            • Sankey Chart
            • Suburst Chart
            • Theme River Chart
            • Tree Chart
            • Treemap Chart
            • Mermaid Chart
          • Google Maps
        • Layout & Navigation
          • List View
          • Drawer
          • Modal
          • Navigation
          • Cascader
          • Tree / Tree Select
          • Link
          • Floating Button
          • Text
          • Step Control
          • Page Layout
          • Content Card
          • Tabbed Container
        • Data Collection & Forms
          • Form
          • Input Field Types
          • JSON Schema Form
        • Meeting & Collaboration
        • Project Management
        • Calendar & Scheduling
          • Calendar
          • Date & Date Range
          • Time & Time Range
        • Document & File Management
          • File upload
        • Item & Signature Handling
        • Multimedia & Animation
          • Image
        • Integration & Extension
        • Legacy & Deprecated
      • Option lists
      • Date handling
      • Use Markdown
    • App Interaction
      • Event handlers
    • Themes & Styling
      • Design an efficient and user-friendly form
      • Customize Styles
      • Component Styling Possibilities
    • Video Calls in Lowcoder
  • 🚀Connect your Data
    • Data source basics
      • Configure IP allowlists
    • Data sources in Lowcoder
      • APIs as Datasource
        • REST API
        • GraphQL
        • Google Sheets
      • SQL Databases
        • MySQL
        • MariaDB
        • Supabase
          • Supabase PostgreSQL
          • Supabase Assets API
          • Supabase RealTime
          • Supabase OAuth
        • PostgreSQL
        • Microsoft SQL Server
        • Oracle
      • NoSQL Databases
        • MongoDB
        • CouchDB
        • DynamoDB
      • InMemory Databases
        • Redis
      • File Storages
        • S3 File Storage
      • BigData & OLAP
        • Big Query
        • Snowflake
        • ClickHouse
        • Elasticsearch
      • Websocket Datasource
    • Query basics
      • Bind Query Data to Components
      • Query library
  • 🪄Workflows
    • n8n Integration
  • 💫Business Logic in Apps
    • Write JavaScript
      • JavaScript query
      • Temporary state
      • Transformers
      • Data responder
      • Built-in JS functions
  • 🙌Publish Apps
    • Share an App
    • Publish an App
    • Embed an App
      • Embed App in HTML Pages
      • Embed App in WordPress Pages
      • Embed Apps in React
      • Embed Apps in NEXT.JS
      • Native embed SDK
        • Build the SDK from Source
  • 🔥Lowcoder Extension
    • Opensource Contribution
      • Develop UI components for Apps
      • Develop Data Source Plugins
    • Use third-party libraries in Apps
      • Day.js Date handling
      • Import your own JavaScript Library
    • Custom component
    • Lowcoder Open REST API
  • Lowcoder for Enterprise
    • Custom branding
Powered by GitBook
LogoLogo

More to try...

  • Lowcoder Website
  • Free Cloud Platform
  • Github
  • Discord

© Lowcoder Software LTD

On this page
  • Demo about Floating Button
  • Component Playground
  • Component Auto-Docs

Was this helpful?

  1. Build Applications
  2. App Editor
  3. Visual Components
  4. Layout & Navigation

Floating Button

PreviousLinkNextText

Last updated 1 month ago

Was this helpful?

In Lowcoder, the Floating Button component provides a customizable button that hovers over the application's interface, offering quick access to primary actions without obstructing content.

Key Features:

  1. Positioning: The Floating Button can be positioned anywhere on the screen, typically anchored to a corner, ensuring it remains accessible yet unobtrusive.

  2. Customisation: You can personalize the button's appearance by selecting icons, colors, and sizes to align with your application's design aesthetics.

  3. Event Handling: Assign specific actions to the button, such as navigating to different screens, triggering queries, or executing custom JavaScript functions, enhancing user interaction.

  4. Integration: The Floating Button seamlessly integrates with other Lowcoder components, allowing for coordinated actions and a cohesive user experience.

Demo about Floating Button

Component Playground

On Component Playground, you can interact with the Floating Button component and explore it's Properties, Events and Methods. Play with different Styling properties to see the effect on the Floating Button component.

Component Auto-Docs

In the Auto-Docs of Floating Button component, we have shown how to use different properties of the component. It also includes the Styling properties of the component.

Properties of the Floating Button component

These properties are accessible in {{ }} notations, as well as in JavaScript Queries.

Property Name
Type
Description

hidden

Boolean

Returns True or False based on whether the Floating button component is hidden or not

value

String

Returns the Value of the Floating button component

Methods

You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilised. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.

setValue() :

floatingButton1.setValue() method sets the Floating button's Value property.

floatingButton1.setValue();

clearValue() :

floatingButton1.clearValue() clears the Floating button's Value property and empties the current value from the component.

floatingButton1.clearValue();

resetValue() :

floatingButton1.resetValue() method resets the Floating button's value property to the default value of the component.

floatingButton1.resetValue();
✨
Lowcoder | rapid App & VideoMeeting builder for everyone.
Lowcoder | rapid App & VideoMeeting builder for everyone.