Components
Avatar
A graphical representation of an object or entity
Component Status Details
Status component contains a list of checks and completeness that has been tested and owned by each component
We don't use color as the only visual tool to convey information.
The component’s structure and properties include relevant options such as variant, style, size, orientation, optional iconography, decorations, selection, error state, etc. The title is the component name that uses the frame base component template. The base component name contains: .Base & "Component Name" if there is more than one. All component properties use the Legion foundation.
We can change all the parts that are connected to the component base. The inside of the base component remains connected to the master component. All variant options are not damaged when we change from one to another. Overriding changes to components will not reset other variants.
Component's already has component specs documentation.
Usage
In General, there are three types of LGNAvatar that you can use:
- Image Avatar
- Icon Avatar
- Initials Avatar
These avatars have five sizes: .xxs
, .xs
, .sm
, .md
, .lg
. Also, these avatars can have a backgroundColor that you can define. How to import your theme: Legion iOS UIKit offers four themes: ThemeAGR
, ThemeEazy
, ThemeIHS
, ThemeLGN
, and ThemeMyTEnS
.
import ThemeLGN
Variant
LGNAvatar have 3 variants component:
Image | Icon | Initials |
---|---|---|
Avatar Image Local Asset
let avatar = BaseLGNAvatar()avatar.size = .lgavatar.imageSelection = UIImage(named: "plus")
Avatar Image Async
let avatar = BaseLGNAvatar()avatar.size = .lgavatar.imageURL = URL(string: "https://example.com/image.jpg")
Avatar Icon
let avatar = BaseLGNAvatar()avatar.size = .lgavatar.imageSelection = UIImage(systemName: "plus")avatar.backgroundColorSelection = .blackavatar.iconTintSelection = .white
Avatar Initials
let avatar = BaseLGNAvatar()avatar.size = .lgavatar.textInitials = "Telkom Indonesia"avatar.backgroundColorSelection = .black
Size
You can customize the size of the button via the size
enum, where BaseLGNAvatar.Size
includes lg
, md
, sm
. xs
and xxs
.
Size | Image | Icon | Initials |
---|---|---|---|
Large | |||
Medium | |||
Small | |||
XSmall | |||
XXSmall |
let avatar = BaseLGNAvatar()avatar.size = .lgavatar.imageSelection = UIImage(named: "plus")