Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Example of Clearwater components containing their own styles
class AppHeader
include Clearwater::Component
def render
header({ style: style }, [
h1({ style: app_name_style }, 'My App')
nav({ style: nav_style }, [
NavLink.new('Home', '/'),
NavLink.new('Foo', '/foo'),
NavLink.new('Bar', '/bar'),
])
])
end
def style
{
# Every render, you get a different color!
background_color: random_color,
color: random_color,
# You can have independent transitions, just pass in an array
transition: [
'background-color 500ms', # We do have to specify dashed style name here :-\
'color 800ms',
],
}
end
def app_name_style
{
font_family: 'Helvetica Neue',
font_size: '2.5em',
}
end
def random_color
"##{(rand(16) ** 6).to_s(16)}"
end
end
class Layout
include Clearwater::Component
def render
div({ style: style }, [
AppHeader.new,
outlet,
AppFooter.new,
])
end
def style
{
# Note snake-cased attribute names. You can also camelCase them if you like.
background_color: '#eee',
color: 'black',
width: '1200px',
margin: 'auto',
padding: '1em 2em',
}
end
end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.