Overview

Here you’ll find all about screen’s components and its attributes details.

What is it?

The Screen component is a Beagle element that helps the user to define a screen view structure. In this component we define settings such as using safe areas or displaying a toolbar/navigation bar.

All these functionalities are defined from attributes, which we list in the table below, defining the main characteristics of a Screen component.

Attribute	Type	Required	Definition
id	String		Attribute that identifies a screen in your application
safeArea	Safe Area		Enable Safe areas to help place views within the visible portion of the overall interface. By default it is not enabled and it won’t constrain considering any safe area.
navigationBar	Navigation Bar		Enables some Navigation Bar details to be set, like Backbutton and Navigation Bar Itens
child	Server-Driven Component	✓	Receives a list of Beagle componentes.
style	Style		Provide visual customization options to the `screen`
context	ContextData		Creates a Context Data for a Screen.

Screen(
        navigationBar = NavigationBar(
            title = "Beagle Screen",
            showBackButton = true,
            navigationBarItems = listOf(
                NavigationBarItem(
                    text = "",
                    image = Local.justMobile("informationImage"),
                    onPress = listOf(Alert(
                        title = "Screen",
                        message = "Some message",
                        labelOk = "OK"
                    ))
                )
            )
        ),
        child = Container(
            children = listOf(
                Text("Some text")
            )
        )
    )

👉 Test this example in the Web Playground

Navigation Bar

Safe Area

Feedback

Was this page helpful?

Glad to hear it! Please tell us how we can improve.

Sorry to hear that. Please tell us how we can improve.

Last modified March 15, 2022: feat: updates the screen component table details. (#876) (520d2850)