Design/net.ikea.skapa.ui.components

Package-level declarations

Skapa Components available for Android.

Types

enum AccordionSize : Enum<AccordionSize>

AccordionSize defines the minimum height of the Accordion. The height of the container will expand if the text size is increased. Use medium and large size to add an extra caption in the accordion.

AccordionTextStyle

enum AccordionTextStyle : Enum<AccordionTextStyle>

AccordionTextStyle defines the style variant of the Accordion. It indicates whether the title is regular or bold.

AvatarSize

enum AvatarSize : Enum<AvatarSize>

AvatarSize Enum class which represents the sizing of the Avatar component.

AvatarStyle

enum AvatarStyle : Enum<AvatarStyle>

AvatarStyle Enum class which represents the color scheme of the Avatar component.

AvatarVariant

sealed class AvatarVariant

Data class that represents the different display types in AvatarVariant as well as the necessary properties for each type.

BadgeColor

enum BadgeColor : Enum<BadgeColor>

Colors for Badge

BadgeSize

enum BadgeSize : Enum<BadgeSize>

Sizes for Badge is the only one supporting BadgeSize.Small

BadgeVariant

sealed class BadgeVariant

Variants for Badge

BaseField

object BaseField

ButtonSize

enum ButtonSize : Enum<ButtonSize>

Pre-defined sizes for Button component

ButtonVariant

sealed class ButtonVariant

Pre-defined styles for the Button component

CardAddon

sealed class CardAddon

CardButtonVariant

enum CardButtonVariant : Enum<CardButtonVariant>

CardCommercialMessageType

enum CardCommercialMessageType : Enum<CardCommercialMessageType>

CardTextSize

enum CardTextSize : Enum<CardTextSize>

CardTheme

enum CardTheme : Enum<CardTheme>

CardV2Variant

enum CardV2Variant : Enum<CardV2Variant>

CarouselDismissParams

data class CarouselDismissParams(val onDismissClicked: () -> Unit, val dismissButtonContentDescription: String? = null)

Data class that represent the necessary data to add an close CarouselDismissParams in the component.

CarouselItemSpacing

enum CarouselItemSpacing : Enum<CarouselItemSpacing>

Used to adjust the space between items, using a predetermined set of Space tokens

CarouselVariant

sealed class CarouselVariant

CarouselVariant enum class which defines the variant of the Carousel component.

CharacterCounterParams

data class CharacterCounterParams(@IntRange(from = 0, to = 9223372036854775807) val characterLimit: Int, val accessibilityCharacterLimitMessage: String?)

Character limit counter values.

CheckboxGroupItem

data class CheckboxGroupItem<T>(val key: T, val label: String, var checked: Boolean = false, val enabled: Boolean = true)

Data class used for CheckboxGroup

CheckboxVariant

enum CheckboxVariant : Enum<CheckboxVariant>

Appearance of the Checkbox

ChoiceContent

data class ChoiceContent(val title: String? = null, val caption: String? = null, val addon: @Composable () -> Unit? = null, val expandingText: String? = null)

Content interface for Choice.

ChoiceContentAlignment

enum ChoiceContentAlignment : Enum<ChoiceContentAlignment>

Content alignment for leading and trailing content.

ChoiceGroupItem

data class ChoiceGroupItem<T>(val key: T, val content: ChoiceContent, val leadingContent: ChoiceLeadingContent = ChoiceLeadingContent.None, val trailingContent: ChoiceTrailingContent = ChoiceTrailingContent.None, val enabled: Boolean = true)

Data class used for Choice group items.

ChoiceLeadingContent

sealed class ChoiceLeadingContent

Leading content for Choice: Icon, Payment Logo, or Image

ChoiceSize

enum ChoiceSize : Enum<ChoiceSize>

Sizes for Choice. The sizes affect the minimum height of the component. Keep in mind that the small variant should ideally be used without a caption or larger add-ons. If the content is larger than the container, it will grow accordingly.

ChoiceTrailingContent

sealed class ChoiceTrailingContent

Trailing content for Choice: Icon, Image, Text, or Price.

DismissParams

data class DismissParams(val onDismissRequest: () -> Unit, val dismissButtonContentDescription: String? = null)

Data class that represent the necessary data to add an close DismissParams in a component.

DualButtonOrientation

enum ~~DualButtonOrientation~~ : Enum<DualButtonOrientation>

Orientation to use with Dual button Use DualButtonOrientation.Horizontal to have the buttons side-by-side. Use DualButtonOrientation.Vertical to stack the buttons vertically.

DualButtonParams

data class DualButtonParams(@DrawableRes val iconResource: Int, val contentDescription: String, val enabled: Boolean = true, val interactionSource: MutableInteractionSource? = null)

Data class for DualButton content.

DualButtonPosition

enum DualButtonPosition : Enum<DualButtonPosition>

Position for Dual button First is the Start Orientation.Horizontal or Top Orientation.Vertical Second is the End Orientation.Horizontal or Bottom Orientation.Vertical

DualButtonSize

enum DualButtonSize : Enum<DualButtonSize>

DualButtonSize Small or Medium. Default is Medium.

DualButtonVariant

enum DualButtonVariant : Enum<DualButtonVariant>

Use DualButtonVariant.Primary to stand out on top of images or other graphics such as interactive maps. Uses Static colors. Use DualButtonVariant.Secondary for low emphasis. Adapts to Light/Dark Themes. Use DualButtonVariant.SecondaryInverse Use secondary inverse dual buttons for low emphasis on dark backgrounds. Uses static colors.

EnabledState

enum EnabledState : Enum<EnabledState>

States primarily used for Input field and Text areas, but also other components that need both Enabled, Disabled and ReadOnly.

ExpanderVariant

enum ExpanderVariant : Enum<ExpanderVariant>

Variants for Expander

FooterButtonAlignment

enum FooterButtonAlignment : Enum<FooterButtonAlignment>

Enum class used for Prompt footer alignment when two buttons are used.

FooterContent

sealed class FooterContent

HelperTextParams

data class HelperTextParams(val state: HelperTextState, val label: String? = null)

Helper class for Helper text parameters

HelperTextProps

object HelperTextProps

HelperTextState

enum HelperTextState : Enum<HelperTextState>

Helper text states

HyperlinkColor

enum HyperlinkColor : Enum<HyperlinkColor>

Pre-defined colours for Hyperlink component

IconButtonSize

enum IconButtonSize : Enum<IconButtonSize>

Pre-defined sizes for IconButton

IconButtonVariant

sealed class IconButtonVariant

Pre-defined styles for the IconButton component

IconParams

data class IconParams(val position: IconPosition.Horizontal, @DrawableRes val iconId: Int?, val contentDescription: String?, val onClick: () -> Unit? = null)

Icon parameters for clickable icons used in eg. Input field related components.

IconPillSize

enum IconPillSize : Enum<IconPillSize>

Pre-defined sizes for IconPill

ImageParams

data class ImageParams(val painter: Painter, val contentDescription: String?, val aspectRatio: SkapaAspectRatio = SkapaAspectRatio.Wide)

Data class to be used for header images in Card component.

InlineMessageActionParams

data class InlineMessageActionParams(val label: String, val onClick: () -> Unit)

InlineMessageActions

data class InlineMessageActions(val first: InlineMessageActionParams, val second: InlineMessageActionParams? = null)

InlineMessageStyle

enum InlineMessageStyle : Enum<InlineMessageStyle>

Pre-defined accentuation for Inline message styling.

InlineMessageVariant

enum InlineMessageVariant : Enum<InlineMessageVariant>

Pre-defined Inline message variants.

InlineMessageVisibility

enum InlineMessageVisibility : Enum<InlineMessageVisibility>

Enum class to handle InlineMessage visibility state, changing the state will trigger AnimatedVisibility effect on the component

JumboButtonVariant

enum JumboButtonVariant : Enum<JumboButtonVariant>

Variants for Jumbo buttons

ListBoxItemHeader

interface ListBoxItemHeader

Interface used to determine if item in list is header

ListBoxItemsParams

data class ListBoxItemsParams<T : ListBoxItemHeader>(val items: List<T>, val itemContent: @Composable (T) -> Unit, val contentPadding: PaddingValues = MenuDefaults.DropdownMenuItemContentPadding, val onItemClick: (T) -> Unit?)

Data class that represents a list of items that Implement ListBoxItemHeader interface and is used to separate the items by headers

ListBoxProps

object ListBoxProps

ListViewItemControls

sealed class ListViewItemControls

Trailing controls are used to distinguish between Navigation and Action behaviour.

ListViewItemImage

sealed class ListViewItemImage

Leading content: Text, Icon, Image, Payment Logo or Avatar All list view item sizes supports leading content. Please note that Leading image and Medium Payment logos are only supported in Medium and Large list view items. Small list view items also supports a small version of the payment logo container.

ListViewItemSize

enum ListViewItemSize : Enum<ListViewItemSize>

ListViewItemSize defines the minimum height of the List View Item container. All list view item variants are available in three different sizes. The height of the container will expand if the text size is increased. Use medium and large list view items for images and double lines of text.

ListViewItemTextStyle

enum ListViewItemTextStyle : Enum<ListViewItemTextStyle>

Controls the title text style of the ListViewItem component.

LoadingBallSize

enum LoadingBallSize : Enum<LoadingBallSize>

Sizes for LoadingBall component

LoadingBallVariant

enum LoadingBallVariant : Enum<LoadingBallVariant>

Color variants for LoadingBall component

MenuItemImage

sealed class MenuItemImage

Leading content: Only Icon for now All menu item sizes supports leading content.

ModalFooterButtonAlignment

enum ModalFooterButtonAlignment : Enum<ModalFooterButtonAlignment>

Enum class used for Modals footer alignment when two buttons are used.

ModalHeader

sealed class ModalHeader

ModalHeaderAction

data class ModalHeaderAction(@DrawableRes val iconResource: Int, val contentDescription: String? = null, val action: () -> Unit)

A ModalHeaderAction is represented as an IconButton added to the header component

ModalHeaderParams

data class ModalHeaderParams(val variant: ModalsHeaderVariant, val title: String? = null, val trailingAction: ModalHeaderAction? = null, val leadingAction: ModalHeaderAction? = null)

Class that represents the necessary data to build a ModalHeader

ModalsActionFooterParams

data class ModalsActionFooterParams(val buttonAlignment: ModalFooterButtonAlignment = ModalFooterButtonAlignment.SideBySide, val primaryButton: @Composable () -> Unit, val secondaryButton: @Composable () -> Unit?)

Class that represents the necessary data to build a ModalsActionFooter

ModalsHeaderVariant

enum ModalsHeaderVariant : Enum<ModalsHeaderVariant>

NavButtonParams

data class NavButtonParams(val forwardButtonContentDescription: String, val backButtonContentDescription: String)

Data class that represents the necessary data to add navigation buttons in the component.

PaymentLogoSize

enum PaymentLogoSize : Enum<PaymentLogoSize>

PaymentLogoSize defines the overall size of the Payment Logo container.

PillGroupItem

data class PillGroupItem(val key: Any?, val label: String, var selected: Boolean = false)

Data class used for PillGroup

PillGroupState

enum PillGroupState : Enum<PillGroupState>

State of the PillGroup component. It determines if the group is either PillGroupState.Expanded or PillGroupState.Collapsed

PillSize

enum PillSize : Enum<PillSize>

Sizes for Pill component

PromptAction

data class PromptAction(val label: String, val action: () -> Unit)

Data class used for Prompt primaryAction & secondaryAction

QuantityStepperActions

@Stable

class QuantityStepperActions(val onDecrease: (Int) -> Unit? = null, val onIncrease: (Int) -> Unit? = null, val onInputValueChange: (Int) -> Unit? = null)

The QuantityStepperActions class actions that will be triggered in response to users triggering an input action on the QuantityStepper component. This can be used together with the default onValueChange param.

QuantityStepperSize

enum QuantityStepperSize : Enum<QuantityStepperSize>

QuantityStepperSize defines the overall size of the Quantity Stepper component.

RadioButtonVariant

enum RadioButtonVariant : Enum<RadioButtonVariant>

Styles for RadioButton

RadioGroupItem

data class RadioGroupItem<T>(val key: T, val label: String, val enabled: Boolean = true, val caption: String? = null)

Data class used for RadioButtonGroup

RatingSize

enum RatingSize : Enum<RatingSize>

SelectInteractionParams

data class SelectInteractionParams(val onClick: (Boolean) -> Unit, val onClickContentDescription: String?, val enabled: Boolean = true)

Select interaction params

SelectionEmphasis

enum SelectionEmphasis : Enum<SelectionEmphasis>

Style for Choice In most cases, emphasised styles are preferred, as it’s important to highlight user selections. Subtle styles are useful in contexts where the coloured selection competes in the hierarchy of nearby elements, like other emphasised elements, or coloured content within the Choice Button content.

SelectItemsParams

data class SelectItemsParams<T>(val items: List<T>, val itemContent: @Composable (T) -> Unit, val onItemSelected: (T) -> Unit, val onDismissRequest: () -> Unit, val itemContentPadding: PaddingValues = MenuDefaults.DropdownMenuItemContentPadding, val fluidMenu: Boolean = false, val selectedItem: T? = null)

Class that controls the aspects related with the Select items

SheetState

class SheetState(initialValue: SheetValue, animationSpec: AnimationSpec<Float> = SwipeableDefaults.AnimationSpec, val confirmStateChange: (SheetValue) -> Boolean = { true }) : SwipeableState<SheetValue>

State of the SheetState composable.

SheetValue

enum SheetValue : Enum<SheetValue>

Possible values of SheetState.

ShopAllButtonParams

data class ShopAllButtonParams(val label: String, val visible: Boolean = true, val onClick: () -> Unit)

Params for Shop all button. Uses a ButtonVariant.ImageOverlay when rendered.

ShoppableImageBackgroundParams

data class ShoppableImageBackgroundParams(val painter: Painter, val contentDescription: String?, val aspectRatio: SkapaAspectRatio = SkapaAspectRatio.Portrait, val onClick: () -> Unit)

Data class to be used for background image option.

ShoppableImageItem

data class ShoppableImageItem<T>(val key: T, @FloatRange(from = 0.0, to = 1.0) val xCoordinate: Float, @FloatRange(from = 0.0, to = 1.0) val yCoordinate: Float, val content: @Composable () -> Unit, val onClick: () -> Unit? = null)

Shoppable image item data class

SkapaAspectRatio

enum SkapaAspectRatio : Enum<SkapaAspectRatio>

Set of aspect ratios defined by Skapa

SkapaImage

object SkapaImage

This Object provides the necessary properties to build an Skapa Image component