@forter/group NPM

fc-group

An element by Forter

Usage

<script>
   import '@forter/group';
</script>

<fc-group gap="10">
  <div slot="title">Ori's favorite song</div>
  <div slot="right-title">0/6</div>
  <fc-card slot="items">1</fc-card>
  <fc-card slot="items">2</fc-card>
  <fc-card slot="items">3</fc-card>
  <fc-card slot="items">4</fc-card>
  <fc-card slot="items">5</fc-card>
  <fc-card slot="items">6</fc-card>
  <fc-card slot="items">7</fc-card>
  <fc-card slot="items">8</fc-card>
  <fc-card slot="items">9</fc-card>
</fc-group>

Examples

<!-- one item -->
<fc-group>
  <div slot="title">Ori's favorite song</div>
  <div slot="right-title">0/6</div>
  <fc-card slot="items">1</fc-card>
</fc-group>
<!-- two items -->
<fc-group>
  <div slot="title">Ori's favorite song</div>
  <div slot="right-title">0/6</div>
  <fc-card slot="items">1</fc-card>
  <fc-card slot="items">2</fc-card>
</fc-group>
<!-- three items -->
<fc-group>
  <div slot="title">Ori's favorite song</div>
  <div slot="right-title">0/6</div>
  <fc-card slot="items">1</fc-card>
  <fc-card slot="items">2</fc-card>
  <fc-card slot="items">3</fc-card>
</fc-group>
<!-- four items -->
<fc-group>
  <div slot="title">Ori's favorite song</div>
  <div slot="right-title">0/6</div>
  <fc-card slot="items">1</fc-card>
  <fc-card slot="items">2</fc-card>
  <fc-card slot="items">3</fc-card>
  <fc-card slot="items">4</fc-card>
</fc-group>
<!-- popup component -->
<fc-group>
  <div slot="title">Ori's favorite song</div>
  <div slot="right-title">0/6</div>
  <div slot="popup">Hello, good bye!</div>
  <fc-card slot="items">1</fc-card>
  <fc-card slot="items">2</fc-card>
  <fc-card slot="items">3</fc-card>
  <fc-card slot="items">4</fc-card>
</fc-group>

Properties

Property	Attribute	Type	Default	Description
`currentPage`	`currentPage`	`number`	0	Current page
`fcGroupItemsContainer`		`any`
`gap`	`gap`	`number`	10	Gap between items
`groupItemsContainer`		`any`
`groupItemsSlot`		`any`
`items`	`items`	`any[]`		Calculated items
`lastPage`	`lastPage`	`number`	0	Last page
`overflowContainer`		`any`
`paddingOffset`	`paddingOffset`	`number`	10	Increases the padding of the overflow element, and offsets it back to the place where it should bemainly used to show shadows on the overflow element.
`pagesInfo`		`any`
`popupSlot`		`any`
`sliderContainer`		`any`

Events

Event	Description
`pageupdate`	Custom event fired when the page is changed

CSS Custom Properties

Property
`--fc-group-page-button-background-color`
`--fc-group-page-button-color`
`--fc-group-popup-background-color`
`--fc-group-popup-border-radius`
`--fc-group-popup-box-shadow`
`--fc-group-popup-color`
`--fc-group-popup-font`
`--fc-group-popup-padding`
`--header-font`
`--header-text-color`