Components
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.
Layouts
Docs are on petal.build.
Brand
See the Branding section.
Color scheme switch
<.color_scheme_switch />The switch to switch between light and dark mode.
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.exThen add your components:
defmodule PetalPro.Components.EmailComponents do
use Phoenix.Component
def my_new_component(assigns) do
~H"""
Your component HTML goes here
"""
end
endNow 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: "Background Jobs",
description: Faker.Lorem.sentence(10..20),
icon: :at_symbol
}
]
}
/>Language select
A dropdown for setting your language.
<.language_select
current_locale={Gettext.get_locale(PetalProWeb.Gettext)}
language_options={PetalPro.config(:language_options)}
/>This is a Petal Pro component. If you want to see how it’s coded or modify it to your own needs you can edit this file:
/lib/petal_pro_web/components/pro_components/language_select.exLanguage options are set in your config.exs:
config :petal_pro, :language_options, [
%{locale: "en", flag: "🇬🇧", label: "English"},
%{locale: "fr", flag: "🇫🇷", label: "French"}
]See translations for more info.
Notification
A flash notification component defined in Petal Pro. See docs. The flash notification includes an animated progress bar at the top that advances to the right — once it completes, the notification automatically dismisses.
This comes from flash_group/1 set in your layout:
To see the implementation:
Page components
A set of generic page components to help with building pages. To see a list of them:
Box
Page header
Shows a heading and optional slot for buttons on the right hand side.
Sidebar tabs container
A panel with a sidebar for a menu, and a slot for content on the right.
User dropdown menu
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 Menus section).
<.user_menu_dropdown
user_menu_items={@user_menu_items}
avatar_src={@avatar_src}
current_user_name={if @current_user, do: user_name(@current_user), else: nil}
/>To see the implementation:
/lib/petal_pro_web/components/pro_components/user_dropdown_menu.exMarkdown
Pretty markdown
Renders the markdown as HTML and uses the Tailwind Typography classes to prettify it.
<.pretty_markdown content={some_markdown} class="mx-auto" />To see the implementation:
/lib/petal_pro_web/components/pro_components/markdown.exMarkdown
Simple renders pure HTML from markdown.
<.markdown content={some_markdown} />Social Button
<.social_button
link_type="a"
to={Routes.user_ueberauth_path(@conn_or_socket, :request, "google")}
variant="outline"
logo="google"
class="w-full"
/>
<.social_button
link_type="a"
to={Routes.user_ueberauth_path(@conn_or_socket, :request, "github")}
variant="outline"
logo="github"
class="w-full"
/>This is a Petal Pro component. To see its implementation:
/lib/petal_pro_web/components/pro_components/social_button.ex