screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> const { useState } = React; function App() { const [tabs, setTabs] = useState([ { heading: "Font Awesome Icons", content: "This is fontawesomeicons.com", }, { heading: "Tutorials Plane", content: "This is tutorialsplane.com", }, ]); const [activeTabIndex, setActiveTabIndex] = useState(0); const setActiveTab = (index) => { setActiveTabIndex(index); }; const addTab = () => { const newTab = { heading: `Tab ${tabs.length + 1}`, content: "", // Add initial content here }; setTabs([...tabs, newTab]); setActiveTabIndex(tabs.length); // Use the functional form to ensure the updated value is correct }; const removeTab = (index) => { const updatedTabs = tabs.filter((tab, i) => i !== index); setTabs(updatedTabs); setActiveTabIndex(updatedTabs.length ? 0 : null); // Use null instead of 0 when no tabs are left }; const tabTitle = (index) => { return `Tab ${index + 1}`; }; return ( <div className='container'> <h3>React Dynamic Tab add or delete method</h3> <div className="tabs"> <ul className="tab-header"> {tabs.map((tab, index) => ( <li key={index} // Use a unique key for each list item className={activeTabIndex === index ? "active-tab" : ""} onClick={() => setActiveTab(index)} > {tabTitle(index)} </li> ))} <span className="add-remove-icons"> <span className="add-tab-icon" onClick={addTab}> + Add </span> {activeTabIndex !== null && ( <span className="remove-tab-icon" onClick={() => removeTab(activeTabIndex)} > × Remove </span> )} </span> </ul> <div className="tab-body"> {tabs.map((tab, index) => ( <div className="tab" key={index} style={{ display: activeTabIndex === index ? 'block' : 'none' }}> <input value={tab.heading} onChange={(e) => { const newTabs = [...tabs]; newTabs[index].heading = e.target.value; setTabs(newTabs); }} /> <textarea value={tab.content} onChange={(e) => { const newTabs = [...tabs]; newTabs[index].content = e.target.value; setTabs(newTabs); }} ></textarea> </div> ))} </div> </div> </div> ); } ReactDOM.render(<App />, document.getElementById("app")); </script> <style> .container { max-width: 800px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } h3 { margin-bottom: 20px; text-align: center; color: #333; } /* Improved styling for the tabs container */ .tabs { border: 1px solid #ddd; border-radius: 5px; overflow-x: auto; /* Enable horizontal scrolling for overflowing tabs */ } /* Styling for the tab header */ .tab-header { list-style: none; display: flex; align-items: center; padding: 10px; border-bottom: 1px solid #ddd; overflow-x: auto; /* Enable horizontal scrolling for overflowing tabs */ white-space: nowrap; /* Prevent tabs from wrapping to the next line */ } /* Styling for each tab */ .tab-header li { cursor: pointer; padding: 10px; border-radius: 5px; transition: background-color 0.3s ease; margin-right: 5px; /* Add some space between tabs */ min-width: 120px; /* Set a minimum width for each tab */ text-overflow: ellipsis; /* Show ellipsis (...) for long tab names */ overflow: hidden; /* Hide overflowing tab names */ white-space: nowrap; text-align: center; } /* Hover styles for tabs */ .tab-header li:hover { background-color: #f2f2f2; color: #000; } /* Active tab styles */ .tab-header .active-tab { background-color: #007bff; color: #fff; } /* Styling for add and remove icons */ .add-remove-icons { display: flex; align-items: center; } .add-tab-icon, .remove-tab-icon { cursor: pointer; padding: 8px 15px; border-radius: 5px; margin-right: 5px; transition: background-color 0.3s ease; color: #fff; /* Added color for the icons */ } .add-tab-icon { background-color: #28a745; /* Green color for Add button */ } .add-tab-icon:hover, .remove-tab-icon:hover { background-color: #f2f2f2; color: #000; /* Added color for hover effect */ } .remove-tab-icon { background-color: #dc3545; /* Red color for Remove button */ } .tab-body { padding: 20px; } .tab input, .tab textarea { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; } .tab textarea { resize: vertical; } </style> </body> </html>