namerr

Проектный план

Этап 1: Подготовка и Планирование

Стек

Технологии

Архитектура

namerr

шаблоны

Explore

toggleLabel

ToggleLabel

Компонент ToggleLabel представляет собой переключатель с анимацией, который позволяет пользователю выбирать между двумя состояниями. Ниже приведена документация для этого компонента:

import React, { useState } from 'react';

import { motion, AnimatePresence } from 'framer-motion';

/**

* Компонент ToggleLabel представляет собой переключатель с анимацией.

* @param {Object} props - Свойства компонента.

* @param {string} props.labelText - Текст метки переключателя.

* @returns {JSX.Element} - JSX-элемент компонента ToggleLabel.

const ToggleLabel = ({ labelText }) => {

const [selected, setSelected] = useState(false);

/**

* Обработчик события клика на переключатель.

* Изменяет состояние выбранного значения.

const toggleSelected = () => {

setSelected(!selected);

};

/**

* Варианты анимации для переключателя.

const animationVariants = {

on: { opacity: 1 },

off: { opacity: 0.5 },

};

return (

<motion.div

initial="off"

animate={selected ? 'on' : 'off'}

variants={animationVariants}

transition={{ type: 'spring', mass: 1, stiffness: 100, damping: 15 }}

onClick={toggleSelected}

className={`inline-flex items-center gap-2 px-2 py-1 rounded-md cursor-pointer ${

selected

? 'bg-primary-300 text-white'

: 'bg-blue-50 text-default-900'

}`}

<span className="text-xs font-medium leading-4">{labelText}</span>

</motion.div>

</AnimatePresence>

);

};

export default ToggleLabel;

Вы можете использовать этот компонент, передавая ему свойство labelText с текстом метки переключателя. Компонент будет отображать переключатель с анимацией, которая меняет прозрачность в зависимости от выбранного состояния. При клике на переключатель состояние будет изменяться.

Пример использования компонента:

jsx

import React from 'react';

import ToggleLabel from './ToggleLabel';

const App = () => {

return (

<div>

</div>

);

};

export default App;

Load content from whimsical.com?

Loading external content may reveal information to 3rd parties. Learn more

Allow

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.