new DisplayItemsType()
The DisplayItemsType type provides a flexible way to control the visual representation of the items (or sub-items) in the radial menu. It defines the type for displayItems and displaySubItems fields of Options object, which specifies how to display a specific part of the item (for instance, the arrow or the caption). For instance, you can choose to display only the caption of the items, or to display both the image and the caption with a specific alignment and size. The DisplayItemsType type allows you to customize the appearance of the items in the radial menu according to your preferences and requirements.
Members
(static) arrow :null|number
The arrow field specifies the ratio to determine where the arrow of items with children is displayed. Shorty, the arrow field specifies whether to display an arrow for items with children, and if so, where to display the arrow within the ring. The arrow is a visual indicator that an item has child items. The arrowSize field specifies the size to display the arrow. The DisplayItemsType.arrowColor field indicates the CSS color to display the arrow. The arrow field has effect only for items with children, and if the item has no children, no arrow is displayed even if the arrow field is set to a number.
The arrow field supports the following values:
- {null} or {undefined}, specifies that no arrow is displayed
- {number}, a number that specifies ratio to determine where the arrow of items with children is displayed. For instance, 0 specifies that the arrow is displayed on the outside ring, 0.5 specifies that the arrow is displayed in the center of the ring, and 1 specifies that the arrow is displayed on the inside ring. A negative number can be used to specify that the arrow is displayed outside the ring with a distance from the outside ring equal multipled by radius of the ring. For instance, -0.5 specifies that the arrow is displayed outside the ring with a distance from the outside ring equal to half of the radius of the ring. A number greater than 1 can be used to specify that the arrow is displayed inside the ring with a distance from the inside ring equal multipled by radius of the ring
Type:
- null | number
Example
null {null}, specifies that no arrow is displayed
0 {number}, specifies that the arrow is displayed on the outside ring
0.5 {number}, specifies that the arrow is displayed in the center of the ring
1 {number}, specifies that the arrow is displayed on the inside ring(static) arrowColor :null|string
The arrowColor field indicates the CSS color to display the arrow. The arrowColor field has effect only if the arrow field is set to a number (which specifies that an arrow is displayed). The DisplayItemsType.arrowSize field specifies the size to display the arrow.
The arrowColor field supports the following values:
- {null} or {undefined}, indicates a black arrow
- {string}, defines the CSS color to display the arrow. For instance, "gray" specifies a gray arrow, "red" specifies a red arrow, "rgba(255,0,0,0.5)" indicates a 50% red arrow
Type:
- null | string
Example
null {null}, indicates a black arrow
"gray" {string}, specifies a gray arrow
"red" {string}, specifies a red arrow
"rgba(255,0,0,0.5)" {string}, indicates a 50% red arrow(static) arrowSize :null|number
The arrowSize field defines the size to display the arrow. The arrowSize field has effect only if the arrow field is set to a number (which specifies that an arrow is displayed). The DisplayItemsType.arrowColor field indicates the CSS color to display the arrow.
The arrowSize field supports the following values:
- {null} or {undefined}, indicates the default arrow size
- {number}, a number greater than 1 to specify the size of the arrow. For instance, 4 specifies a bigger arrow, and 8 specifies a much-bigger arrow.
Type:
- null | number
Example
null {null}, indicates the default arrow size
4 {number}, specifies a bigger arrow
8 {number}, specifies a much-bigger arrow(static) caption :null|number
The caption field defines where the item's caption is placed (as a ratio). The image field defines where the item's image is placed (as a ratio). The imageSize field sets the image's aspect ratio, and imageAlign controls how the image is aligned relative to the caption (applies only to content). The content field defines where the item's content (image and caption together) is placed. If you use content together with image or caption, the image or caption may appear twice - once inside the content and once separately. To avoid this, when using content, set image and caption to null.
The caption field supports the following values:
- {null} or {undefined}, specifies that no caption is displayed
- {number}, a number that specifies ratio to determine where the item's caption of items with children is displayed. For instance, 0 specifies that the item's caption is displayed on the outside ring, 0.5 specifies that the item's caption is displayed in the center of the ring, and 1 specifies that the item's caption is displayed on the inside ring. A negative number can be used to specify that the item's caption is displayed outside the ring with a distance from the outside ring equal multipled by radius of the ring. For instance, -0.5 specifies that the item's caption is displayed outside the ring with a distance from the outside ring equal to half of the radius of the ring. A number greater than 1 can be used to specify that the item's caption is displayed inside the ring with a distance from the inside ring equal multipled by radius of the ring
Type:
- null | number
Example
null {null}, specifies that no caption is displayed
0 {number}, specifies that the item's caption is displayed on the outside ring
0.5 {number}, specifies that the item's caption is displayed in the center of the ring(static) content :null|number
The content field defines where the item's content (caption and image together) is placed (as a ratio). The image field defines where the item's image is placed (as a ratio). The caption field defines where the item's caption is placed (as a ratio). The imageSize field sets the image's aspect ratio, and imageAlign controls how the image is aligned relative to the caption (applies only to content). If you use content together with image or caption, the image or caption may appear twice - once inside the content and once separately. To avoid this, when using content, set image and caption to null.
The content field supports the following values:
- {null} or {undefined}, specifies that no content (caption and image together) is displayed
- {number}, a number that specifies ratio to determine where the item's content (caption and image together) of items with children is displayed. For instance, 0 specifies that the item's content (caption and image together) is displayed on the outside ring, 0.5 specifies that the item's content (caption and image together) is displayed in the center of the ring, and 1 specifies that the item's content (caption and image together) is displayed on the inside ring. A negative number can be used to specify that the item's content (caption and image together) is displayed outside the ring with a distance from the outside ring equal multipled by radius of the ring. For instance, -0.5 specifies that the item's content (caption and image together) is displayed outside the ring with a distance from the outside ring equal to half of the radius of the ring. A number greater than 1 can be used to specify that the item's content (caption and image together) is displayed inside the ring with a distance from the inside ring equal multipled by radius of the ring
Type:
- null | number
Example
null {null}, specifies that no content is displayed
0 {number}, specifies that the item's content (caption and image together) is displayed on the outside ring
0.5 {number}, specifies that the item's content (caption and image together) is displayed in the center of the ring(static) image :null|number
The image field defines where the item's image is placed (as a ratio). The DisplayItemsType.imageSize field sets the image's aspect ratio, and imageAlign controls how the image is aligned relative to the caption (applies only to content). The content field defines where the item's content (image and caption together) is placed. If you use content together with image or caption, the image or caption may appear twice - once inside the content and once separately. To avoid this, when using content, set image and caption to null.
The image field supports the following values:
- {null} or {undefined}, specifies that no image is displayed
- {number}, a number that specifies ratio to determine where the item's image of items with children is displayed. For instance, 0 specifies that the item's image is displayed on the outside ring, 0.5 specifies that the item's image is displayed in the center of the ring, and 1 specifies that the item's image is displayed on the inside ring. A negative number can be used to specify that the item's image is displayed outside the ring with a distance from the outside ring equal multipled by radius of the ring. For instance, -0.5 specifies that the item's image is displayed outside the ring with a distance from the outside ring equal to half of the radius of the ring. A number greater than 1 can be used to specify that the item's image is displayed inside the ring with a distance from the inside ring equal multipled by radius of the ring
Type:
- null | number
Example
null {null}, specifies that no image is displayed
0 {number}, specifies that the item's image is displayed on the outside ring
0.5 {number}, specifies that the item's image is displayed in the center of the ring(static) imageAlign :number
The imageAlign field specifies the alignment of the item's image relative to the item's caption. The imageAlign field is valid only if content field is specified. In other words, imageAlign field aligns the item's caption and image when they are both displayed by content field. The imageSize field specifies the aspect ratio to display the item's image.
The imageAlign field supports the following values:
- 0 {number}, the image is left-aligned
- 1 {number}, the image is right-aligned
- 2 {number}, the image is top-aligned
- 3 {number}, the image is bottom-aligned
Type:
- number
Example
0 {number}, the image is left-aligned
2 {number}, the image is top-aligned(static) imageSize :null|number|array
The imageSize field defines the size of the item's image. The imageSize field has effect only if the image field is set to a number (which specifies that an image is displayed). The imageAlign field specifies the alignment of the item's image relative to the item's caption.
The imageSize field supports the following values:
- {null}, Indicates that the item's image is displayed as it is (full-sized).
- {number}, Specifies that the item's image is displayed into a square of giving size (same width and height). If 0 the item displays no image, if negative the item's image is stretched to giving square, else the item's picture is scaled to fit the giving rectangle.
- {array}, Specifies an array of [aspect-width,aspect-height] type that defines the limits for width or/and height. The aspect-width and aspect-height define the width/height of the item's picture to scale or stretch to. For instance, [32,64] scales the image to the largest ratio-rectangle (32 x 64) that fits the client, and [-32,-64] stretches the image to a 32 x 64 rectangle.
Type:
- null | number | array
Example
null {null}, indicates that the item's image is displayed as it is (full-sized)
0 {number}, no image is displayed
64 {number}, the image is scaled to fit a 64 x 64 rectangle
-64 {number}, the image is strected to a 64 x 64 rectangle
[32,64] {array}, scales the image to the largest ratio-rectangle (32 x 64) that fits the client
[-32,-64] {array}, stretches the image to a 32 x 64 rectangle(static) radial :RadialMenu.DisplayRadialEnum
The radial field rotates the item's content while not zero.
The radial field supports the following values:
- 0 or RadialMenu.DisplayRadialEnum.exDisplayRadialFlat {number}, no rotation is performed over the item's content
- 1 or RadialMenu.DisplayRadialEnum.exDisplayRadialRotated {number}, the item's content is fully rotated
- 2 or RadialMenu.DisplayRadialEnum.exDisplayRadialRotated180 {number}, the item's content is rotated up to 180 degree
- 3 or RadialMenu.DisplayRadialEnum.exDisplayRadialRotated270 {number}, the item's content is rotated up to 270 degree
- 4 or RadialMenu.DisplayRadialEnum.exDisplayRadialRotated90 {number}, similar with exDisplayRadialRotated, excepts it rotates 90 degree back
Type:
Example
0 or RadialMenu.DisplayRadialEnum.exDisplayRadialFlat {number}, no rotation is performed over the item's content
4 or RadialMenu.DisplayRadialEnum.exDisplayRadialRotated90 {number}, rotates the items' displaying-angle