avatar {shinyNextUI} | R Documentation |
avatar
Description
The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.
Usage
avatar(...)
avatar_group(...)
Arguments
... |
Props to pass to the component. The allowed props are listed below in the Details section. |
Details
-
src. Type:
string
. Default:NA
. -
color. Type:
default OR primary OR secondary OR success OR warning OR danger
. Default:"default"
. -
radius. Type:
none OR sm OR md OR lg OR full
. Default:"full"
. -
size. Type:
sm OR md OR lg
. Default:"md"
. -
name. Type:
string
. Default:NA
. -
icon. Type:
ReactNode
. Default:NA
. -
fallback. Type:
ReactNode
. Default:NA
. -
isBordered. Type:
boolean
. Default:false
. -
isDisabled. Type:
boolean
. Default:false
. -
isFocusable. Type:
boolean
. Default:false
. -
showFallback. Type:
boolean
. Default:false
. -
ImgComponent. Type:
React.ElementType
. Default:"img"
. -
imgProps. Type:
ImgComponentProps
. Default:NA
. -
classNames. Type:
Partial<Record<"base" OR "img" OR "fallback" OR "name" OR "icon", string>>
. Default:NA
.
-
max. Type:
number
. Default:"5"
. -
total. Type:
number
. Default:NA
. -
size. Type:
AvatarProps['size']
. Default:NA
. -
color. Type:
AvatarProps['color']
. Default:NA
. -
radius. Type:
AvatarProps['radius']
. Default:NA
. -
isGrid. Type:
boolean
. Default:false
. -
isDisabled. Type:
boolean
. Default:NA
. -
isBordered. Type:
boolean
. Default:NA
. -
renderCount. Type:
(count: number) => ReactNode
. Default:NA
. -
classNames. Type:
Partial<Record<"base" OR "count", string>>
. Default:NA
.
Value
An object of class shiny.tag
containing the
necessary configuration and including options such as JavaScript
dependencies to instantiate a HeroUI avatar component.
See Also
See https://heroui.com/docs/components/avatar.
Examples
library(shiny)
library(shinyNextUI)
avatar_config <- data.frame(
size = c("xs", "sm", "md", "lg", "xl"),
src = c(
"https://i.pravatar.cc/150?u=a042581f4e29026024d",
"https://i.pravatar.cc/150?u=a042581f4e29026704d",
"https://i.pravatar.cc/150?u=a04258114e29026702d",
"https://i.pravatar.cc/150?u=a048581f4e29026701d",
"https://i.pravatar.cc/150?u=a092581d4ef9026700d"
),
radius = c(rep("full", 2), "lg", "md", "sm"),
disabled = c(rep(FALSE, 4), TRUE),
bordered = c(rep(TRUE, 3), rep(FALSE, 2)),
color = c(
"primary",
"secondary",
"danger",
"success",
"warning"
),
fallback = rep(TRUE, 5)
)
avatar_factory <- function(src, size, disabled, bordered, radius, color, fallback) {
avatar(
src = src,
size = size,
isDisabled = disabled,
isBordered = bordered,
radius = radius,
color = color,
showFallback = fallback
)
}
avatars <- purrr::pmap(avatar_config, avatar_factory)
ui <- nextui_page(
debug_react = TRUE,
class = "container mx-auto px-4",
p("avatar()"),
spacer(y = 1),
div(
class = "flex gap-3 items-center",
avatars
),
spacer(y = 2),
p("avatar_group()"),
spacer(y = 1),
div(
class = "flex",
avatar_group(
isBordered = TRUE,
max = 3,
total = 10,
lapply(avatar_config$src, function(link) avatar(src = link))
)
)
)
server <- function(input, output, session) {}
if (interactive() || is_testing()) shinyApp(ui, server)