reactstrap#Carousel JavaScript Examples
The following examples show how to use
reactstrap#Carousel.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: slide.js From gedge-platform with Apache License 2.0 | 6 votes |
|
render() {
const { activeIndex } = this.state;
const slides = items.map((item) => {
return (
<CarouselItem
onExiting={this.onExiting}
onExited={this.onExited}
key={item.src} >
<img src={item.src} className="d-block img-fluid" alt={item.altText} />
</CarouselItem>
);
});
return (
<React.Fragment>
<Carousel
activeIndex={activeIndex}
next={this.next}
previous={this.previous} >
{slides}
</Carousel>
</React.Fragment>
);
}
Example #2
| Source File: slidewithcaption.js From gedge-platform with Apache License 2.0 | 6 votes |
|
render() {
const { activeIndex } = this.state;
const slides = items.map((item) => {
return (
<CarouselItem
onExiting={this.onExiting}
onExited={this.onExited}
key={item.src} >
<img src={item.src} className="d-block img-fluid" alt={item.altText} />
<CarouselCaption captionText={item.altText} captionHeader={item.caption} />
</CarouselItem>
);
});
return (
<React.Fragment>
<Carousel
activeIndex={activeIndex}
next={this.next}
previous={this.previous} >
<CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
{slides}
<CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
<CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
</Carousel>
</React.Fragment>
);
}
Example #3
| Source File: slidewithcontrol.js From gedge-platform with Apache License 2.0 | 6 votes |
|
render() {
const { activeIndex } = this.state;
const slides = items.map((item) => {
return (
<CarouselItem
onExiting={this.onExiting}
onExited={this.onExited}
key={item.src} >
<img src={item.src} className="d-block img-fluid" alt={item.altText} />
</CarouselItem>
);
});
return (
<React.Fragment>
<Carousel
activeIndex={activeIndex}
next={this.next}
previous={this.previous} >
{slides}
<CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
<CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
</Carousel>
</React.Fragment>
);
}
Example #4
| Source File: slidewithfade.js From gedge-platform with Apache License 2.0 | 6 votes |
|
render() {
const { activeIndex } = this.state;
const slides = items.map((item) => {
return (
<CarouselItem
onExiting={this.onExiting}
onExited={this.onExited}
key={item.src} >
<img src={item.src} className="d-block img-fluid" alt={item.altText} />
</CarouselItem>
);
});
return (
<React.Fragment>
<Carousel
activeIndex={activeIndex}
fade={true}
next={this.next}
previous={this.previous} >
<CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
{slides}
<CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
<CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
</Carousel>
</React.Fragment>
);
}
Example #5
| Source File: slidewithindicator.js From gedge-platform with Apache License 2.0 | 6 votes |
|
render() {
const { activeIndex } = this.state;
const slides = items.map((item) => {
return (
<CarouselItem
onExiting={this.onExiting}
onExited={this.onExited}
key={item.src} >
<img src={item.src} className="d-block img-fluid" alt={item.altText} />
</CarouselItem>
);
});
return (
<React.Fragment>
<Carousel
activeIndex={activeIndex}
next={this.next}
previous={this.previous} >
<CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
{slides}
<CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
<CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
</Carousel>
</React.Fragment>
);
}
Example #6
| Source File: Carrousel.js From mattress-store with MIT License | 5 votes |
|
Carrousel = props => {
const { products } = props;
const [activeIndex, setActiveIndex] = useState(0);
const [animating, setAnimating] = useState(false);
const next = () => {
if (animating) return;
const nextIndex =
activeIndex === products.length - 1 ? 0 : activeIndex + 1;
setActiveIndex(nextIndex);
};
const previous = () => {
if (animating) return;
const nextIndex =
activeIndex === 0 ? products.length - 1 : activeIndex - 1;
setActiveIndex(nextIndex);
};
const goToIndex = newIndex => {
if (animating) return;
setActiveIndex(newIndex);
};
const slides = products.map(product => {
return (
<CarouselItem
className="custom-tag"
tag="div"
onExiting={() => setAnimating(true)}
onExited={() => setAnimating(false)}
>
<CarrouselItemComponent product={product} />
<CarouselCaption
captionText={product.name}
className="text-danger"
/>
</CarouselItem>
);
});
return (
<div>
<Carousel
activeIndex={activeIndex}
next={next}
previous={previous}
ride="carousel"
interval="6000"
>
<CarouselIndicators
items={products}
activeIndex={activeIndex}
onClickHandler={goToIndex}
/>
{slides}
<CarouselControl
direction="prev"
directionText="Previous"
onClickHandler={previous}
className="carrousel-control"
/>
<CarouselControl
direction="next"
directionText="Next"
onClickHandler={next}
className="carrousel-control"
/>
</Carousel>
</div>
);
}
Example #7
| Source File: index.js From gobench with Apache License 2.0 | 5 votes |
|
render() {
const { activeIndex } = this.state
const slides = items.map(item => {
return (
<CarouselItem onExiting={this.onExiting} onExited={this.onExited} key={item.src}>
<img src={item.src} alt={item.altText} />
<CarouselCaption captionText={item.caption} captionHeader={item.caption} />
</CarouselItem>
)
})
return (
<div>
<h5 className="mb-4">
<strong>Default Carousel</strong>
</h5>
<div className="mb-5">
<Carousel activeIndex={activeIndex} next={this.next} previous={this.previous}>
{slides}
<CarouselControl
direction="prev"
directionText="Previous"
onClickHandler={this.previous}
/>
<CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
</Carousel>
</div>
<h5 className="mb-4">
<strong>With Indicators</strong>
</h5>
<Carousel activeIndex={activeIndex} next={this.next} previous={this.previous}>
<CarouselIndicators
items={items}
activeIndex={activeIndex}
onClickHandler={this.goToIndex}
/>
{slides}
<CarouselControl
direction="prev"
directionText="Previous"
onClickHandler={this.previous}
/>
<CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
</Carousel>
</div>
)
}
Example #8
| Source File: Carousels.js From id.co.moonlay-eworkplace-admin-web with MIT License | 5 votes |
|
render() {
const { activeIndex } = this.state;
const slides = items.map((item) => {
return (
<CarouselItem onExiting={this.onExiting} onExited={this.onExited} key={item.src}>
<img className="d-block w-100" src={item.src} alt={item.altText} />
</CarouselItem>
);
});
const slides2 = items.map((item) => {
return (
<CarouselItem
onExiting={this.onExiting}
onExited={this.onExited}
key={item.src}
>
<img className="d-block w-100" src={item.src} alt={item.altText} />
<CarouselCaption captionText={item.caption} captionHeader={item.caption} />
</CarouselItem>
);
});
return (
<div className="animated fadeIn">
<Row>
<Col xs="12" xl="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Carousel</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/carousel/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<Carousel activeIndex={activeIndex} next={this.next} previous={this.previous} ride="carousel">
{slides}
</Carousel>
</CardBody>
</Card>
</Col>
<Col xs="12" xl="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Carousel</strong>
</CardHeader>
<CardBody>
<Carousel activeIndex={activeIndex} next={this.next} previous={this.previous}>
<CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
{slides2}
<CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
<CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
</Carousel>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
Example #9
| Source File: SectionCarousel.js From Website2020 with MIT License | 4 votes |
|
function SectionCarousel() {
const [activeIndex, setActiveIndex] = React.useState(0);
const [animating, setAnimating] = React.useState(false);
const onExiting = () => {
setAnimating(true);
};
const onExited = () => {
setAnimating(false);
};
const next = () => {
if (animating) return;
const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1;
setActiveIndex(nextIndex);
};
const previous = () => {
if (animating) return;
const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1;
setActiveIndex(nextIndex);
};
const goToIndex = newIndex => {
if (animating) return;
setActiveIndex(newIndex);
};
return (
<>
<div className="section pt-o" id="carousel">
<Container>
<Row>
<Col className="ml-auto mr-auto" md="8">
<Card className="page-carousel">
<Carousel
activeIndex={activeIndex}
next={next}
previous={previous}
>
<CarouselIndicators
items={items}
activeIndex={activeIndex}
onClickHandler={goToIndex}
/>
{items.map(item => {
return (
<CarouselItem
onExiting={onExiting}
onExited={onExited}
key={item.src}
>
<img src={item.src} alt={item.altText} />
<CarouselCaption
captionText={item.caption}
captionHeader=""
/>
</CarouselItem>
);
})}
<a
className="left carousel-control carousel-control-prev"
data-slide="prev"
href="#pablo"
onClick={e => {
e.preventDefault();
previous();
}}
role="button"
>
<span className="fa fa-angle-left" />
<span className="sr-only">Previous</span>
</a>
<a
className="right carousel-control carousel-control-next"
data-slide="next"
href="#pablo"
onClick={e => {
e.preventDefault();
next();
}}
role="button"
>
<span className="fa fa-angle-right" />
<span className="sr-only">Next</span>
</a>
</Carousel>
</Card>
</Col>
</Row>
</Container>
</div>{" "}
</>
);
}
Example #10
| Source File: ProfileCarousel.js From Frontend with Apache License 2.0 | 4 votes |
|
ProfileCarousel = (props) => {
let items = []
if (props.codeforces) {
items = [
{
id: 1,
altText: 'Organization Rank',
caption: `${props.codeforces.result.organizationRank}`,
},
{
id: 2,
altText: 'Country Rank',
caption: `${props.codeforces.result.countryRank}`,
},
{
id: 3,
altText: 'World Rank',
caption: `${props.codeforces.result.worldRank}`,
},
]
} else if (props.codechef) {
items = [
{
id: 1,
altText: 'Country Rank',
caption: `${props.codechef.result.countryRank}`,
},
{
id: 2,
altText: 'World Rank',
caption: `${props.codechef.result.worldRank}`,
},
]
}
const [activeIndex, setActiveIndex] = useState(0)
const [animating, setAnimating] = useState(false)
const next = () => {
if (animating) return
const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1
setActiveIndex(nextIndex)
}
const previous = () => {
if (animating) return
const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1
setActiveIndex(nextIndex)
}
const goToIndex = (newIndex) => {
if (animating) return
setActiveIndex(newIndex)
}
const slides = items.map((item) => {
return (
<CarouselItem
className="custom-tag"
tag="div"
key={item.id}
onExiting={() => setAnimating(true)}
onExited={() => setAnimating(false)}
>
<CarouselCaption className="header-tag" captionText={item.altText} />
<CarouselCaption className="caption-tag" captionText={item.caption} />
</CarouselItem>
)
})
return (
<div>
<style>
{`.custom-tag {
padding-top: 50px;
height: 175px;
background: black;
}
.header-tag{
font-size: 13px;
}
.caption-tag{
font-size: 28px;
margin-bottom: 25px;
}
`}
</style>
<Carousel activeIndex={activeIndex} next={next} previous={previous}>
<CarouselIndicators
items={items}
activeIndex={activeIndex}
onClickHandler={goToIndex}
/>
{slides}
</Carousel>
</div>
)
}
Example #11
| Source File: help.js From hivemind with Apache License 2.0 | 4 votes |
|
CreateChildCarousel = () => {
const [activeIndex, setActiveIndex] = useState(0)
const [animating, setAnimating] = useState(false)
const items = [
{
contents: (
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-4 Hivemind.png"
alt="Context Menu"
/>
<CardBody>
<CardTitle tag="h5">Open the Context Menu</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Accessible from any node on the canvas.
</CardSubtitle>
<CardText>
Contents may vary depending on state of mindmap and node.
</CardText>
</CardBody>
</Card>
),
caption: 'Open the Context Menu',
},
{
contents: (
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-5 Hivemind.png"
alt="Child Node"
/>
<CardBody>
<CardTitle tag="h5">Create a Child Node</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Accessed by clicking on the ‘<Plus /> Child’ option from the
context menu.
</CardSubtitle>
<CardText>
Type a name and hit ⏎. The newly created child node will show up
under the node from which the context menu was opened.
</CardText>
</CardBody>
</Card>
),
caption: 'Create a Child Node',
},
]
const next = () => {
if (animating) {
return
}
const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1
setActiveIndex(nextIndex)
}
const previous = () => {
if (animating) {
return
}
const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1
setActiveIndex(nextIndex)
}
const slides = items.map((item, idx) => {
return (
<CarouselItem
onExiting={() => setAnimating(true)}
onExited={() => setAnimating(false)}
key={idx}
interval={false}
>
{item.contents}
</CarouselItem>
)
})
return (
<Carousel activeIndex={activeIndex} next={next} previous={previous}>
{slides}
<CarouselControl
direction="prev"
directionText="Previous"
onClickHandler={previous}
/>
<CarouselControl
direction="next"
directionText="Next"
onClickHandler={next}
/>
</Carousel>
)
}
Example #12
| Source File: help.js From hivemind with Apache License 2.0 | 4 votes |
|
HideCarousel = () => {
const [activeIndex, setActiveIndex] = useState(0)
const [animating, setAnimating] = useState(false)
const items = [
{
contents: (
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-4 Hivemind.png"
alt="Context Menu"
/>
<CardBody>
<CardTitle tag="h5">Open the Context Menu</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
The ‘<EyeOff /> Hide’ option is accessible from any node on the
canvas (except root).
</CardSubtitle>
<CardText>Useful for reducing clutter on the canvas.</CardText>
</CardBody>
</Card>
),
caption: 'Open the Context Menu',
},
{
contents: (
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-8 Hivemind.png"
alt="Hide Node"
/>
<CardBody>
<CardTitle tag="h5">Hide a Node</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Accessed by clicking on the ‘<EyeOff /> Hide’ option from the
context menu.
</CardSubtitle>
<CardText>
Hides the entire sub-tree under this node (as well as the node
itself). Shades the parent to indicate hidden children.
</CardText>
</CardBody>
</Card>
),
caption: 'Hide a Child Node',
},
]
const next = () => {
if (animating) {
return
}
const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1
setActiveIndex(nextIndex)
}
const previous = () => {
if (animating) {
return
}
const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1
setActiveIndex(nextIndex)
}
const slides = items.map((item, idx) => {
return (
<CarouselItem
onExiting={() => setAnimating(true)}
onExited={() => setAnimating(false)}
key={idx}
>
{item.contents}
</CarouselItem>
)
})
return (
<Carousel
activeIndex={activeIndex}
next={next}
previous={previous}
interval={false}
>
{slides}
<CarouselControl
direction="prev"
directionText="Previous"
onClickHandler={previous}
/>
<CarouselControl
direction="next"
directionText="Next"
onClickHandler={next}
/>
</Carousel>
)
}
Example #13
| Source File: help.js From hivemind with Apache License 2.0 | 4 votes |
|
RevealCarousel = () => {
const [activeIndex, setActiveIndex] = useState(0)
const [animating, setAnimating] = useState(false)
const items = [
{
contents: (
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-9 Hivemind.png"
alt="Context Menu"
/>
<CardBody>
<CardTitle tag="h5">Open the Context Menu</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
The ‘<Eye /><ArrowDownRight /> Reveal’ option is accessible from any node that
has hidden children.
</CardSubtitle>
<CardText>
Used to reveal (un-hide) the entire sub-tree under the node.
</CardText>
</CardBody>
</Card>
),
caption: 'Open the Context Menu',
},
{
contents: (
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-15 Hivemind.png"
alt="Reveal Node"
/>
<CardBody>
<CardTitle tag="h5">Reveal a Node</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Accessed by clicking on the ‘<Eye /><ArrowDownRight /> Reveal’ option from the context menu.
</CardSubtitle>
<CardText>
Reveals the entire sub-tree under this node. Un-shades the node to
indicate no hidden children.
</CardText>
</CardBody>
</Card>
),
caption: 'Reveal a Node',
},
]
const next = () => {
if (animating) {
return
}
const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1
setActiveIndex(nextIndex)
}
const previous = () => {
if (animating) {
return
}
const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1
setActiveIndex(nextIndex)
}
const slides = items.map((item, idx) => {
return (
<CarouselItem
onExiting={() => setAnimating(true)}
onExited={() => setAnimating(false)}
key={idx}
>
{item.contents}
</CarouselItem>
)
})
return (
<Carousel
activeIndex={activeIndex}
next={next}
previous={previous}
interval={false}
>
{slides}
<CarouselControl
direction="prev"
directionText="Previous"
onClickHandler={previous}
/>
<CarouselControl
direction="next"
directionText="Next"
onClickHandler={next}
/>
</Carousel>
)
}
Example #14
| Source File: help.js From hivemind with Apache License 2.0 | 4 votes |
|
TimelineCarousel = () => {
const [activeIndex, setActiveIndex] = useState(0)
const [animating, setAnimating] = useState(false)
const items = [
{
contents: (
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-11 Hivemind.png"
alt="Event Detail"
/>
<CardBody>
<CardTitle tag="h5">Event Detail</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Shows the delta associated with an event (update, in this
instance).
</CardSubtitle>
<CardText>
Accessed by clicking on an event on the timeline. Fields that were
changed are marked in colour. The event time is displayed. If the
title was changed, both the old and new title are shown in the
header section of the detail popup. Clicking on the{' '}
<Button outline color="secondary" size={'sm'}>
<MapPin /> Jump
</Button>{' '}
button makes the mind map jump to a point in time just after this
event had occured. This updates the canvas and also focuses the
timeline on this event.
</CardText>
</CardBody>
</Card>
),
caption: 'Event Detail',
},
{
contents: (
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-12 Hivemind.png"
alt="Timeline Jump"
/>
<CardBody>
<CardTitle tag="h5">Timeline Jump</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Accessed by clicking on the{' '}
<Button outline color="secondary" size={'sm'}>
<MapPin /> Jump
</Button>{' '}
button from the event detail popup.
</CardSubtitle>
<CardText>
The mind map has jumped to the point in time at which this event
had occured. The state of the canvas reflects the mind map was in
just after this event had occurred. The affected node is
higlighted with a blue border. The timeline focusses on the event
in question.
</CardText>
</CardBody>
</Card>
),
caption: 'Timeline Jump',
},
{
contents: (
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-13 Hivemind.png"
alt="Event Detail"
/>
<CardBody>
<CardTitle tag="h5">Event Detail (Focussed)</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Shows the delta associated with an event (update, in this
instance).
</CardSubtitle>
<CardText>
Accessed by clicking on an (focussed) event on the timeline. The{' '}
<Button outline color="secondary" size={'sm'}>
<MapPin /> Jump
</Button>{' '}
button is now replaced with a{' '}
<Button outline color="secondary" size={'sm'}>
<Search /> Find
</Button>{' '}
button. This can be used to zoom in on the affected node on the
canvas.
</CardText>
</CardBody>
</Card>
),
caption: 'Focussing on an Event Detail',
},
{
contents: (
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-14 Hivemind.png"
alt="Find Node"
/>
<CardBody>
<CardTitle tag="h5">Find Node</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Accessed by clicking on the{' '}
<Button outline color="secondary" size={'sm'}>
<Search /> Find
</Button>{' '}
button from the event detail popup.
</CardSubtitle>
<CardText>
The canvas zooms in on the node affected by the event.
</CardText>
</CardBody>
</Card>
),
caption: 'Find Node',
},
]
const next = () => {
if (animating) {
return
}
const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1
setActiveIndex(nextIndex)
}
const previous = () => {
if (animating) {
return
}
const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1
setActiveIndex(nextIndex)
}
const slides = items.map((item, idx) => {
return (
<CarouselItem
onExiting={() => setAnimating(true)}
onExited={() => setAnimating(false)}
key={idx}
interval={false}
>
{item.contents}
</CarouselItem>
)
})
return (
<Carousel activeIndex={activeIndex} next={next} previous={previous}>
{slides}
<CarouselControl
direction="prev"
directionText="Previous"
onClickHandler={previous}
/>
<CarouselControl
direction="next"
directionText="Next"
onClickHandler={next}
/>
</Carousel>
)
}
Example #15
| Source File: help.js From hivemind with Apache License 2.0 | 4 votes |
|
FitCarousel = () => {
const [activeIndex, setActiveIndex] = useState(0)
const [animating, setAnimating] = useState(false)
const items = [
{
contents: (
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-20 Hivemind.png"
alt="Messed-Up Layout"
/>
<CardBody>
<CardTitle tag="h5">Messed-Up Layout</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Nodes on the canvas have been manually dragged around.
</CardSubtitle>
<CardText>
Use{' '}
<Button outline color="primary" size={'sm'}>
<Maximize />
</Button>{' '}
to re-run the layout and achieve optimal fit.
</CardText>
</CardBody>
</Card>
),
caption: 'A Messed-Up Layout',
},
{
contents: (
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-15 Hivemind.png"
alt="Layout Fixed"
/>
<CardBody>
<CardTitle tag="h5">Layout Fixed</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Optimal fit achieved.
</CardSubtitle>
<CardText>
This resets any movement on canvas, and also refits nodes after a
hide/reveal.
</CardText>
</CardBody>
</Card>
),
caption: 'Layout Fixed',
},
]
const next = () => {
if (animating) {
return
}
const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1
setActiveIndex(nextIndex)
}
const previous = () => {
if (animating) {
return
}
const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1
setActiveIndex(nextIndex)
}
const slides = items.map((item, idx) => {
return (
<CarouselItem
onExiting={() => setAnimating(true)}
onExited={() => setAnimating(false)}
key={idx}
>
{item.contents}
</CarouselItem>
)
})
return (
<Carousel
activeIndex={activeIndex}
next={next}
previous={previous}
interval={false}
>
{slides}
<CarouselControl
direction="prev"
directionText="Previous"
onClickHandler={previous}
/>
<CarouselControl
direction="next"
directionText="Next"
onClickHandler={next}
/>
</Carousel>
)
}
Example #16
| Source File: help.js From hivemind with Apache License 2.0 | 4 votes |
|
ShowCarousel = () => {
const [activeIndex, setActiveIndex] = useState(0)
const [animating, setAnimating] = useState(false)
const items = [
{
contents: (
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-18 Hivemind.png"
alt="Hidden Nodes"
/>
<CardBody>
<CardTitle tag="h5">Canvas with Hidden Nodes</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Some nodes/sub-trees on the canvas have been hidden.
</CardSubtitle>
<CardText>
After hiding, the canvas was told to rerun its layout to optimally
fit the now visible nodes.
</CardText>
</CardBody>
</Card>
),
caption: 'Hidden Nodes',
},
{
contents: (
<Card className={'mb-4'}>
<CardImg
top
width="100%"
src="/img/help/Screenshot_2021-03-28-19 Hivemind.png"
alt="All Nodes Revealed"
/>
<CardBody>
<CardTitle tag="h5">All Nodes Revealed</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
All hidden nodes/sub-trees are revealed.
</CardSubtitle>
<CardText>
This reveals any hidden nodes/sub-trees on canvas, and also reruns
the layout to optimally fit the now fully visible mind map.
</CardText>
</CardBody>
</Card>
),
caption: 'Layout Fixed',
},
]
const next = () => {
if (animating) {
return
}
const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1
setActiveIndex(nextIndex)
}
const previous = () => {
if (animating) {
return
}
const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1
setActiveIndex(nextIndex)
}
const slides = items.map((item, idx) => {
return (
<CarouselItem
onExiting={() => setAnimating(true)}
onExited={() => setAnimating(false)}
key={idx}
>
{item.contents}
</CarouselItem>
)
})
return (
<Carousel
activeIndex={activeIndex}
next={next}
previous={previous}
interval={false}
>
{slides}
<CarouselControl
direction="prev"
directionText="Previous"
onClickHandler={previous}
/>
<CarouselControl
direction="next"
directionText="Next"
onClickHandler={next}
/>
</Carousel>
)
}
