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
      <<~RUBY
        Tabs(default_value: "account", class: 'w-96') do
          TabsList do
            TabsTrigger(value: "account") { "Account" }
            TabsTrigger(value: "password") { "Password" }
          end
          TabsContent(value: "account") do
            div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do
              div(class: "space-y-0") do
                Text(size: "4", weight: "semibold") { "Account" }
                Text(size: "2", class: "text-muted-foreground") { "Update your account details." }
              end
            end
          end
          TabsContent(value: "password") do
            div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do
              div do
                Text(size: "4", weight: "semibold") { "Password" }
                Text(size: "2", class: "text-muted-foreground") { "Change your password here. After saving, you'll be logged out." }
              end
            end
          end
        end
      RUBY
    end

    render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
      <<~RUBY
        Tabs(default_value: "account", class: 'w-96') do
          TabsList do
            TabsTrigger(disabled: true, value: "account") { "Account" }
            TabsTrigger(disabled: true, value: "password") { "Password" }
          end
        end
      RUBY
    end

    render Docs::VisualCodeExample.new(title: "Aria Disabled", context: self) do
      <<~RUBY
        Tabs(default_value: "account", class: 'w-96') do
          TabsList do
            TabsTrigger(aria: {disabled: "true"}, value: "account") { "Account" }
            TabsTrigger(aria: {disabled: "true"}, value: "password") { "Password" }
          end
        end
      RUBY
    end

    render Docs::VisualCodeExample.new(title: "Full width", context: self) do
      <<~RUBY
        Tabs(default_value: "overview", class: 'w-96') do
          TabsList(class: 'w-full grid grid-cols-2') do
            TabsTrigger(value: "overview") do
              book_icon
              span(class: 'ml-2') { "Overview" }
            end
            TabsTrigger(value: "repositories") do
              repo_icon
              span(class: 'ml-2') { "Repositories" }
            end
          end
          TabsContent(value: "overview") do
            div(class: "rounded-lg border p-6 bg-background text-foreground flex justify-between space-x-4") do
              Avatar do
                AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
                AvatarFallback { "JD" }
              end
              div(class: "space-y-4") do
                div do
                  Text(size: "4", weight: "semibold") { "Joel Drapper" }
                  Text(size: "2", class: "text-muted-foreground") { "Creator of Phlex Components. Ruby on Rails developer." }
                end
                Link(href: "https://github.com/joeldrapper", variant: :outline, size: :sm) do
                  github_icon
                  span(class: 'ml-2') { "View profile" }
                end
              end
            end
          end
          TabsContent(value: "repositories") do
            div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do
              repo = repositories.first
              Link(href: repo.github_url, variant: :link, class: "pl-0") { repo.name }
              Badge { repo.version }
            end
          end
        end
      RUBY
    end

    render Docs::VisualCodeExample.new(title: "Change default value", context: self) do
      <<~RUBY
        Tabs(default: "password", class: 'w-96') do
          TabsList do
            TabsTrigger(value: "account") { "Account" }
            TabsTrigger(value: "password") { "Password" }
          end
          TabsContent(value: "account") do
            div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do
              div(class: "space-y-0") do
                Text(size: "4", weight: "semibold") { "Account" }
                Text(size: "2", class: "text-muted-foreground") { "Update your account details." }
              end
            end
          end
          TabsContent(value: "password") do
            div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do
              div do
                Text(size: "4", weight: "semibold") { "Password" }
                Text(size: "2", class: "text-muted-foreground") { "Change your password here. After saving, you'll be logged out." }
              end
            end
          end
        end
      RUBY
    end

    render Components::ComponentSetup::Tabs.new(component_name: component)

    render Docs::ComponentsTable.new(component_files(component))
  end
end