Class: SpreadComponentPreview

Inherits:
ViewComponent::Preview
  • Object
show all
Defined in:
lib/cubit_components/previews/spread_component_preview.rb

Instance Method Summary collapse

Instance Method Details

#centered_items ⇒ Object

Centered items



21
22
23
24
25
26
27
 
# File 'lib/cubit_components/previews/spread_component_preview.rb', line 21

def centered_items
  render(CubitComponents::SpreadComponent.new(vattrs: ["items-center"])) do
    tag.div(class: "p-2 border h-16") { "Tall Item" } +
      tag.div(class: "p-2 border") { "Regular Item" } +
      tag.div(class: "p-2 border h-12") { "Medium Item" }
  end
end

#custom_element ⇒ Object

Custom element



39
40
41
42
43
44
45
 
# File 'lib/cubit_components/previews/spread_component_preview.rb', line 39

def custom_element
  render(CubitComponents::SpreadComponent.new(element: "section", classes: "border p-4")) do
    tag.div(class: "p-2 bg-gray-100") { "Section Item 1" } +
      tag.div(class: "p-2 bg-gray-100") { "Section Item 2" } +
      tag.div(class: "p-2 bg-gray-100") { "Section Item 3" }
  end
end

#default ⇒ Object

Default horizontal spread with items-start and text-left



3
4
5
6
7
8
9
 
# File 'lib/cubit_components/previews/spread_component_preview.rb', line 3

def default
  render(CubitComponents::SpreadComponent.new) do
    tag.div(class: "p-2 border") { "Item 1" } +
      tag.div(class: "p-2 border") { "Item 2" } +
      tag.div(class: "p-2 border") { "Item 3" }
  end
end

#text_alignment ⇒ Object

Text alignment



30
31
32
33
34
35
36
 
# File 'lib/cubit_components/previews/spread_component_preview.rb', line 30

def text_alignment
  render(CubitComponents::SpreadComponent.new(vattrs: ["text-center"])) do
    tag.div(class: "p-2 border w-32") { "Centered Text" } +
      tag.div(class: "p-2 border w-32") { "Centered Text" } +
      tag.div(class: "p-2 border w-32") { "Centered Text" }
  end
end

#vertical ⇒ Object

Vertical spread layout



12
13
14
15
16
17
18
 
# File 'lib/cubit_components/previews/spread_component_preview.rb', line 12

def vertical
  render(CubitComponents::SpreadComponent.new(vattrs: ["vertical", "items-center"])) do
    tag.div(class: "p-2 border") { "Item 1" } +
      tag.div(class: "p-2 border") { "Item 2" } +
      tag.div(class: "p-2 border") { "Item 3" }
  end
end