Skip to main content

Facepile

A face pile displays a list of personas. Each circle represents a person and contains their image or initials. Often this control is used when sharing who has access to a specific view or file.

Check the full API at ui.facepile.

Basic facepile​

facepile-0

image = 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&h=750&w=1260'
q.page['example'] = ui.form_card(box='1 1 2 1', items=[
    ui.facepile([
        ui.persona(title='John Doe', image=image),
        ui.persona(title='John Doe', image=image),
        ui.persona(title='John Doe'),
        ui.persona(title='John Doe', image=image),
        ui.persona(title='John Doe', image=image),
    ])
])

Limit number of facepiles​

Use the max attribute to constrain the number of rendered facepiles.

facepile-1

image = 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&h=750&w=1260'
q.page['example'] = ui.form_card(box='1 1 2 1', items=[
    ui.facepile(max=3, items=[
        ui.persona(title='John Doe', image=image),
        ui.persona(title='John Doe', image=image),
        ui.persona(title='John Doe'),
        ui.persona(title='John Doe', image=image),
        ui.persona(title='John Doe', image=image),
    ])
])

With an add button​

Use the name attribute to render an "Add button" at the beginning of the facepile. Subsequent click will populate q.args.<facepile-name> with True.

facepile-2

image = 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&h=750&w=1260'
q.page['example'] = ui.form_card(box='1 1 2 1', items=[
    ui.facepile(name='facepile', items=[
        ui.persona(title='John Doe', image=image),
        ui.persona(title='John Doe', image=image),
        ui.persona(title='John Doe'),
        ui.persona(title='John Doe', image=image),
        ui.persona(title='John Doe', image=image),
    ])
])