@frankhoodbs/bootstrap-responsive-grid-cmp
v1.2.11
Published
Utility to manage responsive bootstrap grid
Downloads
89
Keywords
Readme
Bootstrap Responsive Grid Component
Component that renders a dynamic grid with custom slots. The number of rows and columns is determined by the given properties. Its appearance, especially the separators, is highly customizable via CSS variables.
Componente che visualizza una griglia dinamica con slot personalizzati. Il numero di righe e colonne è determinato dalle props fornite in input. Il suo aspetto, in particolare i separatori, è altamente personalizzabile tramite variabili CSS.
API Reference
Props
| Name | Type | Description |
|:--------------------|:---------|:------------------------------------------------------------------------------------------------|
| data-slots-number
| string
| The number of slots that the grid should render. |
| data-cols-per-row
| string
| Number of the columns in each row. A different value at different step breakpoints is expected. |
CSS variables
| Name | default | Description |
|:---------------------------------------------------------|:----------|:-----------------------------------------------------------|
| --bootstrap-responsive-grid-row-gap
| 0
| Gap between rows |
| --bootstrap-responsive-grid-separator-border-width
| 1px
| Width of the separator border between rows |
| --bootstrap-responsive-grid-separator-inset-right-left
| 0
| Left and right values of the separator border between rows |
| --bootstrap-responsive-grid-separator-border-style
| solid
| Style of the separator border between rows |
| --bootstrap-responsive-grid-separator-border-color
| #000000
| Color of the separator border between rows |
CSS theme classes
| Name | Description |
|:--------------------------------|:---------------------------------------------------------------------------------|
| .with-separator-between-rows
| If present on the component instance a separator is rendered between rows |
| .with-separator-above
| If present on the component instance a separator is rendered above the first row |
| .with-separator-below
| If present on the component instance a separator is rendered below the last row |
Usage/Examples
<bootstrap-responsive-grid-cmp
class="BootstrapResponsiveGridExampleCmp container with-separator-above with-separator-between-rows with-separator-below"
data-slots-number="18"
:data-cols-per-row="smAndDown ? '1' : mdOnly ? '2' : lgOnly ? '3' : '4'"
>
<template v-for="n in 18" #[`slot-${n}`] :key="`slot-${n}`">
<div
style="
background-color: red;
height: 100%;
min-height: 200px;
padding: 10px;
"
>
<p v-if="n === 3">
Slot {{ n }}
<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores
assumenda corporis dolore, eaque earum fugit id ipsa magnam minima
modi officiis perspiciatis praesentium, quae quos repellendus
similique sint ullam. Nesciunt nulla quae quisquam quod. Accusantium
cupiditate ex fugiat magni obcaecati perferendis perspiciatis quasi
rem! Amet et possimus provident soluta vel.
</p>
<span v-else>Slot {{ n }}</span>
</div>
</template>
</bootstrap-responsive-grid-cmp>