@ownclouders/design-system
Version:
ownCloud Design System is based on VueDesign Systems and is used to design ownCloud UI components
47 lines (46 loc) • 1.98 kB
TypeScript
/**
* OcAvatarItem - A base component for displaying customizable avatar items with icons.
*
* @prop {string} name - Name of the public link used as an accessible label
* @prop {string} [icon=null] - Icon that should be used for the avatar
* @prop {string} [iconColor='var(--oc-color-text-inverse)'] - Color that should be used for the icon
* @prop {string} [iconFillType='fill'] - Fill-type that should be used for the icon
* @prop {string} [iconSize='small'] - Describes the size of the avatar icon e.g.(small)
* @prop {string} [background='var(--oc-color-swatch-passive-default)'] - Background color that should be used for the avatar.
* If empty a random color will be picked
* @prop {string} [accessibleLabel=''] - Accessibility label used as alt. Use only in case the avatar is used alone.
* In case the avatar is used next to username or display name leave empty.
* If not specified, avatar will get `aria-hidden="true"`.
* @prop {number} [width=30] - Describes the width of the avatar
*
* @example
* ```vue
* <!-- Basic usage -->
* <oc-avatar-item name="name" accessible-label="name" />
*
* <!-- With icon and default background -->
* <oc-avatar-item name="name" icon="close" accessible-label="name" />
*
* <!-- With custom styling -->
* <oc-avatar-item
* name="name"
* icon="close"
* background="#465a64"
* :width="100"
* icon-size="large"
* accessible-label="name"
* />
* ```
*/
interface Props {
name: string;
icon?: string;
iconColor?: string;
iconFillType?: string;
iconSize?: string;
background?: string;
accessibleLabel?: string;
width?: number;
}
declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
export default _default;