t-switcher

This is component used to display a boolean toggle. It's used internally in t-input-toggle and can be used as a standalone component by passing the current value.

Basic Usage

export default defineComponent({
  setup() {
    const status = ref(false);

    const onClick = () => {
      status.value = !status.value;
    };

    return () => (
      <TFlex align="center" justify="between">
        <TSwitcher readOnly={isReadonly.value} disabled={isDisabled.value} value={status.value} onClick={onClick} />
        <TButton color="primary" design="flat" size="md" onClick={onClick}>
          {status.value ? "On" : "Off"}
        </TButton>
      </TFlex>
    );
  },
});

Sizes and Colors

<TSwitcher color="alert" size="md" value={true} onClick={() => {}} />

Slot

export default defineComponent({
  setup() {
    const status = ref(true);

    const onClick = () => {
      status.value = !status.value;
    };

    return () => (
      <TSwitcher color="success" size="xl" value={status.value} onClick={onClick}>
        {status.value && <TLoading class="text-white" color="custom" dimensions={14} width={2} />}
      </TSwitcher>
    );
  },
});

API

No options available

Components

t-slider

Components

t-table

Table of Contents