@aaronschubert0/blocks 中文文档教程

Question

Blocks

Platform differences

lineHeight

type PixelLineHeight = string;
type RelativeLineHeight = number;
/* Web */
type LineHeight = RelativeLineHeight | PixelLineHeight;
/* iOS & Android */
type LineHeight = PixelLineHeight;

type LineHeight = PixelLineHeight;

borderStyle

/**
 * Web
 *
 * @required for border to appear
 *
 * @default "none"
 */
type BorderStyle =
  | "none"
  | "hidden"
  | "dotted"
  | "dashed"
  | "solid"
  | "double"
  | "groove"
  | "ridge";

/**
 * iOS & Android
 *
 * @optional
 *
 * @default "solid"
 */
type BorderStyle = "solid" | "dotted" | "dashed";

/**
 * blocks
 *
 * @optional
 *
 * @default "solid"
 */
type BorderStyle = "solid" | "dotted" | "dashed";

boxSizing

/**
 * Web
 *
 * @optional
 *
 * @default "content-box"
 */
type BoxSizing = "content-box" | "border-box";

/**
 * iOS & Android
 *
 * @default "border-box"
 */
type BoxSizing = "border-box";

/**
 * blocks
 *
 * @default "border-box"
 */
type BoxSizing = "border-box";

shadow

/**
 * Web
 *
 * @optional
 *
 * @default "none"
 */
interface Shadow {
  inset?: boolean;
  offsetX: PixelValue;
  offsetY: PixelValue;
  blurRadius: PixelValue;
  spreadRadius: PixelValue;
  color: Color;
}

/**
 * iOS
 *
 * @optional
 *
 * @default undefined
 */

interface ShadowOffset {
  width: number; // x
  height: number; // y
}

interface Shadow {
  shadowColor: Color;
  shadowOffset: ShadowOffset;
  shadowOpacity: number;
  shadowRadius: number;
}

/**
 * Android
 *
 * @optional
 *
 * @default undefined
 */

interface Shadow {
  elevation: number;
}

/**
 * blocks
 *
 * @optional
 *
 * @default undefined
 */
interface Shadow {
  color: Color;
  offset: {
    x: number;
    y: number;
  };
  opacity: number;
  radius: number;
}

fontFamily

/**
 * Web, iOS, Android & blocks
 *
 * @optional
 *
 * @default OS/Device Specific
 *
 * String specified is unique per platform hence it's inclusion.
 */
type FontFamily = string;

CSS Values

display

/**
 * Web
 *
 * @optional
 *
 * @default element specific
 */

type Display = "block" | "grid" | "flex" | "inline" | "table" ...

/**
 * iOS & Android
 *
 * @optional
 *
 * @default "flex"
 */

type Display = "flex"

/**
 * blocks
 *
 * @optional
 *
 * @default "flex"
 */

type Display = "flex";

Rendering Text

在 Web 上，您可以在 DOM 中的任何位置呈现文本，在 iOS 和 Android 上。 Android 只能在 组件中呈现文本。 块遵守此约定，这意味着任何文本都必须包装在 组件中。

Outline / Border

Web、iOS 和 Android 支持边框。 大纲仅在 Web 上受支持。 因此块目前只支持边框。