Dialog

dialog

A dialog is a type of modal window that is displayed on top of the current app content and remains on the screen until confirmed, dismissed, or a required action has been taken.

Usage

dialog

XelaDialog(
    icon: "",
    title: "Popup title",
    description: "Popup description",
    primaryButton: XelaButton(text: "Action", size: .Medium, type: .Primary),
    secondaryButton: XelaButton(text: "Action", size: .Medium, type: .Secondary, foregroundColor: Color(xelaColor: .Blue3), borderLineWidth: 0),
    closeButton: XelaButton(leftIcon: nil, size: .Medium, background: Color.clear, foregroundColor: Color(xelaColor: .Gray6), borderLineWidth: 0, removePaddings: true, systemIcon: "xmark"),
    buttonsHorizontal: true,
    background: Color(.white),
    titleColor: Color(xelaColor: .Gray3),
    descriptionColor: Color(xelaColor: .Gray3),
    iconColor: Color(xelaColor: .Gray10)
)
.shadow(color: Color(.black).opacity(0.04), radius: 48, x:0 , y: 4) // shadow
.shadow(color: Color(.black).opacity(0.04), radius: 12, x:0 , y: 8) // shadow
.padding() // padding

Properties

Name Type Default Value Required Description
icon String NO Top Center icon from Assets
title String NO Title string
description String NO Description string
primaryButton XelaButton? nil NO Primary button
secondaryButton XelaButton? nil NO Secondary button
closeButton XelaButton? nil NO Close dialog button
buttonsHorizontal Bool true NO Primary and Secondary buttons positions
background Color Color(.white) NO Background color
titleColor Color Color(xelaColor: .Gray3) NO Title color
descriptionColor Color Color(xelaColor: .Gray3) NO Description color
iconColor Color Color(xelaColor: .Gray3) NO Icon color