Appstate Bar

<div id="wrapper">
  <ef-appstate-bar heading="Preview">This is a preview version.
    <a alt href="#">What&apos;s changing?</a>
  </ef-appstate-bar>
  <ef-appstate-bar heading="IN DEVELOPMENT" state="info">Internal use only.
    <a alt href="#" slot="right">
      <ef-icon icon="present"></ef-icon>Send us feedback
    </a>
  </ef-appstate-bar>
  <ef-appstate-bar heading="New" state="highlight">Welcome to new version.
    <a alt href="#">What&apos;s new?</a>
    <a alt href="#" slot="right">
      <ef-icon icon="help"></ef-icon>Help
    </a>
  </ef-appstate-bar>
</div>

#wrapper {
  padding: 1px;
}

ef-appstate-bar {
  margin-bottom: 10px;
}

[slot="right"] {
  display: flex;
  align-items: center;
}

[slot="right"] ef-icon {
  padding-right: 3px;
}

ef-appstate-bar is used to display status or other information at the top of an application. App State Bar comes with pre-defined colors in the theme.

Basic usage

Styles for App State Bar content can be set using the state attribute/property. The App State Bar's heading can be set via the heading attribute/property.

<div id="wrapper">
  <ef-appstate-bar heading="Heading">
    Here is your content message.
  </ef-appstate-bar>

  <ef-appstate-bar heading="Info" state="info">
    Set attribute as state = &quot;info&quot;
  </ef-appstate-bar>

  <ef-appstate-bar heading="Highlight" state="highlight">
    Set attribute as state = &quot;highlight&quot;
  </ef-appstate-bar>
</div>

#wrapper {
  padding: 1px;
}

ef-appstate-bar {
  margin-bottom: 10px;
}

<ef-appstate-bar heading="Heading">
  Here is your content message.
</ef-appstate-bar>

<ef-appstate-bar heading="Info" state="info">
  Set attribute as state = "info".
</ef-appstate-bar>

<ef-appstate-bar heading="Highlight" state="highlight">
  Set attribute as state = "highlight".
</ef-appstate-bar>

Right slot

The App State Bar provides a slot to display content at the right of bar. The slot can contain any kind of content e.g. normal text, links, or icons.

<div id="wrapper">
  <ef-appstate-bar heading="Sample" state="highlight">
    see on the right of bar
    <a alt href="#" slot="right">
      <ef-icon icon="like-empty"></ef-icon>This is the Right slot
    </a>
  </ef-appstate-bar>
</div>

#wrapper {
  padding: 1px;
}

[slot="right"] {
  display: flex;
  align-items: center;
}

[slot="right"] ef-icon {
  padding-right: 3px;
}

  <style>
    #wrapper {
      padding: 1px;
    }
    [slot="right"] {
      display: flex;
      align-items: center;
    }
    [slot="right"] ef-icon {
      padding-right: 3px;
    }
  </style>

  <ef-appstate-bar heading="Sample" state="highlight">
    See on the right of bar.
    <a alt href="#" slot="right">
      <ef-icon icon="like-empty"></ef-icon>This is the Right slot</a>
  </ef-appstate-bar>

Slots

right

place custom content on the right of bar.

API Reference

Attributes

string

heading

Text to display in heading section.

"info" | "highlight" | null

state

(optional) Type of state bar. Supported value are `info`, `highlight`.

Properties