Skip to content

Instantly share code, notes, and snippets.

View kenny-io's full-sized avatar
😀
Always available

Ekene Eze kenny-io

😀
Always available
View GitHub Profile
//src/main.js
import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.config.productionTip = false
<!-- public/index.html-->
<!-- Add Bootstrap and Bootstrap-Vue CSS to the <head> section -->
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"/>
<!-- Add Vue and BootstrapVue scripts just before the closing </body> tag -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
// src/App.js
import React, { Component } from 'react';
import './App.css';
import Login from './components/Login'
class App extends Component {
render() {
return(
<Login/>
);
<!-- src/components/Login -->
...
return (
<div>
<div>
{!this.state.visibleDialog}
{this.state.visibleDialog && (
<Dialog title={"Login Error"} onClose={this.toggleDialog}>
<p style={{ margin: "25px", textAlign: "center" }}>
<!-- src/components/Login -->
...
render() {
const { show } = this.state;
const children = show ? (
<div>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<!-- src/components/Login -->
...
toggleDialog = () => {
this.setState({
visibleDialog: !this.state.visibleDialog
});
};
handleEmailChange(e) {
this.setState({ email: e.target.value});
<!-- src/components/Login -->
import React, { Component } from "react";
import { Push } from "@progress/kendo-react-animation";
import { Dialog, DialogActionsBar } from "@progress/kendo-react-dialogs";
class Login extends Component {
constructor(props) {
super(props);
this.state = {
email: "",
import { Zoom } from '@progress/kendo-react-animation';
...
<Zoom
transitionEnterDuration={500}
transitionExitDuration={800}>
{children}
</Zoom>
...
import { Zoom } from '@progress/kendo-react-animation';
...
<Zoom>
{children}
</Zoom>
...
import { Slide } from '@progress/kendo-react-animation';
...
<Slide>
{children}
</Slide>
...