design react kit下載 - design react kit源代碼下載

design react kit

其他源碼

v5.5.0

下載

設計反應套件

用其他語言閱讀此信息：英語??。

配x注意：該套件旨在與2.X版本的Bootstrap Italia合作。 Bootstrap Italia版本的1.x版本已棄用，位於分支4.x上。

簡介

Design React套件是一組React組件，可實現Bootstrap Italia和UI套件設計上的樣式。為了瀏覽圖書館並查看組件，使用了故事書。故事書的公開版可用於發布最新的穩定版本。操場上的React套件可與圖書館一起玩。

指數

指數
- 如何使用套件
  - 添加bootstrap-titery和字體
  - 例子
  - 字體加載
  - 同行依賴
- 如何做出貢獻？
  - 使用代碼
  - 設置當地環境
- 如何創建新組件
  - 快照測試
- 書櫃彙編
- 有用的鏈接
- 瀏覽器支持
- 打字稿打字
- 圖書館的貢獻

如何使用套件

要使用React Design作為對應用程序的成癮，您可以從NPM安裝它。我們建議使用create vite創建新的WebApp React，如下所示：

yarn create vite nome-app --template react
cd nome-app
yarn add design-react-kit --save

更多信息以創建一個具有React的新應用：

官方文件
Vitejs

添加bootstrap-titery和字體

design-react-kit不包括CSS和字體文件，因此有必要單獨安裝它們：

yarn add bootstrap-italia typeface-lora typeface-roboto-mono typeface-titillium-web --save

例子

./src/App.js ，如果您使用的使用create vite 。

 import React from 'react' ;
import './App.css' ;
import { Alert } from 'design-react-kit' ;
import 'bootstrap-italia/dist/css/bootstrap-italia.min.css' ;
import 'typeface-titillium-web' ;
import 'typeface-roboto-mono' ;
import 'typeface-lora' ;

function App ( ) {
  return < Alert > This is an Alert </ Alert > ;
}

export default App ;

您可以使用Stackblitz諮詢此Web模板：網絡模板

字體加載

Bootstrap Italia主題使用一組特定字體字體： titillium-web ， roboto-mono和lora 。這些字體的加載留在瀏覽器上，但是，如果需要，可以通過適當的FontLoader組件進行控制。只需在React應用程序的頂部聲明FontLoader組件即可加載。

另外，有必要通過webfontloader軟件包手動管理字體的加載：

 const WebFont = require ( 'webfontloader' ) ;
WebFont . load ( {
  custom : {
    families : [ 'Titillium Web:300,400,600,700:latin-ext' , 'Lora:400,700:latin-ext' , 'Roboto Mono:400,700:latin-ext' ]
  }
} ) ;

同行依賴

該庫不包括react和react-dom ，避免了版本的衝突以及捆綁包大小的無用增加。因此，對於本地開發，必須手動安裝成癮。

要執行的命令是

yarn install --peers

或者手動

yarn install react react-dom

如何做出貢獻？

？有可能以各種方式為圖書館做出貢獻：

有了您的代碼，請在React套件問題中負責開放且尚未分配的問題（對該問題的評論也足以通知授權的意願）。
通過對官方React套件存儲庫的錯誤或改進的報告。
在專用的Slack頻道上寫作。

使用代碼

您想幫助設計套件嗎？你在正確的地方！

如果您尚未這樣做，請首先花幾分鐘，以加深您對PA Web服務的設計指南的了解，並參考有關如何為設計React React Kit做出貢獻的指示。

設置當地環境

當地環境的最低要求必須是：

nodejs（> = 18）
紗

克隆存儲庫並執行yarn以安裝成癮。然後執行

yarn storybook:serve

啟動開發服務器。

故事書將在http：// localhost：9001/

Storybook充滿了一些addons ，使其更加說話。

如何創建新組件

本節將指導存儲庫中新組件的創建。所有組件都位於src文件夾中：每個組件都有一個文件夾，其中包含使其正常工作所需的所有內容。 Storybook故事是在stories之下。單位測試位於test文件夾中。例如，該Button組件存在於src/Button路由下，其結構如下：

 ├── src
│    └── Button
│        └── Button.tsx
├── stories
│    ├── Components
│    │   └── Button.stories.tsx
│    └── Documentation
│        └── Button.mdx
└── test
     └── Button.test.tsx

構建組件的一些基本規則：