גלריית אקורדיון

תמונות עומדות בשורה. זו שמרחפים עליה מתרחבת ומציגה כיתוב, והשאר מתכווצות לרצועות מעומעמות. CSS בלבד.

התאמה

height420px

color

overlayColor

titleColor

descriptionColor

7 מאפיינים

מאפיין	סוג	ברירת מחדל	תיאור
items	{ src: string; title: string; description: string; href?: string }[]	—	לוחות: תמונה, כותרת, כיתוב וקישור.
height	number	`420`	גובה הלוחות במסך רחב בפיקסלים.
color	string	`"rgba(255, 255, 255, 0.5)"`	מסגרת סביב הלוח שבפוקוס מהמקלדת.
overlayColor	string	`"rgba(0, 0, 0, 0.3)"`	שכבה על הלוחות המכווצים בזמן שלוח אחר פתוח.
titleColor	string	`"#ffffff"`	צבע הכותרות. הן יושבות על החלק הכהה של התמונה ולכן נשארות בהירות.
descriptionColor	string	`"rgba(255, 255, 255, 0.7)"`	צבע השורה הקצרה מעל הכותרת.
className	string	—	מחלקות נוספות.

2 חבילות נדרשות

npm install clsx tailwind-merge