All Projects → zntfdr → AStack

zntfdr / AStack

Licence: MIT license
The Missing SwiftUI Adaptive and Accessible Stacks Library.

Programming Languages

swift
15916 projects

Projects that are alternatives of or similar to AStack

bones
Accessible HTML code patterns for common UI widgets such as tabs, menus, dialogs, etc.
Stars: ✭ 79 (-28.18%)
Mutual labels:  accessibility, a11y
togglific
Do you find web animations distracting? Togglific provides a distraction-free web experience!
Stars: ✭ 17 (-84.55%)
Mutual labels:  accessibility, a11y
Tanaguru
Automated accessibility (a11y) testing tool, with emphasis on reliablity and automation
Stars: ✭ 116 (+5.45%)
Mutual labels:  accessibility, a11y
eufemia
DNB Design System
Stars: ✭ 38 (-65.45%)
Mutual labels:  accessibility, a11y
openacr
OpenACR is a digital native Accessibility Conformance Report (ACR). The initial development is based on Section 508 requirements. The main goal is to be able to compare the accessibility claims of digital products and services. A structured, self-validated, machine-readable documentation will provide for this.
Stars: ✭ 61 (-44.55%)
Mutual labels:  accessibility, a11y
cauldron
cauldron.dequelabs.com/
Stars: ✭ 50 (-54.55%)
Mutual labels:  accessibility, a11y
accessible-name-automation-proof-of-concept
This is an experiment based on Accessibility Object Model (AOM). It tries to demonstrate that it is theoretically possible (in a certain way) to predict what the screen reader will say by focusing on semantic and non semantic elements with a bit of automated testing, thus reducing the need for manual testing.
Stars: ✭ 15 (-86.36%)
Mutual labels:  accessibility, a11y
Weather-SwiftUI
A weather app that uses the Dark Sky API built using SwiftUI! Get the current weather for a particular location and check out the 5-day forecast!
Stars: ✭ 107 (-2.73%)
Mutual labels:  stacks, swiftui
makeup-js
Mono-repo for all vanilla JavaScript utility modules and headless ui
Stars: ✭ 28 (-74.55%)
Mutual labels:  accessibility, a11y
a11y-checker
Identifies accessibility issues in HTML markup.
Stars: ✭ 103 (-6.36%)
Mutual labels:  accessibility, a11y
ari
Accessible unstyled vue components
Stars: ✭ 22 (-80%)
Mutual labels:  accessibility, a11y
a11y-contracting
Building Accessibility Best Practices into Contracting
Stars: ✭ 43 (-60.91%)
Mutual labels:  accessibility, a11y
agnostic-axe
Framework agnostic accessibility reporter, powered by axe-core
Stars: ✭ 80 (-27.27%)
Mutual labels:  accessibility, a11y
jquery-accessible-simple-tooltip-aria
jQuery accessible simple tooltip window, using ARIA
Stars: ✭ 22 (-80%)
Mutual labels:  accessibility, a11y
vue-focus-loop
Vue component that helps you to to trap focus in an element.
Stars: ✭ 23 (-79.09%)
Mutual labels:  accessibility, a11y
WWDCNotes
WWDCNotes.com content
Stars: ✭ 343 (+211.82%)
Mutual labels:  accessibility, swiftui
Creatability Components
Web components for making creative tools more accessible.
Stars: ✭ 248 (+125.45%)
Mutual labels:  accessibility, a11y
accessibility-resources
A curated list of accessibility resources
Stars: ✭ 66 (-40%)
Mutual labels:  accessibility, a11y
accessibility-resources
Screen reader and WCAG testing resources to maintain a consistent approach to testing and documenting behaviour.
Stars: ✭ 25 (-77.27%)
Mutual labels:  accessibility, a11y
chusho
A library of bare & accessible components and tools for Vue.js 3
Stars: ✭ 47 (-57.27%)
Mutual labels:  accessibility, a11y

AStack

Swift Package Manager MacOS + iOS + iPadOS + tvOS + watchOS Twitter: @zntfdr

Welcome to AStack, a library bringing you adaptive and accessible SwiftUI stacks.

Introduction

AStack introduces four new SwiftUI views:

  • AHStack
  • AVStack
  • LazyAHStack
  • LazyAVStack

Their behavior is based on the environment's ContentSizeCategory and/or UserInterfaceSizeClass:

  • when the content size category is one that is not associated with accessibility, they are equivalent to SwiftUI's counterparts
  • when the content size category is one that is associated with accessibility, the views switch alignment (e.g. from horizontal to vertical)
  • when the associated class size is .regular, they are equivalent to SwiftUI's counterparts
  • when the associated class size is .compact, the views switch alignment (e.g. from horizontal to vertical)

By default all views observe just ContentSizeCategory, however this can be changed to observing either ContentSizeCategory or UserInterfaceSizeClass, both, or none via the observing parameter.

Usage

Use any AStack view as any other stack view:

import AStack
import SwiftUI

struct ContentView: View {
  var body: some View {
    AHStack {
      ...
    }
  }
}

@available(macOS 11, iOS 14, watchOS 7, tvOS 14, *)
struct ContentView2: View {
  var body: some View {
    LazyAVStack {
      ...
    }
  }
}

Properties such as alignment and spacing can be customized:

import AStack
import SwiftUI

struct ContentView: View {
  var body: some View {
    AHStack(
      hAlignment: .top,    // HStack alignment
      vAlignment: .leading // VStack alignment
    ) {
      ...
    }
  }
}

Examples

AHStack

import AStack
import SwiftUI

struct ContentView: View {
  var body: some View {
    AHStack {
      ZStack {
        RoundedRectangle(cornerRadius: 12).strokeBorder()
        Text("1")
      }
      ZStack {
        RoundedRectangle(cornerRadius: 12).strokeBorder()
        Text("2")
      }.foregroundColor(.purple)
      ZStack {
        RoundedRectangle(cornerRadius: 12).strokeBorder()
        Text("3")
      }.foregroundColor(.blue)
    }
  }
}

AVStack

import AStack
import SwiftUI

struct ContentView: View {
  var body: some View {
    AVStack {
      ZStack {
        RoundedRectangle(cornerRadius: 12).strokeBorder()
        Text("1")
      }
      ZStack {
        RoundedRectangle(cornerRadius: 12).strokeBorder()
        Text("2")
      }.foregroundColor(.purple)
      ZStack {
        RoundedRectangle(cornerRadius: 12).strokeBorder()
        Text("3")
      }.foregroundColor(.blue)
    }
  }
}

Installation

AStack is distributed using the Swift Package Manager. To install it into a project, follow this tutorial and use this repository URL: https://github.com/zntfdr/AStack.git.

Credits

AStack was built by Federico Zanetello as a component of Bangkok Metro.

Contributions and Support

All users are welcome and encouraged to become active participants in the project continued development — by fixing any bug that they encounter, or by improving the documentation wherever it’s found to be lacking.

If you'd like to make a change, please open a Pull Request, even if it just contains a draft of the changes you’re planning, or a test that reproduces an issue.

Thank you and please enjoy using AStack!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].