@ownclouders/design-system
Version:
ownCloud Design System is based on VueDesign Systems and is used to design ownCloud UI components
42 lines (41 loc) • 1.76 kB
TypeScript
import { ContextualHelperDataListItem } from '../../helpers';
/**
* OcContextualHelper - A component that displays contextual help information in a dropdown when clicked.
* It shows a question mark icon that opens additional information in a popup.
*
* @prop {string} title - The title text displayed in the header of the contextual helper popup.
* @prop {string} [text=''] - Optional main descriptive text content.
* @prop {ContextualHelperDataListItem[]} [list=[]] - Optional array of list items to display in a definition list format.
* @prop {string} [endText=''] - Optional text displayed after the list and before the "Read more" link.
* @prop {string} [readMoreLink=''] - Optional URL for the "Read more" link that opens in a new tab.
*
* @example
* ```vue
* <!-- Basic usage -->
* <oc-contextual-helper
* title="title?"
* text="explanation text"
* />
*
* <!-- With list and read more link -->
* <oc-contextual-helper
* title="title?"
* text="explanation text"
* :list="[
* { text: 'Personal storage: 5GB', headline: true },
* { text: 'Project storage: 50GB', headline: true }
* ]"
* end-text="Contact your administrator for more space."
* read-more-link="https://docs.example.com/storage-quotas"
* />
* ```
*/
interface Props {
title: string;
text?: string;
list?: ContextualHelperDataListItem[];
endText?: string;
readMoreLink?: string;
}
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;