Stack view example

100%

Stack view example

✓ Published0🌍 Public

Last edited Sep 17, 2019

Created on Sep 14, 2019

This example demonstrates an NSStackView managing three colored radio buttons arranged vertically, showing how Auto Layout constraints position the stack view within an NSPanel window. The code creates a floating panel using AppKit classes like NSPanel and NSStackView, configuring the buttons with system blue, red, and green backgrounds. It sets orientation to vertical and applies spacing and alignment settings, then adds horizontal and vertical constraints to pin the stack view to the panel’s content view. The example also toggles a user default to visualize mutually exclusive constraints during layout debugging.

AI-generated description

Similar vizzes

Loading thumbnail…

Creating a Sketch NSPanel

This example demonstrates how to create a custom, frameless floating panel with a vibrant, translucent background using the Sketch JavaScript API. The script creates an `NSPanel` with a titled, closable, and resizable window, and applies a `NSVisualEffectView` with a vibrant light appearance to achieve a frosted-glass effect. It uses `NSLayoutConstraint` objects to anchor the visual effect to the panel’s content view. The panel’s close button is handled via `setCOSJSTargetFunction`, which cleans up the panel reference and stops the script’s keep-alive loop.

KKevinGutowski

58% match

Loading thumbnail…

stacking context

This example demonstrates how CSS stacking contexts determine the paint order of overlapping positioned elements. Three colored squares—red, green, and blue—are absolutely positioned within separate parent divs, yet their visual layering follows the order of the divs in the DOM. The code uses plain CSS positioning (top/left offsets) and background colors, with no JavaScript or external libraries. A commented-out universal selector block shows a debugging technique for visualizing layout boxes, but the active CSS keeps the example minimal. The illustration clarifies that without explicit z-index, later siblings paint above earlier ones, as seen in the stacked arrangement.

EEE2dev

57% match

Loading thumbnail…

Cocoa

This example shows a custom slider control built with Cocoa’s AppKit framework, using an `NSView` subclass to render a gradient-filled, rounded rectangular track. The view applies a linear gradient via `NSGradient` and sets a corner radius using layer-backed properties (`wantsLayer`, `layer.cornerRadius`). The code also attempts to load an image from a file named `knob.png` for the slider’s thumb, though the actual drawing of that image is commented out. The gradient and angle properties are exposed, with setters that trigger redraws via `setNeedsDisplay:`. The data source is the referenced image file, while the rendering relies on `drawRect:` and `drawInRect:angle:`.

IIliaIdakiev

56% match

Loading thumbnail…

TableView start

This Sketch plugin example demonstrates a floating panel containing a table view with a custom data source. The panel is built using native Sketch APIs like `NSPanel`, `NSScrollView`, and `NSTableView`, and it populates the table through a dynamic delegate created with `MochaJSDelegate`, which intercepts selector-based callbacks to supply row and column values. The code sets up a single-column grid with alternating row colors, red grid lines, and a fixed height, and logs data requests to the console.

KKevinGutowski

56% match

Loading thumbnail…

Stacked-to-Grouped Bars

This example demonstrates an interactive transition between stacked and grouped bar charts, using sequenced animations to preserve object constancy as the data morphs between the two views. A radio button form toggles the mode, while D3 v4 APIs like `d3.scaleBand`, `d3.scaleLinear`, and `d3.stack` handle the layout and stacking. The transitions use `rect.transition()` with staggered delays and duration to smoothly animate each rectangle’s x-position, width, y-position, and height. The visualization renders with SVG, inspired by Heer and Robertson’s animated transition techniques.

MMorganhaoyu

56% match

Loading thumbnail…

Gist 03ea367d00ac593217cf6770ee1cc539

This example demonstrates a Sketch plugin that launches a floating panel window with a table view interface. The code uses Sketch’s JavaScript API, `NSThread`, `NSPanel`, and `NSMakeRect` to construct a 312×210 pixel textured window, position it at the screen center, and set it to float above other windows. It manages a thread dictionary key to prevent duplicate panels, toggling the window open or closed on repeated plugin runs. The plugin calls `document.showMessage()` for user feedback and hides the miniaturize and zoom buttons via `standardWindowButton`, with the table view setup currently stubbed out.

KKevinGutowski

55% match

Loading thumbnail…

Before applying the style guide

This example shows an Objective-C iOS view controller that manages a sign-in form, demonstrating how UI state updates based on text-field validation. It uses UIKit’s `UITextField` targets and `IBAction` to trigger validation on each edit, while the `updateUIState` method toggles background colors (yellow for invalid) and disables the sign-in button until both username and password exceed three characters. The code relies on `RWDummySignInService` to simulate asynchronous sign-in, which disables all controls during the request and hides or shows a failure label upon completion. It does not use any charting or visualization libraries, instead illustrating a simple state-driven interface pattern with native Cocoa Touch APIs.

CColinEberhardt

55% match

Loading thumbnail…

Testing how to animate a NSBox on the screen.

This example demonstrates how to animate a red NSBox across a macOS window using AppKit’s animation proxy. The code creates a floating NSPanel, configures it with a custom style mask, and disables the minimize and zoom buttons. An NSBox is added as a subview to the panel’s flipped content view, then its frame origin is moved via the `animator()` proxy to trigger a smooth animation. The implementation relies on `NSThread.mainThread().threadDictionary` to manage the panel’s lifecycle for repeat executions.

KKevinGutowski

54% match