interface ComponentChildProperty
| Language | Type name |
|---|---|
 .NET | Amazon.CDK.AWS.AmplifyUIBuilder.CfnComponent.ComponentChildProperty |
 Java | software.amazon.awscdk.services.amplifyuibuilder.CfnComponent.ComponentChildProperty |
 Python | aws_cdk.aws_amplifyuibuilder.CfnComponent.ComponentChildProperty |
 TypeScript | @aws-cdk/aws-amplifyuibuilder » CfnComponent » ComponentChildProperty |
The ComponentChild property specifies a nested UI configuration within a parent Component .
Example
// The code below shows an example of how to instantiate this type.
// The values are placeholders you should change.
import * as amplifyuibuilder from '@aws-cdk/aws-amplifyuibuilder';
declare const componentChildProperty_: amplifyuibuilder.CfnComponent.ComponentChildProperty;
declare const componentPropertyProperty_: amplifyuibuilder.CfnComponent.ComponentPropertyProperty;
const componentChildProperty: amplifyuibuilder.CfnComponent.ComponentChildProperty = {
componentType: 'componentType',
name: 'name',
properties: {
propertiesKey: {
bindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
bindings: {
bindingsKey: {
element: 'element',
property: 'property',
},
},
collectionBindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
componentName: 'componentName',
concat: [componentPropertyProperty_],
condition: {
else: componentPropertyProperty_,
field: 'field',
operand: 'operand',
operandType: 'operandType',
operator: 'operator',
property: 'property',
then: componentPropertyProperty_,
},
configured: false,
defaultValue: 'defaultValue',
event: 'event',
importedValue: 'importedValue',
model: 'model',
property: 'property',
type: 'type',
userAttribute: 'userAttribute',
value: 'value',
},
},
// the properties below are optional
children: [{
componentType: 'componentType',
name: 'name',
properties: {
propertiesKey: {
bindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
bindings: {
bindingsKey: {
element: 'element',
property: 'property',
},
},
collectionBindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
componentName: 'componentName',
concat: [componentPropertyProperty_],
condition: {
else: componentPropertyProperty_,
field: 'field',
operand: 'operand',
operandType: 'operandType',
operator: 'operator',
property: 'property',
then: componentPropertyProperty_,
},
configured: false,
defaultValue: 'defaultValue',
event: 'event',
importedValue: 'importedValue',
model: 'model',
property: 'property',
type: 'type',
userAttribute: 'userAttribute',
value: 'value',
},
},
// the properties below are optional
children: [componentChildProperty_],
events: {
eventsKey: {
action: 'action',
parameters: {
anchor: {
bindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
bindings: {
bindingsKey: {
element: 'element',
property: 'property',
},
},
collectionBindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
componentName: 'componentName',
concat: [componentPropertyProperty_],
condition: {
else: componentPropertyProperty_,
field: 'field',
operand: 'operand',
operandType: 'operandType',
operator: 'operator',
property: 'property',
then: componentPropertyProperty_,
},
configured: false,
defaultValue: 'defaultValue',
event: 'event',
importedValue: 'importedValue',
model: 'model',
property: 'property',
type: 'type',
userAttribute: 'userAttribute',
value: 'value',
},
fields: {
fieldsKey: {
bindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
bindings: {
bindingsKey: {
element: 'element',
property: 'property',
},
},
collectionBindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
componentName: 'componentName',
concat: [componentPropertyProperty_],
condition: {
else: componentPropertyProperty_,
field: 'field',
operand: 'operand',
operandType: 'operandType',
operator: 'operator',
property: 'property',
then: componentPropertyProperty_,
},
configured: false,
defaultValue: 'defaultValue',
event: 'event',
importedValue: 'importedValue',
model: 'model',
property: 'property',
type: 'type',
userAttribute: 'userAttribute',
value: 'value',
},
},
global: {
bindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
bindings: {
bindingsKey: {
element: 'element',
property: 'property',
},
},
collectionBindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
componentName: 'componentName',
concat: [componentPropertyProperty_],
condition: {
else: componentPropertyProperty_,
field: 'field',
operand: 'operand',
operandType: 'operandType',
operator: 'operator',
property: 'property',
then: componentPropertyProperty_,
},
configured: false,
defaultValue: 'defaultValue',
event: 'event',
importedValue: 'importedValue',
model: 'model',
property: 'property',
type: 'type',
userAttribute: 'userAttribute',
value: 'value',
},
id: {
bindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
bindings: {
bindingsKey: {
element: 'element',
property: 'property',
},
},
collectionBindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
componentName: 'componentName',
concat: [componentPropertyProperty_],
condition: {
else: componentPropertyProperty_,
field: 'field',
operand: 'operand',
operandType: 'operandType',
operator: 'operator',
property: 'property',
then: componentPropertyProperty_,
},
configured: false,
defaultValue: 'defaultValue',
event: 'event',
importedValue: 'importedValue',
model: 'model',
property: 'property',
type: 'type',
userAttribute: 'userAttribute',
value: 'value',
},
model: 'model',
state: {
componentName: 'componentName',
property: 'property',
set: {
bindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
bindings: {
bindingsKey: {
element: 'element',
property: 'property',
},
},
collectionBindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
componentName: 'componentName',
concat: [componentPropertyProperty_],
condition: {
else: componentPropertyProperty_,
field: 'field',
operand: 'operand',
operandType: 'operandType',
operator: 'operator',
property: 'property',
then: componentPropertyProperty_,
},
configured: false,
defaultValue: 'defaultValue',
event: 'event',
importedValue: 'importedValue',
model: 'model',
property: 'property',
type: 'type',
userAttribute: 'userAttribute',
value: 'value',
},
},
target: {
bindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
bindings: {
bindingsKey: {
element: 'element',
property: 'property',
},
},
collectionBindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
componentName: 'componentName',
concat: [componentPropertyProperty_],
condition: {
else: componentPropertyProperty_,
field: 'field',
operand: 'operand',
operandType: 'operandType',
operator: 'operator',
property: 'property',
then: componentPropertyProperty_,
},
configured: false,
defaultValue: 'defaultValue',
event: 'event',
importedValue: 'importedValue',
model: 'model',
property: 'property',
type: 'type',
userAttribute: 'userAttribute',
value: 'value',
},
type: {
bindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
bindings: {
bindingsKey: {
element: 'element',
property: 'property',
},
},
collectionBindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
componentName: 'componentName',
concat: [componentPropertyProperty_],
condition: {
else: componentPropertyProperty_,
field: 'field',
operand: 'operand',
operandType: 'operandType',
operator: 'operator',
property: 'property',
then: componentPropertyProperty_,
},
configured: false,
defaultValue: 'defaultValue',
event: 'event',
importedValue: 'importedValue',
model: 'model',
property: 'property',
type: 'type',
userAttribute: 'userAttribute',
value: 'value',
},
url: {
bindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
bindings: {
bindingsKey: {
element: 'element',
property: 'property',
},
},
collectionBindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
componentName: 'componentName',
concat: [componentPropertyProperty_],
condition: {
else: componentPropertyProperty_,
field: 'field',
operand: 'operand',
operandType: 'operandType',
operator: 'operator',
property: 'property',
then: componentPropertyProperty_,
},
configured: false,
defaultValue: 'defaultValue',
event: 'event',
importedValue: 'importedValue',
model: 'model',
property: 'property',
type: 'type',
userAttribute: 'userAttribute',
value: 'value',
},
},
},
},
}],
events: {
eventsKey: {
action: 'action',
parameters: {
anchor: {
bindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
bindings: {
bindingsKey: {
element: 'element',
property: 'property',
},
},
collectionBindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
componentName: 'componentName',
concat: [componentPropertyProperty_],
condition: {
else: componentPropertyProperty_,
field: 'field',
operand: 'operand',
operandType: 'operandType',
operator: 'operator',
property: 'property',
then: componentPropertyProperty_,
},
configured: false,
defaultValue: 'defaultValue',
event: 'event',
importedValue: 'importedValue',
model: 'model',
property: 'property',
type: 'type',
userAttribute: 'userAttribute',
value: 'value',
},
fields: {
fieldsKey: {
bindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
bindings: {
bindingsKey: {
element: 'element',
property: 'property',
},
},
collectionBindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
componentName: 'componentName',
concat: [componentPropertyProperty_],
condition: {
else: componentPropertyProperty_,
field: 'field',
operand: 'operand',
operandType: 'operandType',
operator: 'operator',
property: 'property',
then: componentPropertyProperty_,
},
configured: false,
defaultValue: 'defaultValue',
event: 'event',
importedValue: 'importedValue',
model: 'model',
property: 'property',
type: 'type',
userAttribute: 'userAttribute',
value: 'value',
},
},
global: {
bindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
bindings: {
bindingsKey: {
element: 'element',
property: 'property',
},
},
collectionBindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
componentName: 'componentName',
concat: [componentPropertyProperty_],
condition: {
else: componentPropertyProperty_,
field: 'field',
operand: 'operand',
operandType: 'operandType',
operator: 'operator',
property: 'property',
then: componentPropertyProperty_,
},
configured: false,
defaultValue: 'defaultValue',
event: 'event',
importedValue: 'importedValue',
model: 'model',
property: 'property',
type: 'type',
userAttribute: 'userAttribute',
value: 'value',
},
id: {
bindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
bindings: {
bindingsKey: {
element: 'element',
property: 'property',
},
},
collectionBindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
componentName: 'componentName',
concat: [componentPropertyProperty_],
condition: {
else: componentPropertyProperty_,
field: 'field',
operand: 'operand',
operandType: 'operandType',
operator: 'operator',
property: 'property',
then: componentPropertyProperty_,
},
configured: false,
defaultValue: 'defaultValue',
event: 'event',
importedValue: 'importedValue',
model: 'model',
property: 'property',
type: 'type',
userAttribute: 'userAttribute',
value: 'value',
},
model: 'model',
state: {
componentName: 'componentName',
property: 'property',
set: {
bindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
bindings: {
bindingsKey: {
element: 'element',
property: 'property',
},
},
collectionBindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
componentName: 'componentName',
concat: [componentPropertyProperty_],
condition: {
else: componentPropertyProperty_,
field: 'field',
operand: 'operand',
operandType: 'operandType',
operator: 'operator',
property: 'property',
then: componentPropertyProperty_,
},
configured: false,
defaultValue: 'defaultValue',
event: 'event',
importedValue: 'importedValue',
model: 'model',
property: 'property',
type: 'type',
userAttribute: 'userAttribute',
value: 'value',
},
},
target: {
bindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
bindings: {
bindingsKey: {
element: 'element',
property: 'property',
},
},
collectionBindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
componentName: 'componentName',
concat: [componentPropertyProperty_],
condition: {
else: componentPropertyProperty_,
field: 'field',
operand: 'operand',
operandType: 'operandType',
operator: 'operator',
property: 'property',
then: componentPropertyProperty_,
},
configured: false,
defaultValue: 'defaultValue',
event: 'event',
importedValue: 'importedValue',
model: 'model',
property: 'property',
type: 'type',
userAttribute: 'userAttribute',
value: 'value',
},
type: {
bindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
bindings: {
bindingsKey: {
element: 'element',
property: 'property',
},
},
collectionBindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
componentName: 'componentName',
concat: [componentPropertyProperty_],
condition: {
else: componentPropertyProperty_,
field: 'field',
operand: 'operand',
operandType: 'operandType',
operator: 'operator',
property: 'property',
then: componentPropertyProperty_,
},
configured: false,
defaultValue: 'defaultValue',
event: 'event',
importedValue: 'importedValue',
model: 'model',
property: 'property',
type: 'type',
userAttribute: 'userAttribute',
value: 'value',
},
url: {
bindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
bindings: {
bindingsKey: {
element: 'element',
property: 'property',
},
},
collectionBindingProperties: {
property: 'property',
// the properties below are optional
field: 'field',
},
componentName: 'componentName',
concat: [componentPropertyProperty_],
condition: {
else: componentPropertyProperty_,
field: 'field',
operand: 'operand',
operandType: 'operandType',
operator: 'operator',
property: 'property',
then: componentPropertyProperty_,
},
configured: false,
defaultValue: 'defaultValue',
event: 'event',
importedValue: 'importedValue',
model: 'model',
property: 'property',
type: 'type',
userAttribute: 'userAttribute',
value: 'value',
},
},
},
},
};
Properties
| Name | Type | Description |
|---|---|---|
| component | string | The type of the child component. |
| name | string | The name of the child component. |
| properties | IResolvable | { [string]: IResolvable | Component } | Describes the properties of the child component. |
| children? | IResolvable | IResolvable | Component[] | The list of ComponentChild instances for this component. |
| events? | IResolvable | { [string]: IResolvable | Component } | Describes the events that can be raised on the child component. |
componentType
Type:
string
The type of the child component.
name
Type:
string
The name of the child component.
properties
Type:
IResolvable | { [string]: IResolvable | Component }
Describes the properties of the child component.
You can't specify tags as a valid property for properties .
children?
Type:
IResolvable | IResolvable | Component[]
(optional)
The list of ComponentChild instances for this component.
events?
Type:
IResolvable | { [string]: IResolvable | Component }
(optional)
Describes the events that can be raised on the child component.
Use for the workflow feature in Amplify Studio that allows you to bind events and actions to components.