pointer-events: none

目的

讓元素可以被穿透

.box
 .back
 .front 
  |hover
  br
  |me
.box
 width: 300px
 height: 300px
 position: relative
 
.back
 background-color: teal
 width: 100px
 height: 100px
 &:hover
  background-color: darkgreen
 
 
.front
 background-color: skyblue
 width: 100px
 height: 100px
 position: absolute
 top: 0
 left: 50px
 opacity: 0.5
 pointer-events: none

Display

.
hover
me

【JavaScript】Item Picker

結構

  • 用select標籤做items,size的值給大一點讓item-box可以變長
  • 已選取item的背景色要用線性漸層
  • #mySelect.options[i] 可以回傳#mySelect的第i個選項
  • #mySelect.selectedIndex可以回傳目前被選取的序列
table.item-picker
 tr
  th 未加入功能清單
  th
  th 已加入功能清單
 tr
  td
   select(size="6" name="source1").pick-list
    option(value="0") 平台資訊審核
    option(value="1") 手續費審核
    option(value="2") 使用者管理
    option(value="3") 角色管理
  td
   button.add →
   br
   button.delete ←
  td
   select(size="6" name="target1").pick-list
    option(value="4") 平台資訊設定
    option(value="5") 手續費設定
    option(value="6") 顧客約定管理
$dark: #439E96
$turquoise: #50BBB6
$light: #E7F2F1
$black: #596D6C
$gray: #CCE0DE

*
 // border: 1px solid #000

// .iten-picker
//  overflow: auto
 
.add,.deduct
 display: block


 
table
 margin-top: 100px
 margin-right: auto
 margin-left: auto
 text-align: center
 
th
 color: $turquoise
 font-size: 16px
td
 select
  width: 150px
  font-size: 14px
  color: $black
  border-radius: 3px
  border-style: dashed
  &:focus
   outline: none
   box-shadow: 0px 1px 10px 0px #cce0de
  option
   padding: 2px 10px
   transition: color 0.5s
   &:checked
    background: $gray linear-gradient(0deg, $gray 0%, $gray 100%)
   &:hover
    color: $turquoise
  &:focus
   option
    &:checked
     background: $turquoise linear-gradient($turquoise 0%, $turquoise 100%)
     color: #fff
    
button
 transition-duration: 0.5s
 height: 30px
 width: 30px
 border-radius: 100%
 text-align: center
 border-color: $gray
 color: $turquoise
 outline: none
 
 &:hover
  background-color: $turquoise
  color: #fff
  border-color: $turquoise
const sourceItem=document.querySelector("select[name='source1']");
const targetItem=document.querySelector("select[name='target1']");
const addbtn=document.querySelector(".add");
const deletebtn=document.querySelector(".delete");

addbtn.addEventListener("click", function(){
 const theItem=sourceItem.options[sourceItem.selectedIndex]
 if(theItem){
  sourceItem.removeChild(theItem);
  targetItem.appendChild(theItem);
 }
 
});

deletebtn.addEventListener("click", function(){
 // targetItem.focus();
 const theItem=targetItem.options[targetItem.selectedIndex]
 if(theItem){
   targetItem.removeChild(theItem);
   sourceItem.appendChild(theItem);
 }

 
});

Display

CODEPEN

【CSS】px to rem

px rem
10px 0.625rem
11px 0.6875rem
12px 0.75rem
13px 0.8125rem
14px 0.875rem
15px 0.9375rem
16px 1rem
17px 1.0625rem
18px 1.125rem
19px 1.1875rem
20px 1.25rem
21px 1.3125rem
22px 1.375rem
23px 1.4375rem
24px 1.5rem
25px 1.5625rem
26px 1.625rem
27px 1.6875rem
28px 1.75rem
29px 1.8125rem
30px 1.875rem
31px 1.9375rem
32px 2rem
33px 2.0625rem
34px 2.125rem
35px 2.1875rem
36px 2.25rem
37px 2.3125rem
38px 2.375rem
39px 2.4375rem
40px 2.5rem
41px 2.5625rem
42px 2.625rem
43px 2.6875rem
44px 2.75rem
45px 2.8125rem
46px 2.875rem
47px 2.9375rem
48px 3rem
49px 3.0625rem
50px 3.125rem
51px 3.1875rem
52px 3.25rem
53px 3.3125rem
54px 3.375rem
55px 3.4375rem
56px 3.5rem
57px 3.5625rem
58px 3.625rem
59px 3.6875rem
60px 3.75rem
61px 3.8125rem
62px 3.875rem
63px 3.9375rem
64px 4rem

【Angular】service引入外部資料

外部資料檔案與接口

  • 建立mock-members.ts
import { Member } from './member';

//外部からアクセルできるようにexport
export const MEMBERS: Member[] = [
  {id: 11, name: '武山学'},
  {id: 12, name: '初音ミク'},
  {id: 13, name: '桐山零'},
  {id: 14, name: '三角竜之'},
  {id: 15, name: '羽生結弦'},
  {id: 16, name: '佐々木希'},
  {id: 17, name: '松崎はとり'},
  {id: 18, name: '半沢直樹'},
  {id: 19, name: '伊藤幸'},
  {id: 20, name: '桜田深雪'}
];
  • 建立member.service.ts
import { Injectable } from '@angular/core';
import { Member } from './member';
import { MEMBERS } from './mock-members';

//Componentから読み込むことをできるため、@Injectableを使う
@Injectable()
export class MemberService {
  //プロパティーやメソッドを定義する
  getMembers(): Member[]{
    return MEMBERS;
  }
}
//serviceで共通化の処理をできる。各ComponentからこのServiceを読み込むことで共通化を実現する

修改app.component.ts

import { Component } from '@angular/core';
import { Member } from './member';
import { MemberService } from './member.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  providers: [ MemberService ]
  //app.componentでMemberServiceを使うという宣言
})

// プロパティーを定義する
export class AppComponent  {
  title='自社社員名簿';
  members: Member[]; 
  // Member型の配列にする
  selectedMember: Member;

  //AppComponentでMemberServiceを利用することができます
  constructor(private memberService: MemberService){
    // this.memberService = memberService;
    // 暗黙的に代入されます
  }
  //上記引用方法はDependency Injection(DI)です
  
  onSelected(member: Member): void {
    this.selectedMember=member;
  }

 //追加したMemberServiceを実行するメソッドを定義
  getMembers(): void {
    this.members=this.memberService.getMembers();
  }
}

Life Cycle

Life Cycle: 當元件被建構出來時、元件資料被變更時、元件被移除時會執行的callback

利用Life Cycle,當元件資料變更時呼叫service的getMembers()

引入interface、並執行在class上

import { Component, OnInit } from '@angular/core';

//...

export class AppComponent implements OnInit {

//...
//constructor( ...

ngOnInit():void {
    //constructorが実行された後、初期化時に呼ばれるcallback
    this.getMembers();
  }

【Angular】分割元件

定義元件

  • 在app資料夾建立新檔案,檔名為「member-detail.component.ts」
  • 在member-detail.component.ts新增以下內容
import {Component} from '@angular/core';
//angular coreからComponentというモジュールをインポートします

//Componentのメタデータを定義する
//<member-detail></member-detail>として使います
@Component({
  selector: 'member-detail',
  templateUrl: './member-detail.component.html' 
})
// ※@Component裡面不能放註解否則會壞掉
//HTMLテンプレートを定義する


export class MemberDetailComponent {

}

建立共用Class(將Class獨立出來)

  • 新增member.ts檔案
  • 在member.ts新增以下內容
export class Member {
  id: number;
  name: string;
}
//クラスをpublicにする
  • 在member-detail.component.ts的第二行新增以下內容,引入member.ts
import {Member} from './member';

引入外部Property

使用input。修改member-detail.component.ts為以下內容

import { Component, Input } from '@angular/core'; //データを渡す
//Input は外部のデータを参照するためのモジュールです
import { Member } from './member';

//<member-detail [member]="selectedHero"></member-detail>として使います
@Component({
  selector: 'member-detail',
  templateUrl: './member-detail.component.html'
})

export class MemberDetailComponent {
  //memberというプロパティーを定義、型をMemberに指定
  @Input() member: Member;
}

app.module.ts 新增以下內容

import { MemberDetailComponent } from './member-detail.component';
//引入MemberDetailComponent
declarations: [ ..., ..., MemberDetailComponent ],
//declarations也新增MemberDetailComponent

app.component.html最後一行新增以下內容

<member-detail [member]="selectedMember"></member-detail>