Switch 开关

<script setup lang="ts">
import { ref } from "vue";
const checked = ref(true);
</script>

<template>
  <Switch v-model="checked" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Switch } from "@reglow/reui";

const checked = ref(true);
</script>

<template>
  <div class="flex items-center gap-4">
    <Switch v-model="checked" disabled />
    <Switch :model-value="false" disabled />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Switch, Label } from "@reglow/reui";

const checked = ref(true);
</script>

<template>
  <div class="flex items-center gap-2">
    <Switch id="notifications" v-model="checked" />
    <Label for="notifications">接收通知</Label>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Switch, Button } from "@reglow/reui";

const checked = ref(false);
</script>

<template>
  <div class="flex items-center gap-4">
    <Switch v-model="checked" />
    <span class="text-sm text-muted-foreground">{{ checked ? "开" : "关" }}</span>
    <div class="flex gap-2">
      <Button size="small" @click="checked = true">开启</Button>
      <Button size="small" variant="outline" @click="checked = false">关闭</Button>
    </div>
  </div>
</template>

import { Switch } from "@reglow/reui";