Customize the card image title position in React Card component

30 Jan 202318 minutes to read

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.

[Class-component]

import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class ReactApp extends React.Component {
    fields = { text: 'pos', value: 'id' };
    position = [
        { id: 'bottom-left', pos: 'BottomLeft' },
        { id: 'bottom-right', pos: 'BottomRight' },
        { id: 'top-left', pos: 'TopLeft' },
        { id: 'top-right', pos: 'TopRight' }
    ];
    constructor(props) {
        super(props);
        this.state = {
            isHorizontal: false,
            positionClass: 'e-card-bottom-left'
        };
    }
    onPositionChange(e) {
        this.setState({
            positionClass: 'e-card-' + e.value
        });
    }
    onDirectionChange(e) {
        const value = (e.checked) ? true : false;
        this.setState({ isHorizontal: value });
    }
    render() {
        return (<div>
        <br />
        <div className="row">
          <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <CheckBoxComponent checked={false} label='Horizontal' change={this.onDirectionChange = this.onDirectionChange.bind(this)}/>
          </div>
          <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <DropDownListComponent change={this.onPositionChange = this.onPositionChange.bind(this)} dataSource={this.position} fields={this.fields} placeholder="Select Position" width="300px"/>
          </div>
        </div>
        <br />
        <div id="sample row">
          <div className={'e-card ' + `${(this.state.isHorizontal) ? 'e-card-horizontal' : ''}`}>
            <div className="e-card-image">
              <div className={'e-card-title ' + `${this.state.positionClass}`}>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>
      </div>);
    }
}
ReactDOM.render(<ReactApp />, document.getElementById("element"));
import { ChangeEventArgs as EventArgs, CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
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<{}, { positionClass: string, isHorizontal: boolean }> {
  public fields: object = { text: 'pos', value: 'id' };
  public position: any = [
    { id: 'bottom-left', pos: 'BottomLeft' },
    { id: 'bottom-right', pos: 'BottomRight' },
    { id: 'top-left', pos: 'TopLeft' },
    { id: 'top-right', pos: 'TopRight' }
  ];

  constructor(props: {}) {
    super(props);
    this.state = {
      isHorizontal: false,
      positionClass: 'e-card-bottom-left'
    }
  }

  public onPositionChange(e: ChangeEventArgs): void {
    this.setState({
      positionClass: 'e-card-' + e.value
    });
  }

  public onDirectionChange(e: EventArgs): void {
    const value: boolean = (e.checked) ? true : false;
    this.setState({ isHorizontal: value });
  }

  public render() {
    return (
      <div>
        <br />
        <div className="row">
          <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <CheckBoxComponent checked={false} label='Horizontal' change={this.onDirectionChange = this.onDirectionChange.bind(this)} />
          </div>
          <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <DropDownListComponent change={this.onPositionChange = this.onPositionChange.bind(this)} dataSource={this.position} fields={this.fields} placeholder="Select Position" width="300px" />
          </div>
        </div>
        <br />
        <div id="sample row">
          <div className={'e-card ' + `${(this.state.isHorizontal) ? 'e-card-horizontal' : ''}`}>
            <div className="e-card-image">
              <div className={'e-card-title ' + `${this.state.positionClass}`}>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>
      </div>
    );
  }
}
ReactDOM.render(<ReactApp />, document.getElementById("element"));

[Functional-component]

import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from "react";
import { useState } from 'react';
import * as ReactDOM from "react-dom";
function ReactApp() {
    let fields = { text: 'pos', value: 'id' };
    let position = [
        { id: 'bottom-left', pos: 'BottomLeft' },
        { id: 'bottom-right', pos: 'BottomRight' },
        { id: 'top-left', pos: 'TopLeft' },
        { id: 'top-right', pos: 'TopRight' }
    ];
    const [status, setStatus] = useState({ isHorizontal: false, positionClass: 'e-card-bottom-left' });
    function onPositionChange(e) {
        setStatus({ isHorizontal: status.isHorizontal,
            positionClass: 'e-card-' + e.value
        });
    }
    function onDirectionChange(e) {
        const value = (e.checked) ? true : false;
        setStatus({ isHorizontal: value, positionClass: status.positionClass });
    }
    return (<div>
          <br />
          <div className="row">
            <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
              <CheckBoxComponent checked={false} label='Horizontal' change={onDirectionChange.bind(this)}/>
            </div>
            <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
              <DropDownListComponent change={onPositionChange.bind(this)} dataSource={position} fields={fields} placeholder="Select Position" width="300px"/>
            </div>
          </div>
          <br />
          <div id="sample row">
            <div className={'e-card ' + `${(status.isHorizontal) ? 'e-card-horizontal' : ''}`}>
              <div className="e-card-image">
                <div className={'e-card-title ' + `${status.positionClass}`}>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>
        </div>);
}
ReactDOM.render(<ReactApp />, document.getElementById("element"));
import { ChangeEventArgs as EventArgs, CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { ChangeEventArgs, DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from "react";
import { useState } from 'react';
import * as ReactDOM from "react-dom";

function ReactApp (){
    let fields: object = { text: 'pos', value: 'id' };
    let position: any = [
      { id: 'bottom-left', pos: 'BottomLeft' },
      { id: 'bottom-right', pos: 'BottomRight' },
      { id: 'top-left', pos: 'TopLeft' },
      { id: 'top-right', pos: 'TopRight' }
    ];  
  const [status, setStatus] = useState({ isHorizontal: false,positionClass: 'e-card-bottom-left'});
  
    function onPositionChange(e: ChangeEventArgs): void {
         setStatus({isHorizontal:status.isHorizontal,
        positionClass: 'e-card-' + e.value
      });
    }
  
    function onDirectionChange(e: EventArgs): void {
      const value: boolean = (e.checked) ? true : false;
       setStatus({ isHorizontal: value,positionClass:status.positionClass });
    }
  
  
      return (
        <div>
          <br />
          <div className="row">
            <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
              <CheckBoxComponent checked={false} label='Horizontal' change={onDirectionChange.bind(this)}  />
            </div>
            <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
              <DropDownListComponent change={onPositionChange.bind(this)} dataSource={position} fields={fields} placeholder="Select Position" width="300px" />
            </div>
          </div>
          <br />
          <div id="sample row">
            <div className={'e-card ' + `${(status.isHorizontal) ? 'e-card-horizontal' : ''}`}>
              <div className="e-card-image">
                <div className={'e-card-title ' + `${status.positionClass}`}>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>
        </div>
      );
  
  }ReactDOM.render(<ReactApp />, document.getElementById("element"));