You can pass information from a parent component down to a child using properties .
In order to declare a property, you must use the
property name, type, options
name- is the name of the property.
type- an atom defining the type of the property. See all available types in section “Property types” .
options- a keyword list of options for additional customization.
required- declares the property as required. Default is
default- defines a default value for an optional property.
values- the list of possible values for the property.
When declaring a property , you can define the type of the assign using one of the following types:
Note : Currently, most of the types above work just as annotations and don’t have any practical use aside from documentation. If the type you need is not in that list, you can safely use
:eventare handled differently, i.e. there are extra rules and behaviours applied to them.
CSS class property
In order to avoid working with string concatenation, which is annoying and error-prone,
Surface allows passing keyword lists directly to the
class property and improves
developer experience by automatically handling conditional classes.
Let’s see how it works.
Imagine you want to create a button component that sets CSS classes based on the following rules:
button- always set
is-info- always set
is-loading- set if
is-rounded- set if
We can define our component like this:
Let’s try it out.
Note: For regular HTML tags like
classattribute will be handled automatically as expected. For custom components, you need to instruct Surface to do so by setting the type of the property as