Getting Started
Components

Alert

Description

The Alert component provides contextual feedback messages to users, allowing for the display of informative or warning messages within a web application interface.

FREE
This component is available for free. It implements the Bootstrap Alert component. See the installation instructions below for more details.

Arguments

Name Default Type Description
color primary String The color variant of the alert component
Options: primary, secondary, success, danger, warning, info, light, dark
dismissable false Boolean Show dismissible/close button in the component
html_attributes {} Hash Any attributes for the used html wrapper tag

Examples

Default 

<%= render Railsboot::AlertComponent.new do %>
  A primary alert
<% end %>

<div class="alert alert-primary" role="alert">
  A primary alert
</div>

Dismissible 

<%= render Railsboot::AlertComponent.new(dismissible: true) do %>
  A dismissible alert
<% end %>

<div class="alert alert-primary alert-dismissible fade show" role="alert">
  A dismissible alert
  <button data-bs-dismiss="alert" class="btn-close" aria-label="Close"></button>
</div>

Colors 

<%= render Railsboot::AlertComponent.new(color: "primary").with_content("A primary alert") %>
<%= render Railsboot::AlertComponent.new(color: "secondary").with_content("A secondary alert") %>
<%= render Railsboot::AlertComponent.new(color: "success").with_content("A success alert") %>
<%= render Railsboot::AlertComponent.new(color: "danger").with_content("A danger alert") %>
<%= render Railsboot::AlertComponent.new(color: "warning").with_content("A warning alert") %>
<%= render Railsboot::AlertComponent.new(color: "info").with_content("A info alert") %>
<%= render Railsboot::AlertComponent.new(color: "light").with_content("A light alert") %>
<%= render Railsboot::AlertComponent.new(color: "dark").with_content("A dark alert") %>

<div class="alert alert-primary" role="alert">
  A primary alert
</div>
<div class="alert alert-secondary" role="alert">
  A secondary alert
</div>
<div class="alert alert-success" role="alert">
  A success alert
</div>
<div class="alert alert-danger" role="alert">
  A danger alert
</div>
<div class="alert alert-warning" role="alert">
  A warning alert
</div>
<div class="alert alert-info" role="alert">
  A info alert
</div>
<div class="alert alert-light" role="alert">
  A light alert
</div>
<div class="alert alert-dark" role="alert">
  A dark alert
</div>

Installation

Simply download this component with all its related files and assets. Unpackage the downloaded ZIP-file, copy all relevant files into your app and adapt the things you need. The ZIP-folder contains:

  • A parent component class (app/components/railsboot/component.rb) of which all components inherit from.
  • A base component class (app/components/railsboot/base_component.rb) which is used for rendering internally.
  • The desired component itself (app/components/railsboot/alert_component.rb).
  • A view template (app/components/railsboot/alert_component.html.erb) for the component unless it's rendered inline.
  • Any other dependent components such as Slots (just if the component needs those)
  • Any dependent assets (JS-Files, CSS-Files) (just if the component needs those)
  • A test file for the components (test/components/railsboot/alert_component_test.rb) including potential slot or dependency tests.

For more information please refer to the installation section.

Download

Download the component and its related files (e.g. templates, assets, slots etc.), unpackage the zip file and adapt the things you need.

Accordion Avatar