Products

[Markov]

Hi,

Add the ‘theme’ attribute to the body tag and set it to “dark” to apply the dark theme. To un-apply it, remove the ‘theme’ attribute.

Alternatively, use the CSS variables API of the components.

For example:

/* Light theme */
:root {
  --smart-background: #ffffff;
  --smart-surface: #f9f9f9;
  --smart-border: #ddd;
  --smart-primary: #6610F2;
  --smart-color: #000000;
}

/* Dark theme */
.dark {
  --smart-background: #121212;
  --smart-surface: #1e1e1e;
  --smart-border: #333;
  --smart-primary: #00D647;
  --smart-color: #ffffff;
} 

Hope this helps.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

You can customize the CSS by using the CSS variable API of the Kanban

smart-kanban {
  --smart-primary: #6610F2;
  --smart-background: #f5f5f5;
  --smart-border-radius: 10px;
  --smart-kanban-card-color: white;
  --smart-kanban-card-background: #E7D9F8;
}

Also, take a look at https://www.htmlelements.com/angular/demos/kanban/kanban-custom-styling/

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

At present, the Smart Editor does not have a placeholder support. We will add a new work item for this missing feature.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

A pie chart can show percentages inside the slices. For this purpose you can use the formatFunction for this purpose.

Please, look at the sample code below:

const data = [
    { Category: 'A', Value: 30 },
    { Category: 'B', Value: 50 },
    { Category: 'C', Value: 20 }
  ];

  const chart = new window.Smart.Chart('#chart', {
    caption: "Pie Chart with Percentages",
    description: "Smart Chart - Pie example",
    showLegend: true,
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
    dataSource: data,
    seriesGroups: [
      {
        type: 'pie',
        showLabels: true,
        series: [
          {
            dataField: 'Value',
            displayText: 'Category',
            // Format label to show percentage
            formatFunction: function (value, itemIndex, serie, group) {
              const total = data.reduce((sum, d) => sum + d.Value, 0);
              const percent = (value / total * 100).toFixed(1) + '%';
              return percent;
            }
          }
        ]
      }
    ]
  });

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Each task has an onRender callback which we call like this: task.onRender(task, segment, taskBar, segmentElement, labelWrapper);

We pass the task and the HTML Elements of the task so you can apply conditional rendering depending on task details. Hope this helps for the Gantt chart.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Smart Grid (smart-grid) is responsive out of the box, but to make it adapt nicely across different screen sizes you usually combine a few things:

Use percentage or auto width/height

Instead of fixed px, let the Grid resize with its container:

<smart-grid id="grid"></smart-grid>

<style>
  smart-grid {
    width: 100%;
    height: 100%;
  }

  /* Example: responsive container */
  .grid-container {
    width: 100%;
    height: calc(100vh - 100px);
    overflow: hidden;
  }
</style>

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

We do not have known issues with the Kanban. Also, set the virtualization: true property and it will be in virtualized mode.

Hope this helps.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

For example:

<template>
  <smart-editor :value="content" @change="onChange"></smart-editor>
  <p>Editor content: {{ content }}</p>
</template>

<script>
export default {
  data() {
    return {
      content: "<p>Hello World</p>"
    };
  },
  methods: {
    onChange(event) {
      this.content = event.detail.value; // Smart.Editor emits the new value here
    }
  }
};
</script>

Hope this helps.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Please, look at https://www.htmlelements.com/docs/table-css/. The help topic shows how to customize the themes of the Table component.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

No, we do not support server-side rendering. Our components are client-side components written in Javascript.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

You can use its setDate and getDate methods to set and get dates or bind its value property to a Blazor variable.

<DateTimePicker @bind-Value="@selectedDate" FormatString="dd/MM/yyyy HH:mm" />

<p>Selected: @selectedDate</p>

@code {
    private DateTime selectedDate = DateTime.Now;
}

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

You can use the “change” event. It is triggered when the content is changed.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

This is the specific path. It is in the source/modules folder.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

You can theme Smart Kanban in a web project by overriding its built-in CSS variables and styles, without modifying the library’s core files.

Smart UI components, including Kanban, are built with CSS custom properties (variables), which makes theming straightforward.

For example:

--smart-primary: #3f51b5;
--smart-background: #ffffff;
--smart-surface: #f5f5f5;
--smart-border-color: #ddd;
--smart-border-radius: 4px;
--smart-font-size: 14px;
--smart-kanban-column-header-background: #f0f0f0;
--smart-kanban-task-background: #fff;

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Yes, it is possible to lazy load the Kanban. Please, take a look at : https://www.htmlelements.com/react/demos/kanban/server-side-crud/
Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts