diff --git a/Sources/TokamakCore/Modifiers/Shadow.swift b/Sources/TokamakCore/Modifiers/Shadow.swift new file mode 100644 index 000000000..76be6f823 --- /dev/null +++ b/Sources/TokamakCore/Modifiers/Shadow.swift @@ -0,0 +1,21 @@ +public struct _ShadowLayout: ViewModifier { + public var color: Color + public var radius: CGFloat + public var x: CGFloat + public var y: CGFloat + + public func body(content: Content) -> some View { + content + } +} + +public extension View { + func shadow( + color: Color = Color(.sRGBLinear, white: 0, opacity: 0.33), + radius: CGFloat, + x: CGFloat = 0, + y: CGFloat = 0 + ) -> some View { + modifier(_ShadowLayout(color: color, radius: radius, x: x, y: y)) + } +} diff --git a/Sources/TokamakDemo/ShadowDemo.swift b/Sources/TokamakDemo/ShadowDemo.swift new file mode 100644 index 000000000..1e8ff5e1a --- /dev/null +++ b/Sources/TokamakDemo/ShadowDemo.swift @@ -0,0 +1,8 @@ +import TokamakShim + +struct ShadowDemo: View { + var body: some View { + Color.red.frame(width: 60, height: 60, alignment: .center) + .shadow(color: .black, radius: 5, x: 10, y: 10) + } +} diff --git a/Sources/TokamakDemo/TokamakDemo.swift b/Sources/TokamakDemo/TokamakDemo.swift index 6ea741061..2b50d7187 100644 --- a/Sources/TokamakDemo/TokamakDemo.swift +++ b/Sources/TokamakDemo/TokamakDemo.swift @@ -120,6 +120,9 @@ struct TokamakDemoView: View { }.padding(20)) NavItem("GeometryReader", destination: GeometryReaderDemo()) } + Section(header: Text("Modifiers")) { + NavItem("Shadow", destination: ShadowDemo()) + } Section(header: Text("Selectors")) { NavItem("Picker", destination: PickerDemo()) NavItem("Slider", destination: SliderDemo()) diff --git a/Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift b/Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift index 958efbef5..fbd35ee76 100644 --- a/Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift +++ b/Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift @@ -101,3 +101,11 @@ extension _PaddingLayout: DOMViewModifier { .joined(separator: " ")] } } + +extension _ShadowLayout: DOMViewModifier { + public var attributes: [HTMLAttribute: String] { + ["style": "box-shadow: \(x)px \(y)px \(radius)px 0px \(color.cssValue(.defaultEnvironment));"] + } + + public var isOrderDependent: Bool { true } +}