Appstate Bar


xxxxxxxxxx
 
1
<div id="wrapper">
2
  <ef-appstate-bar heading="Preview">This is a preview version.
3
    <a alt href="#">What&apos;s changing?</a>
4
  </ef-appstate-bar>
5
  <ef-appstate-bar heading="IN DEVELOPMENT" state="info">Internal use only.
6
    <a alt href="#" slot="right">
7
      <ef-icon icon="present"></ef-icon>Send us feedback
8
    </a>
9
  </ef-appstate-bar>
10
  <ef-appstate-bar heading="New" state="highlight">Welcome to new version.
11
    <a alt href="#">What&apos;s new?</a>
12
    <a alt href="#" slot="right">
13
      <ef-icon icon="help"></ef-icon>Help
14
    </a>
15
  </ef-appstate-bar>
16
</div>


1
 
1


xxxxxxxxxx
 
1
#wrapper {
2
  padding: 1px;
3
}
4
5
ef-appstate-bar {
6
  margin-bottom: 10px;
7
}
8
9
[slot="right"] {
10
  display: flex;
11
  align-items: center;
12
}
13
14
[slot="right"] ef-icon {
15
  padding-right: 3px;
16
}

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.


xxxxxxxxxx
 
1
<div id="wrapper">
2
  <ef-appstate-bar heading="Heading">
3
    Here is your content message.
4
  </ef-appstate-bar>
5
6
  <ef-appstate-bar heading="Info" state="info">
7
    Set attribute as state = &quot;info&quot;
8
  </ef-appstate-bar>
9
10
  <ef-appstate-bar heading="Highlight" state="highlight">
11
    Set attribute as state = &quot;highlight&quot;
12
  </ef-appstate-bar>
13
</div>


1
 
1


xxxxxxxxxx
 
1
#wrapper {
2
  padding: 1px;
3
}
4
5
ef-appstate-bar {
6
  margin-bottom: 10px;
7
}

<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.


xxxxxxxxxx
 
1
<div id="wrapper">
2
  <ef-appstate-bar heading="Sample" state="highlight">
3
    see on the right of bar
4
    <a alt href="#" slot="right">
5
      <ef-icon icon="like-empty"></ef-icon>This is the Right slot
6
    </a>
7
  </ef-appstate-bar>
8
</div>


1
 
1


xxxxxxxxxx
 
1
#wrapper {
2
  padding: 1px;
3
}
4
5
[slot="right"] {
6
  display: flex;
7
  align-items: center;
8
}
9
10
[slot="right"] ef-icon {
11
  padding-right: 3px;
12
}

  <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