Module: ViewComponentContrib::StyleVariants

Defined in:

lib/view_component_contrib/style_variants.rb

Overview

Organize style in variants that can be combined. Inspired by www.tailwind-variants.org and cva.style/docs/getting-started/variants

Example:

 class ButtonComponent < ViewComponent::Base
   include ViewComponentContrib::StyleVariants

   erb_template <<~ERB
     <button class="<%= style(size: 'sm', color: 'secondary') %>">Click me</button>
   ERB

   style do
     base {
       %w(
         font-medium bg-blue-500 text-white rounded-full
       )
     }
     variants {
       color {
         primary { %w(bg-blue-500 text-white) }
         secondary  { %w(bg-purple-500 text-white) }
       }
       size {
         sm { "text-sm" }
         md { "text-base" }
         lg { "px-4 py-3 text-lg" }
       }
     }
     defaults { {size: :md, color: :primary} }
  end

  attr_reader :size, :color

  def initialize(size: :md, color: :primary)
    @size = size
    @color = color
  end
end

Defined Under Namespace

Modules: ClassMethods Classes: StyleConfig, StyleSet, VariantBuilder

Class Method Summary

• .included(base) ⇒ Object

Instance Method Summary

• #style(name = self.class.default_style_name, **variants) ⇒ Object

Class Method Details

.included(base) ⇒ Object

# File 'lib/view_component_contrib/style_variants.rb', line 212

def self.included(base)
  base.extend ClassMethods
end

Instance Method Details

#style(name = self.class.default_style_name, **variants) ⇒ Object

# File 'lib/view_component_contrib/style_variants.rb', line 238

def style(name = self.class.default_style_name, **variants)
  self.class.style_config.compile(name.to_sym, **variants)
end