// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 import 'dart:html'; import 'package:example_common/src/components/component.dart'; import 'package:example_common/src/enums.dart'; /// {@template example_common.flex_component} /// a component that displays a set of [children] in either a row or column /// {@endtemplate} class FlexComponent extends Component { /// {@macro example_common.flex_component} FlexComponent({ required this.direction, this.alignItems = AlignItems.start, required this.children, }); /// The axis that the items should be displayed on. final Axis direction; /// The alignment of the child items. final AlignItems alignItems; /// The child components to be displayed. final List<Component> children; @override Component render() { final div = Element.div(); div.style.display = 'flex'; div.style.flexDirection = direction.flexDirection; div.style.alignItems = alignItems.name; for (final child in children) { div.appendComponent(child); } return Component.fromElement(div); } } /// {@template example_common.column_component} /// a component that displays a set of [children] in a column /// {@endtemplate} class ColumnComponent extends FlexComponent { /// {@macro example_common.column_component} ColumnComponent({ super.alignItems, required super.children, }) : super( direction: Axis.vertical, ); } /// {@template example_common.row_component} /// a component that displays a set of [children] in a row /// {@endtemplate} class RowComponent extends FlexComponent { /// {@macro example_common.row_component} RowComponent({ super.alignItems, required super.children, }) : super( direction: Axis.horizontal, ); }