Рубрики
Без рубрики

Знакомство с тканью отреагировать

React – одна из самых используемых и любимых библиотек JavaScript для создания пользовательских интерфейсов, и есть … с меткой React, WebDev, JavaScript.

React – одна из самых используемых и любимых библиотек JavaScript для создания пользовательских интерфейсов, и нет недостатка в рамках пользовательского интерфейса, чтобы помочь сделать разработку отличных приложений React быстрее и проще. Возможно, вы слышали о паре действительно популярных, таких как React Bootstrap или Material UI, но есть еще один, который не привлекает столько внимания, ткань реагирует.

Fabric React – это фреймворк, построенная на вершине языка дизайна Microsoft, так же, как материальный пользовательский интерфейс создан на основе дизайна материала Google. Он используется Microsoft на большом разнообразии их продуктов и сайтов, от Outlook, Word и PowerPoint до SharePoint.

Лично мне нравится использовать его, потому что мне нравится, как стиль отличается от начальной загрузки, и документация действительно полезна с отличными примерами и лучшими практиками для всех их компонентов.

Начиная

Легко начать с ткани в ваших проектах React, независимо от того, начинаете ли вы с нуля или намереваетесь добавить ее в существующий проект.

Чтобы ознакомиться со всеми элементами управления и компонентов в различных рамках, мне обычно нравится раскручивать демонстрационную среду в CodeSandbox. Легко добавить Fabric React на зависимости проектов путем поиска «Office-UI-Fabric-React» от панели Explorer в CodeSandbox.

Если вы хотите добавить его в существующий проект React, вы можете добавить пакет с NPM с:

npm install office-ui-fabric-react

Тканевый компонент

При создании вашего приложения с тканью рекомендуется обернуть весь свой контент в компонент ткани. Это может быть заменой вашего корневого Div, и он приносит шрифты по умолчанию и стиль, чтобы ваше приложение выглядело последовательным.

import { Fabric } from "office-ui-fabric-react";

function App() {
    return // All your components here;
}

Значки

Ткань имеет отличную библиотеку значков, но по умолчанию они не включены в пакет «Реакция». Многие элементы управления используют значки, поэтому вам нужно будет добавить пакет и инициализировать их в корне приложения.

import { initializeIcons } from "@uifabric/icons";

initializeIcons();

Перейти к элементам управления

Теперь, когда вы готовы начать строительство с тканью, давайте начнем добавлять некоторые элементы управления. Это некоторые из элементов управления ткани, которые я использую чаще всего. Я включил их индивидуальный импорт и компоненты с минимальными реквизитами, чтобы заставить вас работать.

Кнопки

import { Fabric, DefaultButton, PrimaryButton } from "office-ui-fabric-react";

 console.log("You clicked Standard")}
        />
   console.log("You clicked Primary")}
        />

Выбор группа

import { ChoiceGroup } from "office-ui-fabric-react";

;

Слайдер

import { Slider } from "office-ui-fabric-react";

 console.log(value)}
/>;

DatePicker

import { DatePicker } from "office-ui-fabric-react";

;

Панель

import { Panel } from "office-ui-fabric-react";

 setIsPanelOpen(false)}
    isLightDismiss={true}
    headerText="Panel Header"
    closeButtonAriaLabel="Close"
>
    
Panel Content Goes Here

    
Throw in your form inputs or more details on what you clicked on here.

;

Есть куча других элементов управления, и я настоятельно рекомендую вам проверить страницу управления документацией «Реакция» ткани для полного списка элементов управления.

Темация

Ткань также имеет дизайнер темы, который позволяет создавать тему, выбирая три цвета, а затем предварительно просмотреть тему, применяемую ко многим элементам управления ткани.

У него отличная проверка доступности, встроенная в том, что будет проблемам, где между выбранными вами цветами не хватает контраста. Это позволит вам внести изменения в выбранные цвета на лету, чтобы улучшить доступность вашего приложения.

Если вы делаете какую -либо разработку SharePoint, одна из замечательных вещей в дизайнере тем – это то, что вы можете увидеть все семантические слоты, которые используются по всему элементу элемента управления. Эти семантические слоты используются, чтобы позволить вашим элементам управления динамически изменяться в зависимости от того, где они используются в SharePoint. Например; Добавление списка в раздел страницы с легким фоном будет иметь темный текст, но если вы добавили его на темный фон, он будет инвертировать текст, облегчая чтение.

Дайте ему шанс, и после того, как у вас есть тема, которую вам нравится, ее легко экспортировать в ваше приложение. Вы можете просто скопировать его в своем приложении, нажав на кнопку «Экспорт темы» и выбрав, как вы хотели бы применить его к своему приложению, будь то JavaScript, JSON или PowerShell.

Последние слова

Вот образец песочницы со всеми вышеупомянутыми используемыми элементами управления. Перейдите, добавьте больше из документов или обновите палитру темы с собственным от дизайнера тем.

Я надеюсь, что вы попробуете ткань, и, возможно, это будет рамка React, которую вы достигнете, когда начнете свой следующий проект!

Оригинал: “https://dev.to/willspiering/getting-to-know-fabric-react-225e”

Читайте ещё по теме: