test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:48:45 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

增加轮播图

Browse Source
This commit is contained in:
catchonme 2019-05-16 16:31:20 +08:00
parent 42ebbd2d50
commit 3392d4a77f
14 changed files with 231 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/renderers.md
View File

@ -68,6 +68,7 @@ amis 页面是通过 JSON 配置出来的，是由一个一个渲染模型组成
- [Service](./renderers/Service.md): 功能型容器，自身不负责展示内容，主要职责在于通过配置的 api 拉取数据
- [Chart](./renderers/Chart.md): 图表渲染器
- [Collapse](./renderers/Collapse.md): 折叠器
- [Carousel](./renderers/Carousel.md): 轮播图
- [Audio](./renderers/Audio.md): 音频播放器
- [Video](./renderers/Video.md): 视频播放器
- [Table](./renderers/Table.md): 表格展示

39
docs/renderers/Carousel.md Normal file
View File

@ -0,0 +1,39 @@
### Carousel
轮播图
- `type` 请设置成 `carousel`
- `className` 外层 Dom 的类名
- `options` 轮播面板数据，默认`[]`，支持以下模式
- `image` 图片链接
- `label` 标签
- `html` HTML 自定义，同[Tpl](./Tpl.md)一致
- `auto` 是否自动轮播，默认`true`
- `interval` 切换动画间隔，默认`5s`
- `duration` 切换动画时长，默认`0.5s`
- `width` 宽度，默认`auto`
- `height` 高度，默认`200px`
- `controls` 显示左右箭头、底部圆点索引，默认`['dots', 'arrows']`
- `controlsTheme` 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式
- `animation` 切换动画效果，默认`fade`，另有`slide`模式
```schema:height="350" scope="body"
{
"type": "carousel",
"controlTheme": "light",
"height": "300",
"animation": "slide",
"className": "b-info m-b-xxl",
"options": [
{
"image": "https://video-react.js.org/assets/poster.png"
},
{
"html": "<div style=\"width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;\">carousel data</div>"
},
{
"image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
}
]
}
```

7
examples/components/App.jsx
View File

@ -66,6 +66,7 @@ import ChartSchema from './Chart';
import HorizontalSchema from './Horizontal';
import VideoSchema from './Video';
import AudioSchema from './Audio';
import CarouselSchema from './Carousel';
import TasksSchema from './Tasks';
import ServicesDataSchema from './Services/Data';
import ServicesSchemaSchema from './Services/Schema';
@ -459,6 +460,12 @@ const navigations = [
path: 'chart',
component: makeSchemaRenderer(ChartSchema)
},
{
label: '轮播图',
icon: 'fa fa-pause',
path: 'carousel',
component: makeSchemaRenderer(CarouselSchema)
},
{
label: '音频',
icon: 'fa fa-volume-up',

1
examples/components/Audio.jsx
View File

@ -5,6 +5,7 @@ export default {
{
"type": "audio",
"autoPlay": false,
"rates": [1.0, 1.5, 2.0],
"src": "http://www.ytmp3.cn/down/32791.mp3",
},
{

3
examples/components/CRUD/Fields.jsx
View File

@ -13,7 +13,8 @@ export default {
{
name: "carousel",
label: "轮播图",
type: "carousel"
type: "carousel",
width: "300"
},
{
name: "text",

56
examples/components/Carousel.jsx Normal file
View File

@ -0,0 +1,56 @@
export default {
type: 'page',
title: '轮播图',
data: {
carousel: [
{
html: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data in form</div>'
},
{
image: 'https://www.baidu.com/img/bd_logo1.png'
},
{
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
}
]
},
body: [
{
type: 'grid',
columns: [
{
type: 'carousel',
controlTheme: 'light',
height: '300',
className: 'm-t-xxl',
options: [
{
image: 'https://video-react.js.org/assets/poster.png'
},
{
html: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data</div>'
},
{
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
}
]
},
{
type: 'form',
title: '表单',
className: 'm-b-xxl',
controls: [
{
type: 'carousel',
controlTheme: 'dark',
name: 'carousel',
label: 'carousel',
animation: 'slide',
height: '300'
}
]
}
]
}
]
}

7
examples/components/Doc.jsx
View File

@ -507,6 +507,13 @@ export default {
cb(null, makeMarkdownRenderer(doc));
}),
},
{
label: 'Carousel',
path: '/docs/renderers/Carousel',
getComponent: (location, cb) => require(['../../docs/renderers/Carousel.md'], (doc) => {
cb(null, makeMarkdownRenderer(doc));
}),
},
{
label: 'Audio',
path: '/docs/renderers/Audio',

71
examples/components/Page/Simple.jsx
View File

@ -2,76 +2,7 @@ export default {
type: 'page',
title: '标题',
remark: '提示 Tip',
data: {
id: 1,
image: "https://www.baidu.com/img/bd_logo1.png",
carousel: [
{
html: '<p style="height: 300px;">This is data </p>'
},
/*{
label: 'This is data and is label'
},*/
/*{
image: 'https://www.baidu.com/img/bd_logo1.png'
},*/
{
// 狗
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
},
{
image: 'https://gss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2018-09-29/208e4ce8af2846d584cbe55b245a4134.jpeg'
}/*,
{
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
// image: 'https://gss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2017-09-27/297f5edb1e984613083a2d3cc0c5bb36.png'
}*/
]
},
body: [{
type: 'form',
title: '表单',
controls: [
{
type: 'carousel',
controlTheme: 'light',
name: 'carousel',
label: 'carousel',
animation: 'slideLeft'
}
]
},
/*{
"type": "card",
className: 'v-middle w',
"header": {
"title": "Title",
"subTitle": "Sub Title",
"description": "description",
"avatarClassName": "pull-left thumb-md avatar b-3x m-r",
"avatar": "http://hiphotos.baidu.com/fex/%70%69%63/item/c9fcc3cec3fdfc03ccabb38edd3f8794a4c22630.jpg"
}
}*/
/*{
type: 'carousel',
width: '500',
height: '200',
controlTheme: 'dark',
controls: ['arrows', 'dots'],
animation: 'slideRight',
options: [
{
html: '<p style="height: 300px;">This is data </p>'
},
{
label: 'This is data and is label'
},
{
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
}
]
}*/
],
body: "内容部分. 可以使用 \\${var} 获取变量。如: `\\$date`: ${date}",
aside: '边栏部分',
toolbar: '工具栏',
initApi: '/api/mock2/page/initData'

15
mock/crud/list.js
View File

@ -24,10 +24,17 @@ module.exports = function(req, res) {
title: '{{name.title}}',
description: '{{lorem.words}}'
}), Math.round(Math.random() * 3)),
carousel: repeat(() => ({
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg',
// html: '<p>{{lorem.words}}</p>'
}), Math.round(Math.random() * 5)),
carousel: [
{
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
},
{
html: '<div style="width: 100%; height: 200px; background: #e3e3e3; text-align: center; line-height: 200px;">carousel data in crud</div>'
},
{
image: 'https://video-react.js.org/assets/poster.png'
}
],
date: Math.round(Date.now() / 1000),
// image: '{{image.imageUrl}}',
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg',

16
scss/_variables.scss
View File

@ -1334,3 +1334,19 @@ $Audio-svg-width: px2rem(20px) !default;
$Audio-svg-height: px2rem(20px) !default;
$Audio-svg-top: px2rem(6px) !default;
$Audio-item-margin: px2rem(10px) !default;
// Carousel
$Carousel-bg: #F6F8F8;
$Carousel-minWidth: px2rem(100px) !default;
$Carousel-height: px2rem(200px) !default;
$Carousel-arrowControl-width: px2rem(20px) !default;
$Carousel-arrowControl-height: px2rem(20px) !default;
$Carousel-svg-width: px2rem(20px) !default;
$Carousel-svg-height: px2rem(20px) !default;
$Carousel-dot-width: px2rem(8px) !default;
$Carousel-dot-height: px2rem(8px) !default;
$Carousel-dot-borderRadius: px2rem(4px) !default;
$Carousel-dot-margin: px2rem(7px) px2rem(5px) !default;
$Carousel-lightTheme: white !default;
$Carousel-darkTheme: black !default;
$Carousel-transitionDuration: 0.3s !default;

71
scss/components/_carousel.scss
View File

@ -1,24 +1,34 @@
@mixin arrow-control {
width: 20px;
height: 20px;
width: 10%;
min-width: $Carousel-arrowControl-width;
height: 100%;
cursor: pointer;
position: absolute;
bottom: 50%;
font: 16px/30px sans-serif;
color: rgba(255, 255, 255, 0.8);
transition-duration: 300ms;
transition-duration: $Carousel-transitionDuration;
}
@mixin svg-props {
position: absolute;
top: 50%;
left: 50%;
right: 50%;
transform: translate(-50%, -50%);
width: $Carousel-svg-width;
height: $Carousel-svg-height;
}
@mixin svg-theme {
&.light {
svg {
fill: white;
@include svg-props;
fill: $Carousel-lightTheme;
}
}
&.dark {
svg {
fill: black;
@include svg-props;
fill: $Carousel-darkTheme;
}
}
}
@ -26,21 +36,19 @@
.#{$ns}Carousel {
position: relative;
display: block;
background: $Carousel-bg;
&-container {
min-width: 100px;
height: 200px;
min-width: $Carousel-minWidth;
height: $Carousel-height;
position: relative;
overflow: hidden;
.#{$ns}Carousel-item {
top:0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background: lightblue;
transition: ease-out all 0.5s;
transition: ease-out all $Carousel-transitionDuration;
&.fade {
opacity: 0;
@ -50,18 +58,16 @@
opacity: 1;
}
&.slideLeft {
&.slide {
transform: translateX(100%);
}
&.slideLeft.in {
&.slide.in {
transform: translateX(0);
z-index: 1;
}
&.slideLeft.out {
&.slide.out {
transform: translateX(-100%);
z-index: -1;
}
&.slideRight {
@ -70,12 +76,10 @@
&.slideRight.in {
transform: translateX(0);
z-index: 1;
}
&.slideRight.out {
transform: translateX(100%);
z-index: -1;
}
> span > img {
@ -85,28 +89,27 @@
}
}
&-control-dots {
&-dotsControl {
position: absolute;
bottom: 0px;
width: 100%;
z-index: 100;
bottom: 0px;
text-align: center;
.#{$ns}Carousel-dot {
display: inline-block;
height: 8px;
width: 8px;
border-radius: 4px;
margin: 7px 5px;
transition-duration: 300ms;
height: $Carousel-dot-width;
width: $Carousel-dot-height;
border-radius: $Carousel-dot-borderRadius;
margin: $Carousel-dot-margin;
transition-duration: $Carousel-transitionDuration;
&.light {
background-color: white;
background-color: $Carousel-lightTheme;
}
&.dark {
background-color: black;
background-color: $Carousel-darkTheme;
}
&.is-default {
@ -119,7 +122,7 @@
}
}
&-control-arrows {
&-arrowsControl {
position: absolute;
width: 100%;
height: inherit;
@ -129,13 +132,13 @@
.#{$ns}Carousel-leftArrow {
@include arrow-control;
@include svg-theme;
left: 10px;
left: 0;
}
.#{$ns}Carousel-rightArrow {
@include arrow-control;
@include svg-theme;
right: 10px;
right: 0;
}
}
}

30
scss/themes/cxd.scss
View File

@ -418,21 +418,21 @@ $TagControl-sugTip-color: $primary;
@import "../components/button";
@import "../components/button-group";
@import "../components/dropdown";
@import"../components/collapse";
@import"../components/wizard";
@import"../components/crud";
@import"../components/table";
@import"../components/list";
@import"../components/cards";
@import"../components/card";
@import"../components/quick-edit";
@import"../components/popoverable";
@import"../components/copyable";
@import"../components/divider";
@import"../components/pagination";
@import"../components/wrapper";
@import"../components/status";
@import"../components/carousel";
@import "../components/collapse";
@import "../components/wizard";
@import "../components/crud";
@import "../components/table";
@import "../components/list";
@import "../components/cards";
@import "../components/card";
@import "../components/quick-edit";
@import "../components/popoverable";
@import "../components/copyable";
@import "../components/divider";
@import "../components/pagination";
@import "../components/wrapper";
@import "../components/status";
@import "../components/carousel";
@import "../components/form/fieldset";
@import "../components/form/group";

30
scss/themes/default.scss
View File

@ -45,21 +45,21 @@ $Form-input-borderColor: #cfdadd;
@import "../components/button";
@import "../components/button-group";
@import "../components/dropdown";
@import"../components/collapse";
@import"../components/wizard";
@import"../components/crud";
@import"../components/table";
@import"../components/list";
@import"../components/cards";
@import"../components/card";
@import"../components/quick-edit";
@import"../components/popoverable";
@import"../components/copyable";
@import"../components/divider";
@import"../components/pagination";
@import"../components/wrapper";
@import"../components/status";
@import"../components/carousel";
@import "../components/collapse";
@import "../components/wizard";
@import "../components/crud";
@import "../components/table";
@import "../components/list";
@import "../components/cards";
@import "../components/card";
@import "../components/quick-edit";
@import "../components/popoverable";
@import "../components/copyable";
@import "../components/divider";
@import "../components/pagination";
@import "../components/wrapper";
@import "../components/status";
@import "../components/carousel";
@import "../components/form/fieldset";
@import "../components/form/group";

50
src/renderers/Carousel.tsx
View File

@ -1,17 +1,17 @@
import * as React from 'react';
import Transition, {ENTERED, ENTERING, EXITED, EXITING} from 'react-transition-group/Transition';
import Transition, {ENTERED, ENTERING, EXITING} from 'react-transition-group/Transition';
import {Renderer, RendererProps} from '../factory';
import {autobind} from '../utils/helper';
import {dotIcon, leftArrowIcon, rightArrowIcon} from '../components/icons';
import {leftArrowIcon, rightArrowIcon} from '../components/icons';
const animationStyles: {
[propName: string]: string;
} = {
[ENTERING]: 'in',
[ENTERED]: 'in',
[EXITING]: 'out',
// [EXITED]: 'out'
[EXITING]: 'out'
};
export interface CarouselProps extends RendererProps {
className?: string;
auto?: boolean;
@ -22,15 +22,15 @@ export interface CarouselProps extends RendererProps {
controls: string[];
interval: number;
duration: number;
controlTheme: 'light' | 'dark';
animation: 'fade' | 'slideLeft' | 'slideRight';
controlsTheme: 'light' | 'dark';
animation: 'fade' | 'slide';
}
export interface CarouselState {
current: number;
options: any[];
showArrows: boolean;
nextAnimation?: 'slideLeft' | 'slideRight' | '';
nextAnimation: string;
}
export class Carousel extends React.Component<CarouselProps, CarouselState> {
@ -40,12 +40,12 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
static defaultProps: Pick<
CarouselProps,
'auto' | 'interval' | 'duration' | 'controlTheme' | 'animation' | 'controls' | 'placeholder'
'auto' | 'interval' | 'duration' | 'controlsTheme' | 'animation' | 'controls' | 'placeholder'
> = {
auto: true,
interval: 2000,
interval: 5000,
duration: 500,
controlTheme: 'light',
controlsTheme: 'light',
animation: 'fade',
controls: ['dots', 'arrows'],
placeholder: ''
@ -86,13 +86,10 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
switch (rel) {
case 'prev':
animation.includes('slide') ? nextAnimation = 'slideLeft' : nextAnimation = '';
animation === 'slide' ? nextAnimation = 'slideRight' : nextAnimation = '';
this.transitFramesTowards('right', nextAnimation);
break;
case 'next':
animation.includes('slide') ? nextAnimation = 'slideRight' : nextAnimation = '';
this.transitFramesTowards('left', nextAnimation);
break;
default:
nextAnimation = '';
this.transitFramesTowards('left', nextAnimation);
@ -103,7 +100,7 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
}
@autobind
transitFramesTowards (direction:string, nextAnimation: 'slideLeft' | 'slideRight' | '') {
transitFramesTowards (direction:string, nextAnimation: string) {
let {current} = this.state;
switch (direction) {
@ -156,33 +153,33 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
}
renderDots() {
const {classnames: cx, controlTheme} = this.props;
const {classnames: cx, controlsTheme} = this.props;
const {current, options} = this.state;
return (
<div
className={cx('Carousel-control-dots')}
className={cx('Carousel-dotsControl')}
onMouseEnter={this.handleMouseEnter}
onMouseMove={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
>
{Array.from({length: options.length}).map((_, i) =>
<span key={i} className={cx('Carousel-dot', controlTheme, current === i ? 'is-active' : 'is-default')}></span>
<span key={i} className={cx('Carousel-dot', controlsTheme, current === i ? 'is-active' : 'is-default')}></span>
)}
</div>
)
}
renderButtons() {
const {classnames: cx, controlTheme} = this.props;
renderArrows() {
const {classnames: cx, controlsTheme} = this.props;
return (
<div
className={cx('Carousel-control-arrows')}
className={cx('Carousel-arrowsControl')}
onMouseEnter={this.handleMouseEnter}
onMouseMove={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
>
<div className={cx('Carousel-leftArrow', controlTheme)} onClick={this.prev}>{leftArrowIcon}</div>
<div className={cx('Carousel-rightArrow', controlTheme)} onClick={this.next}>{rightArrowIcon}</div>
<div className={cx('Carousel-leftArrow', controlsTheme)} onClick={this.prev}>{leftArrowIcon}</div>
<div className={cx('Carousel-rightArrow', controlsTheme)} onClick={this.next}>{rightArrowIcon}</div>
</div>
)
}
@ -244,14 +241,13 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
ref={this.setWrapperRef}
className={cx('Carousel-container')}
onMouseEnter={this.handleMouseEnter}
onMouseMove={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
style={style}
>
{options.map((option:any, key:number) => (
<Transition
mountOnEnter={false}
unmountOnExit={false}
mountOnEnter
unmountOnExit
in={key === current}
timeout={500}
key={key}
@ -272,7 +268,7 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
</Transition>
))}
{dots ? this.renderDots() : null}
{arrows && showArrows ? this.renderButtons() : null}
{arrows && showArrows ? this.renderArrows() : null}
</div>
);
}