الحجم
Use class="ui-size-{size}" to set the size of a marquee.
Available options: xs, sm, md (default), lg, xl
🍎
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 ui-size-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 ui-size-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 ui-size-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 ui-size-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>
أقصى عرض
Without max-w-*, width comes from component CSS. Default for marquee: md (width: 100%).
Use class="max-w-{step}" to set the maximum width of a marquee root.
Available options: none, full, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs, 2xs, xs, sm, md (default), lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl
default (md)
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
none
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
full
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
9xs
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
8xs
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
7xs
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
6xs
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
5xs
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
4xs
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
3xs
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
2xs
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
xs
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
sm
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
md
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
lg
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
xl
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
2xl
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
3xl
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
4xl
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
5xl
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
6xl
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
7xl
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
8xl
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
9xl
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
🍎
Apple
🍌
Banana
🍒
Cherry
🍇
Grape
🍋
Lemon
<.marquee class="marquee" 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-none" 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-full" 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-9xs" 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-8xs" 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-7xs" 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-6xs" 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-5xs" 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-4xs" 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-3xs" 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-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-xs" 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-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 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-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 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>
<.marquee class="marquee max-w-3xl" 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-4xl" 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-5xl" 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-6xl" 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-7xl" 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-8xl" 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-9xl" 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>