LogoLogo
v1.6.1
v1.6.1
  • 🌸What is Petal Pro?
  • πŸ’‘Changelog
  • ⏫Upgrade guide
  • Guides
    • πŸš€Creating a web app from start to finish
  • πŸ‘©β€πŸ³Recipes
    • πŸ’How to apply a recipe with git cherry pick
    • #️⃣UUIDs
    • ✍️First/Last name
    • πŸ“¦NPM packages
    • πŸ—ΊοΈGoogle Maps
  • Fundamentals
    • πŸ’ΏInstallation
    • πŸ“‚Folder structure
    • πŸ—ƒοΈIncluded Pages
    • πŸ˜€Users & Authentication
    • 🏒Organizations & Multitenancy
    • 🧊Components
    • ⬛Dark mode
    • 🎨Branding
    • 🌱Seeding
    • πŸ“„Layouts & Menus
    • πŸ–ΌοΈImage uploads
    • πŸ‘₯Impersonation
    • πŸ› οΈBackground Tasks and Jobs
    • πŸ”§Util & Helpers
    • πŸ“§Emails
    • πŸͺJavascript Hooks
    • πŸ“šExtra Hex Libraries
    • πŸ—οΈGenerators
    • πŸ—£οΈTranslations
    • πŸ–οΈContributing
    • πŸ›«Deployment
    • πŸ›‘οΈTesting
Powered by GitBook
On this page
  • Layouts
  • Brand
  • Color scheme switch
  • Email helpers
  • Landing page
  • Language select
  • Notification
  • Page components
  • User dropdown menu
  • Markdown
  • Social Button

Was this helpful?

  1. Fundamentals

Components

PreviousOrganizations & MultitenancyNextDark mode

Last updated 1 year ago

Was this helpful?

The majority of components come from our open-source package "". However, there are some only in Petal Pro. These have been put into a new private package called . We are slowly adding the Petal Framework component docs to the petal.build website. Ultimately, petal.build will house all docs related to components, and these guides will more tailored to Petal Pro core functionality.

Layouts

are on petal.build.

Brand

See the .

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>

To see them all run this from within your directory:

code deps/petal_framework/lib/petal_framework/web/components/email_components.ex

If you want to add your own components, you can create a new file:

touch /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

Then in lib/petal_pro_web/views/email_view.ex you can either alias it or import it. Since it has the same name as the PetalFramework module, you can't alias it unless you change the name away from EmailComponents.

Importing makes it more easily callable, but it can be confusing if you don't know where the function came from. We'll leave that decision up to you.

defmodule PetalProWeb.EmailView do
  use PetalProWeb, :view
  alias PetalFramework.Components.EmailComponents
  
  # Import your components:
  import PetalPro.Components.EmailComponents
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
      }
    ]
  }
/>

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 Framework component. If you want to see how it's coded or copy it to modify it to your own needs you can run this command to see it in VSCode:

code deps/petal_framework/lib/petal_framework/web/components/language_select.ex

Language options are set in your config.exs:

config :petal_pro, :language_options, [
  %{locale: "en", flag: "πŸ‡¬πŸ‡§", label: "English"},
  %{locale: "fr", flag: "πŸ‡«πŸ‡·", label: "French"}
]

Notification

This comes from flash_group/1 set in your layout:

app.htm.heex
<.flash_group flash={@flash} />

To see the implementation in VSCode:

code deps/petal_framework/lib/petal_framework/web/components/flash.ex

Page components

A set of generic page components to help with building pages. To see a list of them:

code deps/petal_framework/lib/petal_framework/web/components/page_components.ex

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

<.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 in VSCode:

code deps/petal_framework/lib/petal_framework/web/components/user_dropdown_menu.ex

Markdown

Pretty markdown

<.pretty_markdown content={some_markdown} class="mx-auto" />

To see the implementation in VSCode:

code deps/petal_framework/lib/petal_framework/web/components/markdown.ex

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"
/>

This is a Petal Framework component. To see its implementation in VSCode:

code deps/petal_framework/lib/petal_framework/web/components/social_button.ex

See for more info.

A flash notification component defined in Petal Framework. See .

A Petal Framework 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 ).

Renders the markdown as HTML and uses the classes to prettify it.

🧊
translations
docs
Tailwind Typography
Petal Components
"Petal Framework"
Docs
Branding section
Menus section
The top dark bit is an animated bar that progresses to the right hand corner, then the box disappears