Optional alignContent alignment through the element axis
Example:
<alignContent="center" />
Optional alignItem alignment through the element axis
Example:
<alignItems="center" />
Optional alignSelf alignment through the element axis
Example:
<alignSelf="center" />
Optional autoIndicates that the video should start as soon as possible. Remember that the video playback time may vary depending on the client's internet connection speed.
Example:
<Video autoPlay={true} />
Optional backgroundbackgroundAttachment defines how a background image behaves in relation to the scrolling of content on the page.
The option for attaching the background image.
Example:
<backgroundAttachment="scrooll" />
Optional backgroundDefines how background layers blend with each other. It applies blending effects between multiple background images, gradients, or colors within the same element.
Example:
<View backgroundBlendMode="multiply" />
Optional backgroundThe background clip area.
Example:
<backgroundClip="border-box" />
Optional backgroundBackground color of component
Check the token table to know which values to use
Example:
<backgroundColor="background-color" />
Optional backgroundChange the background Image
Example:
<backgroundImage="myBoxShadow" />
Optional backgroundSets the origin of background positioning
Example:
<backgroundOrigin="border-box" />
Optional backgroundThe position of background
Example:
<backgroundPosition="center" />
Optional backgroundThe horizontal position of background
Example:
<backgroundPositionX="center" />
Optional backgroundThe vertical position of background
Example:
<backgroundPositionY="center" />
Optional backgroundAllows background repetition
Example:
<backgroundRepeat="repeat" />
Optional backgroundSets the background sizing
Example:
<backgroundSize="cover" />
Optional basisControls grow and shrink in one index
Example:
<basis={1} />
Optional borderborderColor sets the color of borders in the design system, allowing you to control the visual appearance of elements' outlines.
Check the token table to know which values to use
Example:
<borderColor="neutral-900" />
Optional borderDefines the border style of a component. You need to define borderWidth before use this property.
Example:
<View borderWidth="hairline" borderStyle="dashed" />
Optional borderborderBottomWidth focuses on adjusting the thickness of the bottom border in the design system, allowing you to fine-tune the visual appearance of the bottom border for elements.
Check the token table to know which values to use
Example:
<borderBottomWidth="hairline" />
Optional borderBorder Color of component
Check the token table to know which values to use
Example:
<borderColor="neutral-900" />
Optional borderDefines the border style of a component. You need to define borderWidth before use this property.
Example:
<View borderWidth="hairline" borderStyle="dashed" />
Optional borderborderBottomWidth is used to control the thickness of the bottom border in the design system, giving you control over the visual appearance of the bottom edges of elements.
Check the token table to know which values to use
Example:
<borderBottomWidth="hairline" />
Optional borderborderRadius defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.
Check the token table to know which values to use
Example:
<borderRadius="micro" />
Optional borderborderRadiusLeftBottom defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.
Check the token table to know which values to use
Example:
<borderRadiusLeftBottom="micro" />
Optional borderborderRadiusLeftTop defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.
Check the token table to know which values to use
Example:
<borderRadiusLeftTop="micro" />
Optional borderborderRadiusRightBottom defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.
Check the token table to know which values to use
Example:
<borderRadiusRightBottom="micro" />
Optional borderborderRadiusRightTop defines the roundness or curvature of corners in the design system, allowing you to create different shapes and styles for elements by adjusting this property.
Check the token table to know which values to use
Example:
<borderRadiusRightTop="micro" />
Optional borderDefines the border style of a component. You need to define borderWidth before use this property.
Example:
<View borderWidth="hairline" borderStyle="dashed" />
Optional borderborderRightWidth is used to control the thickness of the right border in the design system, giving you control over the visual appearance of the right edges of elements.
Check the token table to know which values to use
Example:
<borderRightWidth="hairline" />
Optional borderDefines the border style of a component. You need to define borderWidth before use this property.
Example:
<View borderWidth="hairline" borderStyle="dashed" />
Optional borderDefines the border style of a component. You need to define borderWidth before use this property.
Example:
<View borderWidth="hairline" borderStyle="dashed" />
Optional borderborderTopWidth specifically adjusts the thickness of the top border in the design system, giving you precise control over the visual aspect of the top border of elements.
Check the token table to know which values to use
Example:
<borderTopWidth="hairline" />
Optional borderThe borderWidth determines the thickness of borders in the design system.
It's a crucial property for defining the visual weight of elements.
Check the token table to know which values to use
Example:
<borderWidth="hairline" />
Optional bottomA distance from the bottom.
Example:
<bottom={20} />
Optional boxEfeito de sombra
Example:
<boxShadow="myBoxShadow" />
Optional colorText color of components
Check the token table to know which values to use
Example:
<color="neutral-900" />
Optional content"Use contrast colors for text and background"
Example:
<View contentColors backgroundColor="primary-500" />
Optional controlsIndicates that we should show video controls.
Example:
<Video controls={true} />
Optional directionDirection of the FlexBox axis
Example:
<direction="row" />
Optional displayChanges the element exhibition
Example:
<display="flex"/>
Optional effectSets effect of glass on component
Example:
<View effectGlass></View>
Optional elevationAdjust elevation of component
Example:
<View elevation="low" ></View>
Optional filterSets a filter to image render.
Example:
<Image filter="sepia(60%)" />
Optional flexAnnulate flex properties
Example:
<flexNone={true} />
Optional flexActivate content wrapping
Example:
<flexWrap="wrap" />
Optional gapChanges the gap between elements
Example:
<gap={1} />
Optional growGrowth ratio of element
Example:
<grow={1} />
Optional heightAdjust component height
Example:
<height={100} />
Optional id"Fills the ID of the element (not very practical)."
Example:
<View id="id" />
Optional justifyContent distribution through the element axis
Example:
<justifyContent="center" />
Optional justifyItem distribution through the element axis
Example:
<JustifyItems="center" />
Optional justifySelf distribution through the element axis
Example:
<justifySelf="center" />
Optional leftA distance from the left.
Example:
<left={20} />
Optional loopIndicates that the video should start when it ends.
Example:
<Video loop={true} />
Optional marginGeneral margin size
Check the token table to know which values to use
Example:
<margin="quark" />
Optional marginBottom margin size
Check the token table to know which values to use
Example:
<marginBottom="quark" />
Optional marginHorizontal (left and right) margin size
Check the token table to know which values to use
Example:
<marginHorizontal="quark" />
Optional marginLeft margin size
Check the token table to know which values to use
Example:
<marginLeft="quark" />
Optional marginRight margin size
Check the token table to know which values to use
Example:
<marginRight="quark" />
Optional marginTop margin size
Check the token table to know which values to use
Example:
<marginTop="quark" />
Optional marginVertical (top and bottom) margin size
Check the token table to know which values to use
Example:
<marginVertical="quark" />
Optional maxAdjust component maximum height
Example:
<maxHeight={100} />
Optional maxAdjust component maximum width
Example:
<maxwidth={100} />
Optional minAdjust component minimum height
Example:
<minHeight={100} />
Optional minAdjust component minimum width
Example:
<minWidth={100} />
Optional mixDetermines how an element’s content blends with the background or elements behind it. It affects the entire element, including text and images, and creates effects similar to those in graphic design software.
Example:
<View mixBlendMode="screen" />
Optional mutedIndicates that the video will start without audio. The client can increase the audio volume whenever they want.
Example:
<Video muted={true} />
Optional objectSets the object fit
Example:
<objectFit="cover" />
Optional opacityChanges the element opacity
Example:
<opacity="light" />
Optional orderChanges the order of elements
Example:
<order="center" />
Optional overflowThe overall overflow behavior.
Example:
<overflow="hidden" />
Optional overflowXThe horizontal overflow behavior.
Example:
<overflowX="hidden" />
Optional overflowYThe vertical overflow behavior.
Example:
<overflowY="hidden" />
Optional paddingGeneral padding size
Check the token table to know which values to use
Example:
<padding="quark" />
Optional paddingBottom padding size
Check the token table to know which values to use
Example:
<paddingBottom="quark" />
Optional paddingHorizontal (left and right) padding size
Check the token table to know which values to use
Example:
<paddingHorizontal="quark" />
Optional paddingLeft padding size
Check the token table to know which values to use
Example:
<paddingLeft="quark" />
Optional paddingRight padding size
Check the token table to know which values to use
Example:
<paddingRight="quark" />
Optional paddingTop padding size
Check the token table to know which values to use
Example:
<paddingTop="quark" />
Optional paddingVertical (top and bottom) padding size
Check the token table to know which values to use
Example:
<paddingVertical="quark" />
Optional playsIndicates that the video should be played inline.
Example:
<Video playsInline={true} />
Optional positionThe element positioning.
Example:
<position="relative" />
Optional rightA distance from the right.
Example:
<right={20} />
Optional scrollSets the behavior for a scrolling box when scrolling is triggered by the navigation.
Optional scrollSets the scroll margin.
Optional scrollSets the scroll margin on the block.
Optional scrollSets the scroll margin at the end of the block.
Optional scrollSets the scroll margin at the start of the block.
Optional scrollSets the scroll margin at the bottom.
Optional scrollSets the scroll margin on the inline.
Optional scrollSets the scroll margin at the end of the inline.
Optional scrollSets the scroll margin at the start of the inline.
Optional scrollSets the scroll margin on the left.
Optional scrollSets the scroll margin on the right.
Optional scrollSets the scroll margin at the top.
Optional scrollSets the scroll padding.
Optional scrollSets the scroll padding on the block.
Optional scrollSets the scroll padding at the end of the block.
Optional scrollSets the scroll padding at the start of the block.
Optional scrollSets the scroll padding at the bottom.
Optional scrollSets the scroll padding on the inline.
Optional scrollSets the scroll padding at the end of the inline.
Optional scrollSets the scroll padding at the start of the inline.
Optional scrollSets the scroll padding on the left.
Optional scrollSets the scroll padding on the right.
Optional scrollSets the scroll padding at the top.
Optional scrollSets the alignment of scroll snap.
Optional scrollSets the scroll snap to stop normally or always.
Optional scrollSets the type of scroll snap.
Optional showThis property controls the display of scrollbars.
<View showScrollbars>
</View>
Optional shrinkShrink ratio of element
Example:
<shrink={1} />
Use a path for the video file. We recommend that the video not be included as an asset of the Eitri app and that its address be accessible via HTTP with the assistance of a CDN or cache system.
Example:
<Video source="https://mycdn/videos/awesome-video.mp4" />
Optional thumbnailUse a path for an image that is displayed while the video is loading.
Example:
<Video thumbnail="./thumbnail.jpg" />
Optional topA distance from the top.
Example:
<top={20} />
Optional transform"Prepare a position transforming of element"
Example:
<View transform="rotate(45deg)" />
Optional transition"Prepare a transition of visual state change"
Example:
<View transition="background-color 0.5s ease-in-out" />
Optional typeIndicates a video type
Example:
<Video type="video.mp4" />
Optional visibilityChanges the element visibility
Example:
<visibility="visible" />
Optional visual"Determines the visual state of the component and its children."
Example:
<View visualState="success" />
Optional widthAdjust component width
Example:
<width={100} />
Optional youUse it to render a YouTube embed in the component.
Example:
<Video youTubeId="sOMEyOUtUbeVID" />
Optional zValue of z-index
Example:
<zIndex={1} />
Properties used in the Video component.