Thursday, April 29, 2021

Edward Lance Lorilla

Edward Lance Lorilla

【VUE.JS】tab switch effects

Posted: 29 Apr 2021 02:29 AM PDT

<template id="tab">
<div class="bookcircle-header">
<ul class="wrapper" :class="headerActive == 0 ? 'friend' : 'booklist'">
<li @click="headerChange(0)" :class="headerActive == 0 ? 'active' : ''">
friends
</li>
<li @click="headerChange(1)" :class="headerActive == 1 ? 'active' : ''">
list
</li>
</ul>
</div>
</template>
<div id="app">
<tab @change="tabChange($event)"></tab>
</div>
view raw index.html hosted with ❤ by GitHub
Vue.component('tab', {
template: '#tab',
data() {
return {
headerActive: 0,
};
},
computed: {},
created() {},
mounted() {
this.$emit("change", this.headerActive);
},
methods: {
headerChange(index) {
this.headerActive = index;
this.$emit("change", index);
},
},
})
new Vue({
data:{
return:{
}
},
methods:{
tabChange(event){
console.log(event)
}
}
}).$mount("#app")
view raw script.js hosted with ❤ by GitHub
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
view raw scripts hosted with ❤ by GitHub
.bookcircle-header {
height: 42px;
display: flex;
justify-content: center;
align-items: center;
.wrapper {
width: 286px;
font-size: 14px;
height: 29px;
color: #1489fe;
border: 1px solid #1489fe;
border-radius: 14px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
box-sizing: border-box; // 解决边框溢出，将border包含在盒子内部
li {
flex: 1;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
.active {
color: white;
}
&::before {
content: "";
width: 143px;
height: 100%;
background-color: #1489fe;
position: absolute;
top: 0px;
left: 0px;
border-radius: 13px 0px 0px 13px;
z-index: 1;
transition: all 0.3s;
}
&.firend::before {
transform: translateX(0);
border-radius: 13px 0px 0px 13px;
}
&.booklist::before {
transform: translateX(100%);
border-radius: 0px 13px 13px 0px;
}
}
}
view raw style.scss hosted with ❤ by GitHub
view raw tab-switch-effects.markdown hosted with ❤ by GitHub

【FLUTTER ANDROID STUDIO and IOS】Confetti Animation

Posted: 29 Apr 2021 01:58 AM PDT

 import 'dart:math';

import 'package:confetti/confetti.dart';
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
        // This makes the visual density adapt to the platform that you run
        // the app on. For desktop platforms, the controls will be smaller and
        // closer together (more dense) than on mobile platforms.
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ConfettiController controllerTopCenter;

  @override
  void initState() {
    super.initState();
    setState(() {
      initController();
    });
  }

  void initController() {
    controllerTopCenter =
        ConfettiController(duration: const Duration(seconds: 1));
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.pink[50],
      appBar: AppBar(
        backgroundColor: Colors.cyan,
        title: Text("Flutter Confetti Animation Demo"),
        automaticallyImplyLeading: false,
      ),

      body: SafeArea(
        child: Stack(
          children: <Widget>[
            buildConfettiWidget(controllerTopCenter, pi / 1),
            buildConfettiWidget(controllerTopCenter, pi / 4),
            Align(
              alignment: Alignment.center,
              child: Column(
                children: <Widget>[
                  Image.asset(
                    "assets/logo.png",
                    width: MediaQuery
                        .of(context)
                        .size
                        .width * 0.5,
                    height: MediaQuery
                        .of(context)
                        .size
                        .height * 0.5,
                  ),
                ],
              ),
            ),
            buildButton()
          ],
        ),
      ),
    );
  }

  Align buildButton() {
    return Align(
      alignment: Alignment.bottomCenter,
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 100),
        child: RaisedButton(
          onPressed: () {
            controllerTopCenter.play();
          },
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(20)),
          color: Colors.red,
          textColor: Colors.white,
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text(
              "Congratulations!",
              style: TextStyle(
                fontSize: 30,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }

  Align buildConfettiWidget(controller, double blastDirection) {
    return Align(
      alignment: Alignment.topCenter,
      child: ConfettiWidget(
        maximumSize: Size(30, 30),
        shouldLoop: false,
        confettiController: controller,
        blastDirection: blastDirection,
        blastDirectionality: BlastDirectionality.directional,
        maxBlastForce: 20,
        // set a lower max blast force
        minBlastForce: 8,
        // set a lower min blast force
        emissionFrequency: 1,
        numberOfParticles: 8,
        // a lot of particles at once
        gravity: 1,
      ),
    );
  }
}

【VISUAL VB NET】Safe mode detection

Posted: 29 Apr 2021 01:11 AM PDT

 Imports System

Imports System.Collections.GenericImports System.ComponentModelImports System.DataImports System.DrawingImports System.LinqImports System.TextImports System.Threading.TasksImports System.Windows.Forms' make sure that using System.Diagnostics; is included Imports System.Diagnostics' make sure that using System.Security.Principal; is included Imports System.Security.Principal Public Class Form1 Public Sub New() MyBase.New() InitializeComponent() End Sub Private Sub button1_Click(sender As Object, e As EventArgs) Handles button1.Click If SystemInformation.BootMode <> BootMode.Normal Then MessageBox.Show("System is running in safe mode") Else MessageBox.Show("System is running in normal boot mode") End If End Sub Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load End SubEnd Class
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)