Blank Slate

Description

Provide a minimalist interface element to signify an empty state or absence of content.

PRO

This component is part of our professional component suite. See the installation instructions below for more on how to use it.

Arguments

Name	Default	Type	Description
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

Examples

Default

<%= render Railsboot::BlankSlateComponent.new do |blankslate| %>
  <% blankslate.with_icon do %>
    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-sticky" viewBox="0 0 16 16">
      <path d="M2.5 1A1.5 1.5 0 0 0 1 2.5v11A1.5 1.5 0 0 0 2.5 15h6.086a1.5 1.5 0 0 0 1.06-.44l4.915-4.914A1.5 1.5 0 0 0 15 8.586V2.5A1.5 1.5 0 0 0 13.5 1zM2 2.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5V8H9.5A1.5 1.5 0 0 0 8 9.5V14H2.5a.5.5 0 0 1-.5-.5zm7 11.293V9.5a.5.5 0 0 1 .5-.5h4.293z" />
    </svg>
  <% end %>
  <% blankslate.with_heading(tag: "h3").with_content("You do not have any posts yet.") %>
  <% blankslate.with_description.with_content("Add a post to start writing in your blog.") %>
  <% blankslate.with_primary_action do %>
    <%= render Railsboot::ButtonComponent.new(text: "New Post") %>
  <% end %>
  <% blankslate.with_secondary_action do %>
    You can also import posts with our <%= link_to "import feature", nil %>.
  <% end %>
<% end %>

<div class="text-center">
  <div class="mb-4">
    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-sticky" viewBox="0 0 16 16">
      <path d="M2.5 1A1.5 1.5 0 0 0 1 2.5v11A1.5 1.5 0 0 0 2.5 15h6.086a1.5 1.5 0 0 0 1.06-.44l4.915-4.914A1.5 1.5 0 0 0 15 8.586V2.5A1.5 1.5 0 0 0 13.5 1zM2 2.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5V8H9.5A1.5 1.5 0 0 0 8 9.5V14H2.5a.5.5 0 0 1-.5-.5zm7 11.293V9.5a.5.5 0 0 1 .5-.5h4.293z" />
    </svg>
  </div>
  <h3>
    You do not have any posts yet.
  </h3>
  <p class="text-sm text-secondary mt-3">Add a post to start writing in your blog.</p>
  <div class="mt-4">
    <button type="button" class="btn btn-primary">
      New Post
    </button>
  </div>
  <div class="text-sm text-body-secondary mt-4">
    You can also import posts with our <a href="/components/blank_slate">import feature</a>.
  </div>
</div>

Slots

icon

Icon to represent the current context.

Name	Default	Type	Description
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

heading Railsboot::HeadingComponent

Explanation of the empty state and the missing content or begin a feature flow.

For a detailed list of arguments on this slot see Railsboot::HeadingComponent

description

Pptional text to inform about the feature in more detail

Name	Default	Type	Description
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

primary_action

This button should lead to a feature or component creation flow.

Name	Default	Type	Description
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

secondary_action

Optional text link to direct a user to additional content about the feature.

Name	Default	Type	Description
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

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/blank_slate_component.rb).
A view template (app/components/railsboot/blank_slate_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/blank_slate_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.

Get access You need to purchase a professional license to download this component.

Badge Breadcrumb