@eldrajs/ui

为Eldra storefronts提供可访问的Vue 3核心组件,通过CSS设计符来进行.

这些组件是用来建造的 eldra-starter-spec/01-core-components.md (世界水大会) 页:1 计划1——基础、行动和形式Button编号 :ButtonGroup, (中文(简体) ), Link, (中文(简体) ), Input, (中文(简体) ), Textarea, (中文(简体) ), FieldWrapper, (中文(简体) ), FormLayout, (中文(简体) ), Checkbox编号 :CheckboxGroup, (中文(简体) ), Radio编号 :RadioGroup, (中文(简体) ), Switch, (中文(简体) ), Select编号 :MultiSelect, (中文(简体) ), QuantityStepper, (中文(简体) ), VariantPicker, (中文(简体) ), SearchBar)——完成,加 UnitInput 财务报告和审定财务报表 CurrencyInput,光谱没有等同;显示、商业、布局、覆盖、导航 和反馈组成部分在以下两个次级项目中着陆,在同一交付顺序中 spec's"组件与交付顺序"一栏列出. 这个包裹是做什么的 未列出名称 光谱以外的添加当它离开一个财产表时 记录在 绕行 读者也找不到.

安装

pnpm add @eldrajs/ui vue

端点 : vue ^3.5。地板是3.5,而不是3.4: 每个控制器的ID来自 useId(),哪个 Vue 在3.5中添加, 因此在3.4 上安装成功 和第一个挂载投掷的控制 useId is not a function。 。 。 . vee-validate ^4.12 是一个 选项 对等点——只有 ./vee-validate 输入需要它,而包里没有其他东西可以导入它.

样式

组件来了 预建: 一个应用程序从不编译此软件包的样式, 不需要 Tailwind 使用它们 组件的每个类别是: eldra:- 前缀(eldra:px-4, (中文(简体) ), eldra:hover:bg-primary),由Tailwind所编译 prefix(eldra),每个主题变量 读作 --eldra-*。软件包的 CSS 中没有使用应用程序本身的 Tailwind 构建用途的名称,所以 两人从未重塑对方的标记.

5艘CSS入列舰. 从同一个开始 --eldra-* 变量,所以没有变化 ,只有不同的传送形状.

• @eldrajs/ui/style.css ——道具,泰尔温德的飞行前和每个组件的风格,为: 使用此软件包构建的页面 :

  @import '@eldrajs/ui/style.css';
  

• @eldrajs/ui/components.css —— 说 style.css 没有泰风的飞行前, 对于一个有 其样式表(或自有的 Tailwind)并添加组件:

  @import '@eldrajs/ui/components.css';
  

  飞行前是重置 全页数字 : style.css 设置 h1– 说吧 –h6 到周围 大小和重量,每 ul编号 :ol 没有子弹,没有缩进,每一个 a 向周围颜色 无下划线,每 p 并走向无边际,以及 button 没有边界或填充. 它坐在这里 @layer base,所以一个网站自己的规则 仍然赢得存在的地方, 但任何网站 被放入浏览器——CMS中最常有的丰富的文本——会失去它的默认. components.css 带有相同的主题和相同的公用事业,字节表示字节,并将重置缩小为 组件自成一体,所以网站本身的元素保留了浏览器 默认和任何传递到组件槽中的东西都保持了网站的造型. 使用 style.css 当页面从此软件包构建时; 使用 components.css 当页面是网站自己的. src/styles/__tests__/componentsCss.browser.spec.ts 将每个组成家庭置于两者之下, 覆盖打开,需要相同的像素.

• @eldrajs/ui/tokens.css - 那个 --eldra-* 变量(颜色、弧度、间隔、类型、, 动作,z指数, 和一个不透明—— --eldra-revalidating-opacity),在 :root 与 光谱默认值,加a @media (prefers-reduced-motion: reduce) 规则为零 持续时间变量.

• @eldrajs/ui/tailwind.css 对于一个运行 Tailwind v4 并想要它的应用程序 拥有 标记 在同一设计符号上: tokens.css,然后是一个 @theme 块映射 Tailwind 的命名空间 在这些变量上(--color-primary: var(--eldra-color-primary), (中文(简体) ), --radius-md, (中文(简体) ), --font-heading, (中文(简体) ), --spacing-*, (中文(简体) ), --shadow-*, (中文(简体) ), --ease-*)和包的自定义公用事业 (控制高地,即 eldra-focus 环,类型样式,运动和地层公用事业). 它会建立 没有组件; 导入旁边的预建组件 . theme.css (单位:千美元) @theme 块)和 utilities.css (公用设施) 船自己也.

  @import 'tailwindcss';
  @import '@eldrajs/ui/tailwind.css';
  @import '@eldrajs/ui/components.css';
  

  类型样式( E)text-body, (中文(简体) ), text-h2.) 设置长手,从不 font ,并读 它们的重量 var(--tw-font-weight, <token>),宣言Tailwind为自己写作 --text-*--font-weight因此,一个 font-medium编号 :font-semibold 一个赢一个赢一个赢一个 编译为 tabular-nums 除了一个 不再重置。 基础层 @apply font-* 套装 --tw-font-weight 因此,它在同一元素上达到类型样式. 线高和跟踪是普通的长手 故意:启动者自己的基础规则 (单位:千美元)h1– 说吧 –h4 @apply leading-[1.1] tracking-tight) 否则将覆盖每个标题的类型 样式.

超越组件的类

组件的风格坐在那里 @layer components在尾风下方 @layer utilities两者 style.css 财务报告和审定财务报表 components.css 宣布标准顺序( e)properties, theme, base, components, utilities),所以它先持有任意样式表负载. 一个你设置的课 组件,与 class (其最外层元素)或 classes (其中的一个元素),不是前缀和 被添加到组件本身的类中;它逐层取胜,而不论其具体性如何. 没什么 运行时合并或去除: 组件绑定其类 平原 Vue 方式, 每类一个 对每个要素的关切.

<Button class="px-8">Checkout</Button>
<!-- renders class="eldra:control-h eldra:px-4.5 … px-8": px-8 wins -->

• 它在每一个州都获胜: 一个平地 bg-red-600 编号 Button 替换其盘旋和活性填充 因为公用设施级规则比任何组件级规则都要好 写你想要的状态 (单位:千美元)bg-red-600 hover:bg-red-700) (中文(简体) ).
• 您的应用程序本身的 Tailwind 必须生成该类( 它在您的源头, 所以它是的) 。 没有 你自己的尾风,你的任何CSS 没有层次,或者在之后宣布的一层 components 以同样的方式获胜.

这个 data-eldra-ui 标记

每一个部件的最外层元素都携带着 data-eldra-ui,每个元素都有一个组件 制作外部: a Select 或者说 MultiSelect 面板,a SearchBar 结果面板,a Popover 面板,a Tooltip 气泡和烟雾 Toaster 区域,每个电传输出出其组成部分. components.css重置完全达到这些元素和 data-part 里面的元素, :where([data-eldra-ui], [data-eldra-ui] [data-part]),在零特异性. data-part 独自一人 还不够,因为不是这个软件包的名字:一个站点自己的 <h2 data-part="title">,或任何 Ark UI 或 Zag 组件( 设置 data-part 保留浏览器 默认值。 属性是公开和稳定的,所以一个站点也可以用作钩子 (单位:千美元)a:not([data-eldra-ui], [data-eldra-ui] *) 将网站的全球链接排除在 页:1 其中一个案件仍然在范围之内:一个自有要素 data-part 地点 传入组件的槽( Ark UI 部件在 a 内) Dialog说)是一个 data-part 元素 在一个标记的根内,所以它也得到重置.

一个网站 无层 元素规则击败包的分层规则,无论具体性如何: a 全球 a { color: … } 或者说 button { font: … } 重塑组件内部的元素. 此类规则的范围.prose a或把它们放在一层.

他们正在树下

provideEldraScope(name),在 setup() 或应用根,使每个 其下组件 data-eldra-scope="<name>" 它的根部和每一个部位的传送 (小板,泡泡,对话,土司) --eldra-* 可对这些组件设置变量 仅电传部件包括:

[data-eldra-scope='studio'] {
  --eldra-color-primary: #0b5cad;
}

每个元素持有槽内容 您通过 也携带 data-eldra-slot 联合国 Button是因为 标签, a Dialog标题、身体和脚印,a Popover 面板...),当槽有内容时 永远不要为背负, 作为你自己的CSS的钩子.

字体

类型符号的默认值是 --eldra-font-heading: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif 财务报告和审定财务报表 --eldra-font-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif。软件包也不装入 字体 - 它只命名它们 - 所以一个消费者 要么装入 Bricolage Grotesque 和仪器 sans 本身(自主办,或谷歌字体) <link>编号 :@import)或覆盖 --eldra-font-heading 财务报告和审定财务报表 --eldra-font-body 他们自己的堆栈。 在其中一种或另一种发生之前,文字在 倒背系统堆栈,这是可以辨识的,但不是光谱的预定外观.

自定义

每个组件都支持这五个部分;没有一个硬码是商店想要更改的.

1. 托肯丝. 每个颜色、半径、高度、相距步骤、字体、持续时间、放松和z-index a 组件使用解析到 a --eldra-* 变量从 样式 上方——设置在任意 祖先(通常为 :root和每个读它后. :root 而不是一个 包装对于弹出面板: Select, (中文(简体) ), MultiSelect 财务报告和审定财务报表 SearchBar 让他们通过 <Teleport> 改为 body (见 层层因此,一个变量集在一个 <div> 环绕 控制不再是面板的祖先,也不再由其继承.

2. 每个组件 CSS 变量,在组件的自根上用出自符号声明 默认值,用于未共享设计符号的少数数值——大小没有专用 符号,特定组件角半径。 每一个都记录在部件上 故事本 docs 页面; 当前声明的变量 :

   构成部分	CSS 变量
   Accordion	没有 —— 顶端分割器是股票 border-t,无每个组件变量
   AccordionItem	--eldra-accordion-title-line (默认) 1.4)——标签的行比,无自有的表示
   Avatar	--eldra-avatar-initials-size-{sm,md,lg,xl} (违约) 0.76rem编号 :0.95rem编号 :1.33rem编号 :2.28rem,"直径的38%"——没有自己的标志", --eldra-avatar-initials-tracking (默认) 0.02em, (中文(简体) ), --eldra-avatar-icon-size-{sm,md,lg,xl} (违约) 0.857rem编号 :1.071rem编号 :1.5rem编号 :2.571rem,光谱本身的lg数按比例缩放到其他三个直径)
   AvatarGroup	无 – 重叠和堆栈顺序为平面 Tailwind, 没有每个组件变量
   Badge	--eldra-badge-line-height (默认) 1)——徽章正文的行比,没有自有的标志
   Breadcrumb	无——倒塌阈值为 --container-tablet (单位:千美元)Container自己的48雷姆地沟断点,以及链接/椭圆盒再利用 target-min编号 :eldra-link-radius编号 :radius-sm,没有其自身的每个组件变量
   Button	--eldra-button-radius (默认) var(--eldra-radius-md), (中文(简体) ), --eldra-button-border-width (默认) 1px身高不变, 和附着 ButtonGroup 与宽度相重叠, --eldra-button-line-height (默认) 1.2, (中文(简体) ), --eldra-button-font-size-lg (默认) 1.0625rem,一个按钮大小,没有它自己的类型标志)
   ButtonGroup	无——只读第1层的共享符号
   Carousel	--eldra-carousel-per-view-base编号 :-md编号 :-lg (作为铁道上的内线样式由 carouselPerViewStyle,解决为 --eldra-carousel-per-view 每个容器 -- -- 取自 eldra-carousel-track 工具,不默认它自己的——一个没有设置的幻灯片保持全宽)和 --eldra-carousel-gap (默认) var(--eldra-space-4)),两者均由 eldra-carousel-slide 工具宽度公式; --eldra-carousel-dot-size (默认) 0.5rem和 --eldra-carousel-dot-ring (默认) 1.5px,读作 eldra-carousel-dot· ; --eldra-carousel-bleed (默认) 0px)——轨迹的内出水沟出血,作为自己的垫地,冲出去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去不去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去 max()- 有焦点环的伸展,所以出血永远不花环 房间的轨道储备,通过它(设置每个断点) classes.track从来没有 px-*编号 :-mx-*编号 :scroll-px-* (b) 利用自己的工具——用这些工具取代该轴心上的保留,而不是用它来组成)
   Checkbox	--eldra-checkbox-radius (默认) var(--eldra-radius-sm), (中文(简体) ), --eldra-checkbox-border-width (默认) 1.5px, (中文(简体) ), --eldra-checkbox-border-width-invalid (默认) 2px(中文(简体) )
   CheckboxGroup	无——只读第1层的共享符号
   Chip	无 —— 所选/填充为 color-mix() 超过共享 --eldra-color-* 符号,没有每个组件变量
   ChipGroup	无——只读第1层的共享符号
   Container	无 -- -- 沟道宽度--eldra-gutter-{mobile,tablet,desktop})是共享符号,也读作 Section; 三限 width 值读取共享 --eldra-container-{narrow,content,wide} 直接、通过 Container属于自己的 eldra-container-{narrow,content,wide} 而不是尾风 max-w-narrow编号 :-content编号 :-wide - 见下文 " 绕道 " 条目
   ContentCard	--eldra-content-card-title-size (默认) 1.25rem和 --eldra-content-card-title-line (默认) 1.3)——头衔自有大小和行比,无自有之相; --eldra-content-card-excerpt-size (默认) 0.9375rem和 --eldra-content-card-excerpt-line (默认) 1.5)——节选的自有大小和行比,由 FeatureCard是因为 body (单位:千美元)text-content-card-excerpt 内 tailwind.css),因为两者读作相同的谱号
   CurrencyInput	UnitInput'正是(它使一个 UnitInput 与 isCurrency 总是在)——看 UnitInput 横行
   Dialog	--eldra-dialog-title-size (默认) 1.25rem, (中文(简体) ), --eldra-dialog-title-line (默认) 1.3)——标题自有大小/行,无自有标志; --eldra-dialog-width (默认) 32rem, (中文(简体) ), --eldra-dialog-width-sm (默认) 24rem)——面板自有宽度,总是以对话框的相加宽度为上限(取景口更小) 2rem(a) 公用事业本身内部; --eldra-dialog-max-height (默认) none:高高的面板会长出,对话框卷起像一页;设置以盖上面板并卷起里面的身体 eldra-dialog-fullscreen 功能将面板贴到取景口边缘,并用车体滚动到头部和脚部之间,供消费者在取景口变体下使用(classes.panel: 'max-md:eldra-dialog-fullscreen'(三); --eldra-dialog-background (默认) var(--color-background), (中文(简体) ), --eldra-dialog-border (默认) var(--color-border), (中文(简体) ), --eldra-dialog-text (默认) var(--color-text)关闭按钮的悬浮和按线, --eldra-dialog-muted (默认) var(--color-muted),说明)和 --eldra-dialog-backdrop (默认) var(--color-overlay))——染色体本身的颜色,仅由对话框的部分来读取,所以设置上 <dialog> (单位:千美元)class重新整理,而不重编时间档内容 --eldra-color-* 会有的
   Drawer	--eldra-drawer-title-size (默认) 1.25rem, (中文(简体) ), --eldra-drawer-title-line (默认) 1.3)——标题自有大小/行,无自有符号(同编号 Dialog'',但是它自己的可变对; --eldra-drawer-width (默认) 28rem)——面板自有最大宽度,在公用设施内部的取景口被封顶,也搭载了全屏-下-a-48rem-视图 媒体查询; --eldra-drawer-header-height (默认) 4rem)——标题行最不高,与 --eldra-drawer-header-padding (默认) var(--eldra-space-4)它的上下铺垫, 0px 将行的内容集中在精确的高度上,例如站点头条; --eldra-drawer-gutter (默认) 1.5rem)——头部,体部和脚部相并相并. 装置的安全区域( :env(safe-area-inset-*)因此,一个全屏抽屉可以清空一个音符,并在网页上显示主标 viewport-fit=cover· ; --eldra-drawer-slide (默认) 2rem, (中文(简体) ), --eldra-drawer-enter-duration (默认) 400ms, (中文(简体) ), --eldra-drawer-exit-duration (默认) 260ms——面板滑出并淡出; --eldra-drawer-swipe-threshold (默认) 24px(a) 在小组之后,一个侧面的刷子行走多远 mobileSheet, (中文(简体) ), --eldra-drawer-sheet-gap (默认) 3rem, (中文(简体) ), --eldra-drawer-sheet-radius (默认) var(--eldra-radius-xl)和 --eldra-drawer-handle-color (默认) var(--eldra-color-border-strong)(中文(简体) )
   EditorPlaceholder	--eldra-editor-placeholder-border-width (默认) 1.5px——破损边界的宽度,区别于 EmptyState自己的股票 border (页x)
   EmptyState	--eldra-empty-state-title-size (默认) 1.25rem和 --eldra-empty-state-title-line (默认) 1.3)——头衔自有大小和行比,无自有象征
   FeatureCard	股份 ContentCard是因为 --eldra-content-card-excerpt-size编号 :-line 为其自身服务 body 文本( 文本 (text-content-card-excerpt页:1 title 读取 text-h4 直接, 没有自己的变量
   FieldWrapper	--eldra-field-note-line-height (默认) 1.45)——帮助和错误文本共享的行
   FilterPanel	--eldra-filter-subheading-tracking (默认) 0.06em,一个大小系统子标题的字母间隔——超线标志自0.12em将"SOCKS (EU)"推入了15rem侧边栏的两行中, --eldra-filter-swatch-edge-width (默认) 1px和 --eldra-filter-swatch-ring-width (默认) 1.5px对于一个彩色的表的边缘 和它得到的戒指 --eldra-filter-histogram-bar-min 编号 : --eldra-filter-histogram-bar-radius (违约) 2px 编号 : 1px)为一个直方图栏最小高度及其两个上角. 其他一切都是共同的象征,或来自它所组成的组件(Checkbox, (中文(简体) ), Switch, (中文(简体) ), Chip, (中文(简体) ), Badge, (中文(简体) ), Input, (中文(简体) ), Button, (中文(简体) ), CurrencyInput, (中文(简体) ), RangeSlider),各经自行而复行
   FormLayout	--eldra-form-summary-radius (默认) var(--eldra-radius-md))——状态摘要框的角半径
   Icon	无——只读第1层的共享符号
   Image	--eldra-image-hatch-gap (默认) 0.75rem)——直播"无影像"占位符的对角线重复距离
   Input	--eldra-input-radius (默认) var(--eldra-radius-md), (中文(简体) ), --eldra-control-font-size (默认) 0.9375rem, (中文(简体) ), --eldra-control-font-size-mobile (默认) 1rem, (中文(简体) ), --eldra-control-line-height (默认) 1.5rem, (中文(简体) ), --eldra-field-border-width (默认) 1px(中文(简体) )
   Lightbox	进口键框eldra-lightbox-in),而每个大小要么是共享符号,要么是字面成分特定类别(px-16, (中文(简体) ), size-11编号 :max-md:size-11),同"无专用变量"形状 AvatarGroup编号 :ButtonGroup