### Example Test Using Basic Render Helper
Source: https://github.com/yippee-fun/phlex.fun/blob/main/components/testing.md
An example demonstrating how to use the basic `render` helper to render a component and assert its HTML output.
```ruby
output = render Components::Hello.new
assert_equal "
Hello
", output
```
--------------------------------
### Component with Text Content
Source: https://github.com/yippee-fun/phlex.fun/blob/main/miscellaneous/under-the-hood.md
Example of a HelloWorld component that uses the div method to render text content.
```ruby
class HelloWorld < Component
def view_template
div {
div("Hello, World!")
}
end
end
```
--------------------------------
### Component with Attributes
Source: https://github.com/yippee-fun/phlex.fun/blob/main/miscellaneous/under-the-hood.md
Example of a HelloWorld component that uses the div method with class attributes.
```ruby
class HelloWorld < Component
def view_template
div(class: "outer") {
div("Hello, World!", class: "inner")
}
end
end
```
--------------------------------
### View Example with Layout Composition
Source: https://github.com/yippee-fun/phlex.fun/blob/main/rails/layouts.md
A Phlex view that renders a layout component, passing content via a block. This demonstrates layout composition in Phlex.
```ruby
class Views::Articles::Index < Views::Base
def initialize(articles:)
@articles = articles
end
def view_template
Layout(title: "Articles") do
h1 { "Articles" }
ul do
@articles.each do |article|
li { article.title }
end
end
end
end
end
```
--------------------------------
### Example Phlex View Generator
Source: https://github.com/yippee-fun/phlex.fun/blob/main/miscellaneous/v2-upgrade.md
Demonstrates the structure of a generated view class, namespaced under `Views` and inheriting from `Views::Base`.
```ruby
# frozen_string_literal: true
class Views::Articles::Index < Views::Base
def view_template
h1 { "Articles" }
end
end
```
--------------------------------
### Example Phlex Component Generator
Source: https://github.com/yippee-fun/phlex.fun/blob/main/miscellaneous/v2-upgrade.md
Illustrates a generated component class, namespaced under `Components` and inheriting from `Components::Base`.
```ruby
# frozen_string_literal: true
class Components::Button < Components::Base
def view_template
button { "Click me" }
end
end
```
--------------------------------
### Rendering Nav with Child Components
Source: https://github.com/yippee-fun/phlex.fun/blob/main/components/yielding.md
This example demonstrates rendering a navigation component using separate `NavItem` and `NavDivider` components. This approach offers more structure but can lead to defining components for elements that are only used within a specific parent.
```ruby
render Nav do
render NavItem.new("/") { strong { "Home" } }
render NavItem.new("/about") { "About" }
render NavDivider
render NavItem.new("/contact") { "Contact" }
end
```
--------------------------------
### Run Phlex Install Generator
Source: https://github.com/yippee-fun/phlex.fun/blob/main/introduction/getting-started.md
Execute the install generator to configure Phlex components in your Rails application.
```bash
bundle exec rails generate phlex:install
```
--------------------------------
### Controller Example
Source: https://github.com/yippee-fun/phlex.fun/blob/main/rails/layouts.md
A controller action that renders a Phlex view. Set `layout false` in `ApplicationController` to disable Rails' built-in layout system.
```ruby
class ArticlesController < ApplicationController
layout false
def index
render Views::Articles::Index.new(
articles: Article.all.limit(10)
)
end
end
```
--------------------------------
### Rendering a Component with Content
Source: https://github.com/yippee-fun/phlex.fun/blob/main/components/yielding.md
This example shows how to render the `Card` component and pass a content block to it. The content block will be rendered where `yield` is called within the `Card` component's `view_template`.
```ruby
render Card.new("Hello") do
p { "Hello, World" }
end
```
--------------------------------
### Render a Renderable Property in Phlex
Source: https://github.com/yippee-fun/phlex.fun/blob/main/components/rendering.md
This example shows how to create a Phlex component that accepts and renders another renderable object passed as a property. It demonstrates the core polymorphic behavior of the `render` method.
```ruby
class Example < Phlex::HTML
def initialize(renderable:)
@renderable = renderable
end
def view_template
render @renderable
end
end
```
--------------------------------
### Example Nested HTML Output
Source: https://github.com/yippee-fun/phlex.fun/blob/main/miscellaneous/under-the-hood.md
This is the expected HTML output when the `HelloWorld` component is rendered, demonstrating the nested structure of the `outer` div, `card` div, and `inner` div.
```html
Hello, World!
```
--------------------------------
### Define a Button Method in Phlex
Source: https://github.com/yippee-fun/phlex.fun/blob/main/compare/slim.md
This snippet shows how to define a simple button helper method within Phlex. It's a starting point for creating reusable UI elements.
```ruby
def MyButton(...)
button(class: "my button classes", ...)
end
```
--------------------------------
### Define Literal Properties for Initializers
Source: https://github.com/yippee-fun/phlex.fun/blob/main/sgml/helpers.md
Example of using Literal Properties to automatically escape reserved keywords in initializers.
```ruby
prop :class, String
prop :if, Proc
```
--------------------------------
### Implement Conditional Rendering with #render?
Source: https://github.com/yippee-fun/phlex.fun/blob/main/components/rendering.md
Use the #render? method to conditionally render a component. If #render? returns false, the component will not be rendered. This example shows a notification badge that only renders if there are notifications.
```ruby
class NotificationsBadge < Phlex::HTML
def initialize(notifications:)
@notifications = notifications
end
def view_template
span(class: "badge badge-primary") { @notifications.size }
end
def render?
@notifications.size > 0
end
end
NotificationsBadge.new(notifications: ["You are awesome!"]).call
# => "1"
NotificationsBadge.new(notifications: []).call
# => ""
```
--------------------------------
### Extracting Template Logic into a Method
Source: https://github.com/yippee-fun/phlex.fun/blob/main/components/snippets.md
This example demonstrates how to extract a section of a Phlex component's template into a private method. This improves readability and reduces nesting. Public methods can be called from parent components.
```ruby
class Sidebar < Phlex::HTML
def view_template
render_intro
render_links
render_footer
end
private
def render_intro
h2 "Welcome to the site!"
p "This is the sidebar."
end
def render_links
# ...
end
def render_footer
# ...
end
end
```
--------------------------------
### Accessing Site, Theme, and Page Data with useData()
Source: https://github.com/yippee-fun/phlex.fun/blob/main/api-examples.md
Import and use the `useData()` hook to access theme, page, and frontmatter data within a Vue component or script setup block in Markdown. This is useful for dynamically displaying content based on site configuration or page metadata.
```javascript
## Results
### Theme Data