Ask toddle AI

๐Ÿ 

Docs home

๐Ÿ‘ถ

Getting started

๐ŸŽ“

1st week in toddle

๐Ÿ› ๏ธ

The editor

๐Ÿงฑ

Elements

๐Ÿ’…

Styling and layout

๐Ÿ“ฆ๏ธ

Components

๐Ÿ“„

Pages and navigation

โ˜๏ธ

API setup

๐Ÿงฎ

Formulas

๐Ÿ””

Events and actions

๐Ÿ“ฆ

Packages

๐Ÿค–

Custom code

๐Ÿ‘ฏโ€โ™‚๏ธ

Integrations

๐Ÿฟ

Tutorials

๐Ÿงฐ

Other

Attributes

Attributes are a way for components to receive input from its parent component or page. There are a few reasons why this can be extremely useful.

It allows you to create components that are configurable. Components can alter their behavior based on the data they are passed through their attributes. This way the same component can be used multiple places in your application, but behave slightly different based on the attributes it is given each different place.

Imagine a tooltip component that shows a message when a certain element is hovered. You could us an attribute to set if the tooltip should be shown in the left or right side of the components, as well as how much delay there should be before the tooltip is shown

The second reason is to be able to pass data to a component that it otherwise would not have access to. This lets you e.g. fetch data from an API in one component, and pass down some of that data to a child component.

Defining attributes

You can defined a components attributes in the data panel on the right side of the editor.

Click on the "+" button next to Attributes.

Create a new attribute

Each attribute needs a unique name which can only consist of lowercase letters, numbers and "-".

You also need to provide a Test value. This is the value that the attribute will have when developing the component inside the toddle editor. It does not affect the components behavior when it is used as part of other components or pages.

The attribute can now be accessed inside any formula in that component.

Formula editor showing the

Learn more about attributes:

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code โ€” but accessible to your entire team!

Try toddle โ€” it's free!
Server-side rendered Installable PWAs Connect to any database As performant as code toddle is built in toddle undefined undefined undefined undefined undefined
undefined Style tokens Export as web components No feature limits Connec to any API Extend with code undefined undefined undefined undefined

ยฉ Copyright 2024 toddle. All rights reserved.