Giter Club home page Giter Club logo

deerdesignsystem's Introduction

Deer Design System (DDS)

This is a design system of @mtj0928, by @mtj0928, for @mtj0928.

Color

You can easily access colors defined in DDS.

// UIColor or NSColor
Color.dds.primaryTextColor.color
    
// SwiftUI.Color
Color.dds.primaryTextColor

Text

You can easily access labels in DDS.

// UILabel
UILabel.dds
    .preferredLabel(for: .footnote, weight: .regular)

// Text
Text("text")
    .preferredFont(for: .footnote, weight: .regular)

Tips

Tips is a view which has title, body and close button. You can use the view for showing tips about your app.

// Basic
Tips(title: "Title",body: "This is a body of the view.") {
    print("Closesd")
}
    .foregroundColor(Color.dds.deerBlue)
    
// Custom
Tips(title: {
    Text("Hoge")
        .preferredFont(for: .body, weight: .heavy)
        .foregroundColor(Color.dds.primaryText)
    }, label: {
        HStack {
            Circle().foregroundColor(Color.dds.deerGreen)
                .frame(width: 10, height: 10)
            Text("Custom")
                .preferredFont(for: .footnote, weight: .medium)
                .foregroundColor(Color.dds.deerRed)
            Spacer()
        }
    }, tappedAction: {
        print("tapped background")
    }, closeAction: {
        print("tapped close button")
    })
    .foregroundColor(Color.dds.secondaryBackground)

Tips image

InAppNotification

You can show notifications in your application.

Preapre instance of InAppNotificationCenter.

let notificationCenter = InAppNotificationCenter.resolve(for: windowScene)

If you use SwiftUI, embed notification queue to your view.

view.environment(\.inAppNotificationQueue, notificationCenter.queue)

And, you can show notification by adding notification request to the queue.

struct YourView: View {
    @Environment(\.inAppNotificationQueue) var queue
    
    var body: some View { ... }
    
    func showNotification() { 
        queue.add(StandardInAppNotificationRequest(
            identifier: UUID().uuidString,
            icon: image,
            title: title,
            body: body
        ))
    }
}

Notification image

Custom InAppNotification

You can custom view of InAppNotification.

Prepare Cutom InAppNotificationRequest like this.

struct CustomNotificationRequest: View, InAppNotificationRequest {
    let identifier: String
    var view: AnyView { AnyView(self) }
    var duration: TimeInterval? = 3.0

    var body: some View { ... }
}

And, add the request to queue.

queue.add(CustomNotificationRequest(identifier: UUID().uuidString))

deerdesignsystem's People

Contributors

mtj0928 avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.