The majority of components come from our open-source package "Petal Components". However, there are some only in Petal Pro. Ultimately, petal.build will house all docs related to components, and these guides will more tailored to Petal Pro core functionality.
Note that for this to work you also need to add this to your <head> . This is installed by default in Petal Pro.
# in your <head>:
<.color_scheme_switch_js />
Email helpers
A set of components for email templates. Kind of like Petal Components, but for emails.
Example usage:
<h1>Let's verify your account</h1>
<p>Touch the button below to verify your account</p>
<EmailComponents.button_centered to={@url}>
Verify account
</EmailComponents.button_centered>
<EmailComponents.small_text>
If you didn't create an account with us, please ignore this.
</EmailComponents.small_text>
If you want to add your own components, you can edit the following file:
/lib/petal_pro_web/components/email_components.ex
Then add your components:
defmodule PetalPro.Components.EmailComponents do
use Phoenix.Component
def my_new_component(assigns) do
~H"""
Your component HTML goes here
"""
end
end
Now it'll be available in your email templates!
<h1>Let's verify your account</h1>
<.my_new_component />
Landing page
A set of landing page related components. For example:
<LandingPage.features
title={gettext("Features")}
description={gettext("Here are some features you can use to get started with your web app.")}
features={
[
%{
title: "Authentication",
description: Faker.Lorem.sentence(10..20),
icon: :lightning_bolt
},
%{
title: "HTML Emails",
description: Faker.Lorem.sentence(10..20),
icon: :puzzle
},
%{
title: "Wallaby testing",
description: Faker.Lorem.sentence(10..20),
icon: :at_symbol
}
]
}
/>
A Petal Pro component. Displays the user's avatar and will show a dropdown menu upon being clicked. Used in the navbar. Displays a list of menu items (see the ).
