3.5.0
<%= pb_rails("avatar", props: {
name: "Terry Johnson",
size: "xs",
image_url: "https://randomuser.me/api/portraits/men/44.jpg",
status: "online"
}) %>
<br>
<%= pb_rails("avatar", props: {
name: "Terry Johnson",
size: "sm",
image_url: "https://randomuser.me/api/portraits/men/44.jpg",
status: "away"
}) %>
<br>
<%= pb_rails("avatar", props: {
name: "Terry Johnson",
size: "md",
image_url: "https://randomuser.me/api/portraits/men/44.jpg",
status: "offline"
}) %>
<br>
<%= pb_rails("avatar", props: {
name: "Terry Johnson",
size: "lg",
image_url: "https://randomuser.me/api/portraits/men/44.jpg",
status: "online"
}) %>
<br>
<%= pb_rails("avatar", props: {
name: "Terry Johnson",
size: "xl",
image_url: "https://randomuser.me/api/portraits/men/44.jpg",
status: "away"
}) %>
<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "xs" }) %>
<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "sm" }) %>
<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "md" }) %>
<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "lg" }) %>
<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "xl" }) %>
<%= pb_rails("avatar", props: {
name: "Terry Johnson",
size: "sm",
image_url: "https://randomuser.me/api/portraits/men/44.jpg"
}) %>
<br>
<%= pb_rails("avatar", props: {
name: "Terry Johnson",
size: "sm",
image_url: "https://randomuser.me/api/portraits/men/44.jpg",
status: "online"
}) %>
<br>
<%= pb_rails("avatar", props: {
name: "Terry Johnson",
size: "sm",
image_url: "https://randomuser.me/api/portraits/men/44.jpg",
status: "away"
}) %>
<br>
<%= pb_rails("avatar", props: {
name: "Terry Johnson",
size: "sm",
image_url: "https://randomuser.me/api/portraits/men/44.jpg",
status: "offline"
}) %>
<div>
<%= pb_rails("badge", props: {
text: "+1",
variant: "primary"
}) %>
<%= pb_rails("badge", props: {
text: "+4",
variant: "primary"
}) %>
<%= pb_rails("badge", props: {
text: "+1000",
variant: "primary"
}) %>
</div>
<div>
<%= pb_rails("badge", props: {
text: "+1",
variant: "primary",
rounded: true
}) %>
<%= pb_rails("badge", props: {
text: "+4",
variant: "primary",
rounded: true
}) %>
<%= pb_rails("badge", props: {
text: "+1000",
variant: "primary",
rounded: true
}) %>
</div>
<div>
<%= pb_rails("badge", props: {
text: "+1",
variant: "primary",
rounded: true
}) %>
<%= pb_rails("badge", props: {
text: "+4",
variant: "primary"
}) %>
<%= pb_rails("badge", props: {
text: "+1000",
variant: "primary",
}) %>
</div>
<div>
<%= pb_rails("badge", props: {
text: "+1",
variant: "success",
rounded: true
}) %>
<%= pb_rails("badge", props: {
text: "+4",
variant: "success"
}) %>
<%= pb_rails("badge", props: {
text: "+1000",
variant: "success"
}) %>
</div>
<div>
<%= pb_rails("badge", props: {
text: "+1",
variant: "warning",
rounded: true
}) %>
<%= pb_rails("badge", props: {
text: "+4",
variant: "warning"
}) %>
<%= pb_rails("badge", props: {
text: "+1000",
variant: "warning"
}) %>
</div>
<div>
<%= pb_rails("badge", props: {
text: "+1",
variant: "error",
rounded: true
}) %>
<%= pb_rails("badge", props: {
text: "+4",
variant: "error"
}) %>
<%= pb_rails("badge", props: {
text: "+1000",
variant: "error"
}) %>
</div>
<div>
<%= pb_rails("badge", props: {
text: "+1",
variant: "info",
rounded: true
}) %>
<%= pb_rails("badge", props: {
text: "+4",
variant: "info"
}) %>
<%= pb_rails("badge", props: {
text: "+1000",
variant: "info"
}) %>
</div>
<div>
<%= pb_rails("badge", props: {
text: "+1",
rounded: true
}) %>
<%= pb_rails("badge", props: {
text: "+4",
variant: "neutral"
}) %>
<%= pb_rails("badge", props: {
text: "+1000",
variant: "neutral"
}) %>
</div>
<div>
<%= pb_rails("badge", props: {
text: "+1",
variant: "primary",
rounded: true,
dark: true
}) %>
<%= pb_rails("badge", props: {
text: "+4",
variant: "primary",
dark: true
}) %>
<%= pb_rails("badge", props: {
text: "+1000",
variant: "primary",
dark: true
}) %>
</div>
<div>
<%= pb_rails("badge", props: {
text: "+1",
variant: "success",
rounded: true,
dark: true
}) %>
<%= pb_rails("badge", props: {
text: "+4",
variant: "success",
dark: true
}) %>
<%= pb_rails("badge", props: {
text: "+1000",
variant: "success",
dark: true
}) %>
</div>
<div>
<%= pb_rails("badge", props: {
text: "+1",
variant: "warning",
rounded: true,
dark: true
}) %>
<%= pb_rails("badge", props: {
text: "+4",
variant: "warning",
dark: true
}) %>
<%= pb_rails("badge", props: {
text: "+1000",
variant: "warning",
dark: true
}) %>
</div>
<div>
<%= pb_rails("badge", props: {
text: "+1",
variant: "error",
rounded: true,
dark: true
}) %>
<%= pb_rails("badge", props: {
text: "+4",
variant: "error",
dark: true
}) %>
<%= pb_rails("badge", props: {
text: "+1000",
variant: "error",
dark: true
}) %>
</div>
<div>
<%= pb_rails("badge", props: {
text: "+1",
variant: "info",
rounded: true,
dark: true
}) %>
<%= pb_rails("badge", props: {
text: "+4",
variant: "info",
dark: true
}) %>
<%= pb_rails("badge", props: {
text: "+1000",
variant: "info",
dark: true
}) %>
</div>
<div>
<%= pb_rails("badge", props: {
text: "+1",
rounded: true,
dark: true
}) %>
<%= pb_rails("badge", props: {
text: "+4",
variant: "neutral",
dark: true
}) %>
<%= pb_rails("badge", props: {
text: "+1000",
variant: "neutral",
dark: true
}) %>
</div>
<% data = [{
name: 'Installation',
data: [154175]
}, {
name: 'Manufacturing',
data: [40434]
}, {
name: 'Sales & Distribution',
data: [39387]
}, {
name: 'Project Development',
data: [34227]
}, {
name: 'Other',
data: [18111]
}] %>
<%= pb_rails("bar_graph", props: {
axis_title: 'Number of Employees',
chart_data: data,
id: "bar-test",
point_start: 2012,
subtitle: 'Source: thesolarfoundation.com',
title: 'Solar Employment Growth by Sector, 2010-2016'
}) %>
<%= pb_rails("body", props: {
text: "I am a body kit"
}) %>
<%= pb_rails("body", props: {
text: "I am a body kit (Light)",
color: "light"
}) %>
<%= pb_rails("body", props: {
text: "I am a body kit (Lighter)",
color: "lighter"
}) %>
<%= pb_rails("body", props: {
text: "I am a body kit (Status: negative)",
status: "negative"
}) %>
<%= pb_rails("body", props: {
text: "I am a body kit (Status: positive)",
status: "positive"
}) %>
<%= pb_rails("body", props: {
text: "I am a body kit",
dark: true
}) %>
<%= pb_rails("body", props: {
text: "I am a body kit (Light)",
color: "light",
dark: true
}) %>
<%= pb_rails("body", props: {
text: "I am a body kit (Lighter)",
color: "lighter",
dark: true
}) %>
<%= pb_rails("body", props: {
text: "I am a body kit (Status: negative)",
status: "negative",
dark: true
}) %>
<%= pb_rails("body", props: {
text: "I am a body kit (Status: positive)",
status: "positive",
dark: true
}) %>
<%= pb_rails("button", props: { text: "Button Primary" }) %>
<%= pb_rails("button", props: { text: "Button Secondary", variant: "secondary" }) %>
<%= pb_rails("button", props: { text: "Button Link", variant: "link" }) %>
<%= pb_rails("button", props: { text: "Button Disabled", disabled: true }) %>
<%= pb_rails("button", props: {
text: "Button Primary",
dark: true
}) %>
<%= pb_rails("button", props: {
text: "Button Secondary",
variant: "secondary",
dark: true
}) %>
<%= pb_rails("button", props: {
text: "Button Link",
variant: "link",
dark: true
}) %>
<%= pb_rails("button", props: {
text: "Button Disabled",
disabled: true,
dark: true
}) %>
<%= pb_rails("button", props: { text: "Button Full Width", full_width: true }) %>
<%= pb_rails("button", props: { text: "A Tag Button", tag: "a", link: "http://google.com" }) %>
<%= pb_rails("button", props: { text: "Open in new Window", new_window: true, link: "http://google.com" }) %>
<%= pb_rails("button", props: { text: "A Tag Button Disabled", disabled: true, link: "http://google.com" }) %>
<%= pb_rails("button", props: { text: "Button Primary", loading: true }) %>
<%= pb_rails("button", props: { text: "Button Primary", variant: "secondary", loading: true }) %>
<%= pb_rails("button", props: { text: "Button Primary", variant: "link", loading: true }) %>
<%= pb_rails("button") do %>
<%= pb_rails("icon", props: { icon: "users", fixed_width: true }) %>
<span>Button with Block Content</span>
<% end %>
<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "button"}, tag: "a", link: "http://google.com" }) %>
<%= pb_rails("button", props: { text: "Button with options", value: "1234", type: "submit" }) %>
<%= pb_rails("caption", props: { text: "Caption" }) %>
<%= pb_rails("caption", props: { text: "Caption Large", size: 'lg' }) %>
<%= pb_rails("caption", props: { text: "Subcaption", size: 'xs' }) %>
<%= pb_rails("caption", props: { text: "Caption", dark: true }) %>
<%= pb_rails("caption", props: { text: "Caption Large", size: 'lg', dark: true }) %>
<%= pb_rails("caption", props: { text: "Subcaption", size: 'xs', dark: true }) %>
<%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
Card content
<% end %>
<br>
<%= pb_rails("card", props: {highlight: {position: "top", color:"warning"}}) do %>
Card content
<% end %>
<%= pb_rails("card") do %>
Card content
<% end %>
<br>
<%= pb_rails("card", props: {selected: true}) do %>
Card content
<% end %>
<%= pb_rails("card", props: {padding: "none"}) do %>
Card content
<% end %>
<br>
<%= pb_rails("card", props: {padding: "xs"}) do %>
Card content
<% end %>
<br>
<%= pb_rails("card", props: {padding: "md"}) do %>
Card content
<% end %>
<br>
<%= pb_rails("card", props: {padding: "lg"}) do %>
Card content
<% end %>
<br>
<%= pb_rails("card", props: {padding: "xl"}) do %>
Card content
<% end %>
<%= pb_rails("card", props: {shadow: "none"}) do %>
Card content
<% end %>
<br>
<%= pb_rails("card", props: {shadow: "deep"}) do %>
Card content
<% end %>
<br>
<%= pb_rails("card", props: {shadow: "deeper"}) do %>
Card content
<% end %>
<br>
<%= pb_rails("card", props: {shadow: "deepest"}) do %>
Card content
<% end %>
<%= pb_rails("card") do %>
Card content
<% end %>
<br>
<%= pb_rails("card") do %>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at.
<br><br>
Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.
<% end %>
<%= pb_rails("card", props: { padding: "none" }) do %>
<%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
Header
<% end %>
<%= pb_rails("section_separator") %>
<%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at.
Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.
<% end %>
<%= pb_rails("section_separator") %>
<%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
Footer
<% end %>
<% end %>
<%= pb_rails("checkbox" , props: {
text: "Checkbox Label",
value: "checkbox-value",
name: "checkbox-name"
}) %>
<%= pb_rails("checkbox" , props: {
text: "Checked Checkbox",
value: "checkbox-value",
checked: true,
name: "checkbox-name"
}) %>
<%= pb_rails("checkbox", props: {text: "Custom Checkbox"}) do%>
<input type="checkbox" name="custom-name" value="custom-value"/>
<% end %>
<%= pb_rails("checkbox" , props: {
error: true,
text: "Checkbox Label",
value: "checkbox-value",
name: "checkbox-name"
}) %>
<%= pb_rails("checkbox" , props: {
dark: true,
error: true,
text: "Checkbox Label",
value: "checkbox-value",
name: "checkbox-name"
}) %>
<%= pb_rails("circle_icon_button", props: {
variant: "primary",
icon: "plus"
}) %>
<br/>
<%= pb_rails("circle_icon_button", props: {
variant: "secondary",
icon: "pen"
}) %>
<br/>
<%= pb_rails("circle_icon_button", props: {
disabled: true,
icon: "times"
}) %>
<br/>
<%= pb_rails("circle_icon_button", props: {
variant: "link",
icon: "user"
}) %><%= pb_rails("circle_icon_button", props: {
variant: "primary",
icon: "plus",
dark: true
}) %>
<br/>
<%= pb_rails("circle_icon_button", props: {
variant: "secondary",
icon: "pen",
dark: true
}) %>
<br/>
<%= pb_rails("circle_icon_button", props: {
disabled: true,
icon: "times",
dark: true
}) %>
<br/>
<%= pb_rails("circle_icon_button", props: {
variant: "link",
icon: "user",
dark: true
}) %><%= pb_rails("contact", props: {
contact_type: "cell",
contact_value: "349-185-9988",
}) %>
<%= pb_rails("contact", props: {
contact_value: 5555555555,
}) %>
<%= pb_rails("contact", props: {
contact_type: "email",
contact_value: "email@example.com"
}) %>
<%= pb_rails("contact", props: {
contact_type: "wrong number",
contact_value: "3245627482",
}) %>
<%= pb_rails("contact", props: {
contact_type: "cell",
contact_value: "349-185-9988",
contact_detail: "Cell",
}) %>
<%= pb_rails("contact", props: {
contact_value: 5555555555,
contact_detail: "Home",
}) %>
<%= pb_rails("contact", props: {
contact_type: "work",
contact_value: "3245627482",
contact_detail: "Work",
}) %>
<%= pb_rails("currency", props: {
dollar_sign: "$",
label: "Caption",
value: "2,000.",
unit: "00",
size: "sm"
}) %>
<%= pb_rails("currency", props: {
align: "center",
dollar_sign: "$",
label: "Caption",
value: "2,000.",
unit: "00",
size: "sm"
}) %>
<%= pb_rails("currency", props: {
align: "right",
dollar_sign: "$",
label: "Caption",
value: "2,000.",
unit: "00",
size: "sm"
}) %>
<%= pb_rails("currency", props: {
dollar_sign: "$",
label: "Caption",
value: "2,000.",
unit: "00",
size: "lg"
}) %>
<%= pb_rails("currency", props: {
align: "center",
dollar_sign: "$",
label: "Caption",
value: "2,000.",
unit: "00",
size: "lg"
}) %>
<%= pb_rails("currency", props: {
align: "right",
dollar_sign: "$",
label: "Caption",
value: "2,000.",
unit: "00",
size: "lg"
}) %>
<%= pb_rails("dashboard_value", props: {
stat_label: "Decreased Value",
stat_value: {value: 1428, unit: "appts"},
stat_change: {change: "decrease", value: 26.1}
}) %>
<br><br>
<%= pb_rails("dashboard_value", props: {
stat_label: "Increased Value",
stat_value: {value: 938, unit: "homes"},
stat_change: {change: "increase", value: 56.1}
}) %>
<br><br>
<%= pb_rails("dashboard_value", props: {
stat_label: "Neutral Value",
stat_value: {value: 261, unit: "windows"},
stat_change: {value: 86}
}) %>
<%= pb_rails("dashboard_value", props: {
stat_label: "Top Title Value",
stat_value: {value: 1428, unit: "appts"},
stat_change: {change: "decrease", value: 26.1}
}) %>
<br><br>
<%= pb_rails("dashboard_value", props: {
align: "center",
stat_label: "Top Title Value",
stat_value: {value: 1428, unit: "appts"},
stat_change: {change: "decrease", value: 56 }
}) %>
<br><br>
<%= pb_rails("dashboard_value", props: {
align: "right",
stat_label: "Top Title Value",
stat_value: {value: 1428, unit: "appts"},
stat_change: {change: "decrease", value: 86.1 }
}) %>
<%= pb_rails("date", props: {
date: Date.today,
size: "lg"
}) %>
<br>
<%= pb_rails("date", props: {
date: DateTime.now
}) %>
<br>
<%= pb_rails("date", props: {
date: "2012-08-02T15:49:29Z",
size: "xs"
}) %>
<%= pb_rails("date_range_inline", props: { start_date: Date.new(2019, 06, 18), end_date: Date.new(2020, 03, 20) }) %>
<%= pb_rails("date_stacked", props: { date: DateTime.now}) %>
<br>
<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md"}) %>
<%= pb_rails("date_stacked", props: { date: Date.new(2018, 03, 20) }) %>
<br>
<%= pb_rails("date_stacked", props: { date: Date.new(2018, 03, 20), size: "md"}) %>
<%= pb_rails("date_stacked", props: { date: DateTime.now, reverse: true}) %>
<br>
<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md", reverse: true}) %>
<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "sm" }) %>
<br>
<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md" }) %>
<%= pb_rails("date_stacked", props: { date: DateTime.now }) %>
<br>
<%= pb_rails("date_stacked", props: { date: DateTime.now, align: "center" }) %>
<br>
<%= pb_rails("date_stacked", props: { date: DateTime.now, align: "right" }) %>
<br>
<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md"}) %>
<br>
<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md", align: "center" }) %>
<br>
<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md", align: "right" }) %>
<%= pb_rails("date_stacked", props: { date: DateTime.now, dark: true }) %>
<br>
<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md", dark: true }) %>
<%= pb_rails "date_year_stacked", props: { date: Date.today } %>
<br><br>
<%= pb_rails "date_year_stacked", props: { date: Date.today, align: 'center'} %>
<br><br>
<%= pb_rails "date_year_stacked", props: { date: Date.today, align: 'right'} %>
<%= pb_rails "date_year_stacked", props: { date: Date.today, dark: true } %>
<br><br>
<%= pb_rails "date_year_stacked", props: { date: Date.today, align: 'center', dark: true } %>
<br><br>
<%= pb_rails "date_year_stacked", props: { date: Date.today, align: 'right', dark: true } %>
<%= pb_rails("distribution_bar", props: {
widths: [1,2,3,4,5,3,3,7]
}) %>
<br><br>
<%= pb_rails("distribution_bar", props: {
widths: [1,2,3,4,5,3,3,7],
size: "sm"
}) %>
<%= pb_rails("fixed_confirmation_toast", props: {
text: "Error Message",
status: "error"
})%>
<br><br>
<%= pb_rails("fixed_confirmation_toast", props: {
text: "Items Successfully Moved",
status: "success"
})%>
<br><br>
<%= pb_rails("fixed_confirmation_toast", props: {
text: "Scan to Assign Selected Items",
status: "neutral"
})%>
<%= pb_rails("fixed_confirmation_toast", props: {
text: "Scan to Assign Selected Items.\nClick X to close at any time",
status: "tip",
}) %><%
example_collection = [
OpenStruct.new(name: "Alabama", value: 1),
OpenStruct.new(name: "Alaska", value: 2),
OpenStruct.new(name: "Arizona", value: 3),
OpenStruct.new(name: "Arkansas", value: 4),
OpenStruct.new(name: "California", value: 5),
OpenStruct.new(name: "Colorado", value: 6),
OpenStruct.new(name: "Connecticut", value: 7),
OpenStruct.new(name: "Delaware", value: 8),
OpenStruct.new(name: "Florida", value: 9),
OpenStruct.new(name: "Georgia", value: 10),
]
%>
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
<%= form.text_field :example_text_field, props: { error: "Please enter the first name", label: true } %>
<%= form.telephone_field :example_phone_field, props: { label: true } %>
<%= form.email_field :example_email_field, props: { label: true } %>
<%= form.number_field :example_number_field, props: { label: true } %>
<%= form.search_field :example_search_field, props: { label: true } %>
<%= form.password_field :example_password_field, props: { label: true } %>
<%= form.url_field :example_url_field, props: { label: true } %>
<%= form.text_area :example_text_area, props: { label: true } %>
<%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
<%= form.actions do |action| %>
<%= action.submit %>
<%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
<% end %>
<% end %>
<%
require "simple_form" unless defined?(SimpleForm)
require "active_model/railtie" unless defined?(ActiveModel)
example_form_model = Class.new do
include ::ActiveModel::Model
attr_accessor :example_text_field,
:example_phone_field,
:example_email_field,
:example_number_field,
:example_search_field,
:example_password_field,
:example_url_field,
:example_text_area,
:example_select_field,
:example_collection_select_field
def self.model_name
ActiveModel::Name.new(self, nil, "ExampleFormModel")
end
end
%>
<%
example_collection = [
OpenStruct.new(name: "Alabama", value: 1),
OpenStruct.new(name: "Alaska", value: 2),
OpenStruct.new(name: "Arizona", value: 3),
OpenStruct.new(name: "Arkansas", value: 4),
OpenStruct.new(name: "California", value: 5),
OpenStruct.new(name: "Colorado", value: 6),
OpenStruct.new(name: "Connecticut", value: 7),
OpenStruct.new(name: "Delaware", value: 8),
OpenStruct.new(name: "Florida", value: 9),
OpenStruct.new(name: "Georgia", value: 10),
]
%>
<%= pb_rails("form", props: { form_system: "simple_form", form_system_options: [example_form_model.new, url: "", method: :get] }) do |form| %>
<%= form.input :example_text_field, {as: :string, input_html: {props: {error: "Please enter a valid first name"}}} %>
<%= form.input :example_phone_field, as: :tel %>
<%= form.input :example_email_field, as: :email %>
<%= form.input :example_number_field, as: :integer %>
<%= form.input :example_search_field, as: :search %>
<%= form.input :example_password_field, as: :password %>
<%= form.input :example_url_field, as: :url %>
<%= form.input :example_text_area, as: :text %>
<%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { label: true } %>
<%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { label: true } %>
<%= form.actions do |action| %>
<%= action.submit %>
<%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
<% end %>
<% end %>
<%= pb_rails("hashtag", props: {text: "470297", url: "https://google.com", type: "project"}) %>
<br/><br/>
<%= pb_rails("hashtag", props: {text: "123456", url: "https://google.com", type: "home"}) %>
<br/><br/>
<%= pb_rails("hashtag", props: {text: "123456", url: "https://google.com", type: "default"}) %>
<%= pb_rails("hashtag", props: {text: "470297", url: "https://google.com", type: "project", dark: true}) %>
<br/><br/>
<%= pb_rails("hashtag", props: {text: "123456", url: "https://google.com", type: "home", dark: true}) %>
<br/><br/>
<%= pb_rails("hashtag", props: {text: "123456", url: "https://google.com", type: "default", dark: true}) %>
<%= pb_rails("home_address_street", props: {
address: "70 Prospect Ave",
address_cont: "Apt M18",
city: "West Chester",
home_id: 8250263,
home_url: "https://powerhrg.com/",
house_style: "Colonial",
state: "PA",
zipcode: "19382",
territory: "PHL",
}) %>
<%= pb_rails("home_address_street", props: {
address: "70 Prospect Ave",
city: "West Chester",
state: "PA",
zipcode: "19382",
territory: "PHL",
}) %>
<%= pb_rails("home_address_street", props: {
address: "70 Prospect Ave",
address_cont: "Apt M18",
city: "West Chester",
home_id: 8250263,
home_url: "https://powerhrg.com/",
house_style: "Colonial",
state: "PA",
zipcode: "19382",
territory: "PHL",
dark: true,
}) %>
<%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 90, size: "2x" }) %>
<%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 180, size: "2x" }) %>
<%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 270, size: "2x" }) %>
<%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "horizontal", size: "2x" }) %>
<%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "vertical", size: "2x" }) %>
<%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "both", size: "2x" }) %>
Spin
Pulse
<p><%= pb_rails("icon", props: { icon: "spinner", spin: true, fixed_width: true, size: "2x" }) %> <span>Spin</span></p>
<br/>
<p><%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, size: "2x" }) %> <span>Pulse</span></p>
<%= pb_rails("icon", props: { icon: "arrow-left", pull: "left", fixed_width: true, size: "2x" }) %>
<%= pb_rails("icon", props: { icon: "arrow-right", pull: "right", fixed_width: true, size: "2x" }) %>
<%= pb_rails("icon", props: { icon: "user", border: true, fixed_width: true, size: "2x" }) %>
Large
Small
XSmall
1x
2x
3x
4x
5x
6x
7x
8x
9x
10x
<p><%= pb_rails("icon", props: { icon: "user", size: "lg" }) %> <span>Large</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "sm" }) %> <span>Small</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "xs" }) %> <span>XSmall</span></p>
<br/><br/>
<p><%= pb_rails("icon", props: { icon: "user", size: "1x" }) %> <span>1x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "2x" }) %> <span>2x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "3x" }) %> <span>3x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "4x" }) %> <span>4x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "5x" }) %> <span>5x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "6x" }) %> <span>6x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "7x" }) %> <span>7x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "8x" }) %> <span>8x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "9x" }) %> <span>9x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "10x" }) %> <span>10x</span></p>
<%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>
<%= pb_rails("icon_circle", props: {
icon: "comment",
size: "xs"
}) %>
<%= pb_rails("icon_circle", props: {
icon: "comment",
size: "sm"
}) %>
<%= pb_rails("icon_circle", props: {
icon: "comment",
size: "md"
}) %>
<%= pb_rails("icon_circle", props: {
icon: "comment",
size: "lg"
}) %>
<%= pb_rails("icon_circle", props: {
icon: "comment",
size: "xl"
}) %>
<%= pb_rails("icon_circle", props: {
icon: "comment",
variant: "royal",
size: "sm"
}) %>
<%= pb_rails("icon_circle", props: {
icon: "archive",
variant: "blue",
size: "sm"
}) %>
<%= pb_rails("icon_circle", props: {
icon: "arrow-alt-right",
variant: "purple",
size: "sm"
}) %>
<%= pb_rails("icon_circle", props: {
icon: "cloud",
variant: "teal",
size: "sm"
}) %>
<%= pb_rails("icon_circle", props: {
icon: "award",
variant: "red",
size: "sm"
}) %>
<%= pb_rails("icon_circle", props: {
icon: "bolt",
variant: "yellow",
size: "sm"
}) %>
<%= pb_rails("icon_circle", props: {
icon: "calendar",
variant: "green",
size: "sm"
}) %>
<%= pb_rails("icon_value", props: {
icon: "heart",
text: "93"
}) %>
<br>
<%= pb_rails("icon_value", props: {
icon: "comment",
text: "5"
}) %>
<br>
<%= pb_rails("icon_value", props: {
icon: "clock",
text: "15m"
}) %>
<%= pb_rails("icon_value", props: {
icon: "heart",
text: "93"
}) %>
<br>
<%= pb_rails("icon_value", props: {
icon: "comment",
text: "5",
align: "center"
}) %>
<br>
<%= pb_rails("icon_value", props: {
icon: "clock",
text: "15m",
align: "right"
}) %>
<%= pb_rails("image", props: { url: "https://unsplash.it/500/400/?image=634" }) %>
<%= pb_rails("label_pill", props: {
label: "Service Needed",
pill_value: "76",
}) %>
<%= pb_rails("label_pill", props: {
label: "Waiting",
pill_value: "69",
variant: "success"
}) %>
<%= pb_rails("label_pill", props: {
label: "In Service",
pill_value: "28",
variant: "error"
}) %>
<%= pb_rails("label_pill", props: {
label: "Fully Serviced",
pill_value: "101",
variant: "warning"
}) %>
<%= pb_rails("label_pill", props: {
label: "Inbox",
pill_value: "197",
variant: "info"
}) %>
<%= pb_rails("label_pill", props: {
label: "Outbox",
pill_value: "13",
variant: "neutral"
}) %>
<%= pb_rails("label_pill", props: {
label: "Inbox",
pill_value: "218",
variant: "primary"
}) %>
<%= pb_rails("label_value", props: {
label: "Role",
value: "Administrator, Moderator"
}) %>
<br>
<%= pb_rails("label_value", props: {
label: "Email",
value: "anna.black@powerhrg.com"
}) %>
<br>
<%= pb_rails("label_value", props: {
label: "Bio",
value: "Proin pulvinar feugiat massa in luctus. Donec urna nulla,
elementum sit amet tincidunt nec, mattis nec urna. Cras viverra
lorem odio, id pretium dui interdum ut. Nullam dignissim nisl vitae
orci vehicula condimentum."
}) %>
<%= pb_rails("layout", props: {position: "left", size: "sm", collapse: "md"}) do %>
<%= pb_rails("layout/sidebar") do %>
<%= pb_rails("body", props: { text: "Light" }) %>
<% end %>
<%= pb_rails("layout/body") do %> Body <% end %>
<% end %>
<br/><br/>
<%= pb_rails("layout", props: {position: "left", size: "sm", collapse: "md", variant: "dark"}) do %>
<%= pb_rails("layout/sidebar") do %>
<%= pb_rails("body", props: { text: "Dark", dark: true }) %>
<% end %>
<%= pb_rails("layout/body") do %> Body <% end %>
<% end %>
<br/><br/>
<%= pb_rails("layout", props: {position: "left", size: "sm", collapse: "md", variant: "gradient"}) do %>
<%= pb_rails("layout/sidebar") do %>
<%= pb_rails("body", props: { text: "Gradient", dark: true }) %>
<% end %>
<%= pb_rails("layout/body") do %> Body <% end %>
<% end %>
<%= pb_rails("layout", props: {position: "left", size: "xs", collapse: "sm", transparent: true}) do %>
<%= pb_rails("layout/sidebar") do %>
<%= pb_rails("body", props: { text: "Side" }) %>
<% end %>
<%= pb_rails("layout/body") do %>
<%= pb_rails("body", props: { text: "Body" }) %>
<% end %>
<% end %>
<%= pb_rails("layout", props: {position: "left", size: "xs", collapse: "xs"}) do %>
<%= pb_rails("layout/sidebar") do %> Side <% end %>
<%= pb_rails("layout/body") do %> Body <% end %>
<% end %>
<br/><br/>
<%= pb_rails("layout", props: {position: "left", size: "sm", collapse: "sm"}) do %>
<%= pb_rails("layout/sidebar") do %> Side <% end %>
<%= pb_rails("layout/body") do %> Body <% end %>
<% end %>
<br/><br/>
<%= pb_rails("layout", props: {position: "left", size: "md", collapse: "sm"}) do %>
<%= pb_rails("layout/sidebar") do %> Side <% end %>
<%= pb_rails("layout/body") do %> Body <% end %>
<% end %>
<br/><br/>
<%= pb_rails("layout", props: {position: "left", size: "lg", collapse: "sm"}) do %>
<%= pb_rails("layout/sidebar") do %> Side <% end %>
<%= pb_rails("layout/body") do %> Body <% end %>
<% end %>
<br/><br/>
<%= pb_rails("layout", props: {position: "left", size: "xl", collapse: "sm"}) do %>
<%= pb_rails("layout/sidebar") do %> Side <% end %>
<%= pb_rails("layout/body") do %> Body <% end %>
<% end %>
<%= pb_rails("layout", props: {position: "left", size: "xs", collapse: "xs", variant: "dark"}) do %>
<%= pb_rails("layout/sidebar") do %> Side <% end %>
<%= pb_rails("layout/body") do %> Body <% end %>
<% end %>
<br/><br/>
<%= pb_rails("layout", props: {position: "left", size: "sm", collapse: "sm", variant: "dark"}) do %>
<%= pb_rails("layout/sidebar") do %> Side <% end %>
<%= pb_rails("layout/body") do %> Body <% end %>
<% end %>
<br/><br/>
<%= pb_rails("layout", props: {position: "left", size: "md", collapse: "sm", variant: "dark"}) do %>
<%= pb_rails("layout/sidebar") do %> Side <% end %>
<%= pb_rails("layout/body") do %> Body <% end %>
<% end %>
<br/><br/>
<%= pb_rails("layout", props: {position: "left", size: "lg", collapse: "sm", variant: "dark"}) do %>
<%= pb_rails("layout/sidebar") do %> Side <% end %>
<%= pb_rails("layout/body") do %> Body <% end %>
<% end %>
<br/><br/>
<%= pb_rails("layout", props: {position: "left", size: "xl", collapse: "sm", variant: "dark"}) do %>
<%= pb_rails("layout/sidebar") do %> Side <% end %>
<%= pb_rails("layout/body") do %> Body <% end %>
<% end %>
<% labels = %W[Windows Doors Roofing Siding Solar Gutters Insulation Other] %>
<% (1..7).each do |n, i| %>
<%= pb_rails("legend", props: { color: "data_#{n}", text: "#{labels[n]}" }) %>
<% end %>
<%= pb_rails("legend", props: { color: "data_3", prefix_text: "10", text: "Windows" }) %>
<% labels = %W[Windows Doors Roofing Siding Solar Gutters Insulation Other] %>
<% (1..7).each do |n| %>
<%= pb_rails("legend", props: { color: "data_#{n}", dark: true, text: "#{labels[n]}" }) %>
<% end %>
<%= pb_rails("legend", props: { dark: true, color: "data_3", prefix_text: "10", text: "Windows" }) %><% data = [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [nil, nil, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}] %>
<%= pb_rails("line_graph", props: { id: "line-test", gradient: false, chart_data: data, point_start: 1, title: 'Solar Employment Growth by Sector, 2010-2016', subtitle: 'Source: thesolarfoundation.com', axis_title: 'Number of Employees' } ) %>
<%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<% end %>
<%= pb_rails("list", props: {ordered: false, dark: false, borderless: false, size: "large"}) do %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<% end %>
<%= pb_rails("list", props: {ordered: true, dark: false, borderless: false}) do %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<% end %>
<%= pb_rails("list", props: {ordered: false, dark: false, borderless: true}) do %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<% end %>
<%= pb_rails("list", props: {ordered: false, dark: false, borderless: false, xpadding: true}) do %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<% end %>
<%= pb_rails("list", props: {ordered: false, dark: true, borderless: false}) do %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<% end %>
<%= pb_rails("list", props: {ordered: false, dark: true, borderless: false, size: "large"}) do %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<% end %>
<%= pb_rails("list", props: {ordered: true, dark: true, borderless: false}) do %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<% end %>
<%= pb_rails("list", props: {ordered: false, dark: true, borderless: true}) do %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<% end %>
<%= pb_rails("list", props: {ordered: false, dark: true, borderless: false, xpadding: true}) do %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<% end %>
<%= pb_rails("loading_inline") %>
<%= pb_rails("loading_inline", props: {
align: "center"
}) %>
<%= pb_rails("loading_inline", props: {
align: "right"
}) %>
<%= pb_rails("loading_inline", props: {
dark: true
}) %>
<%= pb_rails("loading_inline", props: {
align: "center",
dark: true
}) %>
<%= pb_rails("loading_inline", props: {
align: "right",
dark: true
}) %>
<%= pb_rails("message", props: {
label: "Message",
message: "How can we assist you today?",
timestamp: "20 seconds ago",
avatar_name: "Mike Bishop",
avatar_url: "https://randomuser.me/api/portraits/men/50.jpg",
avatar_status: "online"
}) %>
<br><br>
<%= pb_rails("message", props: {
label: "Support",
message: "We'll escalate this issue to a Senior Support agent.",
timestamp: "9 minutes ago",
avatar_name:"Wade Winningham",
avatar_url: "https://randomuser.me/api/portraits/men/14.jpg"
}) %>
<br><br>
<%= pb_rails("message", props: {
message: "To processs your order, I'll need your full name.",
timestamp: "4 hours ago",
avatar_name: "Lisa Thompson",
avatar_url: "https://randomuser.me/api/portraits/women/39.jpg"
}) %>
<br><br>
<%= pb_rails("message", props: {
label: "Application",
message: "Application for Kate Smith is waiting for your approval",
avatar_name: "Becca Jacobs",
avatar_url: "https://randomuser.me/api/portraits/women/50.jpg"
}) %>
<br><br>
<%= pb_rails("message", props: {
label: "Complaint",
message: "We're so sorry you had a bad experience!",
timestamp: "2 days ago",
avatar_name: "Tim Wenhold"
}) %>
<br><br>
<%= pb_rails("message", props: {
label: "Support",
message: "Please hold for one moment, I'll check with my manager.",
timestamp: "2 days ago"
}) %>
<%= pb_rails("multiple_users", props: {
users: [
{
name: "Patrick Welch",
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
},
{
name: "Lucille Sanchez",
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
},
{
name: "Beverly Reyes",
image_url: "https://randomuser.me/api/portraits/women/74.jpg",
},
{
name: "Keith Craig",
image_url: "https://randomuser.me/api/portraits/men/40.jpg",
},
{
name: "Alicia Cooper",
image_url: "https://randomuser.me/api/portraits/women/46.jpg",
}
]
}) %>
<br/><br/>
<%= pb_rails("multiple_users", props: {
users: [
{
name: "Shawn Palmer",
image_url: "https://randomuser.me/api/portraits/men/93.jpg",
},
{
name: "Andrew Murray",
image_url: "https://randomuser.me/api/portraits/men/75.jpg",
}
]
}) %>
<%= pb_rails("multiple_users", props: {
reverse: true,
users: [
{
name: "Patrick Welch",
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
},
{
name: "Lucille Sanchez",
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
},
{
name: "Beverly Reyes",
image_url: "https://randomuser.me/api/portraits/women/74.jpg",
},
{
name: "Keith Craig",
image_url: "https://randomuser.me/api/portraits/men/40.jpg",
},
{
name: "Alicia Cooper",
image_url: "https://randomuser.me/api/portraits/women/46.jpg",
}
]
}) %>
<br/><br/>
<%= pb_rails("multiple_users", props: {
reverse: true,
users: [
{
name: "Shawn Palmer",
image_url: "https://randomuser.me/api/portraits/men/93.jpg",
},
{
name: "Andrew Murray",
image_url: "https://randomuser.me/api/portraits/men/75.jpg",
}
]
}) %>
<%= pb_rails("multiple_users_stacked", props: {
users: [
{
name: "Patrick Welch",
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
}
]
}) %>
<br/><br/>
<%= pb_rails("multiple_users_stacked", props: {
users: [
{
name: "Patrick Welch",
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
},
{
name: "Lucille Sanchez",
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
}
]
}) %>
<br/><br/>
<%= pb_rails("multiple_users_stacked", props: {
users: [
{
name: "Patrick Welch",
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
},
{
name: "Lucille Sanchez",
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
},
{
name: "Beverly Reyes",
image_url: "https://randomuser.me/api/portraits/women/74.jpg",
},
{
name: "Keith Craig",
image_url: "https://randomuser.me/api/portraits/men/40.jpg",
},
{
name: "Alicia Cooper",
image_url: "https://randomuser.me/api/portraits/women/46.jpg",
}
]
}) %>
<%= pb_rails("nav", props: {title: "Title Example", link: "#"}) do %>
<%= pb_rails("nav/item", props: { text: "Active Nav Item using text prop", link: "#", active: true }) %>
<%= pb_rails("nav/item", props: { text: "Nav Item using text prop", link: "#" }) %>
<%= pb_rails("nav/item", props: { text: "Nav Item using text prop", link: "#" }) %>
<% end %>
<%= pb_rails("nav", props: { orientation: "horizontal"}) do %>
<%= pb_rails("nav/item", props: { text: "Active Nav Item using text prop", link: "#", active: true }) %>
<%= pb_rails("nav/item", props: { text: "Nav Item using text prop", link: "#" }) %>
<%= pb_rails("nav/item", props: { text: "Nav Item using text prop", link: "#" }) %>
<% end %>
<%= pb_rails("nav", props: {title: "Title Example", link: "#"}) do %>
<%= pb_rails("nav/item", props: { link: "#", active: true }) do%>Active Nav Item using block<% end %>
<%= pb_rails("nav/item", props: { link: "#" }) do%>Nav Item using block<% end %>
<%= pb_rails("nav/item", props: { link: "#" }) do%>Nav Item using block<% end %>
<% end %>
<%= pb_rails("nav") do %>
<%= pb_rails("nav/item", props: { link: "#", active: true }) do%>Active Nav Item using block<% end %>
<%= pb_rails("nav/item", props: { link: "#" }) do%>Nav Item using block<% end %>
<%= pb_rails("nav/item", props: { link: "#" }) do%>Nav Item using block<% end %>
<% end %>
<%= pb_rails("online_status", props: { status: "offline" }) %>
<br>
<%= pb_rails("online_status", props: { status: "online" }) %>
<br>
<%= pb_rails("online_status", props: { status: "away" }) %>
<%= pb_rails("person", props: { first_name: "Kyle", last_name: "Fadigan" }) %>
<%= pb_rails("person_contact", props: {
first_name: "Pauline",
last_name: "Smith",
contacts: [
{
contact_type: "email",
contact_value: "email@example.com"
},
{
contact_value: 5555555555
},
{
contact_type: "work",
contact_value: "3245627482"
}
]
}) %>
<%= pb_rails("person_contact", props: {
first_name: "Harvey",
last_name: "Walters",
contacts: [
{
contact_type: "email",
contact_value: "email@example.com"
},
{
contact_value: 5555555555,
},
{
contact_type: "work",
contact_value: "3245627482"
}
]
}) %>
<%= pb_rails("person_contact", props: {
first_name: "Brenda",
last_name: "Walters",
contacts: [
{
contact_value: 5555555555,
}
]
}) %>
<%= pb_rails("person_contact", props: {
first_name: "Harvey",
last_name: "Walters",
contacts: [
{
contact_type: "email",
contact_value: "email@example.com"
},
{
contact_value: 5555555555,
contact_detail: "Home"
},
{
contact_type: "work",
contact_value: "3245627482",
contact_detail: "Work"
}
]
}) %>
<%= pb_rails("person_contact", props: {
first_name: "Pauline",
last_name: "Smith",
contacts: [
{
contact_type: "email",
contact_value: "email@example.com",
},
{
contact_value: 5555555555
},
{
contact_type: "wrong-phone",
contact_value: "3245627482",
},
{
contact_type: "phone",
contact_value: "3048615385",
},
]
}) %>
<%= pb_rails("pill", props: {
text: "Default"
}) %>
<br><br>
<%= pb_rails("pill", props: {
text: "success",
variant: "success"
}) %>
<br><br>
<%= pb_rails("pill", props: {
text: "error",
variant: "error"
}) %>
<br><br>
<%= pb_rails("pill", props: {
text: "warning",
variant: "warning"
}) %>
<br><br>
<%= pb_rails("pill", props: {
text: "info",
variant: "info"
}) %>
<br><br>
<%= pb_rails("pill", props: {
text: "neutral",
variant: "neutral"
}) %>
<br><br>
<%= pb_rails("pill", props: {
text: "primary",
variant: "primary"
}) %>
<%= pb_rails("progress_simple", props: { percent: 64.9 }) %>
<br>
<%= pb_rails("progress_simple", props: { value: 2, max: 10 }) %>
<%= pb_rails("progress_simple", props: { percent: 40, width: "100px" }) %>
<%= pb_rails("progress_simple", props: { percent: 64.9, width: "100px" }) %>
<br>
<%= pb_rails("progress_simple", props: { percent: 64.9, width: "100px", align: "center" }) %>
<br>
<%= pb_rails("progress_simple", props: { percent: 64.9, width: "100px", align: "right" }) %>
<%= pb_rails("radio", props: {
text: "Power",
name: "group 1",
value: "Power"
}) %>
<br>
<%= pb_rails("radio", props: {
text: "Nitro",
name: "group 1",
value: "Nitro",
checked: true
}) %>
<br>
<%= pb_rails("radio", props: {
text: "Google",
name: "group 1",
value: "Google"
}) %>
<%= pb_rails("radio", props: {
text: "Power",
name: "group 2",
value: 'Power',
dark: true
}) %>
<br>
<%= pb_rails("radio", props: {
text: "Nitro",
name: "group 2",
value: "Nitro",
checked: true,
dark: true
}) %>
<br>
<%= pb_rails("radio", props: {
text: "Google",
name: "group 2",
value: "Google",
dark: true
}) %>
<%= pb_rails("radio", props: {
text: "Power"
}) do %>
<input type="radio" name="group 3" value="power" >
<% end %>
<br>
<%= pb_rails("radio", props: {
text: "Nitro"
}) do %>
<input type="radio" name="group 3" value="nitro" checked>
<% end %>
<br>
<%= pb_rails("radio", props: {
text: "Google"
}) do %>
<input type="radio"name="group 3" value="google">
<% end %>
<%= pb_rails("radio", props: {
error: true,
text: "Power",
name: "group 1",
value: "Power"
}) %>
<%= pb_rails("radio", props: {
dark: true,
error: true,
text: "Power",
name: "group 1",
value: "Power"
}) %>
<%= pb_rails("select", props: {
label: "Favorite Food",
name: "food",
options: [
{
value: "1",
value_text: "Burgers",
},
{
value: "2",
selected: true,
value_text: "Pizza",
},
{
value: "3",
value_text: "Tacos",
},
{
value: "4",
value_text: "BBQ",
},
]
}) %>
<%= pb_rails("select", props: {
label: "Where do you live",
name: "location",
blank_selection: "Select One...",
options: [
{
value: "USA",
},
{
value: "Canada",
},
{
value: "Brazil",
},
{
value: "Philippines",
},
]
}) %>
<%= pb_rails("select", props: {
label: "Favorite Coffee",
name: "coffee",
options: [
{
value: "1",
disabled: true,
value_text: "Espresso",
},
{
value: "2",
selected: true,
value_text: "Americano",
},
{
value: "3",
disabled: true,
value_text: "Cappuccino",
},
{
value: "4",
value_text: "Mocha",
},
{
value: "5",
value_text: "Flat White",
},
{
value: "6",
value_text: "Latte",
},
]
}) %>
<%= pb_rails("select", props: {
label: "Favorite Dessert",
disabled: true,
name: "dessert",
options: [
{
value: "Apple Pie",
},
{
value: "Cookies",
},
{
value: "Ice Cream",
},
{
value: "Brownies",
},
]
}) %>
<%= pb_rails("select", props: {
label: "Which shoe do you tie first?",
required: true,
name: "shoe",
blank_selection: "Select One...",
options: [
{
value: "Left",
},
{
value: "Right",
},
{
value: "I go without laces",
},
]
}) %>
<%= pb_rails("select", props: {
label: "Favorite Sport",
name: "sports",
options: [
{
value: "Football",
},
{
value: "Baseball",
},
{
value: "Basketball",
},
{
value: "Hockey",
},
]
}) %>
<%= pb_rails("select", props: { label: "Favorite Holiday" }) do %>
<select name="holiday" id="holiday">
<option value="1">Christmas</option>
<option value="2">Thanksgiving</option>
<option value="3">Halloween</option>
<option value="4">Fourth of July</option>
</select>
<% end %>
<%= pb_rails("select", props: {
label: "Favorite Food",
name: "food",
dark: true,
options: [
{
value: "1",
value_text: "Burgers",
},
{
value: "2",
selected: true,
value_text: "Pizza",
},
{
value: "3",
value_text: "Tacos",
},
{
value: "4",
value_text: "BBQ",
},
]
}) %>
<%= pb_rails("select", props: {
error: "Please make a valid selection",
label: "Favorite Food",
name: "food",
options: [
{
value: "1",
value_text: "Burgers",
},
{
value: "2",
selected: true,
value_text: "Pizza",
},
{
value: "3",
value_text: "Tacos",
},
{
value: "4",
value_text: "BBQ",
},
]
}) %>
<%= pb_rails("select", props: {
dark: true,
error: "Please make a valid selection",
label: "Favorite Food",
name: "food",
options: [
{
value: "1",
value_text: "Burgers",
},
{
value: "2",
selected: true,
value_text: "Pizza",
},
{
value: "3",
value_text: "Tacos",
},
{
value: "4",
value_text: "BBQ",
},
]
}) %>
<div class="pb--doc-demo-row">
<%= pb_rails("selectable_card", props: {
input_id: "selected_with_icon",
name: "selected_with_icon",
value: "selected_with_icon",
checked: true,
icon: true
}) do %>
Selected, with icon
<% end %>
<%= pb_rails("selectable_card", props: {
input_id: "selected_without_icon",
name: "selected_without_icon",
value: "selected_without_icon",
checked: true,
}) do %>
Selected, without icon
<% end %>
<%= pb_rails("selectable_card", props: {
input_id: "unselected",
name: "unselected",
value: "unselected",
}) do %>
Unselected
<% end %>
<%= pb_rails("selectable_card", props: {
input_id: "disabled",
name: "disabled",
value: "disabled",
disabled: true
}) do %>
Disabled
<% end %>
</div><div class="pb--doc-demo-row">
<%= pb_rails("selectable_card", props: {
input_id: "male",
name: "gender",
value: "male",
multi: false
}) do %>
Male
<% end %>
<%= pb_rails("selectable_card", props: {
input_id: "female",
name: "gender",
value: "female",
multi: false
}) do %>
Female
<% end %>
<%= pb_rails("selectable_card", props: {
input_id: "other",
name: "gender",
value: "other",
multi: false
}) do %>
Other
<% end %>
</div><div class="pb--doc-demo-row">
<%= pb_rails("selectable_card", props: {
input_id: "block",
name: "block",
value: "block",
checked: true
}) do %>
<%= pb_rails("title", props: { text: "Block", size: 4 }) %>
<%= pb_rails("body", props: { tag: "span"}) do %>
This uses block
<% end %>
<% end %>
<br><br>
<%= pb_rails("selectable_card", props: {
input_id: "tag",
name: "tag",
value: "tag",
text: "This passes in text",
checked: false
}) %>
</div>
<div class="pb--doc-demo-row">
<%= pb_rails("selectable_card", props: {
input_id: "selected_with_icon_dark",
name: "selected_with_icon_dark",
value: "selected_with_icon_dark",
checked: true,
icon: true,
dark: true
}) do %>
Selected, with icon
<% end %>
<%= pb_rails("selectable_card", props: {
input_id: "selected_without_icon_dark",
name: "selected_without_icon_dark",
value: "selected_without_icon_dark",
checked: true,
icon: false,
dark: true
}) do %>
Selected, without icon
<% end %>
<%= pb_rails("selectable_card", props: {
input_id: "unselected_dark",
name: "unselected_dark",
value: "unselected_dark",
checked: false,
dark: true
}) do %>
Unselected
<% end %>
<%= pb_rails("selectable_card", props: {
input_id: "disabled_dark",
name: "disabled_dark",
value: "disabled_dark",
disabled: true,
dark: true
}) do %>
Disabled
<% end %>
</div><%= pb_rails("source", props: {
source: "BJ's Johnston-208",
type: "retail"
}) %>
<br><br>
<%= pb_rails("source", props: {
source: "Referral-phrg",
type: "inbound"
}) %>
<br><br>
<%= pb_rails("source", props: {
source: "BJ's Future CB",
type: "user",
user: {
name: "Anna Black",
image: {url: "https://randomuser.me/api/portraits/women/44.jpg"},
user_id: "48582"
}
}) %>
<%= pb_rails("source", props: {
source: "BJ's Johnston-208",
type: "retail",
hide_icon: true
}) %>
<br><br>
<%= pb_rails("source", props: {
source: "Referral-phrg",
type: "inbound",
hide_icon: true
}) %>
<br><br>
<%= pb_rails("source", props: {
source: "BJ's Future CB",
type: "user",
user: {
name: "Anna Black",
image: {url: "https://randomuser.me/api/portraits/women/44.jpg"},
user_id: "48582"
},
hide_icon: true
}) %>
<%= pb_rails("source", props: {
source: "BJ's Johnston-208",
type: "retail"
}) %>
<br><br>
<%= pb_rails("source", props: {
source: "Referral-phrg",
type: "inbound"
}) %>
<br><br>
<%= pb_rails("source", props: {
source: "B.B.B. Outbound",
type: "outbound"
}) %>
<br><br>
<%= pb_rails("source", props: {
source: "Contractor.com",
type: "prospecting"
}) %>
<br><br>
<%= pb_rails("source", props: {
source: "Beards, Beers and Brats",
type: "events"
}) %>
<br><br>
<%= pb_rails("source", props: {
source: "BJ's Johnston-208",
type: "referral"
}) %>
<br><br>
<%= pb_rails("source", props: {
source: "Employee Referral",
type: "referral",
user: {
name: "Anna Black",
image: {url: "https://randomuser.me/api/portraits/women/44.jpg"},
user_id: "48582"
}
}) %>
<br><br>
<%= pb_rails("source", props: {
source: "BJ's Future CB",
type: "user",
user: {
name: "Anna Black",
image: {url: "https://randomuser.me/api/portraits/women/44.jpg"},
user_id: "48582"
}
}) %>
<%= pb_rails("star_rating") %>
<br>
<%= pb_rails("star_rating", props: { rating: 3 }) %>
<br>
<%= pb_rails("star_rating", props: { rating: 1.5 }) %>
<br>
<%= pb_rails("star_rating", props: { rating: 5 }) %>
<%= pb_rails("star_rating", props: { rating: 3.5, hide_rating: true }) %>
<%= pb_rails("stat_change", props: {
change: "increase",
value: 28.4
}) %>
<br>
<%= pb_rails("stat_change", props: {
change: "decrease",
value: 6.1
}) %>
<br>
<%= pb_rails("stat_change", props: {
change: "neutral",
value: 98
}) %>
<%= pb_rails("stat_value", props: { value: 5294, unit: "appt" }) %>
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
<%= pb_rails("table", props: { size: "sm" }) do %>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
</tbody>
<% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
<%= pb_rails("table", props: { size: "md" }) do %>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
</tbody>
<% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
<%= pb_rails("table", props: { size: "lg"} ) do %>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
</tbody>
<% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
<%= pb_rails("table", props: { size: "md", container: false}) do %>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
</tbody>
<% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
<%= pb_rails("table", props: { size: "md", disable_hover: true }) do %>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
</tbody>
<% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 Value 1 Value 1 |
Value 2 | Value 3 Value 3 |
Value 4 | Value 5 |
| Value 1 Value 1 Value 1 |
Value 2 | Value 3 Value 3 |
Value 4 | Value 5 |
| Value 1 Value 1 Value 1 |
Value 2 | Value 3 Value 3 |
Value 4 | Value 5 |
<%= pb_rails("table", props: { size: "md"}) do %>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value 1<br/>Value 1<br/>Value 1</td>
<td>Value 2</td>
<td>Value 3<br/>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1<br/>Value 1<br/>Value 1</td>
<td>Value 2</td>
<td>Value 3<br/>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1<br/>Value 1<br/>Value 1</td>
<td>Value 2</td>
<td>Value 3<br/>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
</tbody>
<% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 Value 1 Value 1 |
Value 2 | Value 3 Value 3 |
Value 4 | Value 5 |
| Value 1 Value 1 Value 1 |
Value 2 | Value 3 Value 3 |
Value 4 | Value 5 |
| Value 1 Value 1 Value 1 |
Value 2 | Value 3 Value 3 |
Value 4 | Value 5 |
| Value 1 Value 1 Value 1 |
Value 2 | Value 3 Value 3 |
Value 4 | Value 5 |
| Value 1 Value 1 Value 1 |
Value 2 | Value 3 Value 3 |
Value 4 | Value 5 |
<%= pb_rails("table", props: { size: "md", single_line: true }) do %>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value 1<br/>Value 1<br/>Value 1</td>
<td>Value 2</td>
<td>Value 3<br/>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1<br/>Value 1<br/>Value 1</td>
<td>Value 2</td>
<td>Value 3<br/>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1<br/>Value 1<br/>Value 1</td>
<td>Value 2</td>
<td>Value 3<br/>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1<br/>Value 1<br/>Value 1</td>
<td>Value 2</td>
<td>Value 3<br/>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1<br/>Value 1<br/>Value 1</td>
<td>Value 2</td>
<td>Value 3<br/>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
</tbody>
<% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
<%= pb_rails("table", props: { data_table: true }) do %>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
</tbody>
<% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
<%= pb_rails("table", props: { size: "md", dark: true }) do %>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
</tbody>
<% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
<%= pb_rails("table", props: { size: "md", container: false, dark: true }) do %>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
</tbody>
<% end %>
<%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter first name", value: "Timothy Wenhold" }) %>
<%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter last name" }) %>
<%= pb_rails("text_input", props: { label: "Phone Number", type: "phone", placeholder: "Enter phone number" }) %>
<%= pb_rails("text_input", props: { label: "Email Address", type: "email", placeholder: "Enter email address" }) %>
<%= pb_rails("text_input", props: { label: "Zip Code", type: "number", placeholder: "Enter zip code" }) %><%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter first name", value: "Timothy Wenhold", dark: true }) %>
<%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter last name", dark: true }) %>
<%= pb_rails("text_input", props: { label: "Phone Number", type: "phone", placeholder: "Enter phone number", dark: true }) %>
<%= pb_rails("text_input", props: { label: "Email Address", type: "email", placeholder: "Enter email address", dark: true }) %>
<%= pb_rails("text_input", props: { label: "Zip Code", type: "number", placeholder: "Enter zip code", dark: true }) %><%= pb_rails("text_input", props: { error: "Please enter a valid email address", label: "Email Address", type: "email", placeholder: "Enter email address" }) %>
<%= pb_rails("text_input", props: { label: "Confirm Email Address", type: "email", placeholder: "Confirm email address" }) %><%= pb_rails("text_input", props: {
dark: true,
error: "Please enter a valid email address",
label: "Email Address",
type: "email",
placeholder: "Enter email address"
}) %>
<%= pb_rails("text_input", props: {
dark: true,
label: "Confirm Email Address",
type: "email",
placeholder: "Confirm email address"
}) %><%= pb_rails("text_input", props: {label: "Custom Input"}) do %>
<input placeholder="Custom placeholder" name="custom-name"></input>
<% end %><%= pb_rails("textarea", props: { label: "Label", rows: 4}) %>
<br/>
<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text" }) %>
<br/>
<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text" }) %><%= pb_rails("textarea", props: { label: "Label"}) do %>
<textarea class="my_custom_class" name="custom_textarea" rows=4></textarea>
<% end %><%= pb_rails("textarea", props: { label: "Label", rows: 4, dark: true }) %>
<br/>
<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text", dark: true }) %>
<br/>
<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text", dark: true }) %><%= pb_rails("textarea", props: { error: "This field has an error!", label: "Label", rows: 4}) %>
<%= pb_rails("textarea", props: {
dark: true,
error: "This field has an error!",
label: "Label",
rows: 4
}) %>
<%= pb_rails("time", props: {
time: Time.now,
size: "lg"
}) %>
<br>
<%= pb_rails("time", props: {
time: DateTime.now,
size: "sm"
}) %>
<br>
<%= pb_rails("time", props: {
time: "2012-08-02T15:49:29Z",
size: "xs"
}) %>
<%= pb_rails("time", props: {
time: "2012-08-02T15:49:29Z"
}) %>
<br>
<%= pb_rails("time", props: {
time: DateTime.now
}) %>
<br>
<%= pb_rails("time", props: {
time: DateTime.now,
timezone: "America/Chicago"
}) %>
<%= pb_rails("title", props: { text: "Default Title" }) %>
<br/>
<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>
<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>
<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
<%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
<%= pb_rails("title", props: { text: "Default Title", dark: true }) %>
<br/>
<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4, dark: true }) %>
<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3, dark: true }) %>
<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2, dark: true }) %>
<%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1, dark: true }) %>
<%= pb_rails("title_count", props: {
title: "Appointments",
count: 35.78
}) %>
<br>
<%= pb_rails("title_count", props: {
title: "Appointments",
count: 7399,
size: "lg"
}) %>
<br>
<%= pb_rails("title_count", props: {
title: "Appointments",
count: -379503.3720,
size: "lg"
}) %>
<%= pb_rails("title_count", props: {
title: "Remodeling Consultants",
count: 527
}) %>
<br>
<%= pb_rails("title_count", props: {
title: "Remodeling Consultants",
count: 527,
align: "center"
}) %>
<br>
<%= pb_rails("title_count", props: {
title: "Remodeling Consultants",
count: 527,
align: "right"
}) %>
<%= pb_rails("title_detail", props: {
title: "Email Notifications",
detail: "Commits data and history"
}) %>
<%= pb_rails("title_detail", props: {
title: "Email Notifications",
detail: "Commits data and history",
align: "center"
}) %>
<%= pb_rails("title_detail", props: {
title: "Email Notifications",
detail: "Commits data and history",
align: "right"
}) %>
<%= pb_rails("toggle", props: {
size: "sm",
checked: false
}) %>
<br>
<%= pb_rails("toggle", props: {
size: "md",
checked: false
}) %>
<%= pb_rails("toggle", props: {
size: "md",
checked: true
}) %>
<br>
<%= pb_rails("toggle", props: {
size: "md",
checked: false
}) %>
<%= pb_rails("title", props: { size: 4, text: "Which of the following vehicles do you own?" }) %>
<br>
<%= pb_rails("caption", props: { text: "Car" }) %>
<%= pb_rails("toggle", props: {
size: "sm",
checked: false,
name: "vehicle",
value: "car"
}) %>
<br>
<%= pb_rails("caption", props: { text: "Bike" }) %>
<%= pb_rails("toggle", props: {
size: "sm",
checked: false,
name: "vehicle",
value: "bike"
}) %>
<%= pb_rails("toggle", props: { size: "sm" }) do %>
<input class="my_custom_input" type="checkbox" name="custom_checkbox" value="ABC" />
<% end %>
<%= pb_rails("title", props: { size: 4, text: "Select one option:" }) %>
<br>
<%= pb_rails("caption", props: { text: "Male" }) %>
<%= pb_rails("toggle", props: { size: "sm" }) do %>
<input type="radio" name="gender" value="male">
<% end %>
<br/>
<%= pb_rails("caption", props: { text: "Female" }) %>
<%= pb_rails("toggle", props: { size: "sm" }) do %>
<input type="radio" name="gender" value="female">
<% end %>
<br/>
<%= pb_rails("caption", props: { text: "Other" }) %>
<%= pb_rails("toggle", props: { size: "sm" }) do %>
<input type="radio" name="gender" value="other">
<% end %>
<%= pb_rails("typeahead", props: { data: { typeahead_example: true } }) %>
<br><br><br>
<%= pb_rails("card", props: { padding: "xl", data: { typeahead_example_selected_option: true } }) do %>
<%= pb_rails("body") do %>
Use the above input to search for users on Github, and see the results as you type.
<% end %>
<%= pb_rails("body") do %>
When you make a selection, you will see it apear in the list below
<% end %>
<div data-selected-option></div>
<% end %>
<template data-typeahead-example-result-option>
<%= pb_rails("user", props: {
name: tag(:slot, name: "name"),
orientation: "horizontal",
align: "left",
avatar_url: "placeholder"
}) %>
</template>
<%= javascript_tag defer: "defer" do %>
document.addEventListener("pb-typeahead-kit-search", function(event) {
if (!event.target.dataset.typeaheadExample) return;
fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
.then(response => response.json())
.then((result) => {
const resultOptionTemplate = document.querySelector("[data-typeahead-example-result-option]")
event.detail.setResults((result.items || []).map((user) => {
const wrapper = resultOptionTemplate.content.cloneNode(true)
wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
wrapper.querySelector('img').setAttribute("src", user.avatar_url)
return wrapper
}))
})
})
document.addEventListener("pb-typeahead-kit-result-option-selected", function(event) {
if (!event.target.dataset.typeaheadExample) return;
document.querySelector("[data-typeahead-example-selected-option] [data-selected-option]").innerHTML = ""
document.querySelector("[data-typeahead-example-selected-option] [data-selected-option]").appendChild(event.detail.selected)
})
<% end %>
<div class="pb--doc-demo-row">
<div>
<%= pb_rails("user", props: {
name: "Anna Black",
title: "Remodeling Consultant",
orientation: "vertical",
align: "center",
size: "lg",
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
}) %>
</div>
<div>
<%= pb_rails("user", props: {
name: "Anna Black",
title: "Remodeling Consultant",
orientation: "horizontal",
align: "left",
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
}) %>
</div>
<div>
<%= pb_rails("user", props: {
name: "Anna Black",
orientation: "horizontal",
align: "left",
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
}) %>
<br>
<%= pb_rails("user", props: {
name: "Anna Black",
orientation: "horizontal",
align: "left",
avatar: true
}) %>
</div>
</div>
<div class="pb--doc-demo-row">
<div>
<%= pb_rails("user", props: {
name: "Anna Black",
territory: "PHL",
title: "Remodeling Consultant",
orientation: "vertical",
align: "center",
size: "lg",
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
}) %>
</div>
<div>
<%= pb_rails("user", props: {
name: "Anna Black",
territory: "PHL",
title: "Remodeling Consultant",
orientation: "horizontal",
align: "left",
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
}) %>
</div>
<div>
<%= pb_rails("user", props: {
name: "Anna Black",
territory: "PHL",
title: "Remodeling Consultant",
orientation: "horizontal",
align: "center",
size: "sm"}) %>
<br>
<%= pb_rails("user", props: {
name: "Anna Black",
territory: "PHL",
title: "Remodeling Consultant",
orientation: "horizontal",
align: "center",
size: "lg"}) %>
</div>
</div>
<div class="pb--doc-demo-row">
<div>
<%= pb_rails("user", props: {
name: "Anna Black",
title: "Remodeling Consultant",
orientation: "horizontal",
align: "center",
size: "lg"}) %>
</div>
<div class="">
<%= pb_rails("user", props: {
name: "Anna Black",
title: "Remodeling Consultant",
orientation: "horizontal",
align: "left"}) %>
</div>
</div>
<div class="pb--doc-demo-row">
<div>
<%= pb_rails("user", props: {
name: "Anna Black",
title: "Remodeling Consultant",
orientation: "horizontal",
align: "left",
size: "sm",
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
}) %>
</div>
<div>
<%= pb_rails("user", props: {
name: "Anna Black",
title: "Remodeling Consultant",
orientation: "horizontal",
align: "left",
size: "md",
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
}) %>
</div>
<div>
<%= pb_rails("user", props: {
name: "Anna Black",
title: "Remodeling Consultant",
orientation: "horizontal",
align: "left",
size: "lg",
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
}) %>
</div>
</div>
<%= pb_rails("user", props: {
name: "Anna Black",
title: "Remodeling Consultant",
orientation: "vertical",
align: "center",
size: "sm",
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
}) %>
<br><br>
<%= pb_rails("user", props: {
name: "Anna Black",
title: "Remodeling Consultant",
orientation: "vertical",
align: "center",
size: "md",
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
}) %>
<br><br>
<%= pb_rails("user", props: {
name: "Anna Black",
title: "Remodeling Consultant",
orientation: "vertical",
align: "center",
size: "lg",
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
}) %>
<div class="pb--doc-demo-row">
<div>
<%= pb_rails("user", props: {
name: "Anna Black",
title: "Remodeling Consultant",
orientation: "vertical",
align: "center",
size: "lg",
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
dark: true
}) %>
</div>
<div>
<%= pb_rails("user", props: {
name: "Anna Black",
title: "Remodeling Consultant",
orientation: "horizontal",
align: "left",
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
dark: true
}) %>
</div>
<div>
<%= pb_rails("user", props: {
name: "Anna Black",
orientation: "horizontal",
align: "left",
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
dark: true
}) %>
<br>
<%= pb_rails("user", props: {
name: "Anna Black",
orientation: "horizontal",
align: "left",
avatar: true,
dark: true
}) %>
</div>
</div>
<div class="pb--doc-demo-row">
<div>
<%= pb_rails("user", props: {
name: "Anna Black",
title: "Remodeling Consultant",
orientation: "horizontal",
align: "center",
dark: true,
size: "lg"}) %>
</div>
<div class="">
<%= pb_rails("user", props: {
name: "Anna Black",
title: "Remodeling Consultant",
orientation: "horizontal",
dark: true,
align: "left"}) %>
</div>
</div>
<%= pb_rails("user_badge", props: {
badge: "veteran",
size: "md"
}) %>
<br><br>
<%= pb_rails("user_badge", props: {
badge: "million-dollar",
size: "md"
}) %>
<%= pb_rails("user_badge", props: {
badge: "veteran",
size: "sm"
}) %>
<br><br>
<%= pb_rails("user_badge", props: {
badge: "veteran",
size: "md"
}) %>
<br><br>
<%= pb_rails("user_badge", props: {
badge: "veteran",
size: "lg"
}) %>