π§Components
The majority of components come from our open-source package "Petal Components". However, there are some only in Petal Pro. These have been put into a new private package called "Petal Framework". 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
Docs are on petal.build.
Brand
See the Branding section.
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.
Email helpers
A set of components for email templates. Kind of like Petal Components, but for emails.
Example usage:
To see them all run this from within your directory:
If you want to add your own components, you can create a new file:
Then add your components:
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.
Now it'll be available in your email templates!
Landing page
A set of landing page related components. For example:
Language select
A dropdown for setting your language.
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:
Language options are set in your config.exs:
See translations for more info.
Notification
A flash notification component defined in Petal Framework. See docs.
This comes from flash_group/1
set in your layout:
To see the implementation in VSCode:
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 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 Menus section).
To see the implementation in VSCode:
Markdown
Pretty markdown
Renders the markdown as HTML and uses the Tailwind Typography classes to prettify it.
To see the implementation in VSCode:
Markdown
Simple renders pure HTML from markdown.
Social Button
This is a Petal Framework component. To see its implementation in VSCode:
Last updated