DOCSEARCHbyAlgolia
Submit Docs

Kongponents

website·Indexed 42 days ago

https://kongponents.konghq.com

A Vue component library of frequently needed UI elements. It includes a wide range of components such as KButton, KInput, KModal, KTableView, and KAlert, providing a consistent set of styled containers and interactive elements for building user interfaces.

Tokens
55.6K
Snippets
347
Records
409
Agent score
56%

What's inside Kongponents

  1. Overview of KTruncate component

    KTruncate is a container component that limits content to a specific number of rows and provides controls to show or hide hidden items. It is reactive to dimension changes and can be used for both collections of HTML elements and blocks of text.
    <template>
  <KTruncate>
    <KBadge v-for="n in 25" :key="n">
      Item {{ n }}
    </KBadge>
  </KTruncate>
</template>

  5. Overview of Kongponents Theming

    Kongponents use @kong/design-tokens where every visual value (color, spacing, border-radius, typography) is mapped to a --kui-* CSS custom property. Themes are sets of overrides for these tokens. Themes can be applied at two scopes:

    1. App-level: Applies to all components, including teleported content (modals, toasts), and any downstream components consuming --kui-* tokens.
    2. Subtree: Scopes a theme to a specific region of the page using the <KThemeProvider> component.

  6. Overview of the KCard component

    KCard is a styled container component used to organize related content and actions into a single visual unit. It supports a title area, a main content body, an actions area for buttons or menus, and a footer for contextual information.

  7. Overview of KTableView component

    KTableView is a component used for displaying data in a table format. It is a presentational component and does not handle data management capabilities such as data fetching, functional pagination, sorting, or searching. For components that integrate with the data layer, use KTableData.
    <KTableView
  :data="tableData"
  :headers="headers"
  :pagination-attributes="{ totalCount: tableData.length }"
/>

  8. Overview of KMultiselect component

    KMultiselect is a select component that allows users to choose multiple items and create new options. Key behaviors include:

    • Selected items are displayed as dismissible badges.
    • An input field for filtering items appears when the dropdown is open.
    • A 'clear all' button replaces the dropdown chevron when the component has focus and at least one item is selected.
    • Selected items are moved to the top of the dropdown for easy access (refreshed upon collapse).
    <KMultiselect label="Pick Something" :items="items" />

  9. Overview of KBadge component

    KBadge is a visual text label used to present small amounts of information. It supports various semantic appearances, sizing options, and can include icons and tooltips.
    <KBadge appearance="success">Success</KBadge>

  10. Implement a slide-out overlay with KSlideout

    KSlideout is a slide-out overlay container that displays over page content. It can include an optional backdrop and is controlled via the visible prop. It emits a close event when the user attempts to dismiss the slideout (via the close icon, clicking outside the area, or pressing the Escape key).
    <KSlideout
  :visible="slideoutVisible"
  title="Slideout Content"
  @close="hideSlideout"
>
  <p>Slideout content goes here</p>
</KSlideout>

  12. Implement a grid view using KCatalog

    KCatalog is a Vue component used to render a grid view of KCards. It supports server-side pagination, custom data fetching, and various display states (loading, error, empty).
    <KCatalog :fetcher="fetcher" />