skim-ranking

contents

• Usage
• Properties
• Events
• Dependencies

The ranking component allows for ordering/arranging elements.

Usage

<skim-ranking>
  <div class="content">
    <p draggable="true">Item 1</p>
    <p draggable="true">Item 2</p>
    <p draggable="true">Item 3</p>
    <p draggable="true">Item 4</p>
  </div>
</skim-ranking>

<script>
  document.querySelector('skim-ranking').addEventListener('skimChange', ({ detail }) => {
      console.log('items changed', detail)
    }, false)
</script>

Properties

Property	Attribute	Description	Type	Default
side	side	The side to render the rankables	"bottom" \| "end" \| "start" \| "top"	'start'

Events

Event	Description	Type
skimChange	Emitted when the order changes	CustomEvent<HTMLElement[]>

Dependencies

Depends on

• ion-reorder-group
• ion-item
• ion-buttons
• ion-button
• ion-icon
• ion-reorder

Graph

graph TD;
  skim-ranking --> ion-reorder-group
  skim-ranking --> ion-item
  skim-ranking --> ion-buttons
  skim-ranking --> ion-button
  skim-ranking --> ion-icon
  skim-ranking --> ion-reorder
  ion-item --> ion-icon
  ion-item --> ion-ripple-effect
  ion-button --> ion-ripple-effect
  ion-reorder --> ion-icon
  style skim-ranking fill:#f9f,stroke:#333,stroke-width:4px

---

Built with StencilJS