Components
In ELEMENTS, your UI is made up of a series of "Components". A Component is a single class that extends Component and implements IElement, so it composes into element trees just like any other element.
return new VerticalGroup(
new Label("Users"),
new UserList()
);Configuring the component
Components receive configuration through constructors or public methods. Pass reactive properties through constructors to enable communication between parent and child components...
return new VerticalGroup(
new Label("Users"),
new TextField(SearchQuery).Placeholder("Search users by name..."),
new UserList(SearchQuery)
);This same pattern can be used to expose events from the sub-component...
public class UserList : Component
{
public Action<User> OnUserSelected;
private readonly Observable<string> searchQuery;
public UserList(Observable<string> searchQuery)
{
this.searchQuery = searchQuery;
}
protected override IElement Render()
{
// Use searchQuery to filter, call OnUserSelected when clicked
}
}
// In parent Component's Render:
var userList = new UserList(SearchQuery);
userList.OnUserSelected = user => SelectUser(user);