SkeletonUI: Provides an easy way to make your views skeletonable.

skeleton-ui

License Swift Compatibility Platform Compatibility CI CodeCov

描述

skeleton-ui 提供了一种使视图可骨骼化的简便方法。

视觉示例

SkeletonUI 的视觉示例

Example

用法

要在视图上显示骨骼占位符，可以使用 SkeletonView。SkeletonView 可以作为列表视图或普通视图呈现。您可以通过简单地将 viewType 参数传递给初始化器来配置它。

import SkeletonUI

struct ContentView: View {
    struct Item: Identifiable {
        let id = UUID()
        let text: String
    }

    let data: [Item] = [
        Item(text: "Item")
    ]

    var body: some View {
        SkeletonView(
            viewType: .list,
            behavior: .manually(isEnabled: true),
            data: data,
            quantity: 1,
            configuration: SkeletonConfiguration(
                numberOfLines: 2,
                scales: [1.0, 0.5],
                spacing: 8.0,
                insets: EdgeInsets(top: 8.0, leading: 8.0, bottom: 8.0, trailing: 8.0)
            ),
            builder: { text in text.map { Text($0.text) } }
        )
    }
}

如果您需要显示自定义骨骼视图，可以利用 SkeletonUI 提供的 skeletonBuilder(:_) 函数。此函数旨在自定义视图中各个骨骼元素的外观。

import SkeletonUI

struct ContentView: View {
    struct Item: Identifiable {
        let id = UUID()
        let text: String
    }

    let data: [Item] = [
        Item(text: "Item")
    ]

    var body: some View {
        SkeletonView(
            viewType: .list,
            behavior: .manually(isEnabled: true),
            data: data,
            quantity: 8,
            configuration: SkeletonConfiguration(
                numberOfLines: 2,
                scales: [1.0, 0.5],
                spacing: 8.0,
                insets: EdgeInsets(top: 8.0, leading: 8.0, bottom: 8.0, trailing: 8.0)
            ),
            builder: { text in text.map { Text($0.text) } },
            skeletonBuilder: { index in 
                if index == 0 {
                    RoundedRectangle(cornerRadius: 8.0)
                } else {
                    HStack {
                        RoundedRectangle(cornerRadius: 8.0)
                        RoundedRectangle(cornerRadius: 8.0)
                    }
                }
            }
        )
    }
}

要求

安装

Swift 包管理器

Swift 包管理器 是一种用于自动化 Swift 代码分发的工具，并已集成到 swift 编译器中。它尚处于早期开发阶段，但 skeleton-ui 确实支持在受支持的平台上使用它。

一旦您设置好 Swift 包，将 skeleton-ui 添加为依赖项就像将其添加到 Package.swift 的 dependencies 值一样简单。

dependencies: [
    .package(url: "https://github.com/space-code/skeleton-ui.git", .upToNextMajor(from: "1.0.0"))
]

交流

贡献

引导开发环境

make bootstrap

请随时帮助这个项目！如果您发现任何可以改进的地方或想要新功能，请打开一个 issue 或发送一个 Pull Request！

作者

Nikita Vasilev, nv3212@gmail.com

许可证

skeleton-ui 在 MIT 许可证下可用。有关更多信息，请参阅 LICENSE 文件。