@forter/group
v1.2.6
Published
group from Forter Components
Downloads
12
Readme
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
|