Switch

<script setup lang="ts">
    import { Switch } from '@fibrous/semi-ui-vue';

    const log = (checked: boolean) => console.log(checked);
</script>

<template>
    <div>
        <Switch aria-label="a switch for demo" @change="log" />
        <br />
        <Switch aria-label="a switch for semi demo" defaultChecked @change="log" />
    </div>
</template>

<script setup lang="ts">
    import { Space, Switch } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <Space :style="{ marginBottom: '10px', display: 'block' }">
            <Switch aria-label="a switch for demo" size="small" />
            <Switch aria-label="a switch for demo" defaultChecked size="small" />
            <Switch aria-label="a switch for demo" loading size="small" />
            <Switch aria-label="a switch for demo" defaultChecked loading size="small" />
        </Space>
        <Space :style="{ marginBottom: '10px', display: 'block' }">
            <Switch aria-label="a switch for demo" />
            <Switch aria-label="a switch for demo" defaultChecked />
            <Switch aria-label="a switch for demo" loading />
            <Switch aria-label="a switch for demo" defaultChecked loading />
        </Space>
        <Space>
            <Switch aria-label="a switch for demo" size="large" />
            <Switch aria-label="a switch for demo" defaultChecked size="large" />
            <Switch aria-label="a switch for demo" loading size="large" />
            <Switch aria-label="a switch for demo" defaultChecked loading size="large" />
        </Space>
    </div>
</template>

<script setup lang="ts">
    import { Switch } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <Switch aria-label="a switch for demo" disabled />
        <br />
        <Switch aria-label="a switch for demo" disabled modelValue />
    </div>
</template>

<script setup lang="ts">
    import { Switch } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <Switch aria-label="带开关文字的开关">
            <template #checkedText>开</template>
            <template #uncheckedText>关</template>
        </Switch>
        <Switch aria-label="带符号文字的开关" :style="{ marginLeft: '5px' }">
            <template #checkedText>｜</template>
            <template #uncheckedText>〇</template>
        </Switch>
        <br />
        <br />
        <Switch aria-label="带开关文字的开关，已开启" defaultChecked>
            <template #checkedText>开</template>
            <template #uncheckedText>关</template>
        </Switch>
        <Switch aria-label="带符号文字的开关，已开启" defaultChecked :style="{ marginLeft: '5px' }">
            <template #checkedText>｜</template>
            <template #uncheckedText>〇</template>
        </Switch>
        <br />
        <br />
        <Switch aria-label="大号带开关文字的开关" size="large">
            <template #checkedText>开</template>
            <template #uncheckedText>关</template>
        </Switch>
        <Switch aria-label="大号带符号文字的开关" size="large" :style="{ marginLeft: '5px' }">
            <template #checkedText>｜</template>
            <template #uncheckedText>〇</template>
        </Switch>
        <br />
        <br />
        <Switch aria-label="大号带开关文字的开关，已开启" defaultChecked size="large">
            <template #checkedText>开</template>
            <template #uncheckedText>关</template>
        </Switch>
        <Switch aria-label="大号带符号文字的开关，已开启" defaultChecked size="large" :style="{ marginLeft: '5px' }">
            <template #checkedText>｜</template>
            <template #uncheckedText>〇</template>
        </Switch>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { Switch, Typography } from '@fibrous/semi-ui-vue';

    const { Title } = Typography;
    const open = ref<boolean>();
</script>

<template>
    <div :style="{ display: 'flex', alignItems: 'center' }">
        <Title :heading="6" :style="{ margin: '8px' }">{{ open ? '已开启' : '已关闭' }}</Title>
        <Switch v-model="open" aria-label="a switch for demo" />
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { Switch } from '@fibrous/semi-ui-vue';

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

<template>
    <Switch v-model="checked" aria-label="a switch for demo" />
</template>

<script setup lang="ts">
    import { Switch } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <Switch aria-label="Loading switch" loading />
        <br />
        <Switch aria-label="Loading switch, on" defaultChecked loading />
    </div>
</template>