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

Conditional styles

By using conditional styling you can create specific variations of an elements style that only applies in certain circumstances such as when the user moves the mouse over the element.

To add a new conditional style click on the + button in the styles section

Create a new conditional style

While a conditional style is selected in the style section any style changes made will only be applied when the condition is met.

While a conditional style is selected, the styles will always be applied to the element in the canvas, even if the condition is not met


toddle supports all the most common CSS pseudo classes from CSS. Learn more about
pseudo classes

Cascade

Styles in toddle cascade and multiple styles can be active at the same time.

In the example below both the style properties defined in the Default styles and the :focus styles will be applied when the input element has focus. If the same property is defined in both styles, then the :focus style will take precedence.

Multiple styles cascading on the same element

Responsive breakpoints

A common use case for conditional styling is creating UIs that adopt to the users screen size.

Creating custom styles for specific scree sizes

In this example above the styles will only be applied when the device viewport is wider than 800px.

Responsive breakpoint for layout

This is especially useful since different layouts often work best on specific screen sizes. You can create conditional styles when the viewports width or height is either above or below a certain threshold.

Some of the less frequently used conditions are hidden by default. Click the More button to see all available conditions

Styling classes

You can also create a conditional style based a class available on the selected element. To do this first you must add the class in the Attributes tab.

Classes can be conditionally set using a formula. If the formula evaluates to a truthy value, then the class will be present.

A common use case is to add custom styles to a specific element in a repeating list. In this example we added a class "selected" to the list item, with a formula that evaluates to true if the item is selected.

Custom styling for the "selected" element in a list

Unlike some other tools, styles added to a class in toddle only applies to the element it is defined on. Classes are not used as a mechanism for sharing styles between elements. If you want to reuse the same styles in multiple places in your application, consider extracting the elements into a component.

Pseudo elements

Pseudo element are parts of HTML element that does not show up in the element tree. Some of the most used psudo elements are:

  • :placeholder for styling the placeholder text in an input or textarea
  • :selection for styling the selected text inside an element
  • : after / :before psudo elements that can be used with any HTML element, read more .

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.