@yandex/ui/esm/Tumbler/__examples__/label.js

Yandex UI components

import { __read } from "tslib";
import React, { useState } from 'react';
import { Tumbler } from '@yandex-lego/components/Tumbler/desktop/bundle';
export var Label = function () {
    var _a = __read(useState(false), 2), checked1 = _a[0], setChecked1 = _a[1];
    var _b = __read(useState(false), 2), checked2 = _b[0], setChecked2 = _b[1];
    var _c = __read(useState(false), 2), checked3 = _c[0], setChecked3 = _c[1];
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { style: { marginBottom: 8 } },
            React.createElement(Tumbler, { size: "m", view: "default", checked: checked1, onChange: function () { return setChecked1(!checked1); }, labelBefore: "labelBefore" })),
        React.createElement("div", { style: { marginBottom: 8 } },
            React.createElement(Tumbler, { size: "m", view: "default", checked: checked2, onChange: function () { return setChecked2(!checked2); }, labelAfter: "labelAfter" })),
        React.createElement("div", { style: { marginBottom: 8 } },
            React.createElement(Tumbler, { size: "m", view: "default", checked: checked3, onChange: function () { return setChecked3(!checked3); }, labelBefore: React.createElement("svg", { "aria-label": "labelBefore", width: "16", height: "16", xmlns: "http://www.w3.org/2000/svg" },
                    React.createElement("path", { d: "M3.5 7.003a1.5 1.5 0 0 0-1.5 1.5v6a1.5 1.5 0 0 0 1.5 1.5h9a1.5 1.5 0 0 0 1.5-1.5v-6a1.5 1.5 0 0 0-1.5-1.5H12v-2a4 4 0 0 0-8 0v2h-.5zm2.5-2a2 2 0 1 1 4 0V7H6V5.003z", fill: "currentColor" })), labelAfter: React.createElement("svg", { "aria-label": "labelAfter", width: "16", height: "16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                    React.createElement("path", { d: "M11 5.003a1 1 0 0 0 1-1 4 4 0 0 0-8 0v3h-.5a1.5 1.5 0 0 0-1.5 1.5v6a1.5 1.5 0 0 0 1.5 1.5h9a1.5 1.5 0 0 0 1.5-1.5v-6a1.5 1.5 0 0 0-1.5-1.5H6v-3a2 2 0 1 1 4 0 1 1 0 0 0 1 1z", fill: "currentColor" })) }))));
};