gra-ui

Component

RatioRail

Drag the rail or use its arrow keys to change the actual left/right proportions. Children stay filed on their shelf while the available room, line wrapping and visual balance change in real time.

Possible use

It could let a reviewer negotiate how much room a handoff field deserves, or let a presenter squeeze an agenda label beside its supporting detail. The pixels can move without improving the information architecture.

Reasonable alternative

A reasonable local alternative is a fixed grid or one responsive layout rule. A pointer-controlled proportion is an elaborate answer to choosing two column widths.

01 / Preview

Try it yourself.

Preview Interactive
Ratio rail50 / 50
Left shelf
Request
Owner
Right shelf
Deadline
Reason

Drag the divider. The words stay filed, but their room allocation becomes a policy.

Mechanism
1
Drag the rail between the two shelves.
2
Watch wrapping and room allocation change in real time.
3
Use arrow keys or balance the shelves again.

02 / Usage

Put it somewhere.

example.tsxTSX
import { RatioRail } from "gra-ui";
import "gra-ui/styles.css";

export function ShelvedNotice() {
  return (
    <RatioRail>
      <span>Request</span>
      <span>Owner</span>
      <span>Deadline</span>
      <span>Reason</span>
    </RatioRail>
  );
}

03 / API

Small surface area.

PropTypeDescription
childrenReactNodeThe content divided in order between the left and right shelves.