@porsche-design-system/components-react
Version:
Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.
79 lines (78 loc) • 4.55 kB
TypeScript
import type { BaseProps } from '../../BaseProps';
import type { TextAlign, TextColor, TextHyphens, BreakpointCustomizable, TextSize, TextTag, TextWeight } from '../types';
export type PTextProps = BaseProps & {
/**
* Text alignment of the text. Use 'start' for left-aligned text (in LTR), 'center' for centered, 'end' for right-aligned (in LTR), or 'inherit' to adopt the parent's alignment.
* @default 'start'
*/
align?: TextAlign;
/**
* Text color of the text. Use 'primary' for default, 'contrast-higher' / 'contrast-high' / 'contrast-medium' for alternative emphasis levels, 'success' / 'warning' / 'error' / 'info' for status messages, or 'inherit' to adopt the parent's color.
* @default 'primary'
*/
color?: TextColor;
/**
* Adds an ellipsis to a single line of text if it overflows the container width. When enabled, the text is truncated to a single line with `text-overflow: ellipsis`. Cannot be combined with multi-line content.
* @default false
*/
ellipsis?: boolean;
/**
* Controls the hyphenation behavior of the text. Use 'auto' to let the browser automatically hyphenate words at appropriate points, 'manual' to only hyphenate at manually inserted hyphenation points (e.g. `­`), 'none' to disable hyphenation entirely, or 'inherit' to adopt the parent's hyphenation setting.
* @default 'inherit'
*/
hyphens?: TextHyphens;
/**
* Size of the text. Also defines the size for specific breakpoints, like {base: "sm", l: "md"}. You always need to provide a base value when doing this. Use 'inherit' to adopt the parent's font size.
* @default 'sm'
*/
size?: BreakpointCustomizable<TextSize>;
/**
* Sets the HTML tag of the rendered element to ensure correct semantic meaning (e.g. 'p' for paragraphs, 'blockquote' for quotes, 'time' for dates).
* @default 'p'
*/
tag?: TextTag;
/**
* The font weight of the text. Use 'normal' for regular body text, 'semibold' for slightly emphasized text, or 'bold' for strong emphasis.
* @default 'normal'
*/
weight?: TextWeight;
};
export declare const PText: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
/**
* Text alignment of the text. Use 'start' for left-aligned text (in LTR), 'center' for centered, 'end' for right-aligned (in LTR), or 'inherit' to adopt the parent's alignment.
* @default 'start'
*/
align?: TextAlign;
/**
* Text color of the text. Use 'primary' for default, 'contrast-higher' / 'contrast-high' / 'contrast-medium' for alternative emphasis levels, 'success' / 'warning' / 'error' / 'info' for status messages, or 'inherit' to adopt the parent's color.
* @default 'primary'
*/
color?: TextColor;
/**
* Adds an ellipsis to a single line of text if it overflows the container width. When enabled, the text is truncated to a single line with `text-overflow: ellipsis`. Cannot be combined with multi-line content.
* @default false
*/
ellipsis?: boolean;
/**
* Controls the hyphenation behavior of the text. Use 'auto' to let the browser automatically hyphenate words at appropriate points, 'manual' to only hyphenate at manually inserted hyphenation points (e.g. `­`), 'none' to disable hyphenation entirely, or 'inherit' to adopt the parent's hyphenation setting.
* @default 'inherit'
*/
hyphens?: TextHyphens;
/**
* Size of the text. Also defines the size for specific breakpoints, like {base: "sm", l: "md"}. You always need to provide a base value when doing this. Use 'inherit' to adopt the parent's font size.
* @default 'sm'
*/
size?: BreakpointCustomizable<TextSize>;
/**
* Sets the HTML tag of the rendered element to ensure correct semantic meaning (e.g. 'p' for paragraphs, 'blockquote' for quotes, 'time' for dates).
* @default 'p'
*/
tag?: TextTag;
/**
* The font weight of the text. Use 'normal' for regular body text, 'semibold' for slightly emphasized text, or 'bold' for strong emphasis.
* @default 'normal'
*/
weight?: TextWeight;
} & {
children?: import("react").ReactNode | undefined;
} & import("react").RefAttributes<HTMLElement>>;