mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 08:53:29 +09:00
first
This commit is contained in:
58
documentation/icon-box/icon-box-default-documentation.md
Normal file
58
documentation/icon-box/icon-box-default-documentation.md
Normal file
@@ -0,0 +1,58 @@
|
||||
### VIconBox
|
||||
|
||||
The Vuero `<VIconBox />` component let you display icons
|
||||
in a fancy and colored way. Box sizes can be controled with
|
||||
the `size` prop. Available sizes are `small`, `medium`, `large`,
|
||||
`big` and `xl`. See code for more details about usage.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<VIconBox size="small">
|
||||
<i class="lnil lnil-vector-pen" />
|
||||
</VIconBox>
|
||||
<VIconBox>
|
||||
<i class="lnil lnil-vector-pen" />
|
||||
</VIconBox>
|
||||
<VIconBox size="medium">
|
||||
<i class="lnil lnil-vector-pen" />
|
||||
</VIconBox>
|
||||
<VIconBox size="large">
|
||||
<i class="lnil lnil-vector-pen" />
|
||||
</VIconBox>
|
||||
<VIconBox size="big">
|
||||
<i class="lnil lnil-vector-pen" />
|
||||
</VIconBox>
|
||||
<VIconBox size="xl">
|
||||
<i class="lnil lnil-vector-pen" />
|
||||
</VIconBox>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="is-flex is-gap-0.5 is-flex-wrap-wrap is-align-items-flex-end">
|
||||
<VIconBox size="small">
|
||||
<i class="lnil lnil-vector-pen"></i>
|
||||
</VIconBox>
|
||||
<VIconBox>
|
||||
<i class="lnil lnil-vector-pen"></i>
|
||||
</VIconBox>
|
||||
<VIconBox size="medium">
|
||||
<i class="lnil lnil-vector-pen"></i>
|
||||
</VIconBox>
|
||||
<VIconBox size="large">
|
||||
<i class="lnil lnil-vector-pen"></i>
|
||||
</VIconBox>
|
||||
<VIconBox size="big">
|
||||
<i class="lnil lnil-vector-pen"></i>
|
||||
</VIconBox>
|
||||
<VIconBox size="xl">
|
||||
<i class="lnil lnil-vector-pen"></i>
|
||||
</VIconBox>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
Reference in New Issue
Block a user