1.0.14 • Published 1 year ago
gallery-ar-component v1.0.14
gallery-ar-component
'gallery-ar-component' is a customizable, lightweight library for creating a responsive image gallery carousel. It is designed to be easy to use and integrate into your project with minimal setup.
Table of contents
Examples
Installation
To install and set up the library, run:
$ npm install gallery-ar-component
Usage
import { CarouselComponent } from 'gallery-ar-component';
Pass data for each TAB in the format below:
const tabsData = [
{
tabLabel: 'yourTabLabelName',
color: 'color',
image:
'https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1674&q=80',
text: 'Your text',
},
{
tabLabel: 'yourTabLabelName',
color: '#212121',
video:
'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
text: 'Your text',
},
...
];
Tabs Data accepts:
Name | Type |
---|---|
tabLabel | string |
color | string |
image | string |
video | string |
text | string |
htmlContent | string |
imgHorizontalPoint | string: 'left','center','right' |
imgVerticalPoint | string: 'top','center','bottom' |
imgHorizontalPointMobile | string: 'left','center','right' |
imgVerticalPointMobile | string: 'top','center','bottom' |
component | Ex.: component: nameOfComponent |
Example:
<CarouselComponent
tabsData={tabsData}
width={50}
height={60}
navigationPosition={'bottom'}
dotSize={4}
dotMargin={1}
/>
Properties
Dimentions of the carousel
Properties Requirement Variations Description tabsData Required
format displayed above - Usage Data for each tab to display. width Required
number Width of the Gallery in vw
.height Required
number Height of the Gallery in vh
.mobileWidth number Width in the mobile version in vw
. If it not provided then it will use the desk widthwidth
.mobileHeight number Height in the mobile version in vh
_. If it not provided then it will use the desk heightheight
.borderRadius number Border radius of the gallery in px
.mobileBorderRadius number Mobile border radius in px
. Accepts values from 1 and greater. If 0 provided it will take the desk border radius.Navigation
Dot Navigation
Properties Requirement Variations Description navigation boolean Show dot navigation. navigationPosition 'bottom', 'bottom-left','bottom-right', 'top', 'top-left', 'top-right', 'left', 'left-top', 'left-bottom','right', 'right-top', 'right-bottom' Navigation Position. dotSize number Size of dot navigation buttons in px
.mobileDotSize number Mobile size of dot nav.igation buttons in px
. If not provided then it will use desk dot size.dotColor hex color, string Color of dot buttons dotColorHover hex color, string Color of dot buttons on hover/focus. dotColorActive hex color, string Color of active dot button. dotRadius number Radius of dot buttons. dotMargin string Margin around the buttons in vw
. Ex.: '1 2 1 2' (top, right, bottom, and left), '1' is 1vw on top, bottom, 2vw on left and right.dotMarginMobile string Margin around the buttons in mobile in vw
. Ex.: '1 2 1 2' (top, right, bottom, and left), '1' is 1vw on top, bottom, 2vw on left and right.dotBorder number Border width for dot navigation in px
.dotBorderColor hex color, string Color of the border. navigationBorder boolean True if to include border. navigationBorderSize number Size of the navigation box in px
. Only for top, bottom, left and right alighnment. NOT for top-left, etc.navigationBorderColor hex color, string Color of the navigation box. Arrow Navigation
Properties Requirement Variations Description arrowNavigation boolean Show arrow navigation. If true two arrows appear to switch tabs back and forward. arrowButtonsBorder boolean True if to include arrow button borders. arrowButtonsBorderSize number Size of the arrow buttons box in px
.arrowButtonsColor hex color, string Color of the navigation box. arrowButtonBorderRadius number Radius of arrow button. arrowButtonSize string Padding around the arrow buttons in px
. Ex.: '1 2 1 2' (top, right, bottom, and left), '1' is 1px on top, bottom, 2px on left and right. Other example '1 2' is 1px 2px.arrowButtonMargin string Margin around arrow button in px
. Ex.: '1 2 1 2' (top, right, bottom, and left), '1' is 1px on top, bottom, 2px on left and right. Other example '1 2' is 1px 2px.arrowButtonBackgroundColor hex color, string Color of the arrow button background. arrowColor hex color, string Arrow icon color.
Content
Properties Requirement Variations Description textPosition 'left-center', 'center, 'right-center', 'top-center', 'bottom-center' Position of text contentDirection 'row', 'column' Direction of content if dataTabs contains text and html content. textWidth number Width of the text(it includes text/hmtl/component content) content in vw
.textHeight number Height of the text(it includes text/hmtl/component content) content in vh
.mobileTextWidth number Width of the text(it includes text/hmtl/component content) content in vw
.mobileTextHeight number Height of the text(it includes text/hmtl/component content) content in vh
.textContentWidth number Regular Text content width in vw
.textContentDisplay 'flex', 'grid' How to display the content gridGap number For the grid content display to add columns and rows gap if there is a need in px
.numberGridColumns number Number of columns for grid mobileNumberGridColumns number Mobile number of grid columns fontSize number Size of the font in px
.mobileFontSize number Mobile size of the font in px
.contentBorder boolean True if to include content border. contentBordersColor hex color, string Color of border of content box. contentBordersSize number Width of border of content box. Mask Images
Properties Requirement Variations Description splitImageAlignment 'top', 'bottom', 'left', 'right' Mask image alignment. tearFile string Import image .png as import nameYourImage from path/imageFile.png
in your component and insert into<CarouselComponent tearFile={nameYourImage}/>
. Example of image please take in the src/Carousel/images file.widthOfMask number Width of the mask. Available for 'left' and 'right mask currently. Background position (Ex.: image, video)
Properties Requirement Variations Description backgroundPosition string Background(image) position. Ex.: top 20px right 30px
. First value is top/bottom, second value right/left andpx
number.
Author
Alyona Rodina
License
Copyright © 2022, Alyona Rodina. Released under the MIT License.