-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(docs): add use-cases for carousel component (#4689)
- Loading branch information
1 parent
07aced2
commit 2eeab60
Showing
12 changed files
with
242 additions
and
0 deletions.
There are no files selected for viewing
13 changes: 13 additions & 0 deletions
13
docs/spec/carousel/carousel.examples.accessibility.use-case.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
3.11: Carousel Accessibility example | ||
============================ | ||
**Primary Actor**: User | ||
|
||
**Scope**: Ngx-bootstrap DEMO / BS version 3&4 | ||
|
||
**Goal**: Show user info about Accessibility | ||
|
||
Main success scenario: | ||
---------------------- | ||
1. User open Carousel demo page | ||
2. User click on Accessibility sub-menu | ||
3. User see info about "alt" attribute |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
3.1: Carousel basic example | ||
=========================== | ||
**Primary Actor**: User | ||
|
||
**Scope**: Ngx-bootstrap DEMO / BS version 3&4 | ||
|
||
**Goal**: Show user basic carousel functionality | ||
|
||
Main success scenario: | ||
---------------------- | ||
1. User open Carousel demo page | ||
2. User click on Basic sub-menu | ||
3. User see carousel component with 3 slides and 2 arrows: left, right | ||
4. When user click on left arrow - previous slide shown | ||
5. When user click on right arrow - next slide shown | ||
6. When user do nothing more than 5 sec - next slide automatically shown | ||
|
||
Variations: | ||
----------- | ||
2*. User scroll to Basic sub-menu |
21 changes: 21 additions & 0 deletions
21
docs/spec/carousel/carousel.examples.config-defaults.use-case.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
3.3: Carousel Configuring defaults example | ||
========================================== | ||
**Primary Actor**: User | ||
|
||
**Scope**: Ngx-bootstrap DEMO / BS version 3&4 | ||
|
||
**Goal**: Show user example of changing default parameters in carousel configuration | ||
|
||
Main success scenario: | ||
---------------------- | ||
1. User open Carousel demo page | ||
2. User click on Configuring defaults sub-menu | ||
3. User see carousel component with 3 slides and 2 arrows: left, right | ||
4. When user click on left arrow - previous slide shown | ||
5. When user click on right arrow - next slide shown | ||
6. When user do nothing more than X miliseconds - next slide automatically shown | ||
7. Component src should show example of usage: interval (X), noPause, showIndicators parameters | ||
|
||
Variations: | ||
----------- | ||
2*. User scroll to Configuring defaults sub-menu |
20 changes: 20 additions & 0 deletions
20
docs/spec/carousel/carousel.examples.custom-content.use-case.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
3.6: Carousel Custom content example | ||
=========================== | ||
**Primary Actor**: User | ||
|
||
**Scope**: Ngx-bootstrap DEMO / BS version 3&4 | ||
|
||
**Goal**: Show user carousel example with custom content | ||
|
||
Main success scenario: | ||
---------------------- | ||
1. User open Carousel demo page | ||
2. User click on Custom content sub-menu | ||
3. User see carousel component with 3 slides and 2 arrows: left, right | ||
4. User see info in each carousel slide: headers, info | ||
5. When user click on left arrow - previous slide shown | ||
6. When user click on right arrow - next slide shown | ||
|
||
Variations: | ||
----------- | ||
2*. User scroll to Custom content sub-menu |
20 changes: 20 additions & 0 deletions
20
docs/spec/carousel/carousel.examples.disable-indicator.use-case.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
3.8: Carousel Disable indicator example | ||
======================================= | ||
**Primary Actor**: User | ||
|
||
**Scope**: Ngx-bootstrap DEMO / BS version 3&4 | ||
|
||
**Goal**: Show user how to disable indicator of carousel and items inside | ||
|
||
Main success scenario: | ||
---------------------- | ||
1. User open Carousel demo page | ||
2. User click on Disable indicator sub-menu | ||
3. User see carousel component with 3 slides and 2 arrows: left, right and indicator | ||
4. User able to click on "Enable/Disable Indicator" button | ||
5. When user click on "Enable/Disable Indicator" - indicator disappeared | ||
6. When user click on "Enable/Disable Indicator" again - indicator appeared | ||
|
||
Variations: | ||
----------- | ||
2*. User scroll to Disable indicator sub-menu |
20 changes: 20 additions & 0 deletions
20
docs/spec/carousel/carousel.examples.disable-looping.use-case.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
3.7: Carousel Disable slide looping example | ||
=========================================== | ||
**Primary Actor**: User | ||
|
||
**Scope**: Ngx-bootstrap DEMO / BS version 3&4 | ||
|
||
**Goal**: Show user example with disabled looping functionality | ||
|
||
Main success scenario: | ||
---------------------- | ||
1. User open Carousel demo page | ||
2. User click on Disable slide looping sub-menu | ||
3. User see carousel component with 3 slides and 2 arrows: left, right | ||
4. When user do nothing more than 5 sec - next slide automatically shown | ||
5. When user click on checkbox "Disable Slide Looping", then no one slide should be shown after latest (Slide 2) | ||
6. When user uncheck "Disable slide looping", then slides continue changing after 5 seconds | ||
|
||
Variations: | ||
----------- | ||
2*. User scroll to Disable slide looping sub-menu |
22 changes: 22 additions & 0 deletions
22
docs/spec/carousel/carousel.examples.dynamic-slides.use-case.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
3.4: Carousel Dynamic Slides example | ||
==================================== | ||
**Primary Actor**: User | ||
|
||
**Scope**: Ngx-bootstrap DEMO / BS version 3&4 | ||
|
||
**Goal**: Show user carousel with dynamic generated slides | ||
|
||
Main success scenario: | ||
---------------------- | ||
1. User open Carousel demo page | ||
2. User click on Dynamic Slides sub-menu | ||
3. By default, user see carousel component with 4 slides and 2 arrows: left, right | ||
4. User see 3 additional buttons: "Add Slide", "Remove Current", "Remove #3" | ||
5. When user click on "Add Slide", then amount of slides increased at 1 and there should be appropriate header and info | ||
4. When user click on "Remove Current", then amount of slides decreased at 1 and current slide should be deleted | ||
5. When user click on "Remove #3" - then third slide deleted. | ||
6. When user do nothing more than 5 sec - next slide automatically shown | ||
|
||
Variations: | ||
----------- | ||
2*. User scroll to Dynamic Slides sub-menu |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
3.9: Carousel interval example | ||
============================== | ||
**Primary Actor**: User | ||
|
||
**Scope**: Ngx-bootstrap DEMO / BS version 3&4 | ||
|
||
**Goal**: Show user carousel functionality with possibilities to change time interval | ||
|
||
Main success scenario: | ||
---------------------- | ||
1. User open Carousel demo page | ||
2. User click on Interval sub-menu | ||
3. User see carousel component with 3 slides and 2 arrows: left, right | ||
4. User see input with default interval: 1500 milliseconds | ||
5. When user change the interval in input to any positive value - then slides change after added interval | ||
6. When user change the interval in input to "0" - then slider stopped | ||
7. When user change the interval in input to any negative value - then carousel stopped | ||
|
||
Variations: | ||
----------- | ||
2*. User scroll to Interval sub-menu |
21 changes: 21 additions & 0 deletions
21
docs/spec/carousel/carousel.examples.optional-captions.use-case.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
3.2: Carousel Optional captions example | ||
======================================= | ||
**Primary Actor**: User | ||
|
||
**Scope**: Ngx-bootstrap DEMO / BS version 3&4 | ||
|
||
**Goal**: Show user carousel with captions example | ||
|
||
Main success scenario: | ||
---------------------- | ||
1. User open Carousel demo page | ||
2. User click on Optional captions sub-menu | ||
3. User see carousel component with 3 slides and 2 arrows: left, right | ||
4. User see header and info inside each slide | ||
5. When user click on left arrow - previous slide and info shown | ||
6. When user click on right arrow - next slide and info shown | ||
7. When user do nothing more than 5 sec - next slide automatically shown with appropriate info inside | ||
|
||
Variations: | ||
----------- | ||
2*. User scroll to Optional captions sub-menu |
20 changes: 20 additions & 0 deletions
20
docs/spec/carousel/carousel.examples.pause-on-hover.use-case.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
3.5: Carousel Pause on hover example | ||
==================================== | ||
**Primary Actor**: User | ||
|
||
**Scope**: Ngx-bootstrap DEMO / BS version 3&4 | ||
|
||
**Goal**: Show user example of carousel, which pause on hover | ||
|
||
Main success scenario: | ||
---------------------- | ||
1. User open Carousel demo page | ||
2. User click on Pause on hover sub-menu | ||
3. User see carousel component with 3 slides and 2 arrows: left, right | ||
4. User see "Toggle pause on hover" button and able to click on it | ||
5. When user click on "Toggle pause on hover" and move mouse to the slide - then after 5 seconds slide stay opened and don't change | ||
6. When user click on "Toggle pause on hover" again, and move mouse to the slide - then after 5 seconds slide changed to other | ||
|
||
Variations: | ||
----------- | ||
2*. User scroll to Pause on hover sub-menu |
22 changes: 22 additions & 0 deletions
22
docs/spec/carousel/carousel.examples.slide-changed-event.use-case.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
3.10: Carousel Slide changed event example | ||
============================ | ||
**Primary Actor**: User | ||
|
||
**Scope**: Ngx-bootstrap DEMO / BS version 3&4 | ||
|
||
**Goal**: Show user how to detect carousel events | ||
|
||
Main success scenario: | ||
---------------------- | ||
1. User open Carousel demo page | ||
2. User click on Slide changed event sub-menus | ||
3. User see carousel component with 3 slides and 2 arrows: left, right | ||
4. User see carousel info: "Slide has been switched: 0" | ||
5. When user click on left arrow - info changed to "Slide has been switched: 2" | ||
6. When user click on left arrow again - info changed to "Slide has been switched: 1" | ||
7. When user click on right arrow - info changed to "Slide has been switched: 2" | ||
8. When user click on right arrow again - info changed to "Slide has been switched: 0" | ||
|
||
Variations: | ||
----------- | ||
2*. User scroll to Slide changed event sub-menu |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters