Day03 是用 CSS 變數來更改圖片的樣式,可以做出簡單的圖片編輯器,但我剛開始的寫法似乎沒有符合原作的精神(?
後來問了 AI 後,發現還是可以從 CSS 取出資料,那麼就開始吧
index.css
裡面設定初始值@layer base {
:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}
}
const getInitialValue = (
varName: string,
defaultValue: string | number
): string | number => {
if (typeof window !== "undefined") {
const value = getComputedStyle(document.documentElement)
.getPropertyValue(varName)
.trim();
if (varName === "--base") {
return value || defaultValue;
}
const parsedValue = parseInt(value);
return isNaN(parsedValue) ? defaultValue : parsedValue;
}
return defaultValue;
};
由於用了 TypeScript
,所以加上型別判斷
const SPACING = 10;
const BLUR = 1;
const BG_COLOR = "#ffc600";
const [spacing, setSpacing] = useState<number>(() => {
const initialValue = getInitialValue("--spacing", SPACING);
return typeof initialValue === "number" ? initialValue : SPACING;
});
const [blur, setBlur] = useState<number>(() => {
const initialValue = getInitialValue("--blur", BLUR);
return typeof initialValue === "number" ? initialValue : BLUR;
});
const [baseColor, setBaseColor] = useState<string>(() => {
const initialValue = getInitialValue("--base", BG_COLOR);
return typeof initialValue === "string" ? initialValue : BG_COLOR;
});
const imageStyle: React.CSSProperties = {
padding: `${spacing}px`,
backgroundColor: baseColor,
filter: `blur(${blur}px)`,
};
在 TailwindCSS 裡面可以用 p-[var(--spacing)]
方式使用變數
return (
<div className="min-h-screen bg-gray-200 p-8">
<div className="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
<div className="p-8">
<div className="mb-4">
<label
htmlFor="spacing"
className="block text-gray-700 text-sm font-bold mb-2"
>
Spacing: {spacing}px
</label>
<input
id="spacing"
type="range"
min="10"
max="200"
value={spacing}
onChange={(e) => setSpacing(Number(e.target.value))}
className="w-full"
/>
</div>
<div className="mb-4">
<label
htmlFor="blur"
className="block text-gray-700 text-sm font-bold mb-2"
>
Blur: {blur}px
</label>
<input
id="blur"
type="range"
min="0"
max="25"
value={blur}
onChange={(e) => setBlur(Number(e.target.value))}
className="w-full"
/>
</div>
<div className="mb-4">
<label
htmlFor="base"
className="block text-gray-700 text-sm font-bold mb-2"
>
Base Color
</label>
<input
id="base"
type="color"
value={baseColor}
onChange={(e) => setBaseColor(e.target.value)}
className="w-full h-10"
/>
</div>
</div>
<img
src="https://plus.unsplash.com/premium_photo-1661873673782-88b30e6abef4/"
alt="Sample"
className="w-full h-auto p-[var(--spacing)] bg-[var(--base)] blur-[var(--base)]"
style={imageStyle}
/>
</div>
</div>
);
input type=”color”
會有原生的調色盤可以使用
TailwindCSS 使用變數的方式 p-[var(--spacing)]
getComputedStyle
和 getPropertyValue
可以用來取出 CSS
const value = getComputedStyle(document.documentElement)
.getPropertyValue(varName)
.trim();