svcm/oa
1
0
Fork 0
mirror of https://git.hmsn.ink/kospo/svcm/oa.git synced 2026-03-20 03:02:31 +09:00
Code Issues Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
bangae1
2025-05-24 01:49:48 +09:00
commit 62abbcf4eb
2376 changed files with 325522 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
documentation/breadcrumb/breadcrumb-arrow-documentation.md Normal file
View File

@@ -0,0 +1,63 @@
---
breadcrumb:
- label: Vuero
hideLabel: true
icon: lucide:home
link: https://vuero.cssninja.io/
- label: Components
icon: lucide:cpu
to:
name: /components/
- label: VBreadcrumb
---
### Arrow Separator
Breadcrumb items can be separated by alternative separators.
To display arrow breadcrumb separators,
set the `separator` prop to `arrow`. See markup for more details.
<!--code-->
```vue
<script setup lang="ts">
const breadcrumb = [
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
// use external links
link: 'https://vuero.cssninja.io/',
},
{
label: 'Components',
icon: 'lucide:cpu',
// or generate a router link with 'to' props
to: '/components/',
},
{
label: 'VBreadcrumb',
},
]
</script>
<template>
<VBreadcrumb :items="breadcrumb" separator="arrow" />
<VBreadcrumb
:items="breadcrumb"
separator="arrow"
with-icons
/>
</template>
```
<!--/code-->
<!--example-->
<div>
<VBreadcrumb :items="frontmatter.breadcrumb" separator="arrow" />
<VBreadcrumb :items="frontmatter.breadcrumb" separator="arrow" with-icons />
</div>
<!--/example-->

62
documentation/breadcrumb/breadcrumb-bullet-documentation.md Normal file
View File

@@ -0,0 +1,62 @@
---
breadcrumb:
- label: Vuero
hideLabel: true
icon: lucide:home
link: https://vuero.cssninja.io/
- label: Components
icon: lucide:cpu
to:
name: /components/
- label: VBreadcrumb
---
### Bullet Separator
Breadcrumb items can be separated by alternative separators.
To display bullet breadcrumb separators,
set the `separator` prop to `bullet`. See markup for more details.
<!--code-->
```vue
<script setup lang="ts">
const breadcrumb = [
{
icon: 'lucide:home',
hideLabel: true,
// use external links
link: 'https://vuero.cssninja.io/',
},
{
label: 'Components',
icon: 'lucide:cpu',
// or generate a router link with 'to' props
to: '/components/',
},
{
label: 'VBreadcrumb',
},
]
</script>
<template>
<VBreadcrumb :items="breadcrumb" separator="bullet" />
<VBreadcrumb
:items="breadcrumb"
separator="bullet"
with-icons
/>
</template>
```
<!--/code-->
<!--example-->
<div>
<VBreadcrumb :items="frontmatter.breadcrumb" separator="bullet" />
<VBreadcrumb :items="frontmatter.breadcrumb" separator="bullet" with-icons />
</div>
<!--/example-->

62
documentation/breadcrumb/breadcrumb-default-documentation.md Normal file
View File

@@ -0,0 +1,62 @@
---
breadcrumb:
- label: Vuero
hideLabel: true
icon: lucide:home
link: https://vuero.cssninja.io/
- label: Components
icon: lucide:cpu
to:
name: /components/
- label: VBreadcrumb
---
### Default Separator
Vuero provides a `<VBreadcrumb />` component.
Default breadcrumb items are separated by a slash sign.
To show icons, use the `with-icons` prop. You can also change the alignment
by using the `align` prop (possible values are `center` and `right`).
Pass an **Array** to the `items` prop to render the component.
See markup for more details about usage.
<!--code-->
```vue
<script setup lang="ts">
const breadcrumb = [
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
// use external links
link: 'https://vuero.cssninja.io/',
},
{
label: 'Components',
icon: 'lucide:cpu',
// or generate a router link with 'to' props
to: '/components/',
},
{
label: 'VBreadcrumb',
},
]
</script>
<template>
<VBreadcrumb :items="breadcrumb" />
<VBreadcrumb :items="breadcrumb" with-icons />
</template>
```
<!--/code-->
<!--example-->
<div>
<VBreadcrumb :items="frontmatter.breadcrumb" />
<VBreadcrumb :items="frontmatter.breadcrumb" with-icons />
</div>
<!--/example-->

63
documentation/breadcrumb/breadcrumb-dot-documentation.md Normal file
View File

@@ -0,0 +1,63 @@
---
breadcrumb:
- label: Vuero
hideLabel: true
icon: lucide:home
link: https://vuero.cssninja.io/
- label: Components
icon: lucide:cpu
to:
name: /components/
- label: VBreadcrumb
---
### Dot Separator
Breadcrumb items can be separated by alternative separators.
To display dot breadcrumb separators, set the `separator` prop to `dot`.
See markup for more details.
<!--code-->
```vue
<script setup lang="ts">
const breadcrumb = [
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
// use external links
link: 'https://vuero.cssninja.io/',
},
{
label: 'Components',
icon: 'lucide:cpu',
// or generate a router link with 'to' props
to: '/components/',
},
{
label: 'VBreadcrumb',
},
]
</script>
<template>
<VBreadcrumb :items="breadcrumb" separator="dot" />
<VBreadcrumb
:items="breadcrumb"
separator="dot"
with-icons
/>
</template>
```
<!--/code-->
<!--example-->
<div>
<VBreadcrumb :items="frontmatter.breadcrumb" separator="dot" />
<VBreadcrumb :items="frontmatter.breadcrumb" separator="dot" with-icons />
</div>
<!--/example-->

62
documentation/breadcrumb/breadcrumb-succeeds-documentation.md Normal file
View File

@@ -0,0 +1,62 @@
---
breadcrumb:
- label: Vuero
hideLabel: true
icon: lucide:home
link: https://vuero.cssninja.io/
- label: Components
icon: lucide:cpu
to:
name: /components/
- label: VBreadcrumb
---
### Succeeds Separator
Breadcrumb items can be separated by alternative separators.
To display succeeds breadcrumb separators,
set the `separator` prop to `succeeds`. See markup for more details.
<!--code-->
```vue
<script setup lang="ts">
const breadcrumb = [
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
// use external links
link: 'https://vuero.cssninja.io/',
},
{
label: 'Components',
icon: 'lucide:cpu',
// or generate a router link with 'to' props
to: '/components/',
},
{
label: 'VBreadcrumb',
},
]
</script>
<template>
<VBreadcrumb :items="breadcrumb" separator="succeeds" />
<VBreadcrumb
:items="breadcrumb"
separator="succeeds"
with-icons
/>
</template>
```
<!--/code-->
<!--example-->
<div>
<VBreadcrumb :items="frontmatter.breadcrumb" separator="succeeds" />
<VBreadcrumb :items="frontmatter.breadcrumb" separator="succeeds" with-icons />
</div>
<!--/example-->