Switch

Visão geral

Switches são componentes de interface do usuário que permitem aos usuários alternar entre dois estados opostos: ligado (on) e desligado (off). Eles são visualmente representados como um botão deslizante que se move para indicar o estado atual. Quando ativados, os switches geralmente mudam de cor e posição, fornecendo um feedback visual claro do estado.

Clique para ativar

Esse está desativado

Clique para visualizar o código

<script setup>
import { ref } from 'vue';
import { LxSwitch } from '@lde/lxcomponents';

const switchLigado = ref(false);
const switchExDisabled = ref(true);
</script>

<template>
	<div class="mb-3">
		<LxSwitch v-model="switchLigado" id="lx-switch-example" :label="`Clique para ${switchLigado ? 'desativar' : 'ativar'}`" />
	</div>
	<div class="mb-3">
		<LxSwitch v-model="switchExDisabled" id="lx-switch-example-disabled" :disabled="true" label="Esse está desativado" />
	</div>
</template>

Propriedades

Nome	Descrição	Tipo	Padrão
id	Seletor CSS id	String	-
label	Texto que ficará ao lado do Switch	String	-
disabled	Se o mesmo será desabilitado	Boolean	false
label-position	Por padrão a label fica à direita, a não ser que envie 'left' aqui	String	'right'

Playground

Playground label

modelValue: false

Nome	Controle
disabled
label
labelPosition	left right

Clique para exibir o código

<script setup>
import { ref } from 'vue';
import { LxSwitch } from '@lde/lxcomponents';

const switchValue = ref(false);
const disabled = ref(false);
const labelPosition = ref('right');
const label = ref('Playground label');
</script>

<template>
	<div class="row">
		<div class="col-12">
			<LxSwitch v-model="switchValue" :disabled="disabled" :label="label" :label-position="labelPosition" />
		</div>
	</div>

	<div class="row">
		<div class="col-12">
			<strong>modelValue: </strong>
			<small>{{ switchValue }}</small>
		</div>
	</div>

	<!-- playground controls -->
	<table style="max-height: 50vh">
		<thead>
			<tr>
				<th style="width: 140px">Nome</th>
				<th class="">Controle</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					<label class="form-label m-0"> disabled </label>
				</td>
				<td>
					<input v-model="disabled" class="form-check-input" type="checkbox" />
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">label</label>
				</td>
				<td>
					<input v-model="label" type="text" class="form-control" />
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0"> labelPosition </label>
				</td>
				<td>
					<div class="form-check">
						<input id="left" v-model="labelPosition" value="left" class="form-check-input" type="radio" />
						<label class="form-check-label" for="left"> left </label>
					</div>
					<div class="form-check">
						<input id="right" v-model="labelPosition" value="right" class="form-check-input" type="radio" />
						<label class="form-check-label" for="right"> right </label>
					</div>
				</td>
			</tr>
		</tbody>
	</table>
</template>