-
Notifications
You must be signed in to change notification settings - Fork 48
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ad4b5cd
commit 411b100
Showing
84 changed files
with
4,088 additions
and
22 deletions.
There are no files selected for viewing
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
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
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
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,14 @@ | ||
import * as React from 'react' | ||
import { Stack } from '@welcome-ui/stack' | ||
|
||
const Example = () => { | ||
return ( | ||
<Stack as="ul"> | ||
<div>Foo</div> | ||
<div>Bar</div> | ||
<div>Baz</div> | ||
</Stack> | ||
) | ||
} | ||
|
||
export default Example |
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,14 @@ | ||
import * as React from 'react' | ||
import { Stack } from '@welcome-ui/stack' | ||
|
||
const Example = () => { | ||
return ( | ||
<Stack> | ||
<div>Foo</div> | ||
<div>Bar</div> | ||
<div>Baz</div> | ||
</Stack> | ||
) | ||
} | ||
|
||
export default Example |
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,14 @@ | ||
import * as React from 'react' | ||
import { Stack } from '@welcome-ui/stack' | ||
|
||
const Example = () => { | ||
return ( | ||
<Stack direction="row" spacing="xl"> | ||
<div>Foo</div> | ||
<div>Bar</div> | ||
<div>Baz</div> | ||
</Stack> | ||
) | ||
} | ||
|
||
export default Example |
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 @@ | ||
--- | ||
category: layout | ||
description: The Stack component is a layout element that arranges child components in a vertical or horizontal stack with consistent spacing. It simplifies the creation of flexible and responsive layouts by managing the alignment, spacing, and distribution of its children. This component is ideal for organizing content in a structured and visually appealing manner. | ||
packageName: stack | ||
title: Slider | ||
usage: import { Stack } from '@welcome-ui/stack | ||
--- | ||
|
||
The default use of `Stack` will stack its children vertically. | ||
|
||
### Spacing and direction | ||
|
||
You can change the `direction` & the `spacing`. | ||
|
||
<div data-playground="spacing.tsx" data-component="Stack"></div> | ||
|
||
### Childs | ||
|
||
It will ensure that its children are `li`s when is rendered as an `ul` or an `ol`. | ||
|
||
<div data-playground="childs.tsx" data-component="Stack"></div> |
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,81 @@ | ||
{ | ||
"Stack": { | ||
"props": { | ||
"direction": { | ||
"defaultValue": { | ||
"value": "column" | ||
}, | ||
"description": "", | ||
"name": "direction", | ||
"parent": { | ||
"fileName": "Stack/src/index.tsx", | ||
"name": "StackOptions" | ||
}, | ||
"declarations": [ | ||
{ | ||
"fileName": "Stack/src/index.tsx", | ||
"name": "StackOptions" | ||
} | ||
], | ||
"required": false, | ||
"type": { | ||
"name": "enum", | ||
"raw": "\"row\" | \"column\"", | ||
"value": [ | ||
{ | ||
"value": "\"row\"" | ||
}, | ||
{ | ||
"value": "\"column\"" | ||
} | ||
] | ||
} | ||
}, | ||
"spacing": { | ||
"defaultValue": { | ||
"value": "md" | ||
}, | ||
"description": "", | ||
"name": "spacing", | ||
"parent": { | ||
"fileName": "Stack/src/index.tsx", | ||
"name": "StackOptions" | ||
}, | ||
"declarations": [ | ||
{ | ||
"fileName": "Stack/src/index.tsx", | ||
"name": "StackOptions" | ||
} | ||
], | ||
"required": false, | ||
"type": { | ||
"name": "enum", | ||
"raw": "\"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\"", | ||
"value": [ | ||
{ | ||
"value": "\"xxs\"" | ||
}, | ||
{ | ||
"value": "\"xs\"" | ||
}, | ||
{ | ||
"value": "\"sm\"" | ||
}, | ||
{ | ||
"value": "\"md\"" | ||
}, | ||
{ | ||
"value": "\"lg\"" | ||
}, | ||
{ | ||
"value": "\"xl\"" | ||
}, | ||
{ | ||
"value": "\"xxl\"" | ||
} | ||
] | ||
} | ||
} | ||
} | ||
} | ||
} |
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,25 @@ | ||
import * as React from 'react' | ||
import { Swiper, useSwiper } from '@welcome-ui/swiper' | ||
|
||
const Example = () => { | ||
const swiper = useSwiper({ autoplay: true, loop: true }) | ||
|
||
return ( | ||
<Swiper h={400} store={swiper}> | ||
<img | ||
src="https://images.unsplash.com/photo-1564460549828-f0219a31bf90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" | ||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }} | ||
/> | ||
<img | ||
src="https://images.unsplash.com/photo-1575489272413-cb506258027e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" | ||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }} | ||
/> | ||
<img | ||
src="https://images.unsplash.com/photo-1541959833400-049d37f98ccd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" | ||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }} | ||
/> | ||
</Swiper> | ||
) | ||
} | ||
|
||
export default Example |
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,25 @@ | ||
import * as React from 'react' | ||
import { Swiper, useSwiper } from '@welcome-ui/swiper' | ||
|
||
const Example = () => { | ||
const swiper = useSwiper({ firstSlideToShow: 2, centeredSlides: true }) | ||
|
||
return ( | ||
<Swiper h={400} store={swiper}> | ||
<img | ||
src="https://images.unsplash.com/photo-1564460549828-f0219a31bf90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" | ||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }} | ||
/> | ||
<img | ||
src="https://images.unsplash.com/photo-1575489272413-cb506258027e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" | ||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }} | ||
/> | ||
<img | ||
src="https://images.unsplash.com/photo-1541959833400-049d37f98ccd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" | ||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }} | ||
/> | ||
</Swiper> | ||
) | ||
} | ||
|
||
export default Example |
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 @@ | ||
import * as React from 'react' | ||
import { Swiper, useSwiper } from '@welcome-ui/swiper' | ||
import { Box } from '@welcome-ui/box' | ||
|
||
const Example = () => { | ||
const swiper = useSwiper({ | ||
slidesPerView: { mobile: 1, tablet: 2, desktop: 4 }, | ||
withPagination: { mobile: true, desktop: true }, | ||
withDarkUI: true, | ||
}) | ||
|
||
return ( | ||
<Swiper h={350} store={swiper}> | ||
{[...Array(6)].map(item => ( | ||
<Box border="1px solid" borderColor="dark-100" h={300} key={item} /> | ||
))} | ||
</Swiper> | ||
) | ||
} | ||
|
||
export default Example |
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,25 @@ | ||
import * as React from 'react' | ||
import { Swiper, useSwiper } from '@welcome-ui/swiper' | ||
|
||
const Example = () => { | ||
const swiper = useSwiper({ firstSlideToShow: 2 }) | ||
|
||
return ( | ||
<Swiper h={400} store={swiper}> | ||
<img | ||
src="https://images.unsplash.com/photo-1564460549828-f0219a31bf90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" | ||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }} | ||
/> | ||
<img | ||
src="https://images.unsplash.com/photo-1575489272413-cb506258027e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" | ||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }} | ||
/> | ||
<img | ||
src="https://images.unsplash.com/photo-1541959833400-049d37f98ccd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" | ||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }} | ||
/> | ||
</Swiper> | ||
) | ||
} | ||
|
||
export default Example |
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,25 @@ | ||
import * as React from 'react' | ||
import { Swiper, useSwiper } from '@welcome-ui/swiper' | ||
|
||
const Example = () => { | ||
const swiper = useSwiper({ withNavigation: { mobile: false, desktop: false } }) | ||
|
||
return ( | ||
<Swiper h={400} store={swiper}> | ||
<img | ||
src="https://images.unsplash.com/photo-1564460549828-f0219a31bf90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" | ||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }} | ||
/> | ||
<img | ||
src="https://images.unsplash.com/photo-1575489272413-cb506258027e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" | ||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }} | ||
/> | ||
<img | ||
src="https://images.unsplash.com/photo-1541959833400-049d37f98ccd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" | ||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }} | ||
/> | ||
</Swiper> | ||
) | ||
} | ||
|
||
export default Example |
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,25 @@ | ||
import * as React from 'react' | ||
import { Swiper, useSwiper } from '@welcome-ui/swiper' | ||
|
||
const Example = () => { | ||
const swiper = useSwiper({ spaceBetween: 0 }) | ||
|
||
return ( | ||
<Swiper h="400" store={swiper}> | ||
<img | ||
src="https://images.unsplash.com/photo-1564460549828-f0219a31bf90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" | ||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} | ||
/> | ||
<img | ||
src="https://images.unsplash.com/photo-1575489272413-cb506258027e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" | ||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} | ||
/> | ||
<img | ||
src="https://images.unsplash.com/photo-1541959833400-049d37f98ccd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" | ||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} | ||
/> | ||
</Swiper> | ||
) | ||
} | ||
|
||
export default Example |
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,25 @@ | ||
import * as React from 'react' | ||
import { Swiper, useSwiper } from '@welcome-ui/swiper' | ||
|
||
const Example = () => { | ||
const swiper = useSwiper({ withPagination: { mobile: true, desktop: true } }) | ||
|
||
return ( | ||
<Swiper h={400} store={swiper}> | ||
<img | ||
src="https://images.unsplash.com/photo-1564460549828-f0219a31bf90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" | ||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }} | ||
/> | ||
<img | ||
src="https://images.unsplash.com/photo-1575489272413-cb506258027e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" | ||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }} | ||
/> | ||
<img | ||
src="https://images.unsplash.com/photo-1541959833400-049d37f98ccd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" | ||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }} | ||
/> | ||
</Swiper> | ||
) | ||
} | ||
|
||
export default Example |
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,25 @@ | ||
import * as React from 'react' | ||
import { Swiper, useSwiper } from '@welcome-ui/swiper' | ||
|
||
const Example = () => { | ||
const swiper = useSwiper({ slidesPerView: { mobile: 1, tablet: 1, desktop: 2 } }) | ||
|
||
return ( | ||
<Swiper h={400} store={swiper}> | ||
<img | ||
src="https://images.unsplash.com/photo-1564460549828-f0219a31bf90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" | ||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }} | ||
/> | ||
<img | ||
src="https://images.unsplash.com/photo-1575489272413-cb506258027e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" | ||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }} | ||
/> | ||
<img | ||
src="https://images.unsplash.com/photo-1541959833400-049d37f98ccd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" | ||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }} | ||
/> | ||
</Swiper> | ||
) | ||
} | ||
|
||
export default Example |
Oops, something went wrong.