Home ReactJS Create tab with react cdn and babel

Create tab with react cdn and babel

Read

index.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabs</title>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
        class App extends React.Component {
            state = {
                bg: 'green',
                tab_props: {
                    img_src: 'https://c.pxhere.com/photos/b2/fb/shed_bike_bicycle_shack_worn-98984.jpg!d',
                    img_title:'Image title one',
                    img_para: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus consectetur modi laborum asperiores? Earum sequi eligendi quae sunt deserunt ut!'

                }
            }
            tabElementSet(img_src, img_title, img_para){
                this.setState({
                    tab_props: {
                        img_src,
                        img_title,
                        img_para
                    }
                });
            }

            render() {
                return (
                    <React.Fragment>
                        <div className="con" style={{ backgroundColor: this.state.bg }}>
                            <nav className="nav">
                                <ul>
                                    <li><a href="#" onClick={()=>this.tabElementSet('https://c.pxhere.com/photos/b2/fb/shed_bike_bicycle_shack_worn-98984.jpg!d', 'Image title One', 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus consectetur modi laborum asperiores? Earum sequi eligendi quae sunt deserunt ut!')}>Tab 1</a></li>
                                    <li><a href="#" onClick={()=>this.tabElementSet('https://c.pxhere.com/photos/aa/6c/Avocado_Avocados_Chives_Cucumber_Cucumbers_Diet_Foods_Health-1620028.jpg!s', 'Image title two', 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus consectetur modi laborum asperiores? Earum sequi eligendi quae sunt deserunt ut!')}>Tab 2</a></li>
                                    <li><a href="#" onClick={()=>this.tabElementSet('https://c.pxhere.com/photos/99/b3/Camera_Holding_Konica_Male_Man_Outdoors_Vintage-1619998.jpg!s', 'Image title three', 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus consectetur modi laborum asperiores? Earum sequi eligendi quae sunt deserunt ut!')}>Tab 3</a></li>
                                </ul>
                            </nav>
                            <div className="tab-element">
                                <div className="tab-1-el">
                                    <div className="img-con">
                                        <img src={this.state.tab_props.img_src} alt="Image" />
                                    </div>
                                    <div className="img-docs">
                                        <h2>{this.state.tab_props.img_title}</h2>
                                        <p>{this.state.tab_props.img_para}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </React.Fragment>
                );
            }
        }
        ReactDOM.render(<App />, document.getElementById('app'));
    </script>
</body>

</html>

style.css


* {
  padding: 0;
  margin: 0;
}

.con {
  padding: 10px;
  margin: 200px;
}
.con .nav ul li {
  display: inline-block;
  list-style: none;
  padding: 20px 20px;
}
.con .nav ul li:hover {
  transition: ease-in-out 1.5s;
  background: #01967a;
}
.con .nav ul li a {
  color: white;
  text-decoration: none;
}
.con .tab-element {
  border-top: solid 10px #01967a;
}
.con .tab-element .tab-1-el {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.con .tab-element .tab-1-el .img-con img {
  width: 200px;
  height: 150px;
  object-fit: cover;
  border: solid 10px #01967a;
}
.con .tab-element .tab-1-el .img-docs {
  color: white;
  padding: 0 20px;
}

/*# sourceMappingURL=style.css.map */

No comments:

Subscribe to: Post Comments ( Atom )