Skip to content

原子组件-Placehold

November 20, 2024 by ccforeverd

介绍原子组件 Placehold 的使用方法

传参和渲染

类型
interface PlaceholdProps {
  /**
   * The width of the placeholder
   */
  width: number;
  /**
   * The height of the placeholder
   * @default the same as width
   */
  height?: number;
  /**
   * The base URL of the placeholder service
   * @default https://placehold.co
   */
  baseUrl?: string;
  /**
   * The image type of the placeholder
   * @default svg
   */
  type?: 'svg' | 'png' | 'jpeg' | 'gif' | 'webp';
  /**
   * The background color and text color of the placeholder
   */
  colors?: [backgroundColor: string, textColor: string];
  /**
   * The text of the placeholder
   */
  text?: string;
  /**
   * The font of the text
   * @default lato
   */
  font?:
    | 'lato'
    | 'lora'
    | 'montserrat'
    | 'open-sans'
    | 'oswald'
    | 'playfair-display'
    | 'pt-sans'
    | 'raleway'
    | 'roboto'
    | 'source-sans-pro'
    | string;
  /**
   * The retina of the placeholder
   * @default 1
   * @description support @2x, @3x, only type is not svg
   */
  retina?: 1 | 2 | 3;
}

示例

placehold
placehold
placehold
placehold
placehold
placehold
placehold