در این مقاله ، ما قصد داریم با استفاده از React یک سوییچ ضامن مبتنی بر iOS ایجاد کنیم. این یک جز small کوچک و خودمختار است که در پروژه های آینده قادر خواهید بود از آن استفاده مجدد کنید. با رفتن ، ما همچنین یک برنامه آزمایشی ساده نشان می دهیم که از م switchلفه سوئیچ ضامن سفارشی ما استفاده می کند.

ما می توانیم از کتابخانه های شخص ثالث برای این کار استفاده کنیم ، اما ساختن از ابتدا به ما امکان می دهد که نحوه کار کد خود را بهتر بشناسیم و به ما امکان می دهد تا م componentلفه خود را کاملاً سفارشی کنیم.

فرم ها وسیله اصلی برای امکان تعاملات کاربر را فراهم می کنند. کادر تأیید به طور سنتی برای جمع آوری داده های باینری استفاده می شود – مانند آره یا نه، درست است، واقعی یا نادرست، فعال کردن یا غیر فعال کردن، بر یا خاموش، و غیره اگرچه برخی از طراحی های مدرن رابط هنگام ایجاد سوئیچ های ضامن ، از قسمت های فرم دور می شوند ، اما به دلیل قابلیت دسترسی بیشتر ، در اینجا باقی می مانم.

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

دو کلید کوچک و دو بزرگ ضامن هم در حالت بررسی شده و هم در حالت کنترل نشده

شروع شدن

بیایید از ایجاد React App برای راه اندازی سریع برنامه React استفاده کنیم. اگر با ایجاد React App آشنا نیستید ، راهنمای شروع به کار ما را بررسی کنید.

create-react-app toggleswitch

پس از نصب همه موارد ، به فهرست ایجاد شده جدید وارد شوید و سرور را با آن شروع کنید yarn start (یا npm start اگر ترجیح می دهید). با این کار سرور توسعه در شروع می شود http: // localhost: 3000.

بعد ، ایجاد کنید ToggleSwitch فهرست در src فهرست راهنما. اینجاست که ما م componentلفه خود را خواهیم ساخت:

mkdir src/ToggleSwitch

در این فهرست ، دو پرونده ایجاد کنید: ToggleSwitch.js و ToggleSwitch.scss:

touch ToggleSwitch.js ToggleSwitch.scss

سرانجام ، تغییر دهید App.js به شرح زیر است:

import React from 'react';
import ToggleSwitch from './ToggleSwitch/ToggleSwitch'

function App() {
  return (
    <ToggleSwitch />
  );
}

export default App;

علامت گذاری

ما می توانیم با یک عنصر فرم ورودی ورودی چک باکس HTML با تنظیمات لازم آن شروع کنیم:

<input type="checkbox" name="name" id="id" />

برای ساخت اطراف آن ، ممکن است به محصور احتیاج داشته باشیم <div> با یک class، آ <label> و <input /> خودش را کنترل کند. با اضافه کردن همه موارد ، ممکن است چیزی شبیه به این بدست آوریم:

<div class="toggle-switch">
  <input type="checkbox" class="toggle-switch-checkbox" name="toggleSwitch" id="toggleSwitch" />
  <label class="toggle-switch-label" for="toggleSwitch">
    Toggle Me!
  </label>
</div>

با گذشت زمان ، می توانیم از متن برچسب خلاص شویم و از آن استفاده کنیم <label> برچسب بزنید تا کنترل ورودی مربع را علامت بزنید یا علامت آن را بردارید درون <label>، بیایید دو مورد اضافه کنیم <span> برچسب هایی که به ما کمک می کند تا نگهدارنده سوئیچ و خود کلید تعویض را بسازیم:

<div class="toggle-switch">
  <input type="checkbox" class="toggle-switch-checkbox" name="toggleSwitch" id="toggleSwitch" />
  <label class="toggle-switch-label" for="toggleSwitch">
    <span class="toggle-switch-inner"></span>
    <span class="toggle-switch-switch"></span>
  </label>
</div>

تبدیل به کامپوننت React

اکنون که دانستیم چه مواردی باید وارد HTML شود ، تمام کاری که باید انجام دهیم این است که HTML را به یک م Reلفه React تبدیل کنیم. بیایید در اینجا با یک م componentلفه اساسی شروع کنیم. ما این مورد را به یک جز class کلاس تبدیل خواهیم کرد و سپس آن را به قلاب تبدیل خواهیم کرد ، زیرا پیگیری آن برای توسعه دهندگان جدید آسان تر است state نسبت به. تا useState.

موارد زیر را به اضافه کنید src/ToggleSwitch/ToggleSwitch.js:

import React, { Component } from "react";

class ToggleSwitch extends Component {
  render() {
    return (
      <div className="toggle-switch">
        <input
          type="checkbox"
          className="toggle-switch-checkbox"
          name="toggleSwitch"
          id="toggleSwitch"
        />
        <label className="toggle-switch-label" htmlFor="toggleSwitch">
          <span className="toggle-switch-inner" />
          <span className="toggle-switch-switch" />
        </label>
      </div>
    );
  }
}

export default ToggleSwitch;

در این مرحله ، وجود چندین لغزنده سوئیچ ضامن در یک نمای یا صفحه مشابه به دلیل تکرار ids ما می توانیم در اینجا از روش ترکیب بندی React استفاده کنیم ، اما در این مثال ، ما استفاده خواهیم کرد props برای پر کردن پویا مقادیر:

import React, { Component } from 'react';

class ToggleSwitch extends Component {
  render() {
    return (
      <div className="toggle-switch">
        <input
          type="checkbox"
          className="toggle-switch-checkbox"
          name={this.props.Name}
          id={this.props.Name}
        />
        <label className="toggle-switch-label" htmlFor={this.props.Name}>
          <span className="toggle-switch-inner" />
          <span className="toggle-switch-switch" />
        </label>
      </div>
    );
  }
}

export default ToggleSwitch;

this.props.Name مقادیر را جمع می کند id، name و for (توجه داشته باشید که هست htmlFor در React JS) به صورت پویا ، بنابراین می توانید مقادیر مختلفی را به م componentلفه منتقل کنید و چندین نمونه را در یک صفحه داشته باشید. همچنین توجه کنید که <span> برچسب پایان ندارد </span> برچسب زدن در عوض ، مانند آن در برچسب شروع بسته می شود <span />، و از نظر JSX این کاملا خوب است.

این را با تغییر محتویات آزمایش کنید App.js به شرح زیر است:

function App() {
  return (
    <>
      <ToggleSwitch Name='newsletter' />
      <ToggleSwitch Name='daily' />
      <ToggleSwitch Name='weekly' />
      <ToggleSwitch Name='monthly' />
    </>
  );
}

خروجی حاصل را در http: // localhost: 3000 / بررسی کنید (احتمالاً با استفاده از ابزارهای توسعه دهنده مرورگر خود) و اطمینان حاصل کنید که همه چیز به درستی کار می کند.

یک ظاهر طراحی شده و SCSS

من اخیراً در مورد سبک سازی React Components نوشتم ، جایی که روش های مختلفی را که امکان پذیر بود مقایسه کردم. در آن مقاله ، من نتیجه گرفتم که SCSS بهترین روش است ، و این همان چیزی است که ما در اینجا استفاده خواهیم کرد.

برای اینکه SCSS با ایجاد React App کار کند ، باید نصب کنید بسته node-sass:

yarn add node-sass

ما همچنین باید فایل صحیح را به جز component خود وارد کنیم:



import React, { Component } from 'react';
import './ToggleSwitch.scss';
...

حالا برای یک ظاهر طراحی شده این یک طرح کلی از آنچه ما دنبال می کنیم:

  • به طور پیش فرض ، سوییچ فقط خواهد بود 75px گسترده و عمودی تراز شده inline-block به طوری که با متن همخوانی داشته باشد و مشکلی در چیدمان ایجاد نکند.
  • مطمئن خواهیم شد که کنترل قابل انتخاب نیست تا کاربران نتوانند آن را بکشند و رها کنند.
  • ما ورودی اصلی جعبه تأیید را پنهان خواهیم کرد.
  • هر دو ::after و ::before برای ورود آنها به DOM و سبک سازی آنها ، عناصر شبه باید مدل سازی و به عناصر تبدیل شوند.
  • ما همچنین برخی از انتقال های CSS را برای یک اثر متحرک جالب اضافه خواهیم کرد.

و این همان چیزی است که در SCSS به نظر می رسد. موارد زیر را به اضافه کنید src/ToggleSwitch/ToggleSwitch.scss:

.toggle-switch {
  position: relative;
  width: 75px;
  display: inline-block;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  text-align: left;
  &-checkbox {
    display: none;
  }
  &-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 0 solid #bbb;
    border-radius: 20px;
    margin: 0;
  }
  &-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
    &:before,
    &:after {
      display: block;
      float: left;
      width: 50%;
      height: 34px;
      padding: 0;
      line-height: 34px;
      font-size: 14px;
      color: white;
      font-weight: bold;
      box-sizing: border-box;
    }
    &:before {
      content: "Yes";
      text-transform: uppercase;
      padding-left: 10px;
      background-color: #f90;
      color: #fff;
    }
  }
  &-disabled {
    background-color: #ddd;
    cursor: not-allowed;
    &:before {
      background-color: #ddd;
      cursor: not-allowed;
    }
  }
  &-inner:after {
    content: "No";
    text-transform: uppercase;
    padding-right: 10px;
    background-color: #bbb;
    color: #fff;
    text-align: right;
  }
  &-switch {
    display: block;
    width: 24px;
    margin: 5px;
    background: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 40px;
    border: 0 solid #bbb;
    border-radius: 20px;
    transition: all 0.3s ease-in 0s;
  }
  &-checkbox:checked + &-label {
    .toggle-switch-inner {
      margin-left: 0;
    }
    .toggle-switch-switch {
      right: 0px;
    }
  }
}

اگر به سمت سرور dev در بروید ، فرض می کنید که این کار را دنبال می کنید http: // localhost: 3000 / اکنون چهار سوئیچ ضامن مدل زیبا خواهید دید. سعی کنید آنها را تغییر دهید. همه آنها باید کار کنند

همچنین مدتی طول بکشد تا کد بالا را مرور کنید. اگر در مورد موردی اطمینان ندارید ، می توانید با مشاوره مشورت کنید مستندات Sass، یا به بخشهای SitePoint Forum بروید و یک سوال بپرسید.

برچسب های پویا

در حال حاضر ، گزینه های ضامن به سختی رمزگذاری شده اند:

.toggle-switch {
  ...
  &-inner {
    ...
    &:before {
      content: "Yes";
      ...
    }
  }
  ...
  &-inner:after {
    content: "No";
    ...
  }
  ...
}

برای انعطاف پذیری بیشتر م componentلفه ، می توانیم این موارد را به صورت پویا از کنترل استفاده کنیم صفات داده HTML5:

&:before {
  content: attr(data-yes);
  ...
}
&-inner:after {
  content: attr(data-no);
  ...
}

ما ویژگی های داده را برای تست کدگذاری خواهیم کرد ، اما این را در نسخه نهایی انعطاف پذیر تر خواهیم کرد:



class ToggleSwitch extends Component {
  render() {
    return (
      <div className="toggle-switch">
        ...
        <label className="toggle-switch-label" htmlFor={this.props.Name}>
          <span className="toggle-switch-inner" data-yes="Ja" data-no="Nein"/>
          <span className="toggle-switch-switch" />
        </label>
      </div>
    );
  }
}

نسخه کامپوننت کوچکتر

همچنین ، برای صفحه های کوچکتر ، استفاده از نسخه کوچکتر سوئیچ بدون متن ایده خوبی خواهد بود. بنابراین بیایید سبک آن را با اندازه های کوچک و حذف متن اضافه کنیم:

.toggle-switch {
  ...
  &.small-switch {
    width: 40px;
    .toggle-switch-inner {
      &:after,
      &:before {
        content: "";
        height: 20px;
        line-height: 20px;
      }
    }
    .toggle-switch-switch {
      width: 16px;
      right: 20px;
      margin: 2px;
    }
  }
}

با توجه به پاسخگویی ، باید اندازه کامل را تغییر دهیم ، بنابراین بیایید از عملکرد مقیاس CSS. در اینجا ما تمام عرض های پاسخگو مبتنی بر Bootstrap را پوشش داده ایم:

.toggle-switch {
  ...
  @media screen and (max-width: 991px) {
    transform: scale(0.9);
  }
  @media screen and (max-width: 767px) {
    transform: scale(0.825);
  }
  @media screen and (max-width: 575px) {
    transform: scale(0.75);
  }
}

می توانید با اضافه کردن این مورد را امتحان کنید small-switch کلاس به والدین <div> عنصر در ToggleSwitch.js:

class ToggleSwitch extends Component {
  render() {
    return (
      <div className="toggle-switch small-switch">
        ...
      </div>
    );
  }
}

دوباره به سرور dev بروید و تغییرات خود را آزمایش کنید. اگر می خواهید آنچه را که در برابر پرونده SCSS تمام شده دارید بررسی کنید ، شما می توانید آن را اینجا پیدا کنید.

زمینه سازی در SCSS

از آنجا که می توانیم از متغیرها در SCSS استفاده کنیم ، افزودن پشتیبانی از چندین تم رنگی در برنامه ما آسان تر می شود. می توانید اطلاعات بیشتر در این مورد را در “Sass Theming: The Never Ending Story” بخوانید. ما در اینجا از برخی تم های رنگی استفاده خواهیم کرد و همه رنگ های خام را به متغیرها تغییر خواهیم داد. سه خط اول مجموعه ای از رنگها با قابلیت تنظیم هستند که به ما کمک می کند کنترل کمی را در قالب طرح زیر قرار دهیم:


$label-colour: #bbb;
$disabled-colour: #ddd;
$toggle-colour: #2F855A;
$white: #fff;


.toggle-switch {
  ...
  &-label {
    ...
    border: 0 solid $label-colour;
  }
  &-inner {
    ...
    &:before {
      ...
      background-color: $toggle-colour;
      color: $white;
    }
  }
  &-disabled {
    background-color: $disabled-colour;
    cursor: not-allowed;
    &:before {
      background-color: $disabled-colour;
      cursor: not-allowed;
    }
  }
  &-inner:after {
    ...
    background-color: $label-colour;
    color: $white;
  }
  &-switch {
    ...
    background: $white;
    border: 0 solid $label-colour;
  }
  ...
}

و این با یک ظاهر طراحی شده تمام می شود. حالا اجازه دهید برخی تعاملات را اضافه کنیم.

تعاملات و جاوا اسکریپت

لطفا توجه داشته باشید که بخش زیر فقط حاوی کد نسخه ی نمایشی برای توضیح مفاهیم است. شما نباید واقعی خود را به روز کنید ToggleSwitch جز component در این بخش است.

م basicلفه اساسی ما یک م dلفه گنگ (همچنین به عنوان م componentلفه ارائه شناخته می شود) خواهد بود که حالت آن توسط یک م parentلفه اصلی یا ظرف مانند یک کنترل می شود form. منظور ما از کنترل شده چیست؟ خوب ، بیایید ابتدا یک نسخه کنترل نشده را بررسی کنیم:

import React from 'react';

const ToggleSwitch = () => (
  <div>
    <input
      type="checkbox"
      className="toggle-switch-checkbox"
    />
  </div>
);

export default ToggleSwitch;

هنگامی که کاربران با ورودی چک باکس بالا ارتباط برقرار می کنند ، بدون اینکه ما مجبور به نوشتن JavaScript باشیم ، این امر به تنهایی بین یک حالت علامت زده شده و علامت گذاری نشده تغییر وضعیت می یابد. عناصر ورودی HTML قادر به مدیریت وضعیت داخلی خود هستند و این کار را با به روزرسانی مستقیم DOM انجام می دهند.

اما در React پیشنهاد می شود از آن استفاده کنیم اجزای کنترل شده، همانطور که مثال زیر نشان می دهد:

import React from 'react';

const ToggleSwitch = ({checked}) => (
  <div>
    <input
      type="checkbox"
      className="toggle-switch-checkbox"
      checked={checked}
    />
  </div>
);

export default ToggleSwitch;

در اینجا ، React وضعیت ورودی کادر تأیید را کنترل می کند. همه تعاملات با این ورودی باید از طریق DOM مجازی انجام شود. اگر سعی کنید همانطور که هست با جز the تعامل داشته باشید ، هیچ اتفاقی نمی افتد ، زیرا ما هیچ کد JavaScript را تعریف نکرده ایم که بتواند مقدار مقدار را تغییر دهد checked ما در حال عبور هستیم

برای رفع این مشکل ، می توانیم از یک عبور کنیم onChange prop – تابعی که هر زمان روی کادر تأیید کلیک می شود فراخوانی می شود:

import React from 'react';

const ToggleSwitch = ({checked, onChange}) => (
  <div>
    <input
      type="checkbox"
      className="toggle-switch-checkbox"
      checked={checked}
      onChange={e => onChange(e.target.checked)}
    />
  </div>
);

export default ToggleSwitch;

اکنون ورودی چک باکس تعاملی است. کاربران می توانند مانند قبل م theلفه را “روشن” و “خاموش” کنند. تنها تفاوت در اینجا این است که حالت توسط React کنترل می شود و نه برعکس نسخه کنترل نشده قبلی. با انجام این روش ، ما می توانیم به راحتی از طریق JavaScript به وضعیت م componentلفه خود در هر زمان دسترسی پیدا کنیم. ما می توانیم هنگام اعلام م theلفه به راحتی مقدار اولیه را تعریف کنیم.

حال بیایید نگاهی به نحوه استفاده از ToggleSwitch جزء. در زیر یک مثال ساده کلاسه ای آورده شده است:

import React, { Component } from 'react';

class Form extends Component {
  state = { checked : false }

  onChange = newValue => {
    this.setState({ checked: newValue });
  }

  render() {
    return (
      <ToggleSwitch id="toggleSwitch" checked={this.checked} onChange={this.onChange} />
    );
  }
}

export default Form;

حال بیایید با استفاده از قلاب ، م componentلفه کلاس را به م functionalلفه کاربردی تبدیل کنیم:

import React, { useState } from 'react';

export default function Form() {
  let [checked, setChecked] = useState(false);

  return (
    <ToggleSwitch id="toggleSwitch" checked={checked} onChange={setChecked} />
  )
}

همانطور که مشاهده می کنید ، با استفاده از م componentلفه کاربردی با روش ایجاد قلاب ، تعداد خطوط را به شدت کاهش می دهیم.

اگر قلاب های React برای شما جدید است ، راهنمای ما را ببینید ، “قلاب های واکنش دهنده: چگونه شروع به کار می کنیم و خودشان را می سازیم”.

نهایی کردن کامپوننت ToggleSwitch

حالا بیایید به ما برگردیم ToggleSwitch جزء. ما به وسایل زیر احتیاج داریم:

  • id (الزامی): این همان id که به کنترل ورودی جعبه تأیید منتقل می شود. بدون این ، م componentلفه رندر نمی کند.
  • checked (الزامی): این حالت فعلی را حفظ می کند ، که یک مقدار بولی خواهد بود.
  • onChange (الزامی): این ورودی هنگامی که ورودی باشد فراخوانی می شود onChange کنترل کننده رویداد فعال می شود.
  • name (اختیاری): این متن برچسب ورودی جعبه تأیید است ، اما ما معمولاً از این استفاده نمی کنیم.
  • small (اختیاری): این یک مقدار بولی است ، که Toggle Switch را در یک حالت کوچک ، جایی که متن ارائه نشده است ، ارائه می دهد.
  • optionLabels (اختیاری): اگر از آن استفاده نمی کنید small نسخه کنترل ، ممکن است لازم باشد این را به Toggle Switch به عنوان یک آرایه از دو مقدار منتقل کنید ، که متن را برای True و False نشان می دهد. یک مثال می تواند باشد Text={["Yes", "No"]}.
  • disabled (اختیاری): این مستقیماً به <input type="checkbox" />.

هنگام استفاده از small نسخه ، به شرح زیر است optionLabels متن به عنوان پیش فرض استفاده خواهد شد:


ToggleSwitch.defaultProps = {
  optionLabels: ["Yes", "No"],
};

از آنجایی که اکثر موارد نصب شده توسط کاربر تنظیم می شوند و ما نمی توانیم از مقادیر دلخواه استفاده کنیم ، همیشه بهتر است که در صورت عدم عبور از وسایل مورد نیاز ، ارائه را متوقف کنید. این را می توان با استفاده از JavaScript ساده انجام داد if دستور یا عملگر سه گانه با استفاده از ? : یا یک اتصال کوتاه &&:

{this.props.id ? (
  <!-- display the control -->
) : null}

همانطور که برنامه ما رشد می کند ، با بررسی نوع می توان اشکالات زیادی را مشاهده کرد. React برخی از قابلیت های بررسی نوع داخلی را دارد. برای اجرای بررسی نوع بر روی لوازم جانبی برای یک م componentلفه ، می توانید ویژه را اختصاص دهید propTypes ویژگی. ما می توانیم لیست موارد بالا را با استفاده از React’s اعمال کنیم PropType کتابخانه ، که یک کتابخانه جداگانه است که طیف وسیعی از اعتبار سنجها را صادر می کند که می تواند برای اطمینان از معتبر بودن داده های دریافتی استفاده شود.

می توانید آن را مانند این نصب کنید:

yarn add prop-types

سپس ، کتابخانه PropTypes را با استفاده از موارد زیر وارد کنید:


import PropTypes from "prop-types";

ما PropTypes را به روش زیر تعریف خواهیم کرد:

ToggleSwitch.propTypes = {
  id: PropTypes.string.isRequired,
  checked: PropTypes.bool.isRequired,
  onChange: PropTypes.func.isRequired,
  name: PropTypes.string,
  optionLabels: PropTypes.array,
  small: PropTypes.bool,
  disabled: PropTypes.bool
};

از طریق توضیح:

  • PropTypes.string.isRequired: این یک مقدار رشته است و لازم و اجباری است.
  • PropTypes.string: این یک مقدار رشته است اما اجباری نیست.
  • PropTypes.func: این یک prop است که تابعی را به عنوان مقدار می گیرد ، اما اجباری نیست.
  • PropTypes.bool: این یک مقدار بولی است ، اما اجباری نیست.
  • PropTypes.array: این یک مقدار آرایه است ، اما اجباری نیست.

حالا ما می توانیم با ادامه دهیم ToggleSwitch جزء. جایگزین کردن مطالب src/ToggleSwitch/ToggleSwitch.js با موارد زیر:

import React from "react";
import PropTypes from "prop-types";
import './ToggleSwitch.scss';



const ToggleSwitch = ({ id, name, checked, onChange, optionLabels, small, disabled }) => {

  return (
    <div className={"toggle-switch" + (small ? " small-switch" : "")}>
      <input
        type="checkbox"
        name={name}
        className="toggle-switch-checkbox"
        id={id}
        checked={checked}
        onChange={e => onChange(e.target.checked)}
        disabled={disabled}
        />
        {id ? (
          <label className="toggle-switch-label" htmlFor={id}>
            <span
              className={
                disabled
                  ? "toggle-switch-inner toggle-switch-disabled"
                  : "toggle-switch-inner"
              }
              data-yes={optionLabels[0]}
              data-no={optionLabels[1]}
            />
            <span
              className={
              disabled
                ? "toggle-switch-switch toggle-switch-disabled"
                : "toggle-switch-switch"
              }
            />
          </label>
        ) : null}
      </div>
    );
}


ToggleSwitch.defaultProps = {
  optionLabels: ["Yes", "No"],
};

ToggleSwitch.propTypes = {
  id: PropTypes.string.isRequired,
  checked: PropTypes.bool.isRequired,
  onChange: PropTypes.func.isRequired,
  name: PropTypes.string,
  optionLabels: PropTypes.array,
  small: PropTypes.bool,
  disabled: PropTypes.bool
};

export default ToggleSwitch;

سرانجام ، برای آزمایش م componentلفه ، تغییر کنید App.js مانند این:

import React, { useState } from 'react';
import ToggleSwitch from './ToggleSwitch/ToggleSwitch'

function App() {
  let [newsletter, setNewsletter] = useState(false);

  const onNewsletterChange = (checked) => {
    setNewsletter(checked);
  }

  return (
    <>
      <ToggleSwitch id="newsletter" checked={ newsletter } onChange={ onNewsletterChange } />
      <label htmlFor="newsletter">Subscribe to our Newsletter</label>
    </>
  );
}

export default App;

حالا ، وقتی سرت را به http: // localhost: 3000 / شما باید ضامن کار را ببینید.

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

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



<label className="toggle-switch-label"
       htmlFor={id}
       tabIndex={ disabled ? -1 : 1 }
       onKeyDown={ e => handleKeyPress(e) }>
  ...
</label>

همانطور که می بینید ، ما یک tabIndex ویژگی ، که ما در حال تنظیم آن هستیم 1 (قابل تمرکز) یا -1 (قابل تمرکز نیست) بسته به غیرفعال بودن جز the در حال حاضر.

ما همچنین اعلام کرده ایم handleKeyPress عملکرد برای مقابله با آن با دریافت ورودی صفحه کلید:

function handleKeyPress(e){
  if (e.keyCode !== 32) return;

  e.preventDefault();
  onChange(!checked)
}

این بررسی می کند که کلید فشرده شده نوار فاصله باشد. در این صورت ، از عملکرد پیش فرض مرورگر جلوگیری می کند (در این حالت صفحه را پیمایش کنید) و حالت جز component را تغییر می دهد.

و این اساساً تمام آنچه شما نیاز دارید است. این جز now اکنون در دسترس صفحه کلید است.

با این حال ، یک مشکل جزئی وجود دارد. اگر روی کلیک کنید ToggleSwitch جز component ، اکنون یک طرح کلی در مورد کل جز component به دست می آورید ، و این احتمالاً مورد نظر نیست. برای مقابله با این مسئله ، می توانیم موارد را کمی تغییر دهیم تا مطمئن شویم که وقتی با صفحه کلید متمرکز است ، رئوس مطالب را دریافت می کند ، اما وقتی کلیک می شود این کار را نمی کنیم:


<span
  className={
    disabled
      ? "toggle-switch-inner toggle-switch-disabled"
      : "toggle-switch-inner"
  }
  data-yes={optionLabels[0]}
  data-no={optionLabels[1]}
  tabIndex={-1}
/>
<span
  className={
  disabled
    ? "toggle-switch-switch toggle-switch-disabled"
    : "toggle-switch-switch"
  }
  tabIndex={-1}
/>

در اینجا ما یک tabIndex خاصیت به هر دو باطن <span> عناصر برای اطمینان از اینکه نمی توانند تمرکز دریافت کنند.

سپس ، در ToggleSwitch.scss:

$focus-color: #ff0;

.toggle-switch {
  ...
  &-label {
    ...
    &:focus {
      outline: none;
      > span {
        box-shadow: 0 0 2px 5px $focus-color;
      }
    }
    > span:focus {
      outline: none;
    }
  }
  ...
}

این یک سبک را برای ToggleSwitchدرونی است <span> وقتی روی صفحه کلید متمرکز است ، اما وقتی روی آن کلیک می شود ، عنصر نیست. می توانید در مورد این تکنیک بیشتر بخوانید اینجا. این کمی هک است ، و باید به نفع آن رها شود با استفاده از: تمرکز قابل مشاهده است، به محض اینکه پشتیبانی کافی از مرورگر به دست آورد.

یک مثال کامل تر

برای پایان دادن ، من می خواهم یک مثال کامل تر از استفاده از ToggleSwitch جز component در CodeSandbox زیر است.

این نسخه آزمایشی از چندین استفاده می کند ToggleSwitch اجزای موجود در همان صفحه. حالت سه ضامن آخر به حالت اولی بستگی دارد. به این معنی که شما باید ایمیل های بازاریابی را بپذیرید تا بتوانید انتخاب خود را برای دریافت اصلاح کنید.

خلاصه

در این مقاله ، من نشان داده ام که چگونه می توان با استفاده از React یک سوئیچ ضامن قابل استفاده مجدد ، با الهام از iOS ایجاد کرد. ما به سبک سازی م componentلفه با SCSS پرداختیم ، و آن را به یک م controlledلفه کنترل شده بدل کردیم ، چگونه می توان با عبور دادن لوازم جانبی آن را شخصی سازی کرد و نحوه دسترسی به صفحه کلید را ایجاد کرد.

شما می توانید کد کامل سوئیچ ضامن را در ما پیدا کنید repo GitHub.