Description List

A semantic list of terms and their descriptions.

ブラウザー: Chrome 123+Firefox 121+Safari 17.5+
ティア: 0
強制レイアウトの上限: 0 ms
axe の上限: 0
SSR 対応: はい
公開された契約: テストハーネス

プレイグラウンド

Description List

React

CSS

Tailwind

import { DescriptionDetails, DescriptionList, DescriptionTerm } from "@gunkin/uiify";

export default function Example() {
  return (
    <DescriptionList className="">
      <DescriptionTerm>Status</DescriptionTerm>
      <DescriptionDetails>Active</DescriptionDetails>
      <DescriptionTerm>Project notes</DescriptionTerm>
      <DescriptionDetails>
        This value is intentionally long to show that detailed content wraps within the available space.
      </DescriptionDetails>
    </DescriptionList>
  );
}

@layer components {
  [data-uiify-description-list] {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
    gap: 0.75rem 1.5rem;
    margin: 0;
  }

  [data-uiify-description-term] {
    font-weight: var(--weight-medium);
  }

  [data-uiify-description-details] {
    min-inline-size: 0;
    margin: 0;
    overflow-wrap: anywhere;
  }

  @media (width < 32rem) {
    [data-uiify-description-list] {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 0.25rem;
    }

    [data-uiify-description-term]:not(:first-child) {
      margin-block-start: 0.75rem;
    }
  }
}

import { DescriptionDetails, DescriptionList, DescriptionTerm } from "@gunkin/uiify";

export default function Example() {
  return (
    <DescriptionList
      className="
        grid w-max max-w-[min(28rem,calc(100vw_-_2_*_var(--space-lg)))]
        grid-cols-[minmax(8rem,_max-content)_minmax(0,_1fr)] gap-y-3 gap-x-6 m-0 border border-border rounded-xl
        [corner-shape:squircle] bg-card text-card-foreground p-6 shadow-popover
        [&>[data-uiify-description-term]]:font-[number:var(--weight-medium)]
        [&>[data-uiify-description-details]]:min-w-0 [&>[data-uiify-description-details]]:m-0
        [&>[data-uiify-description-details]]:[overflow-wrap:anywhere] max-[32rem]:grid-cols-1 max-[32rem]:gap-y-1
        max-[32rem]:[&>[data-uiify-description-term]:not(:first-child)]:mt-3
      "
    >
      <DescriptionTerm>Status</DescriptionTerm>
      <DescriptionDetails>Active</DescriptionDetails>
      <DescriptionTerm>Project notes</DescriptionTerm>
      <DescriptionDetails>
        This value is intentionally long to show that detailed content wraps within the available space.
      </DescriptionDetails>
    </DescriptionList>
  );
}

/* app.css */

@layer reset, ui, app, tokens, base, demo, components, utilities, theme;

@import "@gunkin/uiify/styles/reset";

@import "@gunkin/uiify/components/behavior.css";

@import "@gunkin/uiify/styles/tokens";

@import "@gunkin/uiify/styles/tailwind";

@import "tailwindcss/utilities.css";

@theme { --spacing: 0.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; }

@source inline('grid w-max max-w-[min(28rem,calc(100vw_-_2_*_var(--space-lg)))] grid-cols-[minmax(8rem,_max-content)_minmax(0,_1fr)] gap-y-3 gap-x-6 m-0 border border-border rounded-xl [corner-shape:squircle] bg-card text-card-foreground p-6 shadow-popover [&>[data-uiify-description-term]]:font-[number:var(--weight-medium)] [&>[data-uiify-description-details]]:min-w-0 [&>[data-uiify-description-details]]:m-0 [&>[data-uiify-description-details]]:[overflow-wrap:anywhere] max-[32rem]:grid-cols-1 max-[32rem]:gap-y-1 max-[32rem]:[&>[data-uiify-description-term]:not(:first-child)]:mt-3');

@layer base { :root { --uiify-control-text: var(--text-sm); } @media (pointer: coarse) { :root { --uiify-control-text: var(--text-base); } } }

/* Authored animation and registered properties used by the Tailwind skin.
 * Visual rules belong in utility recipes; only at-rule definitions live here. */
@layer components {
  @keyframes uiify-presence-in {
    from {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@layer components {
  @keyframes uiify-presence-out {
    to {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@property --uiify-spinner-tail {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --uiify-spinner-length {
  syntax: "<angle>";
  inherits: false;
  initial-value: 36deg;
}

@layer components {
  @keyframes uiify-spinner-rotate {
    to {
      transform: rotate(360deg);
    }
  }
}

@layer components {
  @keyframes uiify-spinner-orbit {
    0% {
      --uiify-spinner-tail: 0deg;
      --uiify-spinner-length: 36deg;
    }

    50% {
      --uiify-spinner-tail: 90deg;
      --uiify-spinner-length: 324deg;
    }

    100% {
      --uiify-spinner-tail: 360deg;
      --uiify-spinner-length: 36deg;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-pulse {
    50% {
      opacity: 0.45;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-shimmer {
    to {
      background-position: -200% 0;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-reveal {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@property --candle-body-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-body-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-slot {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@property --candle-wick-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-wick-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --line-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-prev-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --line-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@layer components {
  @keyframes uiify-otp-input-caret-blink {
    50% {
      opacity: 0;
    }
  }
}

使用例

Project details

Write each term and its details in source order; the native description list supplies the semantics.

import { DescriptionDetails, DescriptionList, DescriptionTerm } from "@gunkin/uiify";

export default function Example() {
  return (
    <DescriptionList>
      <DescriptionTerm>Status</DescriptionTerm>
      <DescriptionDetails>Active</DescriptionDetails>
      <DescriptionTerm>Project notes</DescriptionTerm>
      <DescriptionDetails>This value is intentionally long to show that detailed content wraps within the available space.</DescriptionDetails>
    </DescriptionList>
  );
}

API

`DescriptionList`

Prop	型	既定値	説明
`children`	`ReactNode`	—	DescriptionTerm and DescriptionDetails pairs in source order.
`className / style / ref / native dl props`	`native dl props`	—	Native description-list props, styles, events, and ref are forwarded.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	動作とアクセシビリティの接続を維持したまま、描画する要素を置き換えます。

`DescriptionTerm`

Prop	型	既定値	説明
`children`	`ReactNode`	—	Term text naming the following details.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	動作とアクセシビリティの接続を維持したまま、描画する要素を置き換えます。

`DescriptionDetails`

Prop	型	既定値	説明
`children`	`ReactNode`	—	Description content associated with the preceding term.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	動作とアクセシビリティの接続を維持したまま、描画する要素を置き換えます。

キーボード

キー	操作

アクセシビリティ

Native dl, dt, and dd semantics in the source order you provide. Keep each description paired with its term; no table roles or action column are added.

スタイリングのフック

data-uiify-description-listdata-uiify-description-termdata-uiify-description-detailsdata-part

フレームワーク

スタイル

テーマ

言語

Description List

プレイグラウンド

Description List

使用例

Project details

API

`DescriptionList`

`DescriptionTerm`

`DescriptionDetails`

キーボード

アクセシビリティ

スタイリングのフック