Skip to content

Commit

Permalink
Center Component (#44)
Browse files Browse the repository at this point in the history
* feat: center component documentation

* refactor: change name casing center

* refactor: change name casing center
  • Loading branch information
D-Lite authored Jul 16, 2023
1 parent f2b23e8 commit 75ccf7b
Show file tree
Hide file tree
Showing 5 changed files with 106 additions and 4 deletions.
13 changes: 13 additions & 0 deletions components/content/examples/center/IconCenter.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<template>
<CHStack>
<CCenter w='40px' h='40px' bg='tomato' color='white'>
<CIcon name="phone" />
</CCenter>
<CCenter w='40px' h='40px' bg='tomato' color='white'>
<CBox as='span' fontWeight='bold' fontSize='lg'>
1
</CBox>
</CCenter>
</CHStack>
</template>

5 changes: 5 additions & 0 deletions components/content/examples/center/SimpleCenter.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<template>
<CCenter bg='tomato' h='100px' color='white'>
This is the Center
</CCenter>
</template>
10 changes: 10 additions & 0 deletions components/content/examples/center/SquareAndCircle.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<template>
<CHStack>
<CCircle size='40px' bg='teal.800' color='white'>
<CIcon name="phone" />
</CCircle>
<CSquare size='40px' bg='rebeccapurple' color='white'>
<CIcon name="phone" />
</CSquare>
</CHStack>
</template>
76 changes: 76 additions & 0 deletions content/4.components/center.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
---
title: Center
description: Center Component
version: 2.0+
---

# Center

Center is a layout component that centers its child within itself.

## Import

```js
import { CCenter, CCircle, CSquare } from '@chakra-ui/vue-next';
```

- CCenter: centers its child given `width` and `height`
- CSquare: centers its child given `size` (width and height)
- CCircle: a Square with round `border-radius`

## Usage

Put any child element inside it, give it any `width` or/and `height`, it'll ensure the child is centered.

::showcase
::simple-center{width=full}
::
::

```html
<CCenter bg='tomato' h='100px' color='white'>
This is the Center
</CCenter>
```

## With Icons

CCenter can be used to create frames around icons or numbers.

::showcase
::icon-center
::
::

```html
<CHStack>
<CCenter w='40px' h='40px' bg='tomato' color='white'>
<CIcon name="phone" />
</CCenter>
<CCenter w='40px' h='40px' bg='tomato' color='white'>
<CBox as='span' fontWeight='bold' fontSize='lg'>
1
</CBox>
</CCenter>
</CHStack>
```

## Square and Circle

The Square and Circle components automatically centers its children given the size.

::showcase
::square-and-circle
::
::

```html
<CHStack>
<CCircle size='40px' bg='teal.800' color='white'>
<CIcon name="phone" />
</CCircle>
<CSquare size='40px' bg='rebeccapurple' color='white'>
<CIcon name="phone" />
</CSquare>
</CHStack>
```
6 changes: 2 additions & 4 deletions content/4.components/checkbox.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
---
title: Checkbox
description:
Checkbox component is used in forms when a user needs to select multiple
values from several options.
description: Checkbox Component
version: 2.0+
---

Expand All @@ -13,7 +11,7 @@ Checkbox component is used in forms when a user needs to select multiple values
## Import

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

## Usage
Expand Down

1 comment on commit 75ccf7b

@vercel
Copy link

@vercel vercel bot commented on 75ccf7b Jul 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.