Apis List

Usage

The ApisList component is a complex component designed to display a paginated list of registered APIs for the current Portal.

Internally, the ApisList component fetches the list of APIs from the Portal API.

This component allows users to search for APIs by name.

If no APIs are available to display, the Empty State component is shown.

Example

 ::apis-list
 ---
 enable-search: true
 page-size: 3
 ---
 ::

To display only certain number of APIs without pagination, use the example below:

 ::apis-list
 ---
 page-size: 3
 pagination: false
 grid-columns-breakpoints:
  mobile: 3
  phablet: 3
  tablet: 3
  desktop: 3
 ---
 ::

Props

enableSearch

Enables searching APIs by name. When the prop is set to true, the search input is displayed above the APIs list.

• Type: boolean
• Default: false

pagination

Enables pagination for the API List. When the prop is set to true, the pagination UI is displayed below the APIs List.

• Type: boolean
• Default: true

pageNumber

The current page number to display.

• Type: number
• Default: 1

persistPageNumber

When enabled, the API list page number will be persisted in the page URL query parameter.

Typically only desired when displaying a large list of paginated APIs.

• Type: boolean
• Default: false

pageSize

The number of entities per page.

• Type: number
• Default: 24

pageSizes

The pagination per-page options.

• Type: number[]
• Default: [24, 36, 48, 60]

gridColumnsBreakpoints

Defines the number of columns to display for specific viewport widths.

Providing a column number for a given breakpoint will allow larger breakpoints to inherit the value if the number of columns is not explicitly defined for the larger breakpoint.

• Type: Breakpoints
• Default: { mobile: 2, phablet: 3, tablet: 3, desktop: 4, }

    /** Number of columns once the viewport width is greater than or equal to the breakpoint shown below. */
    interface Breakpoints {
      /** 640px */
      mobile?: number
      /** 768px */
      phablet?: number
      /** 1024px */
      tablet?: number
      /** 1280px */
      laptop?: number
      /** 1536px */
      desktop?: number
    }
  

Shared Props

This component also includes the shared props listed below:

• styles - default is ''.

See here for more information on shared props.

Slots

actions

Use the actions slot to add custom actions for the ApisCard component's header.

footer-left

Use the footer-left slot to overwrite the default button for the ApisCard component.