🧊Components
The majority of components comes from our open source package "Petal Components". However, there are some only in Petal Pro. There are two locations to find these:
Petal Framework Components
These are maintained by us and located in
/lib/_petal_framework/web/componentsIf you want to modify any of these, we recommend duplicating it into your apps component folder (
/lib/<your_app>_web/components) first. That way, if we release updated versions of Petal Pro, you can still just copy and paste the whole_petal_frameworkfolder into your project
Components for you to modify
These are components that you will likely modify
eg. brand related or landing page related
Found in
/lib/<your_app>_web/components
Layouts
See the layouts section.
Brand
See the Branding section.
Color scheme switch
<.color_scheme_switch />The switch to switch between light and dark mode. Pairs with color-scheme-switch.js, which will use cookies and local storage to set the theme.
Email helpers
A set of components for email templates. Kind of like Petal Components, but for emails.
<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>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
}
]
}
/>
Language select
A dropdown for setting your language.
<.language_select
current_locale={Gettext.get_locale(PetalProWeb.Gettext)}
language_options={PetalPro.config(:language_options)}
/>Notification
A flash notification component. Will appear down the bottom right of the screen and has a timer before disappearing (pairs with RemoveFlashHook).
Page components
A growing set of generic page components to help with building pages.
Box
<.box padded>
<%= live_component(PetalProWeb.OrgFormComponent, [...]) %>
</.box>Page header
Shows a heading and optional slot for buttons on the right hand side.
<.page_header title="Listing Discounts">
<.button
link_type="live_patch"
label="New Discount"
to={Routes.discount_index_path(@socket, :new)}
/>
</.page_header>Sidebar tabs container
A panel with a sidebar for a menu, and a slot for content on the right.
<.sidebar_tabs_container current_page={:edit_profile} menu_items={[
%{
name: :edit_profile,
label: gettext("Edit profile"),
path: Routes.live_path(Endpoint, PetalProWeb.EditProfileLive),
icon: :user_circle
},
...
]}>
<%= render_slot(@inner_block) %>
</.sidebar_tabs_container>User dropdown menu
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}
/>Markdown
Pretty markdown
Renders the markdown as HTML and uses the Tailwind Typography classes to prettify it.
<.pretty_markdown content={some_markdown} class="mx-auto" />Markdown
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"
/>Last updated
Was this helpful?