flex-element-tabs
Version:
flex-element-tabs is a versatile JavaScript library for creating dynamic tabs in web interfaces. It offers customizable, lightweight, and easy-to-integrate tab components, enhancing user navigation and content organization in web applications.
39 lines • 1.75 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
require("./TabsContainer.css");
var TabsContainer = function (_a) {
var active = _a.active, children = _a.children, headClass = _a.headClass, itemClass = _a.itemClass, containerClass = _a.containerClass;
var _b = (0, react_1.useState)(0), Show = _b[0], setShow = _b[1];
(0, react_1.useEffect)(function () {
if (active === undefined) {
setShow(1);
}
else {
var ch = (children || []);
if (active <= ch.length) {
if (active === 0) {
setShow(1);
}
else {
setShow(active);
}
}
else {
setShow(1);
}
}
}, [active]);
return (react_1.default.createElement("div", null,
react_1.default.createElement("div", { className: "tabs-head ".concat(headClass) }, (children || []).map(function (d, x) {
return (react_1.default.createElement("div", { className: "tabs-item ".concat(Show === (x + 1) ? "active" : "", " ").concat(itemClass), key: "tabs-item-".concat(x), onClick: function () { setShow(x + 1); } }, d.props.title));
})),
(children || []).map(function (d, x) {
return (react_1.default.createElement("div", { className: "tabs-container ".concat(Show === (x + 1) ? "active" : "", " ").concat(containerClass), key: "tabs-container-".concat(x) },
d.props.children,
console.log(d)));
})));
};
exports.default = TabsContainer;
//# sourceMappingURL=TabsContainer.js.map