Molecules - BoxSelectComponent
Admin私のストアThis article explains the BoxSelectComponent from Molecules.
BoxSelectComponent is a component that holds the selected key and value. The options are displayed in a list format when clicked.
In the BoxSelectComponent test, a sample of the BoxComponent placement list is displayed for testing.
Arguments are position, width, height, choice background color, text color, background color.
BoxSelectComponent is a combination of the following four Components.
- Atoms - RectComponent
- Molecules - ClickItemComponent
- Molecules - BoxTextComponent
- Molecules-ListVerticalComponent
RectComponent is a component whose placement can be freely determined. The selected value is displayed using BoxTextComponent, and the options are displayed below it using RectComponent. Since each option is displayed in a vertical list, the list of options is set to ListVerticalComponent. When an option is clicked, the selected value is changed to the selected value.
BoxSelectComponent has several processing specifications.
The event handler for handling clicks and other events will close the options expansion if another element is clicked while the options are expanded.
In addition, the drawing process is done in a depth-first order, from parent to child components. If the components overlap with each other, the expanded options may be hidden, so layers are set.
In the case of BoxSelectComponent's Box Position, if the layer is not set, the options will be hidden by the display of other parameters. However, since layers with larger set values are drawn later regardless of the drawing process order, they can be drawn in front as shown in the image.