uiuxcafe.github.io

• 語法對照表
  • 滑鼠
• Sample Code
  • 1. 動態顯示功能 show & hide
  • 2. 固定頁首 sticky header
  • 3. 切換分頁 tabview
  • 4. 展開收合 Dropdown
  • 5. 篩選功能 filter
  • 6. text input
  • 7. API Call
• Framer 教學資源
  • 安裝 Yarn

語法對照表

滑鼠

• 語法

  事件說明	jQuery	Framer X
  點選元素	click	onClick
  連點元素	dbclick	onDoubleClick
  按下滑鼠的按鈕	mousedown	onMouseDown
  滑鼠游標滑入元素	<li>mouseenter</li><li>mouseover</li>	<li>onMouseEnter</li><li>onMouseover</li>
  滑鼠游標滑出元素	<li>mouseleave</li><li>mouseout</li>	<li>onMouseLeave</li><li>onMouseOut</li>
  滑鼠游標於元素之中移動	mousemove	onMouseMove
  滑鼠按鈕被釋放	mouseup	onMouseUp

Sample Code

_ 點此 進入 sample code 資料夾 _

1. 動態顯示功能 show & hide

當用戶點擊按鈕時，可隱藏 or 顯示文字 & 數字 請參考 sample code：1_showhide 檔案

• Code

import { Data, animate, Override, Animatable } from "framer"

// 設定原先Show、Hide frame 的顯示狀況
const data = Data({
    //Show 的 Override 會顯示
    Show: false,
    //Hide 的 Override 會隱藏
    Hide: false,
})

//btn

export const bnShow: Override = () => {
    return {
        onTap() {
            //當點擊bnShow按鈕時，Show從 true 變為 false，設定為 Show Override 的 frame 隱藏
            data.Show = true //true -> false
            // Hide 從 false 變為 true，設定為 Hide Override 的 frame 顯示
            data.Hide = false //false -> true
        },
    }
}

export const bnHide: Override = () => {
    return {
        onTap() {
            data.Hide = true //true -> false
            //當點擊bnHide按鈕時，Hide從true變為false，設定為Show Override的frame隱藏
            data.Show = false //false -> true
            // Hide從 false 變為 true，設定為 Show Override 的 frame 顯示
        },
    }
}

// frame

export const Hide: Override = () => {
    return {
        visible: data.Hide,
    }
}

export const Show: Override = () => {
    return {
        visible: data.Show,
    }
}

---

2. 固定頁首 sticky header

當用戶下滑時，資訊會在上方固定 請參考 sample code：2_stickyheader 檔案

• Code

import { Data, Override, motionValue, useTransform, animate } from "framer"

// Keep track of the state of our application
const data = Data({ isPastLimit: false })

// Create a MotionValue to track contentOffsetY
const contentOffsetY = motionValue(0)

// Listen for changes to contentOffsetY
contentOffsetY.onChange(offset => (data.isPastLimit = offset < -52))

// Apply this override to your scroll component
export function TrackScroll(): Override {
    return { contentOffsetY: contentOffsetY }
}

export function ShowTitleIfPastLimit(): Override {
    return {
        opacity: 0, // set it to zero initially
        animate: data.isPastLimit ? { opacity: 1 } : { opacity: 0 },
        // animate.easeOut(data.tabLeft, -375 * i, { duration: 0 })
    }
}

3. 切換分頁 tabview

點選 Tab bar icon時，會切換分頁，也會顯示 icon 為被選取狀態 請參考 sample code：3_tabview 檔案

• Code

import { Data, animate, Override } from "framer"

// 預設 TabSelected 的 狀態
const data = Data({
    Tab1Selected: true,
    Tab2Selected: false,
    Tab3Selected: false,
})

// 以下是 Tab 的功能

// 點擊 bntab1 時，tab1 override 的 frame 顯示的狀態
export const bntab1: Override = () => {
    return {
        onTap() {
            data.Tab1Selected = true
            data.Tab2Selected = false
            data.Tab3Selected = false
            // console.log("1 is " + data.isTab1Selected)
        },
    }
}

// 點擊 bntab2 時，tab2 override 的 frame 顯示的狀態
export const bntab2: Override = () => {
    return {
        onTap() {
            data.Tab1Selected = false
            data.Tab2Selected = true
            data.Tab3Selected = false
            // console.log("2 is " + data.isTab2Selected)
        },
    }
}

// 點擊 bntab3 時，tab3 override 的 frame 顯示的狀態
export const bntab3: Override = () => {
    return {
        onTap() {
            data.Tab1Selected = false
            data.Tab2Selected = false
            data.Tab3Selected = true
            // console.log("2 is " + data.isTab2Selected)
        },
    }
}

//
export const tab1: Override = () => {
    return {
        visible: data.Tab1Selected,
    }
}

export const tab2: Override = () => {
    return {
        visible: data.Tab2Selected,
    }
}

export const tab3: Override = () => {
    return {
        visible: data.Tab3Selected,
    }
}

4. 展開收合 Dropdown

展開收合功能 請參考 sample code：4_dropdown 檔案

• Code

import { Data, animate, Override, useCycle } from "framer"

// 預設 data 資料的狀況
const data = Data({
    rotation: 0, // 旋轉=0 表示不旋轉
    menuBodyHeight: 200, // menubody 的高度為 200
    otherMenuTop: 300, // otherMenuTop 到 Frame 頂端 的距離為 300
})

let isFolded = false // 預設是否折疊（false 為不折疊）

export const DropButton: Override = () => {
    return {
        animate: { rotate: data.rotation },
        onTap() {
            data.rotation = isFolded ? 0 : -90 // 當點選時，折疊角度從 0度 -> 90度
            data.menuBodyHeight = isFolded ? 200 : 0 // 當點選後，收合為 0
            data.otherMenuTop = isFolded ? 300 : 100 // 當點選後，othermenu 到頂端（top）的距離 從 300 -> 100
            isFolded = !isFolded // 示意該 btn 被點選時會反覆摺疊
            // console.log(isFolded)
        },
    }
}

export const MenuBody: Override = () => {
    return {
        animate: { height: data.menuBodyHeight },
    }
}

export const otherMenu: Override = () => {
    return {
        animate: { top: data.otherMenuTop },
    }
}
})

• 相關資源
  1. 展開收合
  2. 下拉選單

5. 篩選功能 filter

點選 checkbox 會顯示篩選的內容 請參考 sample code：5_filter 檔案

• Code

import { Data, animate, Override } from "framer"

// 預設 card 的寬度 以及 checkbox 勾選的狀態
const data = Data({
    aWidth: 115,
    bWidth: 115,
    cWidth: 115,
    isAChecked: true,
    isBChecked: true,
    isCChecked: true,
})

// 以下是 checkBox 的功能

export const CheckBoxA: Override = () => {
    return {
        onTap() {
            data.aWidth = data.isAChecked ? 0 : 115 // 當 CheckBox A 被點擊時，aWidth 寬度從 0 -> 296
            data.isAChecked = !data.isAChecked //  CheckBox A 是可以被反覆點擊的
            // console.log("A is " + isAChecked)
        },
    }
}

export const CheckBoxB: Override = () => {
    return {
        onTap() {
            data.bWidth = data.isBChecked ? 0 : 115
            data.isBChecked = !data.isBChecked
            // console.log("B is " + isBChecked)
        },
    }
}

export const CheckBoxC: Override = () => {
    return {
        onTap() {
            data.cWidth = data.isCChecked ? 0 : 115
            data.isCChecked = !data.isCChecked
            // console.log("C is " + isCChecked)
        },
    }
}

// 以下說明 卡片 狀態

export const CheckedObjectA: Override = () => {
    return {
        animate: { width: data.aWidth },
        transition: { duration: 0 },
    }
}

export const CheckedObjectB: Override = () => {
    return {
        animate: { width: data.bWidth },
        transition: { duration: 0 },
    }
}

export const CheckedObjectC: Override = () => {
    return {
        animate: { width: data.cWidth },
        transition: { duration: 0 },
    }
}

// 這裡是設定 icon checkbox 是否會顯示

export const iconA: Override = () => {
    return {
        visible: data.isAChecked,
    }
}

export const iconB: Override = () => {
    return {
        visible: data.isBChecked,
    }
}

export const iconC: Override = () => {
    return {
        visible: data.isCChecked,
    }
}

6. text input

需先下載 framerX 內建的 input component 請參考 sample code：6_textinput 檔案

• Code

import { Override, Data } from "framer"

const data = Data({
    text: "即時更新",
    text2: "儲存後更新",
})

//輸入文字框的內容
export const textInput: Override = props => {
    return {
        // 輸入的值進行改變
        onValueChange: (text: string) => {
            data.text = text
            // console.log("txt = " + data.text)
        },
    }
}

export const textOutput2: Override = props => {
    return {
        text: data.text2,
    }
}

export const textOutput1: Override = props => {
    return {
        text: data.text,
    }
}

export const bnSave: Override = props => {
    return {
        onTap: (text: string) => {
            //當點擊bnSave更新的值為輸入的值
            data.text2 = data.text2 == "" ? "儲存後更新" : data.text
            //更新的值為輸入的值
            data.text = data.text == "" ? "即時更新" : data.text
            console.log("txt1 = " + data.text)
        },
    }
}

7. API Call

將真實的 API 回傳的資料放置 prototype 中 請參考 sample code：7_API_call 檔案

_* 若只有靜態的 JSON 資料，framer x 提供 此功能 可將資料轉換為 url _

• Code

import * as React from "react"
//一種 React Hooks
import { useState, useEffect } from "react"
import { Data, Override } from "framer"

const law = Data({
    date_0: "123",
    law_0: "...",
    date_1: "...",
    law_1: "...",
    date_2: "...",
    law_2: "...",
    date_3: "...",
    law_3: "...",
    date_4: "...",
    law_4: "...",
    date_5: "...",
    law_5: "...",
    date_6: "...",
    law_6: "...",
    date_7: "...",
    law_7: "...",
    date_8: "...",
    law_8: "...",
})

export const apiCall: Override = () => {
    const [data, setData] = useState(null)
    //React Hook 用來讀取數據
    //useEffect 可以回傳一組數值，目前 state 數值及可以更新 state 的 function
    useEffect(() => {
        ///擷取api
        fetch("https://api.realdata.dev/v1/lawsnote")
            // 將 fetch 的回應轉換為 json 格式
            .then(response => response.json())
            .then(data => {
                // setData指令攜帶資料
                setData(data)
                // data中總共有9筆資料分別對應的法條與日期
                law.date_0 = data.dateList[0].date
                 //console.log(data)
                law.law_0 = data.dateList[0].lawList[0]
                law.date_1 = data.dateList[1].date
                law.law_1 = data.dateList[1].lawList[0]
                law.date_2 = data.dateList[2].date
                law.law_2 = data.dateList[2].lawList[0]
                law.date_3 = data.dateList[3].date
                law.law_3 = data.dateList[3].lawList[0]
                law.date_4 = data.dateList[4].date
                law.law_4 = data.dateList[4].lawList[0]
                law.date_5 = data.dateList[5].date
                law.law_5 = data.dateList[5].lawList[0]
                law.date_6 = data.dateList[6].date
                law.law_6 = data.dateList[6].lawList[0]
                law.date_7 = data.dateList[7].date
                law.law_7 = data.dateList[7].lawList[0]
                law.date_8 = data.dateList[8].date
                law.law_8 = data.dateList[8].lawList[0]
            })
    }, [])
    return {
        // law.text = data.dateList[0].lawList[0]
        // console.log()
    }
}

//以下設定 date&law 的 Override 以回傳資料，共九個日期與法條
export const date_0: Override = () => {
    return {
        text: law.date_0,
    }
}
export const law_0: Override = () => {
    return {
        text: law.law_0,
    }
}
export const date_1: Override = () => {
    return {
        text: law.date_1,
    }
}
export const law_1: Override = () => {
    return {
        text: law.law_1,
    }
}
export const date_2: Override = () => {
    return {
        text: law.date_2,
    }
}
export const law_2: Override = () => {
    return {
        text: law.law_2,
    }
}
export const date_3: Override = () => {
    return {
        text: law.date_3,
    }
}
export const law_3: Override = () => {
    return {
        text: law.law_3,
    }
}
export const date_4: Override = () => {
    return {
        text: law.date_4,
    }
}
export const law_4: Override = () => {
    return {
        text: law.law_4,
    }
}
export const date_5: Override = () => {
    return {
        text: law.date_5,
    }
}
export const law_5: Override = () => {
    return {
        text: law.law_5,
    }
}
export const date_6: Override = () => {
    return {
        text: law.date_6,
    }
}
export const law_6: Override = () => {
    return {
        text: law.law_6,
    }
}
export const date_7: Override = () => {
    return {
        text: law.date_7,
    }
}
export const law_7: Override = () => {
    return {
        text: law.law_7,
    }
}
export const date_8: Override = () => {
    return {
        text: law.date_8,
    }
}
export const law_8: Override = () => {
    return {
        text: law.law_8,
    }
}

Framer 教學資源

安裝 Yarn

Framer 可套入 code 使用現成的 Component。 點此 教學資源 開始安裝