Design SystemPatternsMarketMarketRules

MarketRules

Reference照 app.opinion.trade 線上產品重建的對照版,用來量測與討論。不是 production 的程式碼。

Installation

import { MarketRules } from "@/components/product/market-rules/market-rules";

Overview

Product-specific expandable (not a generic Accordion). Used only for market rules. Header carries the title and, when the rules content originated from Opinion AI, a "Created by Opinion AI" attribution chip — the chip only appears once the panel is expanded. Can be used as an uncontrolled disclosure with a default open state, or fully controlled. If a second independent expandable pattern appears, promote to a shared base capability then.

Interactive Demo

State Matrix

Open × AI attribution (chrome applied by preview wrapper)

Open — plain rules content with no AI attribution chip.
Open — rules content with AI attribution chip visible at bottom.
Created by Opinion AI