Skip to content

Commit

Permalink
docs(carousel): added html source code
Browse files Browse the repository at this point in the history
  • Loading branch information
@FriedRiceNoodles
FriedRiceNoodles committed Mar 18, 2024
1 parent 5d58cef commit b5e1a2a
Show file tree
Hide file tree
Showing 12 changed files with 206 additions and 5 deletions.
5 changes: 2 additions & 3 deletions docs/example/Carousel/demos/disableFill.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
*/

import { Carousel, Divider } from '@banana-ui/react';
import React from 'react';

export default function disableFill() {
const style = `
Expand All @@ -20,7 +19,7 @@ export default function disableFill() {
`;

return (
<div>
<>
<style>{style}</style>
<Carousel slidesPerView={3} gap={50}>
<div className="demo-slide">1</div>
Expand All @@ -33,6 +32,6 @@ export default function disableFill() {
<div className="demo-slide">1</div>
<div className="demo-slide">2</div>
</Carousel>
</div>
</>
);
}
5 changes: 3 additions & 2 deletions docs/example/Carousel/demos/useRef.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
/* eslint-disable @typescript-eslint/no-unsafe-return */
/* eslint-disable @typescript-eslint/no-unsafe-call */
/**
* title: 使用useRef手动改变currentIndex
* debug: true
*/

/* eslint-disable @typescript-eslint/no-unsafe-return */
/* eslint-disable @typescript-eslint/no-unsafe-call */

import { Button, Carousel } from '@banana-ui/react';
import { useRef } from 'react';

Expand Down
26 changes: 26 additions & 0 deletions public/Carousel/autoHeight.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<style>
.autoheight .demo-slide {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom right, #5193e9, #0e61cd);
color: #fff;
font-size: 48px;
}

.autoheight .demo-slide:nth-child(2n) {
background: linear-gradient(to bottom right, #0e61cd, #5193e9);
height: 500px;
}
</style>

<div class="autoheight">
<b-carousel navigation auto-height>
<div class="demo-slide">1</div>
<div class="demo-slide">2</div>
<div class="demo-slide">3</div>
<div class="demo-slide">4</div>
<div class="demo-slide">5</div>
</b-carousel>
</div>
19 changes: 19 additions & 0 deletions public/Carousel/autoplay.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<style>
.demo-slide {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom right, #5193e9, #0e61cd);
color: #fff;
font-size: 48px;
}
</style>

<b-carousel autoplay autoplay-delay="5000" loop>
<div class="demo-slide">1</div>
<div class="demo-slide">2</div>
<div class="demo-slide">3</div>
<div class="demo-slide">4</div>
<div class="demo-slide">5</div>
</b-carousel>
19 changes: 19 additions & 0 deletions public/Carousel/basicUsage.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<style>
.demo-slide {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom right, #5193e9, #0e61cd);
color: #fff;
font-size: 48px;
}
</style>

<b-carousel>
<div class="demo-slide">1</div>
<div class="demo-slide">2</div>
<div class="demo-slide">3</div>
<div class="demo-slide">4</div>
<div class="demo-slide">5</div>
</b-carousel>
19 changes: 19 additions & 0 deletions public/Carousel/disableDrag.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<style>
.demo-slide {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom right, #5193e9, #0e61cd);
color: #fff;
font-size: 48px;
}
</style>

<b-carousel disable-drag navigation>
<div class="demo-slide">1</div>
<div class="demo-slide">2</div>
<div class="demo-slide">3</div>
<div class="demo-slide">4</div>
<div class="demo-slide">5</div>
</b-carousel>
23 changes: 23 additions & 0 deletions public/Carousel/disableFill.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<style>
.demo-slide {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom right, #5193e9, #0e61cd);
color: #fff;
font-size: 48px;
}
</style>

<b-carousel slides-per-view="3" gap="50">
<div class="demo-slide">1</div>
<div class="demo-slide">2</div>
</b-carousel>

<b-divider></b-divider>

<b-carousel slides-per-view="3" disable-fill gap="50">
<div class="demo-slide">1</div>
<div class="demo-slide">2</div>
</b-carousel>
19 changes: 19 additions & 0 deletions public/Carousel/gap.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<style>
.demo-slide {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom right, #5193e9, #0e61cd);
color: #fff;
font-size: 48px;
}
</style>

<b-carousel gap="50" slides-per-view="3" loop>
<div class="demo-slide">1</div>
<div class="demo-slide">2</div>
<div class="demo-slide">3</div>
<div class="demo-slide">4</div>
<div class="demo-slide">5</div>
</b-carousel>
19 changes: 19 additions & 0 deletions public/Carousel/indicator.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<style>
.demo-slide {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom right, #5193e9, #0e61cd);
color: #fff;
font-size: 48px;
}
</style>

<b-carousel indicator>
<div class="demo-slide">1</div>
<div class="demo-slide">2</div>
<div class="demo-slide">3</div>
<div class="demo-slide">4</div>
<div class="demo-slide">5</div>
</b-carousel>
19 changes: 19 additions & 0 deletions public/Carousel/loop.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<style>
.demo-slide {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom right, #5193e9, #0e61cd);
color: #fff;
font-size: 48px;
}
</style>

<b-carousel loop>
<div class="demo-slide">1</div>
<div class="demo-slide">2</div>
<div class="demo-slide">3</div>
<div class="demo-slide">4</div>
<div class="demo-slide">5</div>
</b-carousel>
19 changes: 19 additions & 0 deletions public/Carousel/navigation.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<style>
.demo-slide {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom right, #5193e9, #0e61cd);
color: #fff;
font-size: 48px;
}
</style>

<b-carousel navigation>
<div class="demo-slide">1</div>
<div class="demo-slide">2</div>
<div class="demo-slide">3</div>
<div class="demo-slide">4</div>
<div class="demo-slide">5</div>
</b-carousel>
19 changes: 19 additions & 0 deletions public/Carousel/slidesPerView.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<style>
.demo-slide {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom right, #5193e9, #0e61cd);
color: #fff;
font-size: 48px;
}
</style>

<b-carousel slides-per-view="3">
<div class="demo-slide">1</div>
<div class="demo-slide">2</div>
<div class="demo-slide">3</div>
<div class="demo-slide">4</div>
<div class="demo-slide">5</div>
</b-carousel>

0 comments on commit b5e1a2a

Please sign in to comment.