视频分析

源文件

Card.framerx.zip

代码

import * as React from "react"
import { Frame, addPropertyControls, ControlType } from "framer"
import styled from "styled-components" //这个需要通过npm或者yarn安装
// Open Preview: Command + P
// Learn more: https://framer.com/api
const CardContent = styled.div`
    width:${props => props.width}px;
    height:${props => props.height}px;
    background-color:${props => props.background};
    border-radius:${props => props.radius}px;
    box-shadow:0px ${props => props.y}px ${props => props.b}px ${props =>
    props.s}px ${props => props.shadowColor};
    color:white;
    font-size:12px;
    font-weight:600;
    text-align:center;
    padding-top:24px
`
export function Card(props) {
    //这里可以修改阴影的百分比
    const radius = Math.ceil(props.width * 0.04)
    const y = Math.ceil(props.height * 0.2)
    const b = Math.ceil(props.height * 0.5)
    const s = Math.ceil(-props.height * 0.15)
    return (
        <CardContent
            width={props.width}
            height={props.height}
            background={props.background}
            radius={radius}
            y={y}
            b={b}
            s={s}
            shadowColor={props.shadowColor}
        >
            <Frame background={""} visible={props.showText} height={20} center>
                r:{radius} &nbsp;&nbsp; y: {y}&nbsp;&nbsp; b: {b}&nbsp;&nbsp; s:{" "}
                {s}{" "}
            </Frame>
        </CardContent>
    )
}
Card.defaultProps = {
    height: 128,
    width: 240,
    text: "Get started!",
    background: "rgb(25, 96, 255)",
    mark: true,
}
// Learn more: https://framer.com/api/property-controls/
addPropertyControls(Card, {
    background: {
        title: "background",
        type: ControlType.Color,
        defaultValue: "rgb(25, 96, 255)",
    },
    shadowColor: {
        title: "shadowColor",
        type: ControlType.Color,
        defaultValue: "rgba(25, 96, 255,0.5)",
    },
    showText: {
        title: "showText",
        type: ControlType.Boolean,
        enabledTitle: "Show",
        disabledTitle: "Hide",
    },
})