@OnCreateLayout static Component onCreateLayout(ComponentContext c, @State boolean top) { return Row.create(c) .heightDip(200) .alignItems(top ? YogaAlign.FLEX_START : YogaAlign.FLEX_END) .child( Row.create(c) .heightDip(40) .flexGrow(1) .backgroundColor(Color.parseColor("#ee1111")) .transitionKey("red") .build()) .child( Row.create(c) .heightDip(40) .flexGrow(1) .backgroundColor(Color.parseColor("#1111ee")) .transitionKey("blue") .build()) .child( Row.create(c) .heightDip(40) .flexGrow(1) .backgroundColor(Color.parseColor("#11ee11")) .transitionKey("green") .build()) .clickHandler(UpDownBlocksComponent.onClick(c)) .build(); }
@OnCreateLayout static Component onCreateLayout( ComponentContext c, @Prop int size, @Prop int selectedIndex, @Prop int firstVisibleIndex) { Row.Builder row = Row.create(c).alignItems(YogaAlign.CENTER); final int dotCount = Math.min(size, MAX_DOT_COUNT); for (int position = 0; position < dotCount; ++position) { final int index = firstVisibleIndex + position; row.child( Circle.create(c) .radiusDip(2 * getIndicatorSize(size, firstVisibleIndex, position, selectedIndex)) .color(index == selectedIndex ? COLOR_SELECTED : COLOR_NORMAL) .transitionKey("dot" + index) .transitionKeyType(Transition.TransitionKeyType.GLOBAL) .marginDip(YogaEdge.ALL, 2 * 1)); } return row.build(); }
@OnCreateLayout static Component onCreateLayout(ComponentContext c, @Prop final Decade decade) { return Row.create(c) .alignItems(YogaAlign.CENTER) .paddingDip(YogaEdge.ALL, 16) .child( Row.create(c) .heightPx(1) .backgroundColor(0xFFAAAAAA) .flex(1)) .child( Text.create(c) .text(String.valueOf(decade.year)) .textSizeDip(14) .textColor(0xFFAAAAAA) .marginDip(YogaEdge.HORIZONTAL, 10) .flex(0)) .child( Row.create(c) .heightPx(1) .backgroundColor(0xFFAAAAAA) .flex(1)) .backgroundColor(0xFFFAFAFA) .build(); } }
Row.create(c) .widthPercent(33.3f) .alignItems(YogaAlign.CENTER) .justifyContent(YogaJustify.CENTER) .clickHandler(StoryFooterComponent.onClick(c)) .transitionKey("cont_comment") .widthPercent(33.3f) .alignItems(YogaAlign.CENTER) .justifyContent(YogaJustify.CENTER) .child(Column.create(c).heightDip(24).widthDip(24).backgroundColor(Color.RED)) Row.create(c) .widthPercent(33.3f) .alignItems(YogaAlign.CENTER) .justifyContent(YogaJustify.CENTER) .child( .child( Row.create(c) .alignItems(YogaAlign.CENTER) .justifyContent(YogaJustify.CENTER) .clickHandler(StoryFooterComponent.onClick(c)) Row.create(c) .transitionKey("cont_share") .alignItems(YogaAlign.CENTER) .clickHandler(StoryFooterComponent.onClick(c)) .paddingDip(YogaEdge.ALL, 16)
.child( Row.create(c) .alignItems(YogaAlign.CENTER) .child( Text.create(c) .marginDip(YogaEdge.LEFT, 8) .paddingDip(YogaEdge.ALL, 3) .alignItems(YogaAlign.CENTER) .child( Column.create(c)
.child( Row.create(c) .alignItems(YogaAlign.CENTER) .child( Text.create(c) .marginDip(YogaEdge.LEFT, 8) .paddingDip(YogaEdge.ALL, 3) .alignItems(YogaAlign.CENTER) .child( Column.create(c)
Row.create(c) .justifyContent(SPACE_AROUND) .alignItems(CENTER) .positionType(ABSOLUTE) .positionPx(LEFT, 50) Row.create(c) .justifyContent(SPACE_AROUND) .alignItems(CENTER) .positionType(ABSOLUTE) .positionPx(LEFT, 200)
@Override protected Component onCreateLayout(final ComponentContext c) { return Row.create(c) .alignItems(CENTER) .paddingDip(ALL, 10) .contentDescription("This is root view") .child( Row.create(c) .alignItems(CENTER) .paddingDip(ALL, 10) .contentDescription("This is a container")
Row.create(c) .justifyContent(SPACE_AROUND) .alignItems(CENTER) .positionType(ABSOLUTE) .positionPx(LEFT, 50) Row.create(c) .justifyContent(SPACE_AROUND) .alignItems(CENTER) .positionType(ABSOLUTE) .positionPx(LEFT, 200)
@Override protected Component onCreateLayout(final ComponentContext c) { return create(c) .contentDescription("This is root view") .child(TestDrawableComponent.create(c).widthDip(30).heightDip(30)) .child( TestDrawableComponent.create(c, true, true, true, true, false) .flex(1) .flexBasisDip(0) .backgroundColor(RED) .marginDip(HORIZONTAL, 10) .importantForAccessibility(IMPORTANT_FOR_ACCESSIBILITY_NO)) .child( Row.create(c) .alignItems(CENTER) .paddingDip(ALL, 10) .importantForAccessibility(IMPORTANT_FOR_ACCESSIBILITY_NO_HIDE_DESCENDANTS) .child( TestDrawableComponent.create(c) .widthDip(30) .heightDip(30) .importantForAccessibility(IMPORTANT_FOR_ACCESSIBILITY_YES) .contentDescription("This is an image"))) .build(); } };
@Override protected Component onCreateLayout(ComponentContext c) { return Column.create(c) .justifyContent(YogaJustify.CENTER) .alignItems(YogaAlign.CENTER) .child( Row.create(c) .widthPx(20) .heightPx(20) .transitionKey("row") .transitionKeyType(Transition.TransitionKeyType.GLOBAL) .justifyContent(YogaJustify.CENTER) .alignItems(YogaAlign.CENTER) .child(create(c).widthPx(10).heightPx(10))) .build(); } });
@Override protected Component onCreateLayout(final ComponentContext c) { return Row.create(c) .alignItems(YogaAlign.STRETCH) .paddingPx(YogaEdge.ALL, 2) .child( TestSizeDependentComponent.create(c) .setFixSizes(true) .setDelegate(false) .marginPx(YogaEdge.ALL, 11)) .child(TestDrawableComponent.create(c).heightPx(200).widthPx(200)) .build(); } };