Persona Demo | <uif-persona>

In order for this demo to work you must first build the library in debug mode.

 

You can control presence of the user, e.g.: {{val}}

You can control size of the persona components, e.g.: {{val}}

You can control style of the persona component, e.g.: {{val}}

You can control color of the persona initials, e.g.: {{val}}

 

AL Alton Lafferty Interior Designer, Contoso Office: 7/1234 Available - Video capable

 

AL Alton Lafferty Interior Designer, Contoso Office: 7/1234 Available - Video capable

Above sample is rendered by this sample markup:

      <uif-persona uif-style="{{vm.style}}" uif-size="{{vm.size}}" uif-presence="{{vm.presence}}" uif-image-url="Persona.Person2.png">
        <uif-persona-initials uif-color="{{vm.color}}">AL</uif-persona-initials>
        <uif-persona-primary-text>Alton Lafferty</uif-persona-primary-text>
        <uif-persona-secondary-text>Interior Designer, Contoso</uif-persona-secondary-text>
        <uif-persona-tertiary-text>Office: 7/1234</uif-persona-tertiary-text>
        <uif-persona-optional-text>Available - Video capable</uif-persona-optional-text>
      </uif-persona>