How To

Customize the card image title position

Card Image titles are placed as always Bottom-Left Corner only, we can manually customize to placing titles anywhere over the image by adding styles.

Source
Preview
index.tsx
import { ChangeEventArgs, DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class ReactApp extends React.Component<{}, {}> {
  public fields: object = { text: 'pos', value: 'id' };
  public position: any = [
    { id: 'bottom-left', pos: 'BottomLeft' },
    { id: 'top-left', pos: 'TopLeft' },
    { id: 'top-right', pos: 'TopRight' },
    { id: 'bottom-right', pos: 'BottomRight' }];

  public onStateChange(e: ChangeEventArgs): void {
    const cardEle: Element = document.querySelector('.e-card') as Element;
    const titleEle: Element = cardEle.querySelector('.e-card-image .e-card-title') as Element;
    titleEle.className = ''
    titleEle.classList.add('e-card-title');
    titleEle.classList.add('e-card-' + e.value);
  }
  public render() {
    return (
      <div>
        <div id="sample">
          <div className="e-card">
            <div className="e-card-image">
              <div className="e-card-title">Node.Js </div>
            </div>
            <div className="e-card-content">
              Node.js is a wildly popular platform for writing web applications that has revolutionized web development in many ways, enjoying support across the open source community as well as industry.
            </div>
          </div>
        </div>
        <DropDownListComponent change={this.onStateChange} dataSource={this.position} fields={this.fields} placeholder="Select Position" width="300px" />
      </div>
    );
  }
}

ReactDOM.render(<ReactApp />, document.getElementById("element"));

Integrate other component inside the card

You can integrate any component inside the card element. Here ListView component is placed inside the card for showcasing the To-Do list.

Source
Preview
index.tsx
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class ReactApp extends React.Component<{}, {}> {
  public fields = { text: 'todoList' };
  // define the array of JSON
  public todoList: any = [
    { todoList: 'Pay Bills' },
    { todoList: 'Call Chris' },
    { todoList: 'Meet Andrew' },
    { todoList: 'Visit Manager' },
    { todoList: 'Customer Meeting' },
  ];
  public render() {
    return (
      <div>
        <div className="e-card" id="basic">
          <div className="e-card-title">To-Do List</div>
          <div className="e-card-separator" />
          <div className="e-card-content">
            <ListViewComponent dataSource={this.todoList} fields={this.fields} showCheckBox={true} />
          </div>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<ReactApp />, document.getElementById("element"));