A cell that displays user input information. If a user selects this input cell, the input information can be updated with an input prompt. If you need two input-cell
components within a single row, you should specify the split-input-cell
.
If the device does not support split-input-cell
, it will split the two cells into separate input-cell
components on their own separate lines.
This example uses several input-cell
components: two in their own row and a third row with a split-input-cell
, with two cells of its own.
result-view {
match: RideShare (rideShare) {
from-output: ShowRideShareInputCells
}
message {
template ("Here are input cells:")
}
render {
layout {
section {
content {
input-cell {
label {
template ("Pickup")
}
value {
template ("60 S Market St, San Jose")
}
on-click {
intent {
goal: ShowRideShareInputCells
}
}
}
input-cell {
label {
template ("Dropoff")
}
value {
template ("San Francisco Int'l Airport, San Francisco")
}
on-click {
intent {
goal: ShowRideShareInputCells
}
}
}
split-input-cell {
left {
input-cell {
label {
template ("Ride Type")
}
value {
template ("#{value(rideShare.productType)}")
}
on-click {
intent {
goal: ShowRideShareInputCells
}
}
}
}
right {
input-cell {
label {
template ("Payment method")
}
value {
template ("Visa ***88")
}
on-click {
intent {
goal: ShowRideShareInputCells
}
}
}
}
}
}
}
}
}
}
You can run the sample capsule in the Simulator to see how this component displays on different devices, if supported.
This component is applicable to this moment:
You can find design specifications for this component in the Components Spec download under Design Resources.