@frankhoodbs/bicolor-background-cmp NPM

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.

Version License

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>