Switch ​

<template>
  <tu-switch v-model="value" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

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

<template>
  <tu-switch v-model="value" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

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

<template>
  <tu-switch v-model="value1" />

  <tu-switch class="ml-2" v-model="value2" type="round" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value1 = ref(false);
const value2 = ref(false);
</script>

<template>
  <tu-switch v-model="value1" />

  <tu-switch class="ml-2" v-model="value2" type="round" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value1 = ref(false);
const value2 = ref(false);
</script>

<template>
  <tu-switch v-model="value1" />

  <tu-switch class="ml-2" v-model="value2" effect="inset" />

  <tu-switch class="ml-2" v-model="value3" effect="bordered" />

  <tu-switch class="ml-2" v-model="value4" effect="outlined" />

  <tu-switch class="ml-2" v-model="value5" effect="flat" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value1 = ref(false);
const value2 = ref(false);
const value3 = ref(false);
const value4 = ref(false);
const value5 = ref(false);
</script>

<template>
  <tu-switch v-model="value1" />

  <tu-switch class="ml-2" v-model="value2" effect="inset" />

  <tu-switch class="ml-2" v-model="value3" effect="bordered" />

  <tu-switch class="ml-2" v-model="value4" effect="outlined" />

  <tu-switch class="ml-2" v-model="value5" effect="flat" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value1 = ref(false);
const value2 = ref(false);
const value3 = ref(false);
const value4 = ref(false);
const value5 = ref(false);
</script>

<template>
  <tu-switch v-model="value1" disabled />
  <tu-switch v-model="value2" disabled class="ml-2" />
  <tu-switch v-model="value3" disabled type="round" class="ml-4" />
  <tu-switch v-model="value4" disabled type="round" class="ml-2" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value1 = ref(false);
const value2 = ref(true);
const value3 = ref(false);
const value4 = ref(true);
</script>

<template>
  <tu-switch v-model="value1" disabled />
  <tu-switch v-model="value2" disabled class="ml-2" />
  <tu-switch v-model="value3" disabled type="round" class="ml-4" />
  <tu-switch v-model="value4" disabled type="round" class="ml-2" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value1 = ref(false);
const value2 = ref(true);
const value3 = ref(false);
const value4 = ref(true);
</script>

<template>
  <tu-switch v-model="value4" active-text="On" inactive-text="Off" />

  <tu-switch
    class="ml-2"
    v-model="value1"
    inline-prompt
    active-text="On"
    inactive-text="Off"
  />

  <tu-switch
    v-model="value2"
    class="ml-2"
    width="70"
    inline-prompt
    active-text="Exceeding ellipsis"
    inactive-text="Exceeding ellipsis"
  />

  <tu-switch
    class="ml-2"
    v-model="value3"
    inline-prompt
    active-text="Full content"
    inactive-text="Full content"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value1 = ref(false);
const value2 = ref(false);
const value3 = ref(false);
const value4 = ref(false);
</script>

<template>
  <tu-switch v-model="value4" active-text="On" inactive-text="Off" />

  <tu-switch
    class="ml-2"
    v-model="value1"
    inline-prompt
    active-text="On"
    inactive-text="Off"
  />

  <tu-switch
    v-model="value2"
    class="ml-2"
    width="70"
    inline-prompt
    active-text="Exceeding ellipsis"
    inactive-text="Exceeding ellipsis"
  />

  <tu-switch
    class="ml-2"
    v-model="value3"
    inline-prompt
    active-text="Full content"
    inactive-text="Full content"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value1 = ref(false);
const value2 = ref(false);
const value3 = ref(false);
const value4 = ref(false);
</script>

<template>
  <tu-switch
    v-model="value1"
    inline-prompt
    :active-icon="Check"
    :inactive-icon="Close"
  />

  <tu-switch
    class="ml-2"
    v-model="value2"
    :active-icon="Check"
    :inactive-icon="Close"
  />
</template>

<script lang="ts" setup>
import { Check, Close } from '@tu-view-plus/icons-vue';
import { ref } from 'vue';

const value1 = ref(false);
const value2 = ref(false);
</script>

<template>
  <tu-switch
    v-model="value1"
    inline-prompt
    :active-icon="Check"
    :inactive-icon="Close"
  />

  <tu-switch
    class="ml-2"
    v-model="value2"
    :active-icon="Check"
    :inactive-icon="Close"
  />
</template>

<script lang="ts" setup>
import { Check, Close } from '@tu-view-plus/icons-vue';
import { ref } from 'vue';

const value1 = ref(false);
const value2 = ref(false);
</script>

<template>
  <tu-tooltip :content="`current value is: ${value}`" placement="top">
    <tu-switch v-model="value" active-value="100" inactive-value="0" />
  </tu-tooltip>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value = ref('0');
</script>

<template>
  <tu-tooltip :content="`current value is: ${value}`" placement="top">
    <tu-switch v-model="value" active-value="100" inactive-value="0" />
  </tu-tooltip>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value = ref('0');
</script>

<template>
  <tu-switch v-model="value1" loading />
  <tu-switch v-model="value2" loading type="round" class="ml-2" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value1 = ref(false);
const value2 = ref(false);
</script>

<template>
  <tu-switch v-model="value1" loading />
  <tu-switch v-model="value2" loading type="round" class="ml-2" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value1 = ref(false);
const value2 = ref(false);
</script>

<template>
  <tu-switch
    v-model="value1"
    :loading="loading1"
    :before-change="beforeChange1"
  />
  <tu-switch
    v-model="value2"
    class="ml-2"
    :loading="loading2"
    :before-change="beforeChange2"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { TuMessage } from 'tu-view-plus';

const value1 = ref(false);
const value2 = ref(false);
const loading1 = ref(false);
const loading2 = ref(false);

const beforeChange1 = () => {
  loading1.value = true;
  return new Promise((resolve) => {
    setTimeout(() => {
      loading1.value = false;
      TuMessage.success('switch success！');
      return resolve(true);
    }, 1000);
  });
};

const beforeChange2 = () => {
  loading2.value = true;
  return new Promise((_, reject) => {
    setTimeout(() => {
      loading2.value = false;
      TuMessage.error('switch failed！');
      return reject(new Error('Error'));
    }, 1000);
  });
};
</script>

<template>
  <tu-switch
    v-model="value1"
    :loading="loading1"
    :before-change="beforeChange1"
  />
  <tu-switch
    v-model="value2"
    class="ml-2"
    :loading="loading2"
    :before-change="beforeChange2"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { TuMessage } from 'tu-view-plus';

const value1 = ref(false);
const value2 = ref(false);
const loading1 = ref(false);
const loading2 = ref(false);

const beforeChange1 = () => {
  loading1.value = true;
  return new Promise((resolve) => {
    setTimeout(() => {
      loading1.value = false;
      TuMessage.success('switch success！');
      return resolve(true);
    }, 1000);
  });
};

const beforeChange2 = () => {
  loading2.value = true;
  return new Promise((_, reject) => {
    setTimeout(() => {
      loading2.value = false;
      TuMessage.error('switch failed！');
      return reject(new Error('Error'));
    }, 1000);
  });
};
</script>

<template>
  <tu-row :gutter="20" class="demo-switch-row">
    <tu-col :span="3">
      <tu-switch v-model="value1" size="mini" />
    </tu-col>

    <tu-col :span="3">
      <tu-switch v-model="value2" size="small" />
    </tu-col>

    <tu-col :span="3">
      <tu-switch v-model="value3" />
    </tu-col>

    <tu-col :span="3">
      <tu-switch v-model="value4" size="large" />
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const value1 = ref(false);
const value2 = ref(false);
const value3 = ref(false);
const value4 = ref(false);
</script>

<style>
.demo-switch-row {
  align-items: baseline;
}
</style>

<template>
  <tu-row :gutter="20" class="demo-switch-row">
    <tu-col :span="3">
      <tu-switch v-model="value1" size="mini" />
    </tu-col>

    <tu-col :span="3">
      <tu-switch v-model="value2" size="small" />
    </tu-col>

    <tu-col :span="3">
      <tu-switch v-model="value3" />
    </tu-col>

    <tu-col :span="3">
      <tu-switch v-model="value4" size="large" />
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const value1 = ref(false);
const value2 = ref(false);
const value3 = ref(false);
const value4 = ref(false);
</script>

<style>
.demo-switch-row {
  align-items: baseline;
}
</style>