@ beautinique/ 前端组件

Beautinique前端的共享反应UI组件(Vite + React 19 + Tailwind v4).

构件以 Tailwind 类和符号(颜色、阴影、字体)为样式 @beautinique/frontend-styles,所以一个应用需要两者.

安装

npm install @beautinique/frontend-components @beautinique/frontend-stores @beautinique/frontend-styles @iconify/react

同伴依赖性 : react, (中文(简体) ), react-dom, (中文(简体) ), @iconify/react, (中文(简体) ), @beautinique/frontend-styles 财务报告和审定财务报表 @beautinique/frontend-stores (烤面包放在一个商店里 由应用制造) 土司;这需要 zustand 在应用程序中.

还有两个 选项,仅需要使用它们的路径(一个从未导入过路径的应用程序不需要它们,而捆绑者从不寻找它们):

设置( 每个应用程序一次)

在应用程序自己的 index.css,按此顺序:

@import '@beautinique/frontend-styles';
@import '@beautinique/frontend-components/source.css';
@import './app.css';

source.css 不是可选的。 尾风 v4 内部不查找类名 node_modules这样 没有它,组件使用的类别(rounded-lg, (中文(简体) ), shadow-primary-btn永远 生成,组件则不设样式。 (游乐场有一个页面 准确地显示这一点。)

导入路径

大多数屏幕使用的组件 /ui, (中文(简体) ), /layout, (中文(简体) ), /inputs, (中文(简体) ), /theme 财务报告和审定财务报表 /toast,根会给出 全部都一样 很少屏幕使用的组件有自己的路径 没有 在树根,所以 应用程序只捆绑它进口的东西.

根可以从根或从自身路径导入的,是相同的组件 无论是哪种方式:

import { Button } from '@beautinique/frontend-components'; // or
import { Button } from '@beautinique/frontend-components/ui';

import { Stepper } from '@beautinique/frontend-components/stepper'; // only from its own path

只有再出口的根, 它不会复制: 一个只导入的app Button 从根捆绑 与 /ui (捆绑者漏出没有使用的东西).

import { Button, Tooltip } from '@beautinique/frontend-components';

import { toaster } from '@/utils/toaster'; // made in the app, see Toasts

const App = () => (
  <Tooltip title="Save" description="Ctrl + S">
    <Button
      pattern="primary"
      content="Save"
      buttonProps={{ onClick: () => toaster.success({ title: 'Saved' }) }}
    />
  </Tooltip>
);

按钮

const save = <Button pattern="primary" content="Save" buttonProps={{ type: 'submit' }} />;

// only an icon: it has to be given a name, a screen reader reads it (`aria-labelledby` works too)
const edit = (
  <Button
    pattern="outline"
    content={{ icon: 'solar:pen-linear' }}
    buttonProps={{ 'aria-label': 'Edit category' }}
  />
);

• 您给出的课在按钮本身之后被添加, 并且没有它自己的课被删除 . 为了赢 其中一个很重要 !数字 : className="rounded-md! px-2! lg:px-2!"按钮 大屏幕的类(lg:px-5, (中文(简体) ), lg:py-4, (中文(简体) ), xl:text-base),它们属于其他类 px-4 以改变每个屏幕上的垫子 lg: 一个也是.
• ref 这是 <button> 本身: <Button ref={buttonRef} ... />。 。 。 .
• 只有图标的按钮不编译,否则 aria-label 或者说 aria-labelledby 内 buttonProps。 。 。 .

工具提示

const hint = (
  <Tooltip title="Save" description="Ctrl + S" placement="right">
    <Button pattern="primary" content="Save" />
  </Tooltip>
);

• 它打开了悬浮和焦点, 关闭鼠标离开,模糊或 逃脱。 。 。 .
• 它留在窗户里:在要求的一侧没有房间(placement它打开在 箭头仍然指着它 内容.
• 屏幕阅读器 这是 role="tooltip" 虽然是开放的,但内容由它描述 (单位:千美元)aria-describedby 被放在儿童元素, 旁边它已经拥有.
• required={false} 仅显示内容. 包装纸留下(如: display: contents这需要 没有房间,所以 required 可以在页面打开时更改(锁定字段,大小 屏幕),不会再次创建内容并失去状态. 一个不同的工具提示 这根本不存在: 内容在DOM中是一个更深层次, 所以一个cs规则是看 内容的母体(space-y-* 在父母身边, > :first-child)见所收被.

标记、 分割符、 渐变文字

import { Badge, Divider, GradientText } from '@beautinique/frontend-components';

<Badge content="New" />; // `content` is any React content: text, a number, an icon and a text
<Badge content={count > 0 && count} />; // nothing to show (null, undefined, false, '') draws no badge; 0 is shown
<Divider aria-hidden="true" />; // an <hr>; hide it from screen readers when it is only a line
<GradientText type="accent" text="Terms" />; // or <GradientText type="silver">any <b>content</b></GradientText>
<GradientText as={Link} to="/terms" type="accent" text="Terms" />; // the Link of the router, with its props

• 三者都取其元素的属性(id, (中文(简体) ), data-*, (中文(简体) ), aria-*, (中文(简体) ), ref(......),以及 您提供的课目在课后添加.
• GradientText 带 text 或者说 children,而不是两者(编译器如此说). 强制颜色模式 (Windows 高对比度),如果未绘制梯度,则文字取取系统的颜色 而不是消失.

线性渐变

import { LinearGradient } from '@beautinique/frontend-components/linear-gradient';

<div className="relative overflow-x-auto">
  <LinearGradient position="left" />
  {/* the scrolling content */}
  <LinearGradient position="right" />
</div>;

一个边上背景颜色的淡出( A)top, (中文(简体) ), bottom, (中文(简体) ), left 或者说 right页:1 relative 容器:它显示还有更多的可以滚动。 这是装饰:指针穿过它 辅助技术跳过.

步进

import { Stepper } from '@beautinique/frontend-components/stepper';

<Stepper
  label="Checkout progress"
  activeStep={1}
  steps={[
    { title: 'Account', description: 'Create your account' },
    { title: 'Address', description: 'Where to deliver', icon: 'solar:map-point-linear' },
    { title: 'Payment', disabled: true },
  ]}
  onStepClick={(index) => setStep(index)} // optional: with it the steps are buttons
>
  {/* optional: shown under the steps */}
</Stepper>;

• 步骤是命令列表,而目前的步骤是 aria-current="step"。完成的步骤显示 勾选,然后向屏幕阅读器表示“已完成”(completedLabel 以另一个词).
• activeStep 保存在阶梯内(99 是最后一个, NaN (第一组).
• 与 onStepClick 步骤是真正的按钮(键盘,焦点环); 步骤 disabled 无法是 点击。 没有它,任何在阶下是按钮.
• 勾选框与套件捆绑在一起(在步入时用图标注册),所以不需要 腾讯网. 这个 icon 步骤是图标化名称,以图标化其首次显示时的下载; 在应用程序中添加 addCollection。 。 。 .

重新发送

import { Resend } from '@beautinique/frontend-components/resend';

<Resend
  label="Not received OTP?"
  count={sendCount >= 3 ? 0 : 30} // seconds to wait; 0 = no wait
  onResend={handleResendOtp} // may return a promise
/>;

• "30s后续",而当等待超过一个按钮. 当组件显示并 每次重播后, 以 count 那一刻 一个新的电子邮件地址? 给它一个新的 key。 。 。 .
• 它与时钟相对,不逐一计数:背景标签或笔记本 睡觉,不会让人们等待的时间 超过真正过去的时间.
• 若为 onResend 返回按键等待的保证( 已失效, “ 发送... ” , 不双击) 等待在它决定的时候开始。 如果拒绝没有等待,可以按下按钮 重新报告错误 window (单位:千美元)reportError) (中文(简体) ). 处理您可以弥补的错误 从里面.
• 屏幕读取器没有每隔一秒被告知号码(role="timer"),但当 按钮回来了。 该词( :resendLabel, (中文(简体) ), countdownLabel, (中文(简体) ), sendingLabel, (中文(简体) ), readyLabel, (中文(简体) ), formatSeconds)可以为另一种语言所更改.

主题

import { Theme } from '@beautinique/frontend-components';
import { createThemeStore } from '@beautinique/frontend-stores';

export const useThemeStore = createThemeStore(); // once, in a module of the app

<Theme store={useThemeStore} />;

在黑暗和光的主题之间切换的按钮( 太阳在黑暗时, 月亮在黑暗时) 轻而易举)。 它只改变商店,它记得选择; 将主题放入页面是 应用的。 其辅助技术名称跟随主题("Switch to light主题"; labels 变动 ),("论语". 图标会移动; 对于一个要求减少运动的人(prefers-reduced-motion这 仍然显示.

滚动到托普

import { ScrollToTop } from '@beautinique/frontend-components';

const { pathname } = useLocation(); // from the router of the app

<div id="main">
  <ScrollToTop pathname={pathname} />
</div>;

将元素滚动至 id="main" 每次到顶端 pathname 更改( 路由器不这样做 ) 单页应用). 画一无所取. id, (中文(简体) ), behavior, (中文(简体) ), block 财务报告和审定财务报表 inline 这是 id 会 议 日 程 和 议 程 要素和选项 scrollIntoView (单位:千美元)'auto', (中文(简体) ), 'start' 财务报告和审定财务报表 'nearest' 除非告诉别人否则; (单位:千美元) 'smooth' 滚动绘制 'auto' 对于一个要求减少动议的人来说. skipInitial 离开 首页所在位置(当浏览器重载时恢复卷轴时).

自动指令

import { AuthBottomInstructions } from '@beautinique/frontend-components/auth';
import { Link } from 'react-router-dom';

<AuthBottomInstructions as={Link} terms={{ to: '/terms' }} privacy={{ to: '/privacy' }} />;
// "By continuing, you agree to our Terms & Conditions and Privacy Policy."

小指印以入为正. as 是什么使链接('a' 除非告诉别人 'a' 编译器要求 href, (中文(简体) ), terms 财务报告和审定财务报表 privacy 是这些链接的道具. termsLabel, (中文(简体) ), privacyLabel 财务报告和审定财务报表 message 改为:

<AuthBottomInstructions
  terms={{ href: '/terms' }}
  privacy={{ href: '/privacy' }}
  message={({ terms, privacy }) => (
    <>
      Entering means you accept our {terms} and our {privacy}.
    </>
  )}
/>

投入(Input, (中文(简体) ), Textarea, (中文(简体) ), Checkbox, (中文(简体) ), Radio, (中文(简体) ), Select(中文(简体) )

import { Input, Select } from '@beautinique/frontend-components';

<Input
  label="Name"
  error={errors.name?.message}
  inputProps={{ name: 'name', placeholder: 'Your name' }}
  register={register('name')} // React Hook Form, optional
  icons={{ right: { icon: 'solar:close-circle-linear', label: 'Clear', onClick: clear } }}
/>;

<Select
  label="Fruit"
  options={[
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana', disabled: true },
  ]}
  selectProps={{ value, onChange: setValue, placeholder: 'Pick a fruit' }}
/>;

标签坐落在字段的边界上,是它的名称(它与字段相连的有它 id(a) 减少 error 称为 当它出现并标记出球场时 aria-invalid。一个做一些事情的图标(onClick(a) 划入a 真实 <button> 需要一个 label (编译者要求). Checkbox 是一个 role="switch", (中文(简体) ), Radio 真正的电台 组合(箭头移动选择),以及 Select 组合框:箭头键、家键、端键、入键键、出键键键和打出一个单词 工作,列表将绘制于 document.body (一个卷轴不切开它的父母) 它翻到另一边时 没有空间.

模式内的一个字段需要一个类 . 因为名单是在 document.body,它不在堆叠 其字段为: z-3 它打开后面一个 ModalWrapper (单位:千美元)z-100在那里没有人能看到它。 给 列表 a z- 通过类名在模式之上:

<ModalWrapper isOpen={isOpen} onClose={close} label="Product">
  <Select label="Fruit" options={options} selectProps={selectProps} optionsClassName="z-110" />
</ModalWrapper>

z-110 居于一种模式之上,而居于土司之下z-999,保持在所有东西之上。 也一样 HierarchySelect (单位:千美元)optionsClassName和拾取者 ColorInput (单位:千美元)pickerClassName) (中文(简体) ). 一个更大的 z- 比起 默认是应用的: Tailwind 写得再大一点(测试包检查它). 下潜 z-3,添加 ! (单位:千美元)z-1!) (中文(简体) ).

版式部件

• ApiStatus: 请求所在位置的状态: 装入时会响起, 带有标题的图标 error (说作警告), empty 财务报告和审定财务报表 success。 。 。 .
• BorderGradient:带有梯度边框的卡片.
• Skeleton灰色地块 脉冲着东西的负载 它隐藏在辅助技术中:说"装入"一次,在区域上(aria-busy) (中文(简体) ).
• Table, (中文(简体) ), TableHead, (中文(简体) ), TableBody, (中文(简体) ), TableRow, (中文(简体) ), TableHeadCell, (中文(简体) ), TableRowCell: 真实 <table> 带有应用程序外观的元素;它们具有其属性(colSpan...),并有一个信头单元格是: scope="col" 除非告诉别人.
• ScrollableGradientContainer: 内容在框中滚动,边缘有更后退的淡出;在滚动时是一个制表站. scrollerRef 给出滚动的元素.
• LoadingRings, (中文(简体) ), LoadingText, (中文(简体) ), LoadingPage: 环并一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一闪一.
• Dropdown: 打开其下的一个面板的按钮(aria-expanded; 封闭面板为 inert,键盘无法到达). closeOnEscape, (中文(简体) ), closeOnOutsideClick· ; children 可以是函数 { close }。 。 。 .
• ModalWrapper: 页面上的一个对话框, 绘制于 document.body数字 : role="dialog",以其名称命名或 label,焦点被保存在内部,然后回到它拥有的东西,后面的一页不滚动, Escape关闭了上面的一页.
• ConfirmModal: 需要决定的对话框( a) alertdialog或说事情是如何发生的; type="custom" 显示自己的内容。 背景的媒体不会关闭它:决定不是通过误击作出的.
• NetworkStatusToaster:说当连接消失,当它回来时, 与烤面包机的应用给予(status 即为例如. useOnlineStatus().status) (中文(简体) ).

import { ConfirmModal } from '@beautinique/frontend-components';

<ConfirmModal
  type="warning"
  title="Delete this category?"
  description="It cannot be undone."
  buttons={{
    left: { content: 'Cancel' },
    right: { content: 'Delete', buttonProps: { onClick: remove } },
  }}
  modalProps={{ isOpen, onClose: () => setIsOpen(false) }}
/>;

装入史克林,泰迪,醒来进展

import { LoadingScreen, WakeUpProgress } from '@beautinique/frontend-components/loading-screen';

<LoadingScreen>
  <WakeUpProgress phase="services" services={['user', 'product']} awakeServices={['user']} />
</LoadingScreen>;

应用程序开始的屏幕:熊(或你给它的东西) 以及每5个变化的美丽事实 秒数facts, (中文(简体) ), interval· ; BEAUTY_FACTS 是默认列表。 一个屏幕阅读器听到 label 一次,不是每个事实. WakeUpProgress 显示后端唤醒的步骤. Teddy 进口其商品 (单位:千美元)@beautinique/frontend-styles/teddy.css)本身.

媒体

import { MediaCarouselWithModal, VideoPlayer } from '@beautinique/frontend-components/media';

const media = [
  { type: 'image', url: '/a.webp' },
  { type: 'video', url: 'https://cdn.example/clip.mp4' },
];

<MediaCarouselWithModal media={media} />; // thumbnails; one opens a dialog
<VideoPlayer videoProps={{ src: 'https://cdn.example/master.m3u8', controls: true }} />;

• MediaCarousel 是缩略图一行: 名为“ 显示图像 2 of 5” 的按钮, aria-current 在选定的一个上,每个上有一个可选的去除按钮;行滚动到选定的一个上,而不移动页面. MediaCarouselWithParentMedia 显示所选项目大和前 / 下个按钮(它们绕来绕去,左右箭头按键相同,读出计数器"2 of 5")及其下行. MediaModal 在对话框中显示相同的内容(有控件的视频)和 MediaCarouselWithModal 是打开它的行.
• VideoPlayer 除非另有说明,否则在没有控制或循环的情况下,播放哑音和内线。 A 类 流线 (单位:千美元).m3u8)由浏览器在可以时(Safari, iOS)和由 hls.js 无法安装时: 安装 hls.js; 已装入 只有那时,所以一个播放无流的页面永远不会下载. onStreamError 当一个流无法播放时会被告知;没有记录. showPosterOnly 仅显示由浏览器中的文件所制作的海报( s)captureVideoPoster除非你给了 videoProps.poster 或者说 getPoster (例如CDN制作的海报).
• 说到辅助技术的每个词 labels (单位:千美元)MEDIA_LABELS 有英语的,例如. labels={{ next: 'Siguiente' }}。 。 。 .

证明卡卢塞尔

import { TestimonialCarousel } from '@beautinique/frontend-components/testimonials';

<TestimonialCarousel
  testimonials={[{ name: 'Asha Rao', role: 'Founder', content: 'Lovely products.', rating: 5 }]}
  interval={5000}
/>;

一次一个证明, 自己转动的方式 一个旋转木马必须移动: 它停止,而指针在它之上 (鼠标,不是指头)或者焦点在其中,一个暂停/播放按钮永远停止它,而系统设置用于 更不要说动,它根本没变 上个和下个按钮都绕来绕去. 所宣布的是当前幻灯片,且仅限 而不转弯。 没有 image 名称首字母显示.

等级选择

import { HierarchySelect } from '@beautinique/frontend-components/hierarchy-select';

<HierarchySelect
  label="Category"
  options={[
    { label: 'Skin care', value: 'skin', children: [{ label: 'Cleanser', value: 'cleanser' }] },
  ]}
  selectProps={{ value, onChange: setValue, placeholder: 'Choose a category' }}
/>;

一个打开一个选项树的字段,上面有一个搜索字段. 只有没有孩子的选择;其他选择 打开并关闭。 焦点留在搜索字段,而箭头键则通过树移动(左右开和 关闭分支, Enter 选择, Escape 关闭并给定焦点返回, Tab 关闭 。 搜索显示匹配和 树枝能引出它们 都打开 给 inputProps={{ value, onChange }} 以拥有搜索(在服务器上搜索). 在一个模式下 optionsClassName="z-110",或打开后面的框(见 投入) (中文(简体) ).

颜色输入

import { ColorInput } from '@beautinique/frontend-components/color-input';

<ColorInput label="Brand colour" value={hex} onChange={setHex} />;

需求 react-color-palette。字段是打开拾取器的一个按钮(一个将焦点保持到关闭的对话框) 并还给它. value 还有什么 onChange 获得是十六进制字符串;没有颜色的文本不会被传递。 这个 滑动需要一鼠标或一指;取取取器中的六分位和rgb字段从键盘中工作. 在一个模式下 pickerClassName="z-110",或拾取器打开后面(见 投入) (中文(简体) ).

文件输入

import { FileInput } from '@beautinique/frontend-components/file-input';

<FileInput
  label="Photos"
  fileInputProps={{ name: 'photos', multiple: true, value: files, onChange: addFiles }}
  errors={files.map((file) => (file.size > MAX ? 'Too big' : undefined))}
  handleRemove={removeFile}
/>;

真实文件输入( 键盘到达它, 字段显示焦点, 可以再次选择相同文件) 有缩略图 每个文件都放在下面 value 联合国 File,或已保存的地址。 缩略图打开大文件 在对话框中可以有一个删除按钮; errors 给每个文件一个消息,并给其缩略图一个红色边框。 文件 获取浏览器地址( e)URL.createObjectURL),当文件去. getMediaType 说什么是相片 和什么视频(默认查看类型和结尾).

面包屑

import { Breadcrumb, getBreadcrumbItems } from '@beautinique/frontend-components/breadcrumb';

<Breadcrumb items={getBreadcrumbItems(pathname)} onNavigate={(href) => navigate(href)} />;

A 类 nav 有列表;最后一项是当前页面。 联系是简单的 <a href> (他们在一个新的标签中工作); onNavigate 使用普通点击(不是用修改器点击,或用中键点击),所以应用程序可以使用 它的路由器. getBreadcrumbItems('/products/skin-care') 使项目从路径.

社会认证

import { SocialAuth } from '@beautinique/frontend-components/auth';

<SocialAuth
  providers={[{ name: 'Google', icon: 'logos:google-icon', href: '/auth/google' }]}
  onProviderClick={() => sessionStorage.setItem('redirect', location.pathname)}
/>;

属于链接的图标("继续使用Google"). onProviderClick 在浏览器离开供货商之前运行。 一个图标 给定的名称来自图标化的API,除非应用程序已经注册(addIcon) (中文(简体) ).

静态页面部件

StaticPageLayout, (中文(简体) ), StaticPageHeader (页 h1, (中文(简体) ), StaticPageSection (单位:千美元) h2, (中文(简体) ), InfoCardGrid (单位:千美元)h3 纸牌, Checklist, (中文(简体) ), HighlightNote 联合国 note, (中文(简体) ), NumberedSteps (已订购清单), StaticPageCTA, (中文(简体) ), EmailUsAction 财务报告和审定财务报表 LastUpdatedBadge (单位:千美元)date 需要;它用 UTC 和固定语言写成,所以服务器和浏览器同意) 使网页只包含内容(公司、法律、信息)。 圣像由名所出.

土司

这个包画了土司; 保存它们的商店和 toaster 显示他们 @beautinique/frontend-stores对 店铺是 由应用程序制作有一次,用这个包裹的祝酒词, 给了需要它的两个东西: ToastContainer 这里,作为道具,和 createToaster 的软件包。 这个包裹没有自己的商店和面包机,也没有出口.

// src/stores/toast.store.ts
import type { TToast } from '@beautinique/frontend-components';
import { createToastStore } from '@beautinique/frontend-stores';

export const useToastStore = createToastStore<TToast>();

// src/utils/toaster.ts - the toaster and the helpers, for the rest of the app to import
import { createToaster } from '@beautinique/frontend-stores';

import { useToastStore } from '@/stores/toast.store';

export const {
  toaster,
  withProgressToast,
  withUploadsToast,
  runUploadsInToast,
  createUploadsToast,
} = createToaster(useToastStore);

// once, near the root of the app
import { ToastContainer } from '@beautinique/frontend-components';

<ToastContainer store={useToastStore} />;

toaster 在任何地方工作(一个API客户端,一个商店),不仅仅来自组件:

toaster.success({ title: 'Saved', description: 'Your changes were saved.' });
toaster.error({ title: 'Failed' });
toaster.warning({ title: 'Careful' });
toaster.default({ title: 'Heads up' });
toaster.loading({ title: 'Working' });
toaster.custom({ type: 'custom', children: <p>Any React content</p> });

上传之后的托拉斯 (withProgressToast 对于一个请求, createUploadsToast, (中文(简体) ), withUploadsToast 财务报告和审定财务报表 runUploadsInToast 数) createToaster 并被描述于 存储 README。土司绘制它们显示的内容:左侧和一行(等待、上传、完成或失败)上传的全部进展.

店得为一. 集装箱和 createToaster 必须给同一家商店:向一个从未显示过集装箱图纸的商店添加一个祝酒词。 做一次(应用程序的一个模块,从那里导入),两者不能相异. 编译器检查它: 容器会存储这个包 TToast,以及 createToaster 从它给定的商店取出它的类型.

土司的图标被捆绑起来,所以一个土司显示它的图标没有网络.

此套件的代码规则

• 包裹没有状态. 土司店由应用制作(createToastStore 联 合 国 @beautinique/frontend-stores,用这个包 TToast并交给 ToastContainer 作为道具. 烤面包机也是商店的套装createToaster) (中文(简体) ). 这里没有什么能制造出一个商店或烤面包机,或者出口一个,所以这个包裹永远不能成为两个商店的起因. 只有再出口的根 /ui, (中文(简体) ), /layout, (中文(简体) ), /inputs, (中文(简体) ), /theme 财务报告和审定财务报表 /toast (单位:千美元)tsup.config.ts 保持它们对外,和 built-files.test.ts 检查已建文件 npm run build) (中文(简体) ).
• 根有大多数屏幕所用的 (单位:千美元)/ui, (中文(简体) ), /layout, (中文(简体) ), /inputs, (中文(简体) ), /theme 财务报告和审定财务报表 /toast) (中文(简体) ). 一个组件 很少屏幕使用获得自己的路径,而不在根中.
• 图标是图标,捆绑并注册的. 一个组件用图标绘制其图标 Icon,图标数据位于软件包中(toast-icons.ts, (中文(简体) ), stepper-icons.ts, (中文(简体) ), theme-icons.ts, (中文(简体) ), inputs-icons.ts, (中文(简体) ), media-icons.ts...,注册于 addCollection因此,他们显示没有网络和 等待图标 API。 组件在制作时( 而非文件时) 登记自己的图标 ),所以一个应用程序只携带它所使用的组件的图标. 图标 仅浏览器:在服务器上,占位符处于其位置(对于Vite apps来说是好的).
• 组件默认可访问: 实际要素(button, (中文(简体) ), ol, (中文(简体) ), hr),名称为没有 文本,键盘的焦点环(focus-visible, (中文(简体) ), prefers-reduced-motion 和强迫颜色 模式已处理,没有移动或宣布每秒.
• 组件本身的 Css 生活在组件旁边 由它而进口,不是由样式而输入 软件包。 它使用样式包的变量(var(--smoke-eerie),而且没有 重新导入 : 在应用的 ccs 之后, 第二次导入它们将会取消应用 超载.
• 没有从应用程序进口. 它的应用需要的组件是通过道具输入的.
• 一个入口只能通过它的 index (单位:千美元)../ui/index.js永远 ../ui/Button.js: 构件会留下像导入公用路径这样的导入,所以一个组件永远不会被捆绑两次(entries.test.ts 检查它.
• 重或稀有的依赖关系是可选的同伴,在需要时加载数字 : hls.js 实值 import()当一个溪流被播放 react-color-palette 仅由 /color-input。 。 。 .
• 言为道具. 一个组件对辅助技术的每一个句子都有英语和道具的默认(labels)以相取变.

发展

npm run build        # dist (needed by the playground and by the type check of the playground)
                     # `@beautinique/frontend-stores` has to be built first (`npm run build` at the root of the repo does it in order)
npm run playground   # http://localhost:4200 - the components, in a real browser
npm test

经过重建 dist 重新启动游乐场( 或触摸) playground/index.css: 尾风在其中寻找类名 dist 当处理 cs 时, 所以一个新类在 dist 直到那时才生成。 从 npm 安装软件包的应用程序没有此功能, 它随软件包的原样一起构建 .

游乐场( C)playground/)是一个小Vite页面,通过该软件包的公开导入使用该软件包 路径,一个应用程序的方式。 报告未发表(files 内 package.json 别管了).