@digdir/designsystemet-web

@digdir/designsystemet-web

目录

• @digdir/designsystemet-web
  • 目录
• 开始吧
  • 选择你需要的部分
  • 个人进口
  • 类型
  • 警告:
• <ds-breadcrumbs>
• data-clickdelegatefor
• details 财务报告和审定财务报表 summary (无障碍多填充)
• <dialog> (单位:千美元)closedby 混合填充)
• <ds-error-summary>
• <ds-field>
  • 计数器
• fieldset
• 援引者command 混合填充)
• <ds-pagination>
• popover
• readonly
• <ds-suggestion>
• <ds-tabs>
• focusgroup (充电)
• data-tooltip

开始吧

@digdir/designsystemet-web 为Designsystemet组件提供框架独立行为. 与 @digdir/designsystemet-css,带有自己的CSS,或者作为现有设置中更小的增强层.

我们建议在您需要全球所有网络组件、观察器和多填充器时,导入整个软件包. 这将在全球注册所有网络组件和观察者, 所以你只需要做一次.

import '@digdir/designsystemet-web';

看我们的 文档 财务报告和审定财务报表 模式 以更多的引导。 页面也可以通过附件作为 Markdown 提供 .md 到 URL 或请求 Accept: text/markdown。 。 。 .

选择你需要的部分

设计系统包的用意是像工具箱一样. 您可以使用完整的软件包, 或只使用加速您的工程的部件 .

例如,你可以:

• 使用情况 @digdir/designsystemet-web 无 @digdir/designsystemet-css 如果你已经有自己的造型
• 使用情况 @digdir/designsystemet-css 无 @digdir/designsystemet-web 如果您只需要样式和处理互动
• 将一些设计系统组件与您自己的组件合并
• 在软件包上添加帮助, 并跳过不符合您的设置的部件

个人进口

软件包支持子路径导出, 这意味着如果需要, 您可以导入软件包的单个部件 .

import '@digdir/designsystemet-web/ds-breadcrumbs';
import '@digdir/designsystemet-web/clickdelegatefor';
import '@digdir/designsystemet-web/details';
import '@digdir/designsystemet-web/dialog';
import '@digdir/designsystemet-web/ds-error-summary';
import '@digdir/designsystemet-web/ds-field';
import '@digdir/designsystemet-web/fieldset';
import '@digdir/designsystemet-web/focusgroup';
import '@digdir/designsystemet-web/invokers';
import '@digdir/designsystemet-web/ds-pagination';
import '@digdir/designsystemet-web/popover';
import '@digdir/designsystemet-web/readonly';
import '@digdir/designsystemet-web/ds-suggestion';
import '@digdir/designsystemet-web/ds-tabs';
import '@digdir/designsystemet-web/toggle-group';
import '@digdir/designsystemet-web/tooltip';

类型

将软件包添加到您的 types 类型:

{
  "compilerOptions": {
    "types": ["@digdir/designsystemet-web"]
  }
}

警告:

@digdir/designsystemet-web 警告你们堕落和缺失的属性. 这在开发时可以有用,但也很容易被隐藏起来,例如在生产中:

import '@digdir/designsystemet-web';
if (typeof window !== 'undefined' && isProduction()) window.dsWarnings = false;

<ds-breadcrumbs>

自动隐藏/显示 aria-label 桌面/移动和 aria-current="page" 在列表中最后一个链接中。 没有API.

<ds-breadcrumbs class="ds-breadcrumbs" aria-label="You are here:">
  <a href="#none" aria-label="Back to level 3">
    Level 3
  </a>
  <ol>
    <li><a href="#none">Level 1</a></li>
    <li><a href="#none">Level 2</a></li>
    <li><a href="#none">Level 3</a></li>
  </ol>
</ds-breadcrumbs>

data-clickdelegatefor

用于授权点击事件 。 例如,您可以使用它来授权从父元素到动态添加的孩子元素的点击事件.

<div class="ds-card" data-clickdelegatefor="target">
  <a id="target" href="https://example.com" rel="noopener">Go to example</a>
  <span>Clicking this card will open example in a new tab</span>
</div>

details 财务报告和审定财务报表 summary (无障碍多填充)

使用本地元素 。 和Android Talkback屏幕读取器合并后, 我们在 Firefox 中填充一个错误, 以正确宣布状态和角色 .

<details class="ds-details">
  <summary>More info</summary>
  <div>Lorem ipsum dolor sit amet.</div>
</details>

<dialog> (单位:千美元)closedby 混合填充)

使用本地语言 <dialog> 键。 我们多填充支持 closedby="any"。 。 。 .

<dialog class="ds-dialog" closedby="any" id="my-dialog">
my dialog
</dialog>

打开和关闭

使用引用器 command 财务报告和审定财务报表 commandfor,打开并关闭对话框.

<button class="ds-button" type="button" command="show-modal" commandfor="my-dialog">
  Open dialog
</button>
<dialog id="my-dialog" class="ds-dialog">
  <button class="ds-button" command="close" commandfor="my-dialog">Close</button>
</dialog>

<ds-error-summary>

可见并设定时自动获取焦点 aria-labelledby 给第一个孩子 没有API.

<ds-error-summary class="ds-error-summary">
  <h2>Summary</h2>
  <ul>
    <li><a href="#none">Error 1</a></li>
    <li><a href="#none">Error 2</a></li>
    <li><a href="#none">Error 3</a></li>
  </ul>
</ds-error-summary>

<ds-field>

连接输入、标签和错误消息.

<ds-field class="ds-field">
  <label>Label</label>
  <input type="text" placeholder="Placeholder" class="ds-input" />
  <div class="ds-validation-message" data-field="validation">
    This is a validation message.
  </div>
</ds-field>

计数器

您可以通过添加 data-field="counter" 属性为 a <p> a 内的元素 ds-field。 。 。 .

<ds-field class="ds-field">
  <label>Label</label>
  <textarea class="ds-input"></textarea>
  <p data-field="counter" data-limit="20" data-over="%d tegn for mye" data-under="%d tegn igjen"></p>
</ds-field>

fieldset

一个观察者会看着 fieldset 元素,添加一个id,将儿童元素与 data-field="description" 财务报告和审定财务报表 legend 输入 aria-labelledby 打开 fieldset。 。 。 .

<fieldset>
    <legend>Delivery method</legend>
    <p data-field="description">Choose one option</p>
</fieldset>

援引者command 混合填充)

我们自动附加 引用者-填充,这意味着你得到支持 command 财务报告和审定财务报表 commandfor。 。 。 .

<ds-pagination>

执行 pagination,以文本填充按钮. 你可以用两个 <a> 财务报告和审定财务报表 <button> 标记中的元素.

如果不通过任何属性,您可以对当前页面和总页面执行自己的逻辑.

<ds-pagination class="ds-pagination" aria-label="Bla i sider:" data-href="?page=%d" data-current="2" data-total="100">
  <ol>
    <li><a>1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
    <li><a>4</a></li>
  </ol>
</ds-pagination>

popover

我们使用原生的弹出器功能,但我们附加了一个事件听器,可以固定设计系统组件的位置.

<button class="ds-button" popovertarget="popover">Open popover</button>
<div class="ds-popover" popover id="popover" data-placement="left">
  This is some popover content. It can be very long, but it will wrap and
  stay within the viewport.
</div>

如果你不用课 ds-popover 您需要添加 CSS 属性 --_ds-floating 到弹出式元素. 这可能是 top, (中文(简体) ), bottom, (中文(简体) ), left 或者说 right。 。 。 .

readonly

用于修复 readonly 支持时间 select 财务报告和审定财务报表 input 要素。 添加 aria-readonly="true" 使元素行为为只读,这意味着它不会被用户编辑或调用任何更改事件.

<select aria-readonly="true">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<ds-suggestion>

扩展 u-combobox 从u元素。 见文档 组合框。 。 。 .

<ds-field class="ds-field">
  <label>Label</label>
  <ds-suggestion class="ds-suggestion">
    <input type="search" class="ds-input" />
    <del aria-label="Fjern innhold"></del>
    <u-datalist>
      <u-option value="option-1">Option 1</u-option>
      <u-option value="option-2">Option 2</u-option>
      <u-option value="option-3">Option 3</u-option>
    </u-datalist>
  </ds-suggestion>
</ds-field>

<ds-tabs>

扩展 u-tabs 从u元素。 见文档 乌塔布。 。 。 .

<ds-tabs class="ds-tabs">
  <ds-tablist>
    <ds-tab>Tab 1</ds-tab>
    <ds-tab>Tab 2</ds-tab>
    <ds-tab>Tab 3</ds-tab>
  </ds-tablist>
  <ds-tabpanel>Panel 1</ds-tabpanel>
  <ds-tabpanel>Panel 2</ds-tabpanel>
  <ds-tabpanel>Panel 3</ds-tabpanel>
</ds-tabs>

focusgroup (充电)

focusgroup 已多填充 根据即将到来的规格。 。 。 .

<fieldset class="ds-toggle-group" focusgroup="radiogroup" aria-label="Tekstjustering" data-variant="secondary">
  <label class="ds-button">
    <input type="radio" name="alignment" value="left" checked />
    Left
  </label>
  <label class="ds-button">
    <input type="radio" name="alignment" value="center" />
    Center
  </label>
  <label class="ds-button">
    <input type="radio" name="alignment" value="right" />
    Right
  </label>
</fieldset>

无线电输入a focusgroup="radiogroup"和上面的切换组一样,由 toggle-group:箭头键不选择而移动焦点,然后输入选择。 也会迁移被堕落的人 data-toggle-group 属性为 focusgroup="radiogroup"警告你一声.

data-tooltip

使用单个元素在元素旁边渲染 data-tooltip 属性. 自动设定 aria-label 或者说 aria-description 视需要而定. 使用本地流行功能与我们 popover 混合填充剂.

<button data-placement="left" data-tooltip="left" class="ds-button">left</button>