Segmented

const segmentedFixture = {
  id: "segmented",
  defaultValue: "grid",
  options: [
    { value: "grid", label: "Grid" },
    { value: "list", label: "List" },
    { value: "board", label: "Board" },
  ],
} as const;
 
import { Segmented } from "@grassroot/ui-react";
 
export default function SegmentedDemo() {
  return (
    <div>
      <Segmented
        defaultValue={segmentedFixture.defaultValue}
        options={[...segmentedFixture.options]}
      />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
const segmentedFixture = {
  id: "segmented",
  defaultValue: "grid",
  options: [
    { value: "grid", label: "Grid" },
    { value: "list", label: "List" },
    { value: "board", label: "Board" },
  ],
} as const;
 
import { Segmented } from "@grassroot/ui-vue";
const value = ref(segmentedFixture.defaultValue);
</script>
<template>
  <div><Segmented v-model="value" :options="[...segmentedFixture.options]" /></div>
</template>

import { Component } from "@angular/core";
const segmentedFixture = {
  id: "segmented",
  defaultValue: "grid",
  options: [
    { value: "grid", label: "Grid" },
    { value: "list", label: "List" },
    { value: "board", label: "Board" },
  ],
} as const;
 
import { GrassrootSegmented } from "@grassroot/ui-angular";
@Component({
  selector: "app-segmented-demo",
  standalone: true,
  imports: [GrassrootSegmented],
  template: `<div>
    <grassroot-segmented [options]="fixture.options" [value]="fixture.defaultValue" />
  </div>`,
})
export class SegmentedDemoComponent {
  protected readonly fixture = segmentedFixture;
}
export default SegmentedDemoComponent;

<script lang="ts">
  const segmentedFixture = {
    id: "segmented",
    defaultValue: "grid",
    options: [
      { value: "grid", label: "Grid" },
      { value: "list", label: "List" },
      { value: "board", label: "Board" },
    ],
  } as const;
 
  import { Segmented } from "@grassroot/ui-svelte";
</script>
 
<div>
  <Segmented options={[...segmentedFixture.options]} defaultValue={segmentedFixture.defaultValue} />
</div>

/** @jsxImportSource solid-js */
const segmentedFixture = {
  id: "segmented",
  defaultValue: "grid",
  options: [
    { value: "grid", label: "Grid" },
    { value: "list", label: "List" },
    { value: "board", label: "Board" },
  ],
} as const;
 
import { Segmented } from "@grassroot/ui-solid";
export default function SegmentedDemo() {
  return (
    <div>
      <Segmented
        options={[...segmentedFixture.options]}
        defaultValue={segmentedFixture.defaultValue}
      />
    </div>
  );
}