Shadow Panel Views
PanelsA family of shadow-layered wrapper views that apply CALayer drop shadow to a white (or custom) inner panel. The outer view controls the shadow; the inner panel provides the visible surface. Ideal for card-style UI elements.
| Class | Inner Content | Use Case |
|---|---|---|
TTBaseShadowPanelView | TTBaseUIView panelShadowView | Generic card container — add subviews to panelShadowView |
TTBaseShadowButtonView | TTBaseUIButton | Floating call-to-action button with depth shadow |
TTBaseShadowContentView<T> | Generic T: UIView | Shadow wrapper for any UIView subtype |
TTBaseShadowPaddingPanelView | Panel with UIEdgeInsets | Card with controllable padding inside shadow |
🚀 Usage
TTBaseShadowPanelView — Card
class ProductCardView: TTBaseShadowPanelView {
let imageView = TTBaseUIImageView(withCornerRadius: 8)
let titleLabel = TTBaseUILabel(withType: .TITLE, text: "", align: .left)
let priceLabel = TTBaseUILabel(withType: .SUB_TITLE, text: "", align: .right)
override func updateBaseUIView() {
super.updateBaseUIView()
// Add content to panelShadowView (the white card surface)
panelShadowView.addSubview(imageView)
panelShadowView.addSubview(titleLabel)
panelShadowView.addSubview(priceLabel)
// ... layout constraints
}
// Customize shadow
override var bgShadown: UIColor { .black.withAlphaComponent(0.15) }
override var bgPanel: UIColor { .white }
}
TTBaseShadowButtonView — CTA Button
let ctaButton = TTBaseUIButton(textString: "Add to Cart", type: .DEFAULT)
let shadowBtn = TTBaseShadowButtonView(with: ctaButton, shadownHeight: 6)
// Handle tap
shadowBtn.onTouchButtonHandler = {
addToCart()
}
// Subclass for custom shadow
class MyFloatingButton: TTBaseShadowButtonView {
override var bgShadown: UIColor { .systemBlue.withAlphaComponent(0.3) }
override func updateBaseShadowButtonView() {
// Additional setup
}
}
TTBaseShadowContentView — Generic Wrapper
// Wrap any UIView in a shadow container
class ShadowCardVC: TTBaseShadowContentView<MyCustomView> {
override func updateBaseUIView() {
super.updateBaseUIView()
// panelView is of type MyCustomView
panelView.configure(data: cardData)
}
override var bgShadown: UIColor { .systemGray.withAlphaComponent(0.2) }
}
📖 Overridable Properties
| Property | Default | Description |
|---|---|---|
bgShadown | darkGray, 40% | Shadow color (CALayer.shadowColor) |
shadowHeight | P_CONS_DEF | Shadow Y offset + inner panel bottom spacing |
bgPanel | .white | Inner panel background color (set in setupStyles) |
textColor | TTView.textDefColor | Default text color for inner content |
shadowPadding | UIEdgeInsets | Padding panel insets (TTBaseShadowPaddingPanelView) |
Pro Tip: Always add content to
panelShadowView (or panelView), NOT to the outer view — the outer view is transparent and only carries the CALayer shadow. Adding directly to the outer view will appear behind the shadow.