Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wrap component #49

Merged
merged 3 commits into from
Jul 16, 2023
Merged

Wrap component #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e257f70
feat: wrap component documentation
D-Lite Jun 29, 2023
9fa44f7
refactor: change name casing wrap
D-Lite Jul 7, 2023
d3311ea
refactor: change name casing wrap
D-Lite Jul 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions components/content/examples/wrap/AlignWrap.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<template>
<CWrap spacing='30px' align='center'>
<CWrapItem>
<CCenter w='180px' h='80px' bg='red.200'>
Box 1
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='40px' bg='green.200'>
Box 2
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='tomato'>
Box 3
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='60px' bg='blue.200'>
Box 4
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='purple.200'>
Box 5
</CCenter>
</CWrapItem>
</CWrap>
</template>
29 changes: 29 additions & 0 deletions components/content/examples/wrap/JustifyWrap.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<template>
<CWrap spacing='30px' justify='center'>
<CWrapItem>
<CCenter w='180px' h='80px' bg='red.200'>
Box 1
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='green.200'>
Box 2
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='tomato'>
Box 3
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='blue.200'>
Box 4
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='purple.200'>
Box 5
</CCenter>
</CWrapItem>
</CWrap>
</template>
29 changes: 29 additions & 0 deletions components/content/examples/wrap/SimpleWrap.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<template>
<CWrap spacing='10px'>
<CWrapItem>
<CCenter w='180px' h='80px' bg='red.200'>
Box 1
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='green.200'>
Box 2
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='tomato'>
Box 3
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='blue.200'>
Box 4
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='purple.200'>
Box 5
</CCenter>
</CWrapItem>
</CWrap>
</template>
29 changes: 29 additions & 0 deletions components/content/examples/wrap/SpacingWrap.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<template>
<CWrap spacing='30px'>
<CWrapItem>
<CCenter w='180px' h='80px' bg='red.200'>
Box 1
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='green.200'>
Box 2
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='tomato'>
Box 3
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='blue.200'>
Box 4
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='purple.200'>
Box 5
</CCenter>
</CWrapItem>
</CWrap>
</template>
176 changes: 176 additions & 0 deletions content/4.components/wrap.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
---
title: Wrap
description: Wrap component
version: 2.0+
---

# Wrap

Wrap is a layout component used to add space between elements and wraps automatically if there isn't enough space.

## Import

```js
import { CWrap, CWrapItem } from '@chakra-ui/vue-next';
```

- Wrap: Wrap composes the Box component and renders a <ul> tag
- WrapItem: WrapItem composes the Box component and renders the HTML <li> tag

## Usage

The Wrap component is a `flex` box container that can wrap its children onto multiple lines with `flex-wrap` and `spacing` support. It is useful for displaying elements that are typically placed side-by-side, such as dialog buttons, tags, and chips.

The example below shows how the last `Box` component wraps to the next line because there is not enough space to fit it on the same line as the other Box components.

::showcase
::simple-wrap
::
::

```html
<CWrap spacing='10px'>
<CWrapItem>
<CCenter w='180px' h='80px' bg='red.200'>
Box 1
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='green.200'>
Box 2
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='tomato'>
Box 3
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='blue.200'>
Box 4
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='purple.200'>
Box 5
</CCenter>
</CWrapItem>
</CWrap>
```

## Change the spacing

To ensure that the spacing between each child is consistent, even if the children wrap, pass the `spacing` prop.

> Pro Tip: You can pass responsive values for the spacing.

::showcase
::spacing-wrap
::
::

```html
<CWrap spacing='30px'>
<CWrapItem>
<CCenter w='180px' h='80px' bg='red.200'>
Box 1
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='green.200'>
Box 2
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='tomato'>
Box 3
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='blue.200'>
Box 4
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='purple.200'>
Box 5
</CCenter>
</CWrapItem>
</CWrap>
```

## Change the alignment

The `align` prop can be used to change the alignment of a child along the cross axis.

::showcase
::align-wrap
::
::

```html
<CWrap spacing='30px' align='center'>
<CWrapItem>
<CCenter w='180px' h='80px' bg='red.200'>
Box 1
</CCenter>
</CWrapItem>
<CWrapitem>
<CCenter w='180px' h='40px' bg='green.200'>
Box 2
</CCenter>
</CWrapitem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='tomato'>
Box 3
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='60px' bg='blue.200'>
Box 4
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='purple.200'>
Box 5
</CCenter>
</CWrapItem>
</CWrap>
```
The `justify` prop specifies the alignment of a child along the main axis.

::showcase
::justify-wrap
::
::

```html
<CWrap spacing='30px' justify='center'>
<CWrapItem>
<CCenter w='180px' h='80px' bg='red.200'>
Box 1
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='green.200'>
Box 2
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='tomato'>
Box 3
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='blue.200'>
Box 4
</CCenter>
</CWrapItem>
<CWrapItem>
<CCenter w='180px' h='80px' bg='purple.200'>
Box 5
</CCenter>
</CWrapItem>
</CWrap>
```