Properties

You will find DART-IDE very helpful as a user because of the Properties panel's various practical advantages. This document will give you a quick understanding of these properties by providing the following information about each property:

• Properties Panel: Display each property in the Properties panel that allows adjusting on the right side of the screen.

• Code Sample: Each property's code is generated automatically after dragging and dropping a component into UI Preview.

If you type code for Basic Component in Code Editor, the corresponding value will reflect in the Properties panel. Also, changing the properties of each Basic Component will auto-generate the corresponding code into Code Editor.

1. ID-Name

This property using for specifies a name for a component in IDE. When you drag and drop an item from Component Palette, Id-name is not automatically assigned. You can selectively give the value when you want to apply the id property value.

It helps you create a unique name for a chosen component that can easily differentiate from the others in Source Code.

For example, the first button component can be named "Button1" by the user, and then the second button component gets the name "Button2" so that the other user can identify them quickly on Sources Code if needed.

Properties Panel:

Code Sample:

<Accordion id="Accordion1"></Accordion>

2. Title

This property using for specifies the title of the current chosen component.

Properties Panel:

Code Sample:

<CardHeader title="Title1"></CardHeader>

3. Default Style

Depending on the perspective needed for the default, The property ranges that each component provides are all different, and even though they have the same property, the value range can differ.
For example, for the color property, most components usually provide primary, secondary, error, warning, info, and success as their values, but when it comes to <Slider> Component, primary and secondary are provided as color property values. Also, some components cannot have color properties.

Properties Panel:

These are default values set up already by IDE. It is based on particular needs so that you can choose and update the style which fits your demands.

<Button color=‘Inherit’></Button>

<ButtonGroup color=‘Inherit’></ButtonGroup>

<CircularProgress color=‘Primary’ />

<LinearProgress color="primary" />

<Radio color="primary"></Radio>

<Slider color="primary"></Slider>

<Switch color="primary"></Switch>

<ToggleButtonGroup color="primary"></ToggleButtonGroup>

<ToggleButton color="primary"></ToggleButton>

 <Alert severity="success"></Alert>

< Button Variant= ‘Outlined’></Button>

< ButtonGroup Variant= ‘Outlined’></ButtonGroup>

 <CircularProgress variant="determinate" />

<LinearProgress variant="determinate" />

<Tabs variant="fullWidth"></Tabs>

 <Typography variant="body1"></Typography>

<Grid direction="column-reverse">
</Grid>

<Stack direction="column-reverse">
</Stack>

<Grid columns={3}></Grid>

<Grid wrap="nowrap"></Grid>

<ButtonGroup orientation="horizontal”
 </ButtonGroup>

<Slider orientation="horizontal"></Slider>

<Tabs orientation="horizontal"></Tabs>

<FormControlLabel 
control={<Switch />} />

4. State

States inform the user of the status of UI elements. Each state must have distinct affordances that set it apart from the others and the surrounding layout while maintaining visual similarity and avoiding significant component changes.

A representative state property would typically have five options: Normal - Hover - Active - Focus - Visited

After you choose the kinds of state, you need to select types of Size and fill in such as Margin or Padding or Size Properties in PROPERTY Panel so that you can use State property.

Properties Panel:

Code Sample:

<Accordion sx={{ ':Active': {'marginTop': '150px' }}} ></Accordion>

5. Margin and Padding

Using the Margin and Padding property, you may quickly change the height/length of the component inside-out in the tricky locations on the screen. You can select a unit with an adjustable height/length to meet the situation. You will have various options to update and alter the margin and padding from left to right and from top to bottom, depending on multiple circumstances, to meet your needs.

Properties Panel:

Code Sample:

<Accordion
         sx={{ ':active': {'margin': '1px 3px 4px 2px',
                          'padding': '1px 3px 4px 2px'}, }}
</Accordion>

You can choose the types of size unit by a dropdown beside the number with five different size units: Px, %, Em, Rem, VW

6. Size

For this property part, the system would allow you to fix the Width and Height of Chosen Component. Depending on your needs, it can be selected and filled in with many size units.

In this Size property, the system would let the user adjust the value of the fourth properties: Type, Width, Height, and Full-width selections.

Properties Panel:

Code Sample:

<ButtonGroup
          size="medium"
          sx={{ 'width': '10px', 'height': '10px' }}
          fullWidth={true}
></ButtonGroup>

7. Alignment

In this property Alignment, we have developed Align-items for a suitable component such as ListItem. The Align-items property specifies the default alignment for items inside the flexible container.

Align-items has three values: None - Center - Flex-Start to fit the user's needs.

Properties Panel:

Code Sample:

<ListItem alignItems="center">

8. Layout

For this property, you can be flexible in choosing which types of Positions are needed. Additionally, the system might use the five types mentioned above to let you fix Top, Right, Bottom, and Left properties.

Depending on which types of tasks the user needs to resolve, the IDE properties panel offers the Position with five kinds of Positions required: None - Relative - Static - Fixed - Absolute.

Properties Panel:

Code Sample:

<Accordion
          sx={{ 'top': '120px', 'right': '200rem', 'bottom': '300em', 'left': '150px',
              'position': 'relative' }}>
</Accordion>

9. Source

In this part, the Source property would appear when you select and drop Image into UI Preview. After that, you can choose an image file from many sources from your computer or other sources that you need to import into IDE Codes.

To use this property, you should import by the File-uploading Button on the right side of Path. Then, you can choose a file and set up Alternate Text for the image you imported.

Properties Panel:

Code Sample:

<img alt="LocatingIcon" src={ Icon44334Copy}/>

10. Values

When you come to this property, there are many textboxes in each property that you can set up the value, defaultValue, or furthermore, you can build from max value to min value of the Basic Component whenever you need.

Properties Panel:

Code Sample:

<Slider value={12} defaultValue={10} max={200} min={5}></Slider>

11. Text

You can type text into the Text Input through the button's text property. Similarly, you may select the

• Font-family

• Font-weight

• Font-size

• Font-color

You may directly change the Text-alignment on this property section.

Properties Panel:

Code Sample:

 <ButtonGroup
              size="medium"
              sx={{'width': '10px',
                  'height': '10px',
                  'fontFamily': 'Noto-Sans',
                  'fontSize': '15px',
                  'fontWeight': 'lighter',
                  'color': '#089b1bff',
                  'justifyContent': 'center'}}
               fullWidth={true}
               label="Label1"">
  </ButtonGroup>

12. Label

Similar to the Text property, the Label property will also have many properties supporting Label like

• Font-Family

• Font-Weight

• Font-Size

• Text-align

• Font-Color

• Label-Placement.

Properties Panel:

Code Sample:

<FormLabel
            sx={{
              'fontFamily': 'Noto-Sans',
              'fontWeight': 'lighter',
              'fontSize': '10px',
              'color': '#4449ffff',
              'textAlign': 'center'}}>Label1
</FormLabel>

13. Icon

This property helps you set up the start and end icons of the button with URL input and the disabled/enabled mode that you can tick on the checkbox.

• Default

• Checked

• Indeterminate.

Properties Panel:

Code Sample:

 <Checkbox
                       icon={<img alt="Image" src={IconApproveIconSvg}/>}
                checkedIcon={<img alt="Image" src={IconA88a8cd82ccd942fe3593d73fc1fb8f7}/>}
          indeterminateIcon={<img alt="Image" src={Icon44334Copy1}/>}>
  </Checkbox>

Note: To access and import an icon from a computer or other sources via this property, you should:

• Mark the checkbox to turn Enabled mode.

• Select File-uploading Button to choose the Icon file from the Sources needed.

14. Avatar

In common, this property using for importing your Avatar on IDE.

Properties Panel:

Code Sample:

<CardHeader 
        avatar={<img alt="Image" src={Icon800pxSignCheckIconCopy} />}>
</CardHeader>

Similarly, you can set the Avatar property in the same way as the Icon property in Properties Panel.

• Mark the checkbox to turn the Enabled modes on

• Select a file to upload from the button, then select OK

15. Link

For this attribute, you would be able to enter the already made Href and the kinds of links you want to construct. If you use this property, create a Href and apply it to this input.

Additionally, it would be best if you made a plan to determine the types of connections and directions used.

• Href

• Type: _blank, _sefl, _parent, _top.

Properties Panel:

Code Sample:

<Fab href="Hello.com"  target="_self" ></Fab>

Depending on what the Type you choose, it will direct the Href based on this chosen Type

16. General

About this general property, the system will allow you to choose which types of visibility appear, such as Hidden or Visible. Besides, you can select Disabled modes, what kinds of cursors you use when hovering on the Button, Button Opacity or its background based on the available color board, and more. We will exemplify several properties below.

Disabled - DefaultExpanded - Expanded - Visibility - Opacity - Background:

Click here to expand...

Properties Panel:

Code Sample:

CODE

 <Accordion 
               disabled={true}
        defaultExpanded={true}
               Expanded={true}
          sx={{ 'visibility': 'hidden', 'opacity': 1, 'background':'Red'}}>   
 </Accordion>

Flex-Item - Orientation - Text-align - Variant:

Click here to expand...

Property Panel:

›Code Sample:

CODE

 <Divider
            flexItem={true}
            orientation="horizontal"
            textAlign="center"
            variant="fullWidth"
 </Divider>

Required - Error - Type - Adornment - Read-only - Default-value - Value - Placeholder - Helper-text:

Click here to expand...

Property Panel:

Code Sample:

CODE

 <TextField
              required={true}
              error={true}
              type="date"
              InputProps={{ 'readOnly': true }}
              defaultValue={15}>
 </TextField>

FirstButton - LastButton - Count - OnPageChange - Page - labelRowsPerPage - RowsPerPage:

Click here to expand...

Property Panel:

Code Sample:

CODE

 <TablePagination
                  count={5}
                  rowsPerPage={1}
                  page={1}
                  onPageChange={() => {}}
                  showFirstButton={true}
                  showLastButton={true}
                  labelRowsPerPage="InputLabel">
  </TablePagination>

Sticky-header:

Click here to expand...

Property Panel:

Code Sample:

CODE

<Table stickyHeader={true}></Table>

Selected - Cursor:

Click here to expand...

Property Panel:

To the types of Selected properties, a Textbox will appear if you continue to select the checkbox for flexibility for the user.

Code Sample:

CODE

<TableRow
            selected={true}
            sx={{ 'cursor': 'pointer', 'backgroundColor': 'Blue' }}>
</TableRow>

Text field - Checkbox:

Click here to expand...

Property Panel:

Code Sample:

CODE

<TableCell
           textField={true}
           checkbox={true} >
</TableCell>

Row:

Click here to expand...

Property Panel:

Code Sample:

CODE

<FormGroup
           Row={true}>
</FormGroup>

Open:

Click here to expand...

Property Panel:

Code Sample:

CODE

<Dialog
        open={true}>
</Dialog>

Indeterminate - Checked:

Click here to expand...

Property Panel:

Code Sample:

CODE

<Checkbox
          indeterminate={true}
          checked={true}>
</Checkbox>

Container - Item - Spacing - ColumnSpacing - RowSpacing:

Click here to expand...

Property Panel:

Code Sample:

CODE

<Grid
          container={true}
          item={true}
          spacing={25}
          columnSpacing={15}
          rowSpacing={10}>
  </Grid>

Inset:

Click here to expand...

Property Panel:

Code Sample:

CODE

<ListItemText
        Inset={true}>
</ListItemText>

Placement:

Click here to expand...

Property Panel:

Code Sample:

CODE

<Tooltip
        placement="bottom">
</Tooltip>

We will eliminate the codes and properties defined by the above samples to understand properties better.

17. Advanced Style

You will be allowed to add more codes to the pre-existing principles based on Classname and Inline Style at the final stage of the process. Since you can instantly and spontaneously alter and upgrade code whenever necessary, you can find it immensely beneficial.

CLASSNAME

Based on the available code page and its class, you can be able to input CSS Class to set a wide range of layouts and CSS for the chosen component, which will help you add code directly to this input. Furthermore, all the CSS codes of the class would be pre-populated, so this class will help you customize your CSS layout and save time when applying a wide range of components.

You can add many class names in Properties Panel.

Define Classname:

1. At EXPLORER Panel, select Asset → Style

2. Select style.scss.

3. Define Classname and CSS Properies.

Apply Classname into Component:

1. Select [+] at the end of the Classname Property Panel.

2. Select CSS File containing CSS defined

3. Fill in Classname defined in that CSS File.

Remove Classname:

• Select [-] at the left of chosen Classname box.

Cancel the adding progress:

• Select [x] at the right of the Dropdown.

Code Sample:

 <Button className={styles['root-template']}>Button</Button>

INTENTION:

• Classname always overwrites all the previously defined CSS Codes.

• However, you should not build a similar attribute with different values on many boxes because the last box will overwrite all the previously defined boxes.

INLINED STYLE

To set the layout for the chosen component, you can enter input CSS. Not similar to Classname, Inlined Style allows you to fix and adjust your CSS codes immediately on the Properties Panel. All the things you do is fill in the CSS codes that you need to customize your chosen component, and these codes will override the CSS codes that were defined before.

Properties Panel:

Code Sample:

 <Button
        style={{ 'background-color': 'Red', 'border-color': 'Blue' }}>Button
 </Button>

Style tag represents Inlined Style in Source Codes.

To create CSS in Inlined Style:

• Select [+] at the end of Inlined Style Property.

• Define CSS with your idea.

INTENTION:

• All Inlined Style always overwrites previously defined properties.

• However, you should not build a similar attribute with different values on many boxes because the last box will overwrite all the previously defined boxes.