Basic Components

What is the Basic Component?

Basic Component (Basic Component) is a type of UI component used in Dr.Dart-IDE. All the components are essential but have simple functions. An example is, such as the Table, Box, Divider, Checkbox, etc. Basic Component is the default appearance on IDE, and you can drag & drop Basic Component into UI Preview without coding.

Basic Components Type

The Basic Component list of Dart-IDE is largely divided into UNIT and ATOMIC types, as shown below.

ATOMIC is the most basic unit of UI Component, and the UNIT is a combination of ATOMIC Components.

Type

Explanation

ATOMIC

The most basic unit of Material UI Component

UNIT

Combination of Atomic components frequently used in UI screen composition

※ However, it is only a combination of ATOMIC components, not a separate component unit.

e.g.) When dragging & dropping 'Checkbox with Label', the following Atomic component codes are created at once

CODE

    ...
    <FormControl>
        <FormLabel>label-name</FormLabel>
        <FormGroup>
            <FormControlLabel label={"Label"} control={ <Checkbox /> } />
        </FormGroup>
    </FormControl>
    ...

Articles

Properties

Unit Components

Atomic Components

How to use Basic Component?

Then, there are some steps you can follow to use Basic Component quickly.

Step 1: Open DART-IDE, then choose Basic Component in the COMPONENT PALETTE panel.

Step 2: Drag & drop the Basic Component that you want from the COMPONENT PALETTE panel into the UI PREVIEW panel.

After dragging and dropping progress, the UI PREVIEW will display the corresponding Basic Component layout.

Also, the source code of this Basic Component will be generated automatically into the CODE EDITOR.

Step 3: Click the Basic Component in the UI PREVIEW panel to view:

PROPERTY panel on the right side.
Its child components are in the COMPONENT TREE panel on the left side.

You can change its properties from the Property panel or source code in Code Editor.