npm.io
1.2.6 • Published 3 years ago

@forter/group

Licence
Apache-2.0
Version
1.2.6
Deps
1
Size
100 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

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 be
mainly 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