kit

Image overlay

Built revision v17.10.0

React
Topics

Human support

Bring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry.

On Record, Settings, Showcase

Image overlay

Review the booking photo on a desktop or a phone.

Chair with a split seat, photographed after the Oakmere WI booking.
Split chair seat, front view1 of 2
Chair with a split seat, photographed after the Oakmere WI booking.
Split chair seat, side view2 of 2
Source
type image = {src: string}
@module("../css/chair-damage.svg") external chair: image = "default"

let alt = "Chair with a split seat, photographed after the Oakmere WI booking."

@react.component
let make = () => <>
  <p id="booking-images" tabIndex={-1}>{React.string("Review the booking photo on a ")}<a href="#booking-image-desk">{React.string("desktop")}</a>{React.string(" or a ")}<a href="#booking-image-phone">{React.string("phone")}</a>{React.string(".")}</p>
  <KitReact.Roles.ImageOverlay
    id="booking-image-desk"
    failureWords=[KitReact.Words.Text("The photo can't be shown.")]
    props={{tabIndex: -1, ariaLabelledby: "booking-image-desk-caption"}}
    width={800} height={500} imageProps={{src: chair.src, alt}}
    caption={React.string("Split chair seat, front view")}
    captionProps={{id: "booking-image-desk-caption"}}
    actionsLabel="Booking photo"
    steps={{previous: Inert, next: Link("#booking-image-phone"), index: 1, total: 2, firstLabel: "Previous photo, the first photo", lastLabel: "Next photo, the last photo"}}
    openFileHref="../../chair-damage.svg"
    closeHref="#booking-images"
  />
  <KitReact.Roles.ImageOverlay
    id="booking-image-phone"
    failureWords=[KitReact.Words.Text("The photo can't be shown.")]
    props={{tabIndex: -1, ariaLabelledby: "booking-image-phone-caption"}}
    width={800} height={500} imageProps={{src: chair.src, alt}}
    caption={React.string("Split chair seat, side view")}
    captionProps={{id: "booking-image-phone-caption"}}
    actionsLabel="Booking photo"
    steps={{previous: Link("#booking-image-desk"), next: Inert, index: 2, total: 2, firstLabel: "Previous photo, the first photo", lastLabel: "Next photo, the last photo"}}
    openFileHref="../../chair-damage.svg"
    closeHref="#booking-images"
  />
</>

Image overlay, open

The fragment opens this image without a script: open the booking photo, open a photo that stands alone, or open the row of chairs.

Split chair seat and the hall wall behind it, photographed after the Oakmere WI booking.
Split chair seat, front view1 of 2
Chair with a split seat, photographed after the Oakmere WI booking.
Split chair seat, side view2 of 2
Chair with a split seat, photographed after the Oakmere WI booking.
Split chair seat, front view
A row of hall chairs, the third with a split seat, photographed after the Oakmere WI booking.
Hall chairs in a row
Source
type image = {src: string}
@module("../css/chair-damage.svg") external chair: image = "default"
@module("../css/chair-damage-tall.svg") external chairTall: image = "default"

let alt = "Chair with a split seat, photographed after the Oakmere WI booking."
let tallAlt = "Split chair seat and the hall wall behind it, photographed after the Oakmere WI booking."

@react.component
let make = () => <>
  <p id="booking-images-open" tabIndex={-1}>{React.string("The fragment opens this image without a script: ")}<a href="#booking-image-open">{React.string("open the booking photo")}</a>{React.string(", ")}<a href="#booking-image-open-single">{React.string("open a photo that stands alone")}</a>{React.string(", or ")}<a href="#booking-image-open-wide">{React.string("open the row of chairs")}</a>{React.string(".")}</p>
  <KitReact.Roles.ImageOverlay open_=true
    id="booking-image-open"
    failureWords=[KitReact.Words.Text("The photo can't be shown.")]
    props={{tabIndex: -1, ariaLabelledby: "booking-image-open-caption"}}
    width={800} height={2000} imageProps={{src: chairTall.src, alt: tallAlt}}
    caption={React.string("Split chair seat, front view")}
    captionProps={{id: "booking-image-open-caption"}}
    actionsLabel="Open booking photo"
    steps={{previous: Inert, next: Link("#booking-image-open-last"), index: 1, total: 2, firstLabel: "Previous photo, the first photo", lastLabel: "Next photo, the last photo"}}
    openFileHref={chairTall.src}
    closeHref="#booking-images-open"
  />
  <KitReact.Roles.ImageOverlay
    id="booking-image-open-last"
    failureWords=[KitReact.Words.Text("The photo can't be shown.")]
    props={{tabIndex: -1, ariaLabelledby: "booking-image-open-last-caption"}}
    width={800} height={500} imageProps={{src: chair.src, alt}}
    caption={React.string("Split chair seat, side view")}
    captionProps={{id: "booking-image-open-last-caption"}}
    actionsLabel="Open booking photo"
    steps={{previous: Link("#booking-image-open"), next: Inert, index: 2, total: 2, firstLabel: "Previous photo, the first photo", lastLabel: "Next photo, the last photo"}}
    openFileHref={chair.src}
    closeHref="#booking-images-open"
  />
  <KitReact.Roles.ImageOverlay
    id="booking-image-open-single"
    failureWords=[KitReact.Words.Text("The photo can't be shown.")]
    props={{tabIndex: -1, ariaLabelledby: "booking-image-open-single-caption"}}
    width={800} height={500} imageProps={{src: chair.src, alt}}
    caption={React.string("Split chair seat, front view")}
    captionProps={{id: "booking-image-open-single-caption"}}
    actionsLabel="Open booking photo"
    openFileHref={chair.src}
    closeHref="#booking-images-open"
  />
  <KitReact.Roles.ImageOverlay
    id="booking-image-open-wide"
    failureWords=[KitReact.Words.Text("The photo can't be shown.")]
    props={{tabIndex: -1, ariaLabelledby: "booking-image-open-wide-caption"}}
    width={960} height={320} imageProps={{src: "../../media/chair-damage-wide.svg", alt: "A row of hall chairs, the third with a split seat, photographed after the Oakmere WI booking."}}
    caption={React.string("Hall chairs in a row")}
    captionProps={{id: "booking-image-open-wide-caption"}}
    actionsLabel="Open booking photo"
    openFileHref="../../media/chair-damage-wide.svg"
    closeHref="#booking-images-open"
  />
</>

Image overlay, inert

Photo while the upload finishes

Open the booking photo.

Chair with a split seat, photographed after the Oakmere WI booking.
Split chair seat, front view
Source
@react.component
let make = () =>
  <details>
    <summary> {React.string("Photo while the upload finishes")} </summary>
    <p id="booking-images-inert" tabIndex={-1}><a href="#booking-image-inert"> {React.string("Open the booking photo")} </a> {React.string(".")} </p>
    <KitReact.Roles.ImageOverlay
      id="booking-image-inert"
      failureWords=[KitReact.Words.Text("The photo can't be shown.")]
      props={{tabIndex: -1, ariaLabelledby: "booking-image-inert-caption"}}
      width={800} height={500}
      imageProps={{src: "../../chair-damage.svg", alt: "Chair with a split seat, photographed after the Oakmere WI booking."}}
      caption={React.string("Split chair seat, front view")}
      captionProps={{id: "booking-image-inert-caption"}}
      actionsLabel="Booking photo"
      openFileHref="../../chair-damage.svg"
      closeHref="#booking-images-inert"
      openFileState={Inert({id: "role-image-overlay-inert-open-file", words: [KitReact.Words.Text("Open file waits until the photo has uploaded.")]})}
      closeState={Inert({id: "role-image-overlay-inert-close", words: [KitReact.Words.Text("Close waits until the photo has uploaded.")]})}
    />
  </details>