الشريط المتحرك · الحدث
Item scale via size modifiers; host width via Tailwind max-w-* utilities.
Hex doc
Phoenix
الحجم
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
<.marquee class="marquee marquee--sm" items={[{name: "Apple", logo: "🍎"}, {name: "Banana", logo: "🍌"}, {name: "Cherry", logo: "🍒"}, {name: "Grape", logo: "🍇"}, {name: "Lemon", logo: "🍋"}]} duration={20} spacing="2rem" pause_on_interaction>
<:item :let={item}>
<span>{item.logo}</span>
<span>{item.name}</span>
</:item>
</.marquee>
<.marquee class="marquee marquee--md" items={[{name: "Apple", logo: "🍎"}, {name: "Banana", logo: "🍌"}, {name: "Cherry", logo: "🍒"}, {name: "Grape", logo: "🍇"}, {name: "Lemon", logo: "🍋"}]} duration={20} spacing="2rem" pause_on_interaction>
<:item :let={item}>
<span>{item.logo}</span>
<span>{item.name}</span>
</:item>
</.marquee>
<.marquee class="marquee marquee--lg" items={[{name: "Apple", logo: "🍎"}, {name: "Banana", logo: "🍌"}, {name: "Cherry", logo: "🍒"}, {name: "Grape", logo: "🍇"}, {name: "Lemon", logo: "🍋"}]} duration={20} spacing="2rem" pause_on_interaction>
<:item :let={item}>
<span>{item.logo}</span>
<span>{item.name}</span>
</:item>
</.marquee>
<.marquee class="marquee marquee--xl" items={[{name: "Apple", logo: "🍎"}, {name: "Banana", logo: "🍌"}, {name: "Cherry", logo: "🍒"}, {name: "Grape", logo: "🍇"}, {name: "Lemon", logo: "🍋"}]} duration={20} spacing="2rem" pause_on_interaction>
<:item :let={item}>
<span>{item.logo}</span>
<span>{item.name}</span>
</:item>
</.marquee>
أقصى عرض
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
<.marquee class="marquee max-w-2xs" items={[{name: "Apple", logo: "🍎"}, {name: "Banana", logo: "🍌"}, {name: "Cherry", logo: "🍒"}, {name: "Grape", logo: "🍇"}, {name: "Lemon", logo: "🍋"}]} duration={20} spacing="2rem" pause_on_interaction>
<:item :let={item}>
<span>{item.logo}</span>
<span>{item.name}</span>
</:item>
</.marquee>
<.marquee class="marquee max-w-md" items={[{name: "Apple", logo: "🍎"}, {name: "Banana", logo: "🍌"}, {name: "Cherry", logo: "🍒"}, {name: "Grape", logo: "🍇"}, {name: "Lemon", logo: "🍋"}]} duration={20} spacing="2rem" pause_on_interaction>
<:item :let={item}>
<span>{item.logo}</span>
<span>{item.name}</span>
</:item>
</.marquee>
<.marquee class="marquee max-w-xl" items={[{name: "Apple", logo: "🍎"}, {name: "Banana", logo: "🍌"}, {name: "Cherry", logo: "🍒"}, {name: "Grape", logo: "🍇"}, {name: "Lemon", logo: "🍋"}]} duration={20} spacing="2rem" pause_on_interaction>
<:item :let={item}>
<span>{item.logo}</span>
<span>{item.name}</span>
</:item>
</.marquee>
<.marquee class="marquee max-w-2xl" items={[{name: "Apple", logo: "🍎"}, {name: "Banana", logo: "🍌"}, {name: "Cherry", logo: "🍒"}, {name: "Grape", logo: "🍇"}, {name: "Lemon", logo: "🍋"}]} duration={20} spacing="2rem" pause_on_interaction>
<:item :let={item}>
<span>{item.logo}</span>
<span>{item.name}</span>
</:item>
</.marquee>