Skip to main content

Responsive Adaptation

Vue 3 Widget includes a complete responsive adaptation solution, components automatically adjust layout and styles according to screen size.

Breakpoint Definitions​

BreakpointWidth RangeDescription
mobile< 768pxMobile devices
tablet768px - 1024pxTablet devices
desktop> 1024pxDesktop devices

variant Property​

All responsive-aware components provide the variant property:

type Variant = 'auto' | 'mobile' | 'desktop';
ValueDescription
'auto'Automatically detect screen size, dynamic switching (default value)
'mobile'Force use mobile style
'desktop'Force use desktop style

Usage Example​

<template>
    <!-- Automatic adaptation (default) -->
    <ControlPanel variant="auto" />

    <!-- Force mobile style -->
    <ControlPanel variant="mobile" />

    <!-- Force desktop style -->
    <ConversationList variant="desktop" />
</template>

Application Scenarios​

  • Embedded scenarios: Force use mobile mode when embedding in small size areas of PC pages
  • Debugging scenarios: Test specific platform style performance
  • Fixed layout: When you don't want components to change with screen

Responsive Composables​

Widget exports responsive detection composables:

<script setup lang="ts">
import {
    useIsMobile,
    useIsTablet,
    useIsDesktop,
    useResponsive
} from '@bdky/aaas-pilot-kit-vue3-widget';
</script>

useIsMobile​

Detect if it's mobile:

<script setup lang="ts">
import {useIsMobile} from '@bdky/aaas-pilot-kit-vue3-widget';

const isMobile = useIsMobile();
</script>

<template>
    <div>
        {{ isMobile ? 'Mobile View' : 'Desktop View' }}
    </div>
</template>

useIsTablet​

Detect if it's tablet:

<script setup lang="ts">
import {useIsTablet} from '@bdky/aaas-pilot-kit-vue3-widget';

const isTablet = useIsTablet();
</script>

<template>
    <TabletLayout v-if="isTablet" />
    <!-- ... -->
</template>

useIsDesktop​

Detect if it's desktop:

<script setup lang="ts">
import {useIsDesktop} from '@bdky/aaas-pilot-kit-vue3-widget';

const isDesktop = useIsDesktop();
</script>

<template>
    <div :style="{width: isDesktop ? '800px' : '100%'}">
        Content
    </div>
</template>

useResponsive​

Get complete responsive information:

<script setup lang="ts">
import {useResponsive} from '@bdky/aaas-pilot-kit-vue3-widget';

const {isMobile, isTablet, isDesktop} = useResponsive();
</script>

<template>
    <div :class="{
        'layout-mobile': isMobile,
        'layout-tablet': isTablet,
        'layout-desktop': isDesktop
    }">
        Content
    </div>
</template>

CSS Class Name Conventions​

Components automatically add corresponding CSS class names based on current mode:

Class SuffixDescription
--mobileMobile mode
--desktopDesktop mode
/* Example: Customize mobile style */
.apk-control-panel--mobile {
    padding: 10px;
}

/* Example: Customize desktop style */
.apk-control-panel--desktop {
    padding: 20px;
}

Component Differences Quick Reference​

ConversationList​

FeaturePCMobile
Conversation DisplayShow all historyShow only latest one
Close ButtonVisibleHidden
Scroll Follow ButtonVisibleHidden
PositionAbsolute positioning on leftRelative positioning

ControlPanel​

FeaturePCMobile
Input Width479px fixed100% adaptive
Button Size54-55px50px
LayoutCentered absolute positioningFull-width flex
Hangup ButtonOptional displayAlways display

Input​

FeaturePCMobile
Width479px100%
Height55px50px
Border Radius28px20px
Padding24px16px

RecommendedQuestions​

FeaturePCMobile
LayoutHorizontal arrangementVertical arrangement
BackgroundSemi-transparent capsuleTransparent
Question ItemText + arrowCard style
TitleVisibleHidden by default
DividerVisibleHidden

StatusOverlay​

FeaturePCMobile
Content AlignmentVertical centerTop alignment + padding
Avatar Size120px100px
Font Size16px14px

Conversation​

FeaturePCMobile
Border Radius20pxDifferent border radius for different directions
MarginLeft/right 30pxLeft/right 39px
BackgroundSemi-transparentDarker semi-transparent

Best Practices​

1. Prioritize Auto Mode​

Unless there are special requirements, recommend using default auto mode to let components automatically adapt:

<template>
    <!-- Recommended -->
    <ControlPanel />

    <!-- Only specify when necessary -->
    <ControlPanel variant="mobile" />
</template>

2. Conditional Rendering Optimization​

For completely different layouts, use conditional rendering instead of style switching:

<script setup lang="ts">
import {useIsMobile} from '@bdky/aaas-pilot-kit-vue3-widget';

const isMobile = useIsMobile();
</script>

<template>
    <!-- Recommended: Completely different component structure -->
    <MobileLayout v-if="isMobile">
        <ConversationList />
        <ControlPanel />
    </MobileLayout>

    <DesktopLayout v-else>
        <Sidebar>
            <ConversationList />
        </Sidebar>
        <Main>
            <Subtitle />
            <ControlPanel />
        </Main>
    </DesktopLayout>
</template>

3. Combine Using variant​

Keep parent and child component variants consistent:

<script setup lang="ts">
const variant = 'mobile'; // Or get from props/state
</script>

<template>
    <Layout direction="vertical">
        <ConversationList :variant="variant" />
        <ControlPanel :variant="variant" />
    </Layout>
</template>

4. Custom Responsive Styles​

Use CSS class name hooks to add custom responsive styles:

/* Basic styles */
.apk-control-panel {
    transition: all 0.3s ease;
}

/* Mobile special styles */
.apk-control-panel--mobile {
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* Desktop special styles */
.apk-control-panel--desktop {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

5. Combine with Media Queries​

When needing finer control, combine with CSS media queries:

@media (max-width: 768px) {
    .my-custom-layout {
        flex-direction: column;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .my-custom-layout {
        padding: 20px;
    }
}

@media (min-width: 1025px) {
    .my-custom-layout {
        max-width: 1200px;
        margin: 0 auto;
    }
}