Components
View State
View that displays different content based on its state.
Status component contains a list of checks and completeness that has been tested and owned by each component
We don't use color as the only visual tool to convey information. The component’s structure and properties include relevant options such as variant, style, size, orientation, optional iconography, decorations, selection, error state, etc. The title is the component name that uses the frame base component template. The base component name contains: .Base & "Component Name" if there is more than one. All component properties use the Legion foundation. We can change all the parts that are connected to the component base. The inside of the base component remains connected to the master component. All variant options are not damaged when we change from one to another. Overriding changes to components will not reset other variants. Component's already has component specs documentation.Usage
The most fundamental component for building a UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls. Extends react native view.
Legion provides 4 different kinds of view, depending on how you want the styling to be handled.
View
Extends react native view, the default view by Legion
import { View } from '@my/ui';
Stack
An optional base for creating flex-based layouts. XStack, YStack and ZStack. They extend directly off the View
import React from 'react'import { XStack, YStack, ZStack } from '@legion-crossplatform/ui'export function StacksDemo() {return (<XStack maxWidth={250} padding="$2" alignSelf="center" space><YStackflex={1}space="$2"
Example
An example using a wider array of style properties
import { Text, XStack, YStack } from '@legion-crossplatform/ui'export default () => (<XStackflex={1}flexWrap="wrap"backgroundColor="#fff"hoverStyle={{backgroundColor: 'red',
Style props
Stack/Views are the building blocks of many components in legion-crossplatform. Their props are extended and can be used in other components.
An example of how to use the style props:
import { View } from '@legion-crossplatform/ui'const MyView = () => (<ViewbackgroundColor="red"hoverStyle={{backgroundColor: 'green'}}
The full types style props can be read here :
import { ViewStyle as RNViewStyle } from 'react-native'type BaseViewStyle = RNViewStyle & FlatTransformStyles & WebOnlyStyles// these are accepted but only render on web:type WebOnlyStyles = {contain?: Properties['contain']touchAction?: Properties['touchAction']
Style props order
Style props are sensitive to their order - a feature that without which would leave us with impossible styling challenges and awkward rules of inheritence we’re trying to get away from with CSS in JS
Props
Stack props accept every prop from react-native-web View component. As well as the style props.
These props are extended into many components built from View or Stack.
| Parameter | Type | Description |
|---|---|---|
| elevation | number | Tokens.size |
| fullscreen | boolean | Sets position: absolute, top: 0, left: 0, right: 0, bottom: 0. |