website logo
👥 Community🎯 Samples on GitHub🚦 System Status
💡 Guides
🚀 Examples
🍕 Developer Reference
⚡️ Changelog
🎥 Video Library
Navigate through spaces
⌘K
Overview
Reference
Actions
Data
UI
Widgets
Docs powered by
Archbee
Reference
UI

jc-interactive-image-item

28min

The schema defines the following properties:

Property

Type

Required

Description

type

component.interactive-image-item

true



instanceId

InstanceId | Expression

false



when

Expression | boolean

false



options

JCInteractiveImageItem

true



instanceId (InstanceId | Expression)

when (Expression | boolean)

options (JCInteractiveImageItem, required)



Sub Schemas

The schema defines the following additional types:

JCInteractiveImageItem (Interactive Image Item Options)

Interactive item Extends PointItembase from 'Interactive-image' UI component.

Properties of the JCInteractiveImageItem object:

Property

Type

Required

Description

id

string | number | string

true

Id of the item -> for filtering & key

title

string | number | string

true

Name of point, String title

percentageCoordinates

Percentage Coordinates

true

Percentage coordinates Coordinates are represent as absolute percentage number beetween 0-100.

onPress

keg-action-in-background

false

Point Item onPress actionOverwrites functionality of the group assignment.

icon

icon-name | string

false

Color for the point item.Overwrites functionality of the group assignment.

style

object

false



groupId

string | number | string

false

Define groupId if groups are provided.Effect only initial load.

color

ComponentColor | string

false

color of active point

index

number

false

Index for initial animation.

id (string | number | string, required)

Id of the item -> for filtering & key

The object must be any of the following types:

id (string)

title (string | number | string, required)

Name of point, String title

The object must be any of the following types:

title (string)

percentageCoordinates (Percentage Coordinates, required)

Percentage coordinates Coordinates are represent as absolute percentage number beetween 0-100.

Properties of the percentageCoordinates object:

Property

Type

Required

Description

x

number | string | string

true



y

number | string | string

true



x (number | string | string, required)

The object must be any of the following types:

x (string)

y (number | string | string, required)

The object must be any of the following types:

y (string)

onPress (keg-action-in-background)

Point Item onPress action

Overwrites functionality of the group assignment.

icon (icon-name | string)

Color for the point item.

Overwrites functionality of the group assignment.

The object must be any of the following types:

icon (icon-name)

icon (string)

style (object)

Properties of the style object:

Property

Type

Required

Description

isActive

boolean | string

false

define if is active

isDisabled

boolean | string

false

define if is disabled

isActive (boolean | string)

define if is active

The object must be any of the following types:

isActive (string)

isDisabled (boolean | string)

define if is disabled

The object must be any of the following types:

isDisabled (string)

groupId (string | number | string)

Define groupId if groups are provided.

Effect only initial load.

The object must be any of the following types:

groupId (string)

color (ComponentColor | string)

color of active point

The object must be any of the following types:

color (ComponentColor)

color (string)

ComponentColor (BasicColor | StatusColor | primary)

The object must be any of the following types:

ComponentColor (BasicColor)

ComponentColor (StatusColor)

BasicColor (enum<string>)

This element must be one of the following enum values:

  • color1
  • color2
  • color3
  • color4
  • color5
  • color6
  • color7
  • color8
  • color9
  • color10
  • color11
  • color12
  • color13
  • color14

StatusColor (enum<string>)

This element must be one of the following enum values:

  • positive
  • negative
  • warning



Updated 25 Sep 2023
Did this page help you?
PREVIOUS
jc-image
NEXT
jc-interactive-image
Docs powered by
Archbee
TABLE OF CONTENTS
instanceId (InstanceId | Expression)
when (Expression | boolean)
options (JCInteractiveImageItem, required)
Sub Schemas
JCInteractiveImageItem (Interactive Image Item Options)
id (string | number | string, required)
id (string)
title (string | number | string, required)
title (string)
percentageCoordinates (Percentage Coordinates, required)
x (number | string | string, required)
x (string)
y (number | string | string, required)
y (string)
onPress (keg-action-in-background)
icon (icon-name | string)
icon (icon-name)
icon (string)
style (object)
isActive (boolean | string)
isActive (string)
isDisabled (boolean | string)
isDisabled (string)
groupId (string | number | string)
groupId (string)
color (ComponentColor | string)
color (ComponentColor)
color (string)
ComponentColor (BasicColor | StatusColor | primary)
ComponentColor (BasicColor)
ComponentColor (StatusColor)
BasicColor (enum<string>)
StatusColor (enum<string>)
Docs powered by
Archbee
Copyright © 2023 Jigx, Inc. All rights reserved. Terms of Service