Petal Components VSCode Snippets

A set of snippets for the Petal Components HEEX library.

Snippets

Snippet	Description
`container`	Creates a container.
`link`	Creates a link.
`link method`	Creates a link with method.
`button`	Creates a button.
`button link`	Creates a button that is a link.
`button all props`	Creates a button with all possible props.
`icon button`	Creates an icon button.
`icon button all props`	Creates an icon button with all possible props.
`h1`	Creates an h1 heading.
`h2`	Creates an h2 heading.
`h3`	Creates an h3 heading.
`h4`	Creates an h4 heading.
`h5`	Creates an h5 heading.
`p tag`	Creates a paragraph tag.
`h1 modified`	Creates a modified h1 heading.
`h1 fancy`	Creates a fancy h1 heading.
`heroicons solid`	Creates a solid Heroicon.
`heroicons outline`	Creates an outline Heroicon.
`badge`	Creates a badge.
`badge button all props`	Creates a badge with all possible props.
`badge with icon`	Creates a badge containing an icon.
`alert`	Creates an alert.
`alert dismissable`	Creates a dismissable alert with icon.
`text_input`	Form field - type text input.
`email_input`	Form field - type email input.
`number_input`	Form field - type number input.
`password_input`	Form field - type password input.
`search_input`	Form field - type search input.
`telephone_input`	Form field - type telephone input.
`url_input`	Form field - type url input.
`time_input`	Form field - type time input.
`time_select`	Form field - type time select.
`date_input`	Form field - type date input.
`date_select`	Form field - type date select.
`datetime_local_input`	Form field - type datetime local input.
`datetime_select`	Form field - type datetime select.
`color_input`	Form field - type color input.
`file_input`	Form field - type file input.
`range_input`	Form field - type range input.
`textarea`	Form field - type textarea.
`select`	Form field - type select.
`checkbox_group_col`	Form field - type checkbox group with col layout.
`checkbox_group_row`	Form field - type checkbox group with row layout.
`radio_group_col`	Form field - type radio group with col layout.
`radio_group_row`	Form field - type radio group with row layout.
`dropdown`	Dropdown with various menu item options.
`dropdown custom trigger`	Dropdown with custom trigger element.
`dropdown live view`	Dropdown that works with Live View.
`spinner`	Creates a spinner.
`breadcrumbs slash`	Creates breadcrumbs with slash.
`breadcrumbs chevron`	Creates breadcrumbs with chevron.
`breadcrumbs custom css`	Creates breadcrumbs with custom css.
`avatar`	Creates an avatar with image.
`avatar placeholder`	Creates an avatar with placeholder.
`avatar initials`	Creates an avatar with placeholder initials.
`avatar random color initials`	Creates an avatar with random color placeholder initials.
`avatar group`	Creates an avatar group with images.
`progress bar`	Creates a progress bar.
`pagination`	Creates pagination.
`pagination`	Creates pagination.
`pagination live view`	Pagination that works with Live View.
`tabs`	Creates tabs.
`tabs number`	Creates tabs with a number.
`tabs underline icon`	Creates underlined tabs with icons.
`card`	Creates a card.
`card media`	Creates a card with media.
`card footer`	Creates a card with footer.
`table`	Creates a table.
`table multi-lined avatar`	Creates a multi-lined table with avatar.
`modal live view`	Creates a modal that works with Live View.
`slide over`	Creates a Slide Over.

Contributing

We welcome contributions from the community. Please feel free to open an issue or pull request.

You can research snippet creation here.

In VScode: cmd-shift-p -> Preferences: Configure User Snippets -> "phoenix-heex.json".

You can use this extension to help convert large blocks of code to snippets.

Once you're happy with a snippet, clone this repo, add the snippet to `/snippets/heex.code-snippets" and do a PR.

Petal Components (HEEX) snippets

petalframework

Petal Components VSCode Snippets

Snippets

Contributing