@frankhoodbs/bicolor-background-cmp
v1.2.8
Published
Bicolor background component
Downloads
328
Keywords
Readme
Bicolor Background component
componente per la generazione contenuti a sfondo bi-color suddiviso orizzontalmente.
component for generating content with a bi-color background divided horizontally.
API Reference
Props
Type definition
type Classes =
| string
| Record<string, boolean>
| (string | Record<string, boolean>)[];
| Name | Type | Description |
|:-----------------------------------|:----------|:----------------------------------------------------------------------------------------|
| data-bootstrap-container-classes
| Classes
| default is ['container']
. CSS Classes for cotent wrapper. |
| data-bootstrap-row-classes
| Classes
| default is ['row justify-content-center']
. CSS Classes for cotent wrapper's rows. |
| data-bootstrap-col-classes
| Classes
| default is ['col-12 col-md-10']
. CSS Classes for cotent wrapper's rows. |
| data-bg-color-wrapper-like-root
| boolean
| default is false
. CSS Classes for cotent wrapper's rows. |
| data-background-color
| boolean
| default is false
. CSS Class for the second half of the background. |
CSS variables
| Name | default | Description |
|:---------------------------------------------|:--------------|:---------------------------------|
| --bicolor-background-first-color-height
| 50%
| .color-1 , .color-2 used in flex |
| --bicolor-background-bg-color
| #1c3775
| .color-2 background-color |
| --bicolor-background-wrapper-padding
| 0
| .wrapper padding |
| --bicolor-background-wrapper-border-radius
| 0
| .wrapper border-radius |
| --bicolor-background-wrapper-bg-color
| transparent
| .wrapper |
Usage/Examples
<bicolor-background-cmp>
<div class="p-10">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
</bicolor-background-cmp>