Rating

从一排星星中选择评分的输入控件。

浏览器: Chrome 123+Firefox 121+Safari 17.5+
层级: 0
压缩后大小: 1.22 kB
强制布局预算: 0 ms
axe 预算: 0
支持 SSR: 是
基于: elements/choice
公开契约: 测试环境

交互示例

React

CSS

Tailwind

/* Rating — a native radio group of stars. Inputs are visually hidden;
   flex-direction: row-reverse restores left-to-right visual order over
   reversed DOM order. Each input+label pair sits in its own [data-part="item"]
   wrapper (ChoiceGroup's shape), so `~` alone can't reach across pairs —
   `:has()` promotes a checked/hovered item onto its later (= more-preferred,
   thanks to row-reverse) sibling wrappers. This keeps the uncontrolled rating functional without
   JavaScript. */

@layer components {
  [data-uiify-rating] {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: var(--space-xs);
  }

  [data-uiify-rating] > [data-part="item"] > input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  [data-uiify-rating] > [data-part="item"] > label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--input);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition-colors);
  }

  [data-uiify-rating] > [data-part="item"]:has(> input:checked) > label,
  [data-uiify-rating] > [data-part="item"]:has(> input:checked) ~ [data-part="item"] > label {
    color: var(--primary);
  }

  [data-uiify-rating]:not([data-disabled], [data-readonly])
    > [data-part="item"]:has(> label:hover)
    > label,
  [data-uiify-rating]:not([data-disabled], [data-readonly])
    > [data-part="item"]:has(> label:hover)
    ~ [data-part="item"]
    > label {
    color: var(--primary);
  }

  [data-uiify-rating] > [data-part="item"] > input:focus-visible ~ label {
    outline: none;
    box-shadow: 0 0 0 var(--ring-width) color-mix(in oklch, var(--ring) 16%, transparent);
    border-radius: var(--radius-xs);
    corner-shape: squircle;
  }

  [data-uiify-rating][data-readonly] > [data-part="item"] > label {
    cursor: default;
  }

  [data-uiify-rating][data-disabled] > [data-part="item"] > label {
    cursor: default;
    opacity: 0.5;
  }
}

import { Rating } from "@gunkin/uiify";

export default function Example() {
  return (
    <Rating
      className={
        "inline-flex [flex-direction:row-reverse] gap-xs [&>[data-part=item]>input]:absolute [&>[data-part=item]>inp" +
        "ut]:[inline-size:1px] [&>[data-part=item]>input]:[block-size:1px] [&>[data-part=item]>input]:[margin:-1px] " +
        "[&>[data-part=item]>input]:overflow-hidden [&>[data-part=item]>input]:[clip-path:inset(50%)] [&>[data-part=" +
        "item]>input]:whitespace-nowrap [&>[data-part=item]>label]:inline-flex [&>[data-part=item]>label]:items-cent" +
        "er [&>[data-part=item]>label]:justify-center [&>[data-part=item]>label]:text-input [&>[data-part=item]>labe" +
        "l]:[font-size:1.5rem] [&>[data-part=item]>label]:leading-none [&>[data-part=item]>label]:cursor-pointer [&>" +
        "[data-part=item]>label]:[transition:var(--transition-colors)] [&>[data-part=item]:has(>input:checked)>label" +
        "]:text-primary [&>[data-part=item]:has(>input:checked)~[data-part=item]>label]:text-primary [&:not([data-di" +
        "sabled],[data-readonly])>[data-part=item]:has(>label:hover)>label]:text-primary [&:not([data-disabled],[dat" +
        "a-readonly])>[data-part=item]:has(>label:hover)~[data-part=item]>label]:text-primary [&>[data-part=item]>in" +
        "put:focus-visible~label]:[outline:none] [&>[data-part=item]>input:focus-visible~label]:[box-shadow:0_0_0_va" +
        "r(--ring-width)_color-mix(in_oklch,_var(--ring)_16%,_transparent)] [&>[data-part=item]>input:focus-visible~" +
        "label]:rounded-xs [&>[data-part=item]>input:focus-visible~label]:[corner-shape:squircle] [&[data-readonly]>" +
        "[data-part=item]>label]:cursor-default [&[data-disabled]>[data-part=item]>label]:cursor-default [&[data-dis" +
        "abled]>[data-part=item]>label]:opacity-50"
      }
      defaultValue={3}
      id="movie-rating"
    />
  );
}

/* 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('inline-flex [flex-direction:row-reverse] gap-xs [&>[data-part=item]>input]:absolute [&>[data-part=item]>input]:[inline-size:1px] [&>[data-part=item]>input]:[block-size:1px] [&>[data-part=item]>input]:[margin:-1px] [&>[data-part=item]>input]:overflow-hidden [&>[data-part=item]>input]:[clip-path:inset(50%)] [&>[data-part=item]>input]:whitespace-nowrap [&>[data-part=item]>label]:inline-flex [&>[data-part=item]>label]:items-center [&>[data-part=item]>label]:justify-center [&>[data-part=item]>label]:text-input [&>[data-part=item]>label]:[font-size:1.5rem] [&>[data-part=item]>label]:leading-none [&>[data-part=item]>label]:cursor-pointer [&>[data-part=item]>label]:[transition:var(--transition-colors)] [&>[data-part=item]:has(>input:checked)>label]:text-primary [&>[data-part=item]:has(>input:checked)~[data-part=item]>label]:text-primary [&:not([data-disabled],[data-readonly])>[data-part=item]:has(>label:hover)>label]:text-primary [&:not([data-disabled],[data-readonly])>[data-part=item]:has(>label:hover)~[data-part=item]>label]:text-primary [&>[data-part=item]>input:focus-visible~label]:[outline:none] [&>[data-part=item]>input:focus-visible~label]:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_16%,_transparent)] [&>[data-part=item]>input:focus-visible~label]:rounded-xs [&>[data-part=item]>input:focus-visible~label]:[corner-shape:squircle] [&[data-readonly]>[data-part=item]>label]:cursor-default [&[data-disabled]>[data-part=item]>label]:cursor-default [&[data-disabled]>[data-part=item]>label]:opacity-50');

@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;
    }
  }
}

API

`Rating`

属性	类型	默认值	说明
`id`*	`string`	—	组及每个生成的radio输入框的id前缀。
`defaultValue`	`number`	`0`	首次渲染时选中的评分；选择和悬停预览由原生单选框和CSS实现，因此无须JavaScript也能工作。
`max`	`number`	`5`	渲染的评分项数量。
`readOnly`	`boolean`	`false`	显示评分，但不允许用户更改。
`disabled`	`boolean`	`false`	禁用评分中的所有单选框。
`className`	`string`	—	应用于评分元素的类名。
`aria-label`	`string`	—	评分组的无障碍名称。

键盘

按键	操作
`Tab`	将焦点移入或移出控件
`Enter` / `Space`	获得焦点时激活（按钮类控件）

无障碍

尽可能使用语义化HTML。可在交互示例中检查渲染的标记；仅在原生元素无法满足需求时添加ARIA。

样式钩子

data-disabled

框架

样式

主题

语言

Rating

交互示例

Rating

默认

API

`Rating`

键盘

无障碍

样式钩子