پست ها توسط فرشته حقیقی

Collapse برای نشان دادن و یا مخفی کردن متن می باشد.به طور مثال ممکن است بخواهیم با کلیک بر روی یک لینک اطلاعات تکمیلی راجب موضوع مورد نظر خود به کاربر نشان بدهیم.collapse را می توانیم در دکمه و یا لینک استفاده کنیم.در حالت دکمه به صورت زیر پیاده سازی می شود.

<p>
  
  <button  type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" >
   Botstrap دوره
  </button>
</p>
<div class="collapse" id="collapseExample">  
   این دوره در 3 ماه و هر ماه 4 جلسه برگزار می شود....
</div>

data-target باید برابر id تگ مربوط به اطلاعات تکمیلی باشد.

در لینک نیز به صورت زیر استفاده می کنیم

<p>
  <a  data-toggle="collapse" href="#collapseExample"  aria-expanded="false" aria->
    bootstrap دوره
  </a>
</p>
<div class="collapse" id="collapseExample">
   این دوره در 3 ماه و هر ماه 4 جلسه برگزار می شود....
</div>

href باید برابر id تگ مربوط به اطلاعات تکمیلی باشد.

در هر دو حالت نیز مقدار data-toggle باید “collapse” باشد.

برای صفحه بندی از کلاس pagination استفاده می کنیم.همچنین می توانیم با توجه به نیاز خود و نوع صفحه بندی از تگ <nav> استفاده کنیم.مثلا برای نتایج جستجو می توانیم از کلاس Search results pages در این تگ استفاده کنیم.

<nav aria-label="Search results pages">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">قبل</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">بعد</a></li>
  </ul>
</nav>

درصورتیکه به جای کلمات قبل و بعد بخواهیم از آیکون استاده کنیم بصورت زیر عمل می کنیم

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">قبل</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">بعد</span>
      </a>
    </li>
  </ul>
</nav>

برای ایجاد کمبوباکس از کلاس dropdown و برای تعریف آیتمهای کمبوباکس از کلاسdropdown-menuبه صورت زیراستفاده می کنیم

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">1</a>
    <a class="dropdown-item" href="#">2action</a>
    <a class="dropdown-item" href="#">3 here</a>
  </div>
</div>

همچنین می توانیم از کلاسdropup استفاده کنیم که در اینصورت آیتم های کمبوباکس از بالا باز می شوند.

bootstrap چند کلاس مختلف برای نمایش پیام به کاربر دارد به اینصورت که بسته به نوع پیام،آنها را به رنگ های مختلف نشان می دهد.برای مثال پیغام های اخطار را با رنگ قرمز نشان می دهد.

<div class="alert alert-primary" role="alert">
   primary alert
</div>
<div class="alert alert-secondary" role="alert">
   secondary alert
</div>
<div class="alert alert-success" role="alert">
  success alert
</div>
<div class="alert alert-danger" role="alert">
  danger alert
</div>
<div class="alert alert-warning" role="alert">
   warning alert
</div>
<div class="alert alert-info" role="alert">
   info alert
</div>
<div class="alert alert-light" role="alert">
   light alert
</div>
<div class="alert alert-dark" role="alert">
  dark alert
</div>

برای اینکار باید از کلاس img-responsive استفاده کنیم.بنابراین تگ تصویر را به صورت زیر می نویسیم

<img src = "..." class = "img-responsive" alt = "Responsive image">

با استفاده از این کلاس اندازه عکس به صورت اتوماتیک متناسب با صفحه نمایش تنظیم می شود و بزرگتر از صفحه نمی شود.

bootstrap از ورژن 3 به بعد این قابلیت دارد که فرم ها در دستگاه های الکترونیکی مختلف مانند لپ تاپ تبلت و موبایل به درستی نمایش داده شوند و اندازه آنها خراب نشود.برای اینکار باید دستور زیر را در قسمت <head> فرم خود قرار دهیم.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

فیلد width پهنای صفحه نمایش را کنترل می کند.وقتی مقدار این فیلد را device-width قرار دهیم bootstrap آن را برای نمایش در دستگا های مختف تنظیم می کند.

فیلد 1.0=initial-scale کنترل می کند که صفحه در هنگام لود شدن زوم نشود.

همچنین برای اینکه صفحه در موبایل قابلیت زوم کردن نداشته باشد می توانیم ویژگی user-scalable = no را به فیلد content اضافه کنیم.دراینصورت فقط می توانیم صفحه را اسکرول کنیم.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

برای اینکار می توانیم از تکنیک hoover  در CSS استفاده کنیم.

<!DOCTYPE html>
<html>
<head>
<style>
div {background-color: green;}
div a {
  text-decoration: none;
  color: white;
  font-size: 20px;
  padding: 15px;
  display:inline-block;
}
ul {
  display: inline;
  margin: 0;
  padding: 0;
}

ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
  position: absolute;
  width: 200px;
  display: none;
}
ul li ul li { 
  background: #555; 
  display: block; 
}

</style>
</head>
<body>

<div>
  <ul>
    <li>
      <a href="#">Course</a>
      <ul>
        <li><a href="#">React</a></li>
        <li><a href="#">Spring</a></li>
        <li><a href="#">Bootstrrap</a></li>
      </ul>
    </li>
  </ul>
</div>

</body>
</html>

در خط

ul li:hover ul {display: block;}

گفتیم که زمانیکه موس روی عبارت Course قرار گرفت آیتم های کمبوباکس یعنی React و Spring و Bootstrap  نمایش داده شود.
همچنین در قسمت زیر

ul li ul {
  position: absolute;
  width: 200px;
  display: none;
}

display را برابر none قرار دادیم به این معنی که عبارتهای React  و Spring و Bootstrap در  حالت عادی نمایش داده نشوند.

برای نمایش عکس  در react bootstrap  از تگ Card.Img استفاده می  کنیم.

<Card style={{ width: "18rem" }}>
      <Card.Img variant="top" src={image} />
</Card>

می توانیم  برای  عکس ، عنوان و متن هم قرار دهیم.

<Card key={character.id} style={{ width: "18rem" }}>
  <Card.Img variant="top" src={character.image} />
  <Card.Body>
    <Card.Title>{character.name}</Card.Title>
    <Card.Text>{character.species}</Card.Text>
  </Card.Body>
</Card>;

برای اینکار بصورت زیر عمل می کنیم

<Table >
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Sara</td>
      <td>Sam</td>
    </tr>
    <tr>
      <td>Reza</td>
      <td>Jam</td>
    </tr>
  </tbody>
</Table>

در تگ <thead> ستونها و در تگ <tbody> رکوردهای جدول را وارد می کنیم.

با استفاده از size می توانیم سایز جدول را تغییر دهیم.

با استفاده از responsive می توانیم اسکرول افقی برای جدول قرار دهیم.

با استفاده از variant می توانیم پس زمینه جدول را تیره کنیم.

<Table responsive size="sm" variant="dark">

ارتباط بین react و spring  بوسیله فراخوانی سرویس انجام می شود.فرض کنیم می خواهیم یک لیست که از سرور پیاده سازی شده با spring گرفته ایم را در react نمایش دهیم.بصورت زیر عمل می کنیم

 async componentDidMount() {
    const response = await fetch('/api/groups');
    const body = await response.json();
    this.setState({ groups: body });
  }

در سمت spring نیز باید از انوتیشن های RequestMapping@ وGetMapping@ برای مشخص کردن سرویس استفاده کنیم

@RestController
@RequestMapping("/api")
class GroupController {
 @GetMapping("/groups")
    Collection<Group> groups() {
       ...
    }
}

برای اینکار از تکنیک hover استفاده می کنیم.این تکنیک می تواند برای همه بخش های سایت مانند دکمه ها، لینک ها،متن ها، آکون ها و سایر قسمتها استفاده شود.با استفاده از این تکنیک زمانیکه فرد موس را بر روی چیزی حرکت دهد رنگ و یا فونت آن تغییر می کند.از این تکینک بصورت زیر استفاده می کنیم

p:hover, h1:hover, a:hover {
  background-color: blue;
  font-size: 150%
}

p , h و a المانهای مورد نظر ما می باشند.

در مثال زیر با استفاده از این تکنیک رنگ و فونت یک لینک را در شرایط مختلف تغییر دهیم

<html>
<head>
<style>
/* unvisited link */
a:link {
  color: blue;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: red;
 }

/* selected link */
a:active {
  color: yellow;
} 
</style>
</head>
<body>

<p>visit the website: <a href="https://mustang.ir/questions/">https://mustang.ir/questions</a></p>

</body>
</html>

در اینجا گفتیم که زمانیکه هنوز لینک بازدید نشده رنگ آن آبی، زمانیکه بازدید شد رنگ آن سبز،زمانیکه موس را بروی لینک حرکت دادیم رنگ آن قرمز و زمانیکه بر روی آن کلیک کردیم زرد شود.

کامپوننت  react data grid این قابلیت را دارد که با کلیک بر روی هر ستون جدول داده iهای آن ستون به صورت صعودی یا نزولی مرتب شود.برای اینکار بصورت زیر پیاده سازی می کنیم

import React, { useState } from "react";
import ReactDOM from "react-dom";
import ReactDataGrid from "react-data-grid";

import createRowData from "./createRowData";

const columns = [
  {
    key: "id",
    name: "ID",
    sortDescendingFirst: true
  },
  {
    key: "title",
    name: "Title"
  },
  {
    key: "firstName",
    name: "First Name"
  },
  {
    key: "lastName",
    name: "Last Name"
  },
  {
    key: "email",
    name: "Email"
  }
  
].map(c => ({ ...c, ...defaultColumnProperties }));

const ROW_COUNT = 50;

const sortRows = (initialRows, sortColumn, sortDirection) => rows => {
  const comparer = (a, b) => {
    if (sortDirection === "ASC") {
      return a[sortColumn] > b[sortColumn] ? 1 : -1;
    } else if (sortDirection === "DESC") {
      return a[sortColumn] < b[sortColumn] ? 1 : -1;
    }
  };
  return sortDirection === "NONE" ? initialRows : [...rows].sort(comparer);
};

function Example({ initialRows }) {
  const [rows, setRows] = useState(initialRows);
  return (
    <ReactDataGrid
      columns={columns}
      rowGetter={i => rows[i]}
      rowsCount={ROW_COUNT}
      minHeight={500}
      onGridSort={(sortColumn, sortDirection) =>
        setRows(sortRows(initialRows, sortColumn, sortDirection))
      }
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example initialRows={createRowData(50)} />, rootElement);

برای اینکار به صورت زیر  عمل می کنیم

import { IgrDataGridModule } from 'igniteui-react-grids';
import { IgrDataGrid } from 'igniteui-react-grids';

<IgrDataGrid
    height="100%"
    width="100%"
    dataSource={this.data}
    autoGenerateColumns="false">
    <IgrNumericColumn field="ProductID" headerText="Product ID"/>
    <IgrTextColumn field="ProductName" headerText="Product Name"/>
    <IgrTextColumn field="QuantityPerUnit" headerText="Quantity Per Unit"/>
    <IgrNumericColumn field="UnitsInStock" headerText="Units In Stock"/>
    <IgrDateTimeColumn field="OrderDate" headerText="Order Date"/>
</IgrDataGrid>

همانطور که می بینیم برای فیلدهای عددی از تگ IgrNumericColumn و برای  فیلدهای متنی از تگ IgrTextColumn استفاده می  کینم.

Ignite UI کامپوننتی در  react برای ایجاد جدول و گرید می باشد.این کامپوننت به دلیل سادگی در  استفاده و عملکرد بالا یکی از کامکپوننت های محبوب در react می باشد.برای نصب این کامپوننت دستورات زیر  را اجرا می کنیم.

npm install --save igniteui-react-core
npm install --save igniteui-react-grids
npm install --save igniteui-react-inputs

برای پیاده سازی کمبوباکس از تگ SelectBox استفاده می کنیم.

import React from 'react';

import { SelectBox } from 'devextreme-react/select-box';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      allMode: 'allPages',
    };

    this.onAllModeChanged = this.onAllModeChanged.bind(this);
  }

  render() {
    const { allMode} = this.state;

    return (
      <div>
       
        <div className="options">
          <div className="option">
            <span>Select All Mode </span>
            <SelectBox
              id="select-all-mode"
              dataSource={['allPages', 'page']}
              value={allMode}
              disabled={checkBoxesMode === 'none'}
              onValueChanged={this.onAllModeChanged}
            />
          </div>
          
        </div>
      </div>
    );
  }

 

  onAllModeChanged({ value }) {
    this.setState({ allMode: value });
  }
}

export default App;

dataSource : در این خصوصیت آیتم های کمبوباکس را می دهیم.

value : مقداری که سمت سرور فرستاده می شود.

disabled : برای غیرفعال کردن کمبوباکس در صورت تمایل

onValueChanged : متدی که هنگام انتخاب یک آیتم از کمبوباکس فراخوانی می شود.

برای پیاده سازی checkbox روش های مختلفی وجود دارد. یک پیاده سازی آسان به صورت زیر می باشد:

import React from 'react';

import DataGrid,Selection from 'devextreme-react/data-grid';
import { data } from './data.js';

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <DataGrid
          dataSource={data}
          showBorders={true}
          keyExpr="orderId"
        >
          <Selection
            mode="multiple"            
          />
          <Column dataField="orderId" caption="Order ID"  />
          <Column dataField="city" caption="City"/>
          <Column dataField="country" caption="Country"/>
          <Column dataField="region" caption="Region"/>
          <Column dataField="date" dataType="date" caption="Date"/>
          <Column dataField="amount" format="currency" caption="Amount"/>
        </DataGrid>                  
        </div>
    );
  }
}

export default App;

در اینجا داده های جدول را ار یک فایل به نام data.js خوانده ایم.همه رکوردهای جدول باید مطابق زیر در فایل تعریف شده باشند:

export const data = [{
  'orderId': 10248,
  'region': 'North America',
  'country': 'United States',
  'city': 'New York',
  'amount': 1740,
  'date': '2013/01/06' 
}];

برای اینکار از تگ زیر استفاده می کنیم:

import  DataGrid  from "react-data-grid";
<DataGrid
  pageSize={5}
  rowsPerPageOptions={[5, 10, 20]}
  pagination
  {...data}
/>

pageSize : مقدار پیش فرض این خصوصیت 100 می باشد.

rowsPerPageOptions : می توانید به کاربر این امکان را بدهید که انتخاب کند در هر صفحه چند سطر نمایش داده شود.

این دو ویژگی اختیاری می باشند و می توانید از آنها استفاده نکنید.

می توانیم از autoPageSize برای اتومات کردن سایز هر صفحه استفاده کنیم. در اینصورت ماکسیمم تعداد سطری که در هر صفحه می شود نمایش داد، توسط سرور انتخاب می شود.

<DataGrid autoPageSize pagination {...data} />