CrystalButtonKit 是 CrystalUI 框架（正在开发中）的一部分。该框架致力于提供一套 UI 组件，这些组件利用 SwiftUI 的 Material 作为其背景元素。

要创建一个简单的 CUIButton，你可以使用 SF Symbol 作为你的图标。

import CrystalButtonKit
import SwiftUI

struct ContentView: View {
    @State
    var expanded: Bool = false
    
    var body: some View {
        CUIButton(
            sfSymbolName: "gearshape.fill"
        ) {
            print("button pressed")
        }
    }
}

import CrystalButtonKit
import SwiftUI

struct ContentView: View {
    @State
    var expanded: Bool = false
    
    var body: some View {
        CUIExpandableButton(
            expanded: $expanded,
            sfSymbolName: "gearshape.fill"
        ) {
            Text("My content")
        }
    }
}

以下部分描述了如何自定义此软件包中的按钮。为了简单起见，我们将使用 CUIExpandableButton 作为所有示例，因为其中大部分也适用于 CUIButton。

如果你想更精细地控制按钮的外观，你可以为按钮提供自定义图标。

CUIExpandableButton(
    expanded: $expanded
) {
    Image("icon")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: 26, height: 26)
} content: {
    Text("My content")
}

此外，你可以完全隐藏图标。当隐藏图标时，最好显示一个标题，以防止折叠状态下出现空按钮。尽管按钮也可以为空。按钮为此目的提供了一个便捷的初始化器。

CUIExpandableButton(
    expanded: $expanded,
    sfSymbolName: "bell.fill"
) {
    Text("Button with hidden icon")
        .frame(width: 200)
        .padding(8)
}
.hideIcon(true)
.title("More Info")

CUIExpandableButton(
    expanded: $expanded,
    sfSymbolName: "bell.fill"
) {
    Text("Button that hides icon when expanded.")
        .frame(width: 200)
        .padding(8)
}
.hideIcon(expanded)
.title("New Message")

你可以添加一个动作，该动作在使用内置控件展开或折叠按钮时触发。对于 CUIButton，此动作不是可选的。

CUIExpandableButton(
    expanded: $expanded,
    sfSymbolName: "bell.fill"
) {
    Text("Additional actions can be performed when expanding/collpasing")
        .frame(width: 200)
        .padding(8)
} action: {
    print("Button was pressed")
}

CUIExpandableButton(
    expanded: $expanded,
    sfSymbolName: "envelope.fill"
) {
    Text("My content")
        .frame(width: 200)
        .padding(8)
}
.title("Inbox")
.subtitle("5 unread messages")

CUIExpandableButton(
    expanded: $expanded4,
    sfSymbolName: "mappin"
) {
    Text("My content")
        .frame(width: 200)
        .padding(8)
}
.title(expanded ? "Visit SF!" : nil)
.subtitle(expanded ? "Top attractions" : nil)

当按钮展开时，还有其他自定义选项可用于自定义头部。这仅适用于 CUIExpandableButton。

CUIExpandableButton(
    expanded: $expanded,
    sfSymbolName: "exclamationmark.triangle.fill"
) {
    Text("Take up the full space when expanded.")
        .frame(width: 200)
        .padding(8)
)
.hideHeader()

CUIExpandableButton(
    expanded: $expanded,
    sfSymbolName: "exclamationmark.triangle.fill"
) {
    Text("Hide the separator.")
        .frame(width: 200)
        .padding(8)
)
.hideSeperator()
.title(expanded ? "Alert!" : nil)

CUIExpandableButton(
    expanded: $expanded,
    sfSymbolName: "exclamationmark.triangle.fill"
) {
    Text("Hide the close button to control how it's dismissed yourself.")
        .frame(width: 200)
        .padding(8)
)
.hideCloseButton()
.title(expanded ? "Alert!" : nil)
.subtitle("You need to take action!")

你可以选择添加颜色背景而不是默认的 Material 背景。但是，Material 也将在下方渲染。这允许添加透明背景，从而产生着色效果。

CUIExpandableButton(
    expanded: $expanded,
    sfSymbolName: "doc.fill"
) {
    Text("Tinting the background can help the button fit into your UX design.")
        .frame(width: 200)
        .padding(8)
)
.backgroundColor(.blue.opacity(0.15))

标准的 foreground color 修饰符也可以应用，以对按钮的元素进行着色。

CUIExpandableButton(
    expanded: $expanded,
    sfSymbolName: "doc.fill"
) {
    Text("You can use other standard modifiers too!")
        .frame(width: 200)
        .padding(8)
        .foregroundColor(nil)
)
.standardLayout(title: "Color", subtitle: "Customization")
.foregroundColor(.yellow)

值得注意的是，CrystalButtonKit 完全支持动态类型变体、暗黑模式和从右到左的布局方向。

CrystalButtonKit 支持 Swift Package Manager。要使用它，请将以下内容添加到你的 Package.swift 文件中

dependencies: [
    .package(name: "CrystalButtonKit", url: "https://github.com/robhasacamera/CrystalButtonKit.git", from: "1.0.6")
],

CrystalButtonKit

用法

自定义

图标

动作

标题 & 副标题

仅头部选项

自定义颜色

其他功能

安装

示例项目

文档

未来计划