Class: Views::Docs::Tabs

Inherits:
Base
  • Object
show all
Defined in:
lib/ruby_ui/tabs/tabs_docs.rb

Defined Under Namespace

Classes: Repo

Instance Method Summary collapse

Methods inherited from Base

#Alert, #AlertDescription, #AlertTitle, #Heading, #InlineCode, #InlineLink, #Text, #component_files, #docs_accordion_path, #docs_alert_dialog_path, #docs_alert_path, #docs_aspect_ratio_path, #docs_avatar_path, #docs_badge_path, #docs_installation_path, #docs_separator_path, #docs_sheet_path

Instance Method Details

#view_template ⇒ Object 



6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
 
# File 'lib/ruby_ui/tabs/tabs_docs.rb', line 6

def view_template
  component = "Tabs"

  div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
    render Docs::Header.new(title: "Tabs", description: "A set of layered sections of content—known as tab panels—that are displayed one at a time.")

    Heading(level: 2) { "Usage" }

    render Docs::VisualCodeExample.new(title: "Example", context: self) do
      "        Tabs(default_value: \"account\", class: 'w-96') do\n          TabsList do\n            TabsTrigger(value: \"account\") { \"Account\" }\n            TabsTrigger(value: \"password\") { \"Password\" }\n          end\n          TabsContent(value: \"account\") do\n            div(class: \"rounded-lg border p-6 space-y-4 bg-background text-foreground\") do\n              div(class: \"space-y-0\") do\n                Text(size: \"4\", weight: \"semibold\") { \"Account\" }\n                Text(size: \"2\", class: \"text-muted-foreground\") { \"Update your account details.\" }\n              end\n            end\n          end\n          TabsContent(value: \"password\") do\n            div(class: \"rounded-lg border p-6 space-y-4 bg-background text-foreground\") do\n              div do\n                Text(size: \"4\", weight: \"semibold\") { \"Password\" }\n                Text(size: \"2\", class: \"text-muted-foreground\") { \"Change your password here. After saving, you'll be logged out.\" }\n              end\n            end\n          end\n        end\n      RUBY\n    end\n\n    render Docs::VisualCodeExample.new(title: \"Disabled\", context: self) do\n      <<~RUBY\n        Tabs(default_value: \"account\", class: 'w-96') do\n          TabsList do\n            TabsTrigger(disabled: true, value: \"account\") { \"Account\" }\n            TabsTrigger(disabled: true, value: \"password\") { \"Password\" }\n          end\n        end\n      RUBY\n    end\n\n    render Docs::VisualCodeExample.new(title: \"Aria Disabled\", context: self) do\n      <<~RUBY\n        Tabs(default_value: \"account\", class: 'w-96') do\n          TabsList do\n            TabsTrigger(aria: {disabled: \"true\"}, value: \"account\") { \"Account\" }\n            TabsTrigger(aria: {disabled: \"true\"}, value: \"password\") { \"Password\" }\n          end\n        end\n      RUBY\n    end\n\n    render Docs::VisualCodeExample.new(title: \"Full width\", context: self) do\n      <<~RUBY\n        Tabs(default_value: \"overview\", class: 'w-96') do\n          TabsList(class: 'w-full grid grid-cols-2') do\n            TabsTrigger(value: \"overview\") do\n              book_icon\n              span(class: 'ml-2') { \"Overview\" }\n            end\n            TabsTrigger(value: \"repositories\") do\n              repo_icon\n              span(class: 'ml-2') { \"Repositories\" }\n            end\n          end\n          TabsContent(value: \"overview\") do\n            div(class: \"rounded-lg border p-6 bg-background text-foreground flex justify-between space-x-4\") do\n              Avatar do\n                AvatarImage(src: \"https://avatars.githubusercontent.com/u/246692?v=4\", alt: \"joeldrapper\")\n                AvatarFallback { \"JD\" }\n              end\n              div(class: \"space-y-4\") do\n                div do\n                  Text(size: \"4\", weight: \"semibold\") { \"Joel Drapper\" }\n                  Text(size: \"2\", class: \"text-muted-foreground\") { \"Creator of Phlex Components. Ruby on Rails developer.\" }\n                end\n                Link(href: \"https://github.com/joeldrapper\", variant: :outline, size: :sm) do\n                  github_icon\n                  span(class: 'ml-2') { \"View profile\" }\n                end\n              end\n            end\n          end\n          TabsContent(value: \"repositories\") do\n            div(class: \"rounded-lg border p-6 space-y-4 bg-background text-foreground\") do\n              repo = repositories.first\n              Link(href: repo.github_url, variant: :link, class: \"pl-0\") { repo.name }\n              Badge { repo.version }\n            end\n          end\n        end\n      RUBY\n    end\n\n    render Docs::VisualCodeExample.new(title: \"Change default value\", context: self) do\n      <<~RUBY\n        Tabs(default: \"password\", class: 'w-96') do\n          TabsList do\n            TabsTrigger(value: \"account\") { \"Account\" }\n            TabsTrigger(value: \"password\") { \"Password\" }\n          end\n          TabsContent(value: \"account\") do\n            div(class: \"rounded-lg border p-6 space-y-4 bg-background text-foreground\") do\n              div(class: \"space-y-0\") do\n                Text(size: \"4\", weight: \"semibold\") { \"Account\" }\n                Text(size: \"2\", class: \"text-muted-foreground\") { \"Update your account details.\" }\n              end\n            end\n          end\n          TabsContent(value: \"password\") do\n            div(class: \"rounded-lg border p-6 space-y-4 bg-background text-foreground\") do\n              div do\n                Text(size: \"4\", weight: \"semibold\") { \"Password\" }\n                Text(size: \"2\", class: \"text-muted-foreground\") { \"Change your password here. After saving, you'll be logged out.\" }\n              end\n            end\n          end\n        end\n      RUBY\n    end\n\n    render Components::ComponentSetup::Tabs.new(component_name: component)\n\n    render Docs::ComponentsTable.new(component_files(component))\n  end\nend\n"