Adaptive Button Stack

Adaptiveness

  • Stretches it's children (probably buttons) on the extra-small breakpoint (customizable using the stretchBreakpoint prop)
import { AdaptiveButton } from "adaptive-material-ui/components/button";
import { AdaptiveButtonStack } from "adaptive-material-ui/components/buttonStack";

export default function () {
  return (
    <AdaptiveButtonStack>
      <AdaptiveButton variant="contained">Submit</AdaptiveButton>
    </AdaptiveButtonStack>
  );
}

Stretching

When children are stretched by the stretchBreakpoint prop, they behave differently based on the number of children:

  • One or two: children are stacked horizontally and stretched to 50% of the component width
  • More: children are stacked vertically and stretched to 100% of the component width
import DemoSelector from "@/shared/demoSelector";
import Stack from "@mui/material/Stack";
import { AdaptiveButton } from "adaptive-material-ui/components/button";
import { AdaptiveButtonStack } from "adaptive-material-ui/components/buttonStack";
import { useState } from "react";

export default function () {
  const [numberOfButtons, setNumberOfButtons] = useState("1");

  return (
    <Stack spacing={3}>
      <DemoSelector
        onChange={setNumberOfButtons}
        options={[
          { label: "One Child", value: "1" },
          { label: "Two Children", value: "2" },
          { label: "Three Children", value: "3" },
        ]}
        value={numberOfButtons}
      />
      <AdaptiveButtonStack stretchBreakpoint={true}>
        {["Submit", "Back", "Delete"]
          .slice(0, parseInt(numberOfButtons))
          .reverse()
          .map((b) => (
            <AdaptiveButton key={b} variant="contained">
              {b}
            </AdaptiveButton>
          ))}
      </AdaptiveButtonStack>
    </Stack>
  );
}

Split Alignment

adaptiveButtonStackClasses.alignStart can be used to align children at both ends of the stack when stacked horizontally

import { AdaptiveButton } from "adaptive-material-ui/components/button";
import {
  AdaptiveButtonStack,
  adaptiveButtonStackClasses,
} from "adaptive-material-ui/components/buttonStack";

export default function () {
  return (
    <AdaptiveButtonStack stretchBreakpoint={false}>
      <AdaptiveButton
        className={adaptiveButtonStackClasses.alignStart}
        color="error"
        variant="contained"
      >
        Delete
      </AdaptiveButton>
      <AdaptiveButton variant="contained">Submit</AdaptiveButton>
    </AdaptiveButtonStack>
  );
}

API

MUI Stack API with the following changes:

  • useFlexGap is always true
  • direction is managed internally for the adaptiveness behavior
  • spacing defaults to 2

stretchBreakpoint

Breakpoint or screen width in px and below at which the children will be stretched. This behavior can be enabled/disabled always by setting it to true/false

  • Type: "xs" | "sm" | "md" | "lg" | number | boolean
  • Default: xs

Browser Compatibility