mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 01:12:30 +09:00
first
This commit is contained in:
@@ -0,0 +1,89 @@
|
||||
### Horizontal dividers
|
||||
|
||||
Vuero provides dividers for your textual content.
|
||||
You can use horizontal and vertical dividers by passing
|
||||
the divider text as a `data-content` html attribute.
|
||||
See the code example for more details about usage.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="columns">
|
||||
<div class="column is-5">
|
||||
<div class="content">
|
||||
<p>
|
||||
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit
|
||||
ipsum, ut blandit est tellus sit amet turpis.
|
||||
</p>
|
||||
<div class="is-divider" data-content="OR" />
|
||||
<p>
|
||||
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit
|
||||
ipsum, ut blandit est tellus sit amet turpis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-5 is-offset-1">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>
|
||||
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit
|
||||
ipsum, ut blandit est tellus sit amet turpis.
|
||||
</p>
|
||||
</div>
|
||||
<div class="is-divider-vertical" data-content="OR" />
|
||||
<div class="column">
|
||||
<p>
|
||||
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit
|
||||
ipsum, ut blandit est tellus sit amet turpis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-5">
|
||||
<div class="content">
|
||||
<p>
|
||||
Ut venenatis, nisl scelerisque sollicitudin fermentum,
|
||||
quam libero hendrerit ipsum, ut blandit est tellus sit
|
||||
amet turpis.
|
||||
</p>
|
||||
<div class="is-divider" data-content="OR"></div>
|
||||
<p>
|
||||
Ut venenatis, nisl scelerisque sollicitudin fermentum,
|
||||
quam libero hendrerit ipsum, ut blandit est tellus sit
|
||||
amet turpis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5 is-offset-1">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>
|
||||
Ut venenatis, nisl scelerisque sollicitudin fermentum,
|
||||
quam libero hendrerit ipsum, ut blandit est tellus sit
|
||||
amet turpis.
|
||||
</p>
|
||||
</div>
|
||||
<div class="is-divider-vertical" data-content="OR"></div>
|
||||
<div class="column">
|
||||
<p>
|
||||
Ut venenatis, nisl scelerisque sollicitudin fermentum,
|
||||
quam libero hendrerit ipsum, ut blandit est tellus sit
|
||||
amet turpis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
Reference in New Issue
Block a user