capacitor-ui-kit

plugin that opens the gate to using iOS UIKit in the Capacitor ecosystem

Install

npm install capacitor-ui-kit
npx cap sync

API

• initialize()
• reRender()
• createTabBar(...)
• removeTabs()
• createToolbar(...)
• createTopToolbar(...)
• setToolbarItems(...)
• setTopToolbarItems(...)
• showTabBar()
• hideTabBar()
• showSearch()
• hideSearch()
• showToolbar()
• hideToolbar()
• showTopToolbar()
• hideTopToolbar()
• tabBarSelected()
• Interfaces
• Enums

initialize()

initialize() => Promise<void>

reRender()

reRender() => Promise<void>

createTabBar(...)

createTabBar(options: CreateTabBar) => Promise<void>

| Param | Type | | ------------- | ----------------------------------------------------- | | options | CreateTabBar |

removeTabs()

removeTabs() => Promise<void>

createToolbar(...)

createToolbar(options: CreateOrSetToolbar) => Promise<void>

| Param | Type | | ------------- | ----------------------------------------------------------------- | | options | CreateOrSetToolbar |

createTopToolbar(...)

createTopToolbar(options: CreateOrSetToolbar) => Promise<void>

| Param | Type | | ------------- | ----------------------------------------------------------------- | | options | CreateOrSetToolbar |

setToolbarItems(...)

setToolbarItems(options: CreateOrSetToolbar) => Promise<void>

| Param | Type | | ------------- | ----------------------------------------------------------------- | | options | CreateOrSetToolbar |

setTopToolbarItems(...)

setTopToolbarItems(options: CreateOrSetToolbar) => Promise<void>

| Param | Type | | ------------- | ----------------------------------------------------------------- | | options | CreateOrSetToolbar |

showTabBar()

showTabBar() => Promise<void>

hideTabBar()

hideTabBar() => Promise<void>

showSearch()

showSearch() => Promise<void>

hideSearch()

hideSearch() => Promise<void>

showToolbar()

showToolbar() => Promise<void>

hideToolbar()

hideToolbar() => Promise<void>

showTopToolbar()

showTopToolbar() => Promise<void>

hideTopToolbar()

hideTopToolbar() => Promise<void>

tabBarSelected()

tabBarSelected() => Promise<{ value: number | undefined; }>

Returns: Promise<{ value: number; }>

Interfaces

CreateTabBar

| Prop | Type | | ------------------- | ------------------------------------------------------- | | items | TabBarItem[] | | options | TabBarOptions | | searchBarItem | SearchBarItem |

TabBarItem

| Prop | Type | | ------------------- | ------------------- | | title | string | | tag | number | | image | string | | imageSelected | string |

TabBarOptions

| Prop | Type | | --------------------------------- | -------------------- | | hasSearchBar | boolean | | selectedTag | number | | fontSize | number | | unselectedFontSize | number | | tintColor | string | | fontColor | string | | unselectedFontColor | string | | unselectedItemTintColor | string | | fontColorDark | string | | unselectedFontColorDark | string | | tintColorDark | string | | unselectedItemTintColorDark | string | | imageBasePath | string |

SearchBarItem

| Prop | Type | | ----------------- | ------------------- | | placeholder | string |

CreateOrSetToolbar

| Prop | Type | | ------------- | ----------------------------------------------------------------------------------------------------------- | | items | ToolbarItem<ToolbarItemType>[] | | options | ToolbarOptions |

ToolbarItem

| Prop | Type | | ---------- | ------------------------------- | | type | T | | data | ToolbarItemData[T] |

ToolbarItemData

| Prop | Type | | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [ToolbarItemType.Button] | { tag: number; image?: string; title?: string; style?: ToolbarButtonItemStyle; tintColor?: string; tintColorDark?: string; } | | [ToolbarItemType.FlexibleSpace] | void | | [ToolbarItemType.Menu] | { image?: string; title?: string; menuTitle?: string; tintColor?: string; tintColorDark?: string; items: ToolbarMenuItem<ToolbarMenuItemType>[]; } |

ToolbarMenuItem

| Prop | Type | | ---------- | ----------------------------------- | | type | T | | data | ToolbarMenuItemData[T] |

ToolbarMenuItemData

| Prop | Type | | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | [ToolbarMenuItemType.Action] | { identifier: string; attributes?: ToolbarMenuItemAttributes[]; title?: string; image?: string; tintColor?: string; tintColorDark?: string; } | | [ToolbarMenuItemType.Separator] | void |

ToolbarOptions

| Prop | Type | | ------------------- | ------------------- | | imageBasePath | string |

Enums

ToolbarButtonItemStyle

| Members | Value | | --------------- | -------------- | | Plain | 0 | | Prominent | |

ToolbarMenuItemAttributes

| Members | Value | | ------------------------ | -------------- | | KeepsMenuPresented | 0 | | Destructive | | | Disabled | | | Hidden | |

ToolbarMenuItemType

| Members | Value | | --------------- | -------------- | | Action | 0 | | Separator | |

ToolbarItemType

| Members | Value | | ------------------- | -------------- | | Button | 0 | | FlexibleSpace | | | Menu | |