Component Library

To unify the UI style and quickly develop plugins, we have built-in some component libraries for everyone to use quickly

Default Parameter Setting Components

The default parameter setting components can be used directly without passing any parameters.

• Background background color setting
• BlendMode element blend mode setting
• Align element alignment setting
• Opacity element opacity setting
• Animation element animation setting
• Position element coordinate position setting
• Rotation element rotation angle setting
• Size element width and height setting
• Mask element mask setting
• TemplateMode template parameter setting

Usage example:

<Size />

Parameterized Components

The components here are pure components with no business intersection with the editor

Item Component for Layout

Parameter description:

export interface IProps {
  title: string | JSX.Element; // Title
  children?: JSX.Element; // Child elements
  className?: string; // Custom class name
  extra?: any; // Element module on the right side of the title
  style?: Record<string, any>; // Custom style
}

Usage example:

<Item title="Module Name">
  <Input />
</Item>

Color Color Picker

Parameter description:

export interface IProps {
  value: string; // Color value, such as '#000000' or 'rgba(0,0,0,1)'
  style?: Record<string, any>; // Custom style
  onChange: (v: { hex: string }) => void; // Triggered when value changes
  onAfterChange?: (v: { hex: string }) => void; // Triggered after modification is completed
}

Usage example:

import React, { useState } from "react";

const [val, setVal] = useState("#000000");

<Color
  value={val}
  onChange={(v) => {
    setVal(v.hex);
  }}
/>

GradualColor Gradient Color Setting Component

Parameter description:

export interface IProps {
  colors: { color: string; p: number }[]; // Color values, such as [{color: '#000000', p: 0}, {color: '#fff000', p: 1}]
  onChange: (colors: { color: string; p: number }[]) => void; // Triggered when value changes
  onAfterChange?: (colors: { color: string; p: number }[]) => void; // Triggered after modification is completed
}

Usage example:

import React, { useState } from "react";

const [val, setVal] = useState([
  { color: "#000000", p: 0 },
  { color: "#fff000", p: 1 },
]);

<GradualColor
  value={val}
  onChange={(colors) => {
    setVal(colors);
  }}
/>

Themes

Mainly divided into black theme and white theme, with built-in CSS variables for everyone to make UI

Black Theme

--theme-bg #16161a

--theme-bg2 rgba(0, 0, 0, 0.5)

--theme-text rgba(255, 255, 255, 1)

--theme-text2 rgba(0, 0, 0, 1)

--theme-input-text rgba(255, 255, 255, 0.3)

--theme-text-default rgba(255, 255, 255, 0.5)

--theme-text-hover rgba(255, 255, 255, 1)

--theme-text-active rgba(255, 255, 255, 1)

--theme-main #0066ff

--theme-input rgba(255, 255, 255, 0.2)

--theme-icon rgba(255, 255, 255, 1)

--theme-timeline-bg rgba(0, 0, 0, 0.3)

--theme-timeline-textColor #ffffff

--theme-timeline-linebg rgba(255, 255, 255, 0.04)

--theme-timeline-infobg rgba(0, 0, 0, 0.5)

--theme-timeline-cursor rgba(255, 255, 255, 1)

--theme-timeline-trackLine rgba(255, 255, 255, 0.04)

--theme-border 1px solid rgba(255, 255, 255, 0.05)

--theme-border2 1px solid rgba(0, 0, 0, 0.1)

--theme-wateritem rgba(255, 255, 255, 0.1)

White Theme

--theme-bg #F3F3F3

--theme-bg2 rgba(255, 255, 255, 0.5)

--theme-text rgba(0, 0, 0, 1)

--theme-text2 rgba(0, 0, 0, 0.6)

--theme-input-text rgba(0, 0, 0, 0.3)

--theme-text-default rgba(0, 0, 0, 0.5)

--theme-text-hover rgba(255, 255, 255, 1)

--theme-text-active rgba(0, 0, 0, 1)

--theme-main #0066ff

--theme-input rgba(0, 0, 0, 0.1)

--theme-icon rgba(0, 0, 0, 1)

--theme-timeline-bg rgba(255, 255, 255, 0.3)

--theme-timeline-textColor #000000

--theme-timeline-linebg rgba(0, 0, 0, 0.04)

--theme-timeline-infobg rgba(255, 255, 255, 0.5)

--theme-timeline-cursor rgba(0, 0, 0, 1)

--theme-timeline-trackLine rgba(0, 0, 0, 0.04)

--theme-border 1px solid rgba(0, 0, 0, 0.05)

--theme-border2 1px solid rgba(255, 255, 255, 0.1)

--theme-wateritem rgba(0,0,0,0.05)