Component
IndexSum
It gives every child an ordinal value, asks you to select a combination that reaches a calculated target, and freezes the exact sum when you get there.
01 / Preview
Try it yourself.
Position sum0 / 5
Select any positions until the total matches.
Choose positions that add to the target. For four items, Title + Date and Status + Owner are both valid.
Mechanism
- 1
- Each item is worth its position: 1, 2, 3, or 4.
- 2
- Select any combination and watch the sum persist.
- 3
- Overshoot the target, then remove a position to recover.
- 4
- Hit the exact total and the selected combination freezes.
02 / Usage
Put it somewhere.
example.tsxTSX
import { IndexSum } from "gra-ui";
import "gra-ui/styles.css";
export function ChooseFieldsByArithmetic() {
return (
<IndexSum>
<span>Title</span>
<span>Status</span>
<span>Owner</span>
<span>Date</span>
</IndexSum>
);
}03 / API
Small surface area.
PropTypeDescription
childrenReactNodeThe items assigned ascending values by their position.