arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-20 15:01:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(ComponentExample): automatically read code (#789)

Browse Source
This commit is contained in:
KeJun
2023-10-09 16:44:47 +08:00
committed by GitHub
parent cf93d968af
commit fe348b48c6
35 changed files with 387 additions and 2925 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docs/content/7.layout/1.card.md
View File

@@ -8,23 +8,7 @@ links:
## Usage
::component-example
#default
:card-example{class="w-full"}
#code
```vue
<template>
<UCard>
<template #header />
Body
<template #footer />
</UCard>
</template>
```
::
:component-example{component="card-example" :componentProps='{"class": "w-full"}'}
## Slots

12
docs/content/7.layout/2.container.md
View File

@@ -8,17 +8,7 @@ links:
## Usage
::component-example
#default
:container-example{class="w-full"}
#code
```vue
<template>
<UContainer>Content</UContainer>
</template>
```
::
:component-example{component="container-example" :componentProps='{"class": "w-full"}'}
## Props

18
docs/content/7.layout/3.skeleton.md
View File

@@ -10,23 +10,7 @@ links:
Use to show a placeholder while content is loading.
::component-example
#default
:skeleton-example
#code
```vue
<template>
<div class="flex items-center space-x-4">
<USkeleton class="h-12 w-12" :ui="{ rounded: 'rounded-full' }" />
<div class="space-y-2">
<USkeleton class="h-4 w-[250px]" />
<USkeleton class="h-4 w-[200px]" />
</div>
</div>
</template>
```
::
:component-example{component="skeleton-example"}
## Props

69
docs/content/7.layout/4.divider.md
View File

@@ -52,61 +52,7 @@ excludedProps:
You can change the orientation of the divider by setting the `orientation` prop to `horizontal` or `vertical`. Defaults to `horizontal`.
::component-example
#default
:divider-example-orientation
#code
```vue
<script setup>
const form = reactive({ email: 'mail@example.com', password: 'password' })
</script>
<template>
<div class="w-full flex flex-col gap-y-4">
<UCard :ui="{ body: { base: 'grid grid-cols-3' } }">
<div class="space-y-4">
<UFormGroup label="Email" name="email">
<UInput v-model="form.email" />
</UFormGroup>
<UFormGroup label="Password" name="password">
<UInput v-model="form.password" type="password" />
</UFormGroup>
<UButton label="Login" color="gray" block />
</div>
<UDivider label="OR" color="gray" orientation="vertical" />
<div class="space-y-4 flex flex-col justify-center">
<UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
<UButton color="black" label="Login with Google" icon="i-simple-icons-google" block />
</div>
</UCard>
<UCard>
<div class="space-y-4">
<UFormGroup label="Email" name="email">
<UInput v-model="form.email" />
</UFormGroup>
<UFormGroup label="Password" name="password">
<UInput v-model="form.password" type="password" />
</UFormGroup>
<UButton label="Login" color="gray" block />
<UDivider label="OR" color="gray" />
<UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
<UButton color="black" label="Login with Google" icon="i-simple-icons-google" block />
</div>
</UCard>
</div>
</template>
```
::
:component-example{component="divider-example-orientation"}
### Type
@@ -162,18 +108,7 @@ excludedProps:
Use the `default` slot to add content to the divider.
::component-example
#default
:divider-example-default-slot
#code
```vue
<template>
<UDivider>
<Logo class="w-28 h-6" />
</UDivider>
</template>
```
::
:component-example{component="divider-example-default-slot"}
## Props