معرفی
با پیکربندی صفحه ویژگی webpart SPFx، بسیاری از اوقات نیاز داریم که کنترل صفحه ویژگی را بر اساس مقدار کنترل پنجره ویژگی دیگری نشان دهیم/مخفی کنیم.
سناریو
به عنوان مثال، ما یک دکمه رادیویی برای متن و تصویر داریم، بنابراین در انتخاب متن، کنترل ورودی متن و در انتخاب تصویر، کنترل URL تصویر را نشان خواهیم داد.
![تصویر خروجی](http://pezhvak24.ir/dl/codenevis/firstcode/article/showhide-property-pane-component-based-on-another-components-value-in-spfx/Images/OP.jpg)
بیایید اجرای گام به گام را ببینیم.
پیاده سازی
- یک خط فرمان باز کنید
- به مسیری که می خواهید پروژه ایجاد کنید بروید
- ایجاد یک فهرست پروژه با استفاده از:
- md SPFx-show-hide-component
با استفاده از:
- cd SPFx-show-hide-component
اکنون دستور زیر را برای ایجاد یک راه حل SPFx اجرا کنید:
- yo @microsoft/sharepoint
برخی از سؤالات را می پرسد، همانطور که در زیر نشان داده شده است:
![راه اندازی SPFx](http://pezhvak24.ir/dl/codenevis/firstcode/article/showhide-property-pane-component-based-on-another-components-value-in-spfx/Images/Structure.jpg)
پس از نصب موفقیت آمیز، می توانیم یک پروژه را در هر ابزار کد منبع باز کنیم. در اینجا، من از کد VS استفاده می کنم، بنابراین دستور را اجرا می کنم:
- code .
به src> webparts > webpart > components > فایل I{webpartname}props.ts بروید و خواص را مطابق شکل زیر اعلام خواهیم کرد:
- export interface ISpfxShowHideComponentProps {
- description: string;
- textOrImageType: string;
- simpleText: string;
- imageUrl: string;
- }
اکنون به src > webparts > webpart > {webaprtname}webpart.ts بروید
در اینجا، ما به TextField و ChoiceGroup نیاز داریم تا کنترلهای صفحه ویژگی را اضافه کنیم. بیانیه واردات به این صورت خواهد بود:
- import {
- IPropertyPaneConfiguration,
- PropertyPaneChoiceGroup,
- PropertyPaneTextField
- } from '@microsoft/sp-property-pane';