Switch

<script setup lang="ts">
import { ref } from 'vue';
import { CfSwitch } from '@chufix-design/vue';

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

<template>
<CfSwitch v-model="wifi">Wi-Fi {{ wifi ? 'on' : 'off' }}</CfSwitch>
</template>

import { useState } from 'react';
import { CfSwitch } from '@chufix-design/react';

export default function Demo() {
const [wifi, setWifi] = useState(true);
return (
  <CfSwitch checked={wifi} onChange={(e) => setWifi(e.target.checked)}>
    Wi-Fi {wifi ? 'on' : 'off'}
  </CfSwitch>
);
}

<CfSwitch size="sm">Small</CfSwitch>
<CfSwitch size="md">Medium</CfSwitch>
<CfSwitch size="lg">Large</CfSwitch>

<CfSwitch size="sm">Small</CfSwitch>
<CfSwitch size="md">Medium</CfSwitch>
<CfSwitch size="lg">Large</CfSwitch>

<script setup lang="ts">
import { ref } from 'vue';
import { CfSwitch } from '@chufix-design/vue';

const sync = ref(false);
const loading = ref(false);

async function toggle(v: boolean) {
loading.value = true;
await new Promise((r) => setTimeout(r, 1000));
sync.value = v;
loading.value = false;
}
</script>

<template>
<CfSwitch :model-value="sync" :loading="loading" @change="toggle">
  Auto sync (1s async on click)
</CfSwitch>
<CfSwitch :model-value="true" disabled>Disabled · on</CfSwitch>
</template>

import { useState } from 'react';
import { CfSwitch } from '@chufix-design/react';

export default function Demo() {
const [sync, setSync] = useState(false);
const [loading, setLoading] = useState(false);

async function toggle(e) {
  setLoading(true);
  await new Promise((r) => setTimeout(r, 1000));
  setSync(e.target.checked);
  setLoading(false);
}

return (
  <>
    <CfSwitch checked={sync} loading={loading} onChange={toggle}>
      Auto sync (1s async on click)
    </CfSwitch>
    <CfSwitch checked disabled>Disabled · on</CfSwitch>
  </>
);
}