oneao/workspace
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

20260720172840

Browse Source
This commit is contained in:
oneao committed 2026-07-20 17:28:47 +08:00
1 parent cda7f16d3a
commit 94207c77ff
3117 files changed
+201407 -1236
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/fms/.agents/skills/antdv-next/references/components/carousel/demo/arrows.md
+57
View File
@@ -0,0 +1,57 @@
# Arrows for switching
## Description (en-US)
Show the arrows for switching.
## Source
```vue
<template>
<a-carousel arrows :infinite="false">
<div>
<h3 class="custom-carousel-item">
1
</h3>
</div>
<div>
<h3 class="custom-carousel-item">
2
</h3>
</div>
<div>
<h3 class="custom-carousel-item">
3
</h3>
</div>
<div>
<h3 class="custom-carousel-item">
4
</h3>
</div>
</a-carousel>
<br>
<a-carousel arrows dot-placement="start" :infinite="false">
<div>
<h3 class="custom-carousel-item">
1
</h3>
</div>
<div>
<h3 class="custom-carousel-item">
2
</h3>
</div>
<div>
<h3 class="custom-carousel-item">
3
</h3>
</div>
<div>
<h3 class="custom-carousel-item">
4
</h3>
</div>
</a-carousel>
</template>
```
code/fms/.agents/skills/antdv-next/references/components/carousel/demo/autoplay.md
+34
View File
@@ -0,0 +1,34 @@
# Scroll automatically
## Description (en-US)
Timing of scrolling to the next card/picture.
## Source
```vue
<template>
<a-carousel autoplay>
<div>
<h3 class="custom-carousel-item">
1
</h3>
</div>
<div>
<h3 class="custom-carousel-item">
2
</h3>
</div>
<div>
<h3 class="custom-carousel-item">
3
</h3>
</div>
<div>
<h3 class="custom-carousel-item">
4
</h3>
</div>
</a-carousel>
</template>
```
code/fms/.agents/skills/antdv-next/references/components/carousel/demo/basic.md
+40
View File
@@ -0,0 +1,40 @@
# Basic
## Description (en-US)
Basic usage.
## Source
```vue
<script setup lang="ts">
function onChange(currentSlide: number) {
console.log('current slide is', currentSlide)
}
</script>
<template>
<a-carousel :after-change="onChange">
<div>
<h3 class="custom-carousel-item">
1
</h3>
</div>
<div>
<h3 class="custom-carousel-item">
2
</h3>
</div>
<div>
<h3 class="custom-carousel-item">
3
</h3>
</div>
<div>
<h3 class="custom-carousel-item">
4
</h3>
</div>
</a-carousel>
</template>
```
code/fms/.agents/skills/antdv-next/references/components/carousel/demo/dot-duration.md
+34
View File
@@ -0,0 +1,34 @@
# Progress of dots
## Description (en-US)
Show progress of dots.
## Source
```vue
<template>
<a-carousel :autoplay="{ dotDuration: true }" :autoplay-speed="5000">
<div>
<h3 class="custom-carousel-item">
1
</h3>
</div>
<div>
<h3 class="custom-carousel-item">
2
</h3>
</div>
<div>
<h3 class="custom-carousel-item">
3
</h3>
</div>
<div>
<h3 class="custom-carousel-item">
4
</h3>
</div>
</a-carousel>
</template>
```
code/fms/.agents/skills/antdv-next/references/components/carousel/demo/fade.md
+34
View File
@@ -0,0 +1,34 @@
# Fade in
## Description (en-US)
Slides use fade for transition.
## Source
```vue
<template>
<a-carousel effect="fade">
<div>
<h3 class="custom-carousel-item">
1
</h3>
</div>
<div>
<h3 class="custom-carousel-item">
2
</h3>
</div>
<div>
<h3 class="custom-carousel-item">
3
</h3>
</div>
<div>
<h3 class="custom-carousel-item">
4
</h3>
</div>
</a-carousel>
</template>
```
code/fms/.agents/skills/antdv-next/references/components/carousel/demo/placement.md
+57
View File
@@ -0,0 +1,57 @@
# Position
## Description (en-US)
There are 4 position options available.
## Source
```vue
<script setup lang="ts">
import type { CarouselProps } from 'antdv-next'
import { ref } from 'vue'
type DotPlacement = CarouselProps['dotPlacement']
const dotPlacement = ref<DotPlacement>('top')
</script>
<template>
<a-radio-group v-model:value="dotPlacement" style="margin-bottom: 8px">
<a-radio-button value="top">
Top
</a-radio-button>
<a-radio-button value="bottom">
Bottom
</a-radio-button>
<a-radio-button value="start">
Start
</a-radio-button>
<a-radio-button value="end">
End
</a-radio-button>
</a-radio-group>
<a-carousel :dot-placement="dotPlacement">
<div>
<h3 class="custom-carousel-item">
1
</h3>
</div>
<div>
<h3 class="custom-carousel-item">
2
</h3>
</div>
<div>
<h3 class="custom-carousel-item">
3
</h3>
</div>
<div>
<h3 class="custom-carousel-item">
4
</h3>
</div>
</a-carousel>
</template>
```
code/fms/.agents/skills/antdv-next/references/components/carousel/docs.md
+67
View File
@@ -0,0 +1,67 @@
---
title: Carousel
description: A set of carousel areas.
---
## When To Use
- When there is a group of content on the same level.
- When there is insufficient content space, it can be used to save space in the form of a revolving door.
- Commonly used for a group of pictures/cards.
## Demos
| Demo | Path |
| --- | --- |
| Basic | demo/basic.md |
| Position | demo/placement.md |
| Scroll automatically | demo/autoplay.md |
| Fade in | demo/fade.md |
| Arrows for switching | demo/arrows.md |
| Progress of dots | demo/dot-duration.md |
## API
Common props ref：[Common props](../../docs/vue/common-props.md)
### Props
| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
| --- | --- | --- | --- | --- | --- |
| effect | Transition effect | CarouselEffect | `scrollx` | - | × |
| id | - | string | - | - | × |
| slickGoTo | - | number | - | - | × |
| dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` `start` `end`, Please use `dotPlacement` instead | DotPlacement \| 'left' \| 'right' | `bottom` | - | × |
| dotPlacement | The position of the dots, which can be one of `top` `bottom` `start` `end` | DotPlacement | `bottom` | - | × |
| dots | Whether to show the dots at the bottom of the gallery, `object` for `dotsClass` | boolean \| &#123; class?: string &#125; | true | - | × |
| waitForAnimate | Whether to wait for the animation when switching | boolean | false | - | × |
| autoplay | Whether to scroll automatically, you can specify `autoplay=&#123;&#123; dotDuration: true &#125;&#125;` to display the progress bar | boolean \| &#123; dotDuration?: boolean &#125; | false | - | × |
| prevArrow | - | VueNode | - | - | × |
| nextArrow | - | VueNode | - | - | × |
### Events
| Event | Description | Type | Version |
| --- | --- | --- | --- |
| init | - | NonNullable&lt;Settings['onInit']&gt; | - |
| reInit | - | NonNullable&lt;Settings['onReInit']&gt; | - |
| edge | - | NonNullable&lt;Settings['onEdge']&gt; | - |
| swipe | - | NonNullable&lt;Settings['onSwipe']&gt; | - |
| lazyLoad | - | NonNullable&lt;Settings['onLazyLoad']&gt; | - |
| lazyLoadError | - | NonNullable&lt;Settings['onLazyLoadError']&gt; | - |
### Slots
| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| prevArrow | - | () =&gt; any | - |
| nextArrow | - | () =&gt; any | - |
### Methods
| Method | Description | Type | Version |
| --- | --- | --- | --- |
| goTo | - | (slide: number, dontAnimate?: boolean) =&gt; void | - |
| next | - | () =&gt; void | - |
| prev | - | () =&gt; void | - |
| autoPlay | - | (playType?: 'update' \| 'leave' \| 'blur') =&gt; void | - |
| innerSlider | - | any | - |
code/fms/.agents/skills/antdv-next/references/components/carousel/token.md
+32
View File
@@ -0,0 +1,32 @@
# carousel Token
Use these variables through `theme.components.Carousel`. This document lists definitions only and does not include values.
```vue
<a-config-provider
:theme="{
token: {
// Global token configuration
},
components: {
Carousel: {
// Token name: value
},
},
}"
>
...
</a-config-provider>
```
## Token List
| Token | Type | Description |
| --- | --- | --- |
| `dotWidth` | `string \| number` | Width of indicator |
| `dotHeight` | `string \| number` | Height of indicator |
| `dotGap` | `number` | gap between indicator |
| `dotOffset` | `number` | dot offset to Carousel edge |
| `dotActiveWidth` | `string \| number` | Width of active indicator |
| `arrowSize` | `number` | Size of arrows |
| `arrowOffset` | `number` | arrows offset to Carousel edge |