The Panel component is a panel that is used to group components.
The component is a container for other visual components. All components on a panel inherit values of its enabled and visible properties. If a panel contains RadioButton components, their selection does not depend on selection of radio buttons located on the form or other panels.
The component has different properties available in the design mode and in the web form execution mode.
text. Text displayed on a panel in the design mode. It is not displayed on form initialization, it is used to identify components during form design.
name. Component name.
borderStyle. Component border style
color. Component background color.
visible. Indicates whether the component is visible on running web form.
enabled. Indicates whether the component is available for the user.
hint. Tooltip text.
showHint. Indicates whether a tooltip is displayed when the cursor is hovered over the component.
position. Method of component positioning on web form or inside container component. The property is set to absolute by default, the component has fixed position and size determined by the coordinate and size properties. If the property is set to relative, component position and sizes change depending on container component sizes. The coordinate property will be unavailable. Component position will be determined by the flexDirection, aligments, justifyContent properties of the parent component, and component sizes will change if the size property is set in percents.
flexDirection. Main axis, on which flex components will be located. The value is set relative to the parent component, which contains flex components. Available values:
column. Default value. Components are located vertically.
row. Components are located horizontally.
aligments. Align flex components relative to the Y axis. Available values:
flex-start. Components are arranged at the beginning of the Y axis.
center. Components are centered on the Y axis.
flex-end. Components are arranged at the end of the Y axis.
justifyContent. Align flex components relative to the main axis. Available values:
flex-start. Default value. Components are shifted to the beginning of the main axis.
center. Components are centered on the main axis.
flex-end. Components are shifted to the end of the main axis.
space-around. Components are uniformly distributed along the main axis with equal free space around them. Visually, the free space between the outmost components and axis borders is less because the free space between components consists of two free spaces belonging to each of the components.
space-between. Components are uniformly distributed along the main axis. The first element is at the beginning of the axis, and the last element is in the end of the axis.
space-evenly. Components are distributed so that the distance between any two components and distance to the axis borders is equal.
flexGrow. The property determines what proportion of container free space can be allocated for the component. If all components are set to 1, container free space is uniformly distributed between the components. If one of the components is set to 2, it occupies two times more free space, and so on. The property is available if the position property is set to relative.
size. Component sizes. Sizes can be specified in pixels or percents relative to parent component sizes.
coordinate. Coordinate of the top left corner of the component. Coordinates can be specified in pixels or percents relative to parent component sizes. The property is available if the position property is set to absolute.
The component does not have events.
See also:
Creating a Web Form and Components Layout