test-bentoweb-ui 1.0.50 → 1.0.52

package/README.md

@@ -75,7 +75,7 @@ export default {
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | BannerImage | Array | required | Array of objects with `src` and `link` properties |
-| size | String | 'xl' | Size of the banner. Options: 'xl' (full banner with pagination) or 'm' (interactive style) |
+| size | String | 'l' | Size/layout of the banner. Options: 'm' (interactive style), 'l' (full banner with pagination), 'xl' (two-column layout), 'grid-2' (two square banners), 'grid-6' (3x2 grid of banners) |
 
 The `src` property can be:
 - A path relative to the public directory (e.g., `/images/example.jpg`)
@@ -85,6 +85,50 @@ The `link` property can be:
 - A Vue Router path for internal navigation (e.g., `/products`)
 - An external URL (e.g., `https://example.com`) which will open in a new tab
 
+### Banner Configurations
+
+The SwiperBanner component supports multiple layout configurations, all with proper aspect ratios to maintain consistent proportions across different screen sizes:
+
+#### Banner M (size="m")
+Small interactive banner with horizontal scrolling. Shows 1.2 slides on mobile and 2 slides on desktop.
+
+#### Banner L (size="l")
+Full-width banner with pagination bullets. This is the default configuration and was previously called 'xl'.
+
+#### Banner XL (size="xl")
+Two-column layout where the left column takes 60% of the width (16:9 aspect ratio) and the right column has two rows of smaller banners (21:10 aspect ratio). Requires at least 3 banner images.
+
+On mobile devices (screen width < 768px), this layout automatically switches to a regular swiper with pagination for better user experience.
+
+#### Grid-2 (size="grid-2")
+Two equal-width square banners side by side (1:1 aspect ratio). Requires at least 2 banner images. This layout has a maximum width of 900px and is centered on the page to prevent the square images from appearing too large on wide screens.
+
+On mobile devices (screen width < 768px), this layout automatically switches to a regular swiper with pagination for better user experience.
+
+#### Grid-6 (size="grid-6")
+3x2 grid of rectangle banners (16:9 aspect ratio). Requires at least 6 banner images for full display.
+
+On mobile devices (screen width < 768px), this layout automatically switches to a regular swiper with pagination for better user experience.
+
+### Usage Examples
+
+```vue
+<!-- Banner M - Small interactive banner -->
+<SwiperBanner :BannerImage="bannerImages" size="m" />
+
+<!-- Banner L - Full width banner with pagination (default) -->
+<SwiperBanner :BannerImage="bannerImages" size="l" />
+
+<!-- Banner XL - Two column layout -->
+<SwiperBanner :BannerImage="bannerImages" size="xl" />
+
+<!-- Grid-2 - Two square banners -->
+<SwiperBanner :BannerImage="bannerImages" size="grid-2" />
+
+<!-- Grid-6 - 3x2 grid of banners -->
+<SwiperBanner :BannerImage="bannerImages" size="grid-6" />
+```
+
 ### Swiper Element Attributes
 
 When using Swiper Element (WebComponent), attributes must be passed as strings rather than bound objects:
@@ -140,9 +184,9 @@ swiper-container.banner-full::part(bullet-active) {
 
 Available parts include: `container`, `wrapper`, `slide`, `pagination`, `bullet`, `bullet-active`, and more. See the [Swiper Element documentation](https://swiperjs.com/element#parts) for a complete list.
 
-### SwiperInteractive Usage (Deprecated)
+### SwiperInteractive Usage (Removed)
 
-The SwiperInteractive component is now deprecated. Please use the SwiperBanner component with `size="m"` instead:
+The SwiperInteractive component has been removed. Please use the SwiperBanner component with `size="m"` instead:
 
 ```vue
 <template>