ZUI 3 是一个全新的开源 UI 组件库，提供了丰富的实用组件，并提供自由的定制使用方式，不依赖任何JavaScript框架

# Utilities ## Interactivity ### State ```html:example: blocks <div class="state"></div> <div class="state active"></div> <div class="state selected"></div> <button class="btn">State Button</button> <button class="btn active">Active Button</button> <button class="btn selected">Selected Button</button> <button class="btn primary">State Button</button> <button class="btn primary active">Active Button</button> <button class="btn primary selected">Selected Button</button> ``` ### Loading ```html:example: -flex -flex-row -gap-4 <div class="relative rounded-lg w-56 h-28 load-indicator loading surface"></div> <div class="relative rounded-lg w-56 h-28 load-indicator loading gray"></div> <div class="relative rounded-lg w-56 h-28 load-indicator loading primary" data-loading="正在加载…"></div> ``` ### Disabled ```html:example: blocks <div class="state disabled"></div> <button class="btn" disabled>Disabled Button</button> ``` ## Skin ### Surface ```html:example: blocks <div class="canvas"></div> <div class="surface-light"></div> <div class="surface"></div> <div class="surface-strong"></div> <div class="inverse"></div> <div class="white"></div> <div class="black"></div> <div class="transparent"></div> ``` ### Solid #### Accent ```html:example: blocks <div class="primary"></div> <div class="secondary"></div> <div class="success"></div> <div class="warning"></div> <div class="danger"></div> <div class="important"></div> <div class="special"></div> <hr> <div class="primary state"></div> <div class="secondary state"></div> <div class="success state"></div> <div class="warning state"></div> <div class="danger state"></div> <div class="important state"></div> <div class="special state"></div> ``` #### Grays ```html:example: blocks <div class="gray-50"></div> <div class="gray-100"></div> <div class="gray-200"></div> <div class="gray-300"></div> <div class="gray-400"></div> <div class="gray"></div> <div class="gray-500"></div> <div class="gray-600"></div> <div class="gray-700"></div> <div class="gray-800"></div> <div class="gray-900"></div> <div class="gray-950"></div> <hr> <div class="gray-50 state"></div> <div class="gray-100 state"></div> <div class="gray-200 state"></div> <div class="gray-300 state"></div> <div class="gray-400 state"></div> <div class="gray state"></div> <div class="gray-500 state"></div> <div class="gray-600 state"></div> <div class="gray-700 state"></div> <div class="gray-800 state"></div> <div class="gray-900 state"></div> <div class="gray-950 state"></div> ``` ### Ghost ```html:example: blocks <div class="ghost"></div> <div class="primary-ghost"></div> <div class="secondary-ghost"></div> <div class="success-ghost"></div> <div class="warning-ghost"></div> <div class="danger-ghost"></div> <div class="important-ghost"></div> <div class="special-ghost"></div> <hr> <div class="ghost state"></div> <div class="primary-ghost state"></div> <div class="secondary-ghost state"></div> <div class="success-ghost state"></div> <div class="warning-ghost state"></div> <div class="danger-ghost state"></div> <div class="important-ghost state"></div> <div class="special-ghost state"></div> ``` ### Outline ```html:example: blocks <h4>Accent</h4> <div class="outline"></div> <div class="primary-outline"></div> <div class="secondary-outline"></div> <div class="success-outline"></div> <div class="warning-outline"></div> <div class="danger-outline"></div> <div class="important-outline"></div> <div class="special-outline"></div> <h4>Grays</h4> <div class="gray-outline"></div> <hr> <h4>Accent State</h4> <div class="outline state"></div> <div class="primary-outline state"></div> <div class="secondary-outline state"></div> <div class="success-outline state"></div> <div class="warning-outline state"></div> <div class="danger-outline state"></div> <div class="important-outline state"></div> <div class="special-outline state"></div> <h4>Grays State</h4> <div class="gray-outline state"></div> ``` ### Pale ```html:example: blocks <h4>Accent</h4> <div class="primary-pale"></div> <div class="secondary-pale"></div> <div class="success-pale"></div> <div class="warning-pale"></div> <div class="danger-pale"></div> <div class="important-pale"></div> <div class="special-pale"></div> <h4>Grays</h4> <div class="gray-50-pale"></div> <div class="gray-100-pale"></div> <div class="gray-200-pale"></div> <div class="gray-300-pale"></div> <div class="gray-400-pale"></div> <div class="gray-pale"></div> <div class="gray-500-pale"></div> <div class="gray-600-pale"></div> <div class="gray-700-pale"></div> <div class="gray-800-pale"></div> <div class="gray-900-pale"></div> <div class="gray-950-pale"></div> <hr> <h4>Accent State</h4> <div class="primary-pale state"></div> <div class="secondary-pale state"></div> <div class="success-pale state"></div> <div class="warning-pale state"></div> <div class="danger-pale state"></div> <div class="important-pale state"></div> <div class="special-pale state"></div> <h4>Grays State</h4> <div class="gray-50-pale state"></div> <div class="gray-100-pale state"></div> <div class="gray-200-pale state"></div> <div class="gray-300-pale state"></div> <div class="gray-400-pale state"></div> <div class="gray-pale state"></div> <div class="gray-500-pale state"></div> <div class="gray-600-pale state"></div> <div class="gray-700-pale state"></div> <div class="gray-800-pale state"></div> <div class="gray-900-pale state"></div> <div class="gray-950-pale state"></div> ``` ## Typography ### Text Colors ```html:example: blocks <h4>Accent</h4> <div class="text-primary"></div> <div class="text-secondary"></div> <div class="text-success"></div> <div class="text-warning"></div> <div class="text-danger"></div> <div class="text-important"></div> <div class="text-special"></div> <hr> <div class="text-primary-50"></div> <div class="text-primary-100"></div> <div class="text-primary-200"></div> <div class="text-primary-300"></div> <div class="text-primary-400"></div> <div class="text-primary-500"></div> <div class="text-primary-600"></div> <div class="text-primary-700"></div> <div class="text-primary-800"></div> <div class="text-primary-900"></div> <div class="text-primary-950"></div> <hr> <div class="text-secondary-50"></div> <div class="text-secondary-100"></div> <div class="text-secondary-200"></div> <div class="text-secondary-300"></div> <div class="text-secondary-400"></div> <div class="text-secondary-500"></div> <div class="text-secondary-600"></div> <div class="text-secondary-700"></div> <div class="text-secondary-800"></div> <div class="text-secondary-900"></div> <div class="text-secondary-950"></div> <h4>Grays</h4> <div class="text-gray-50"></div> <div class="text-gray-100"></div> <div class="text-gray-200"></div> <div class="text-gray-300"></div> <div class="text-gray-400"></div> <div class="text-gray"></div> <div class="text-gray-500"></div> <div class="text-gray-600"></div> <div class="text-gray-700"></div> <div class="text-gray-800"></div> <div class="text-gray-900"></div> <div class="text-gray-950"></div> <h4>Surface</h4> <div class="text-white black"></div> <div class="text-black"></div> <div class="text-canvas inverse"></div> <div class="text-surface-light inverse"></div> <div class="text-surface inverse"></div> <div class="text-surface-strong"></div> <div class="text-inverse"></div> <div class="text-fore-in-light"></div> <div class="text-fore-in-dark"></div> <div class="text-fore"></div> <div class="text-focus"></div> <div class="text-link"></div> <div class="text-link-hover"></div> <h4>Special</h4> <div class="text-transparent"></div> <div class="text-inherit"></div> <div class="text-current"></div> ``` ### Text opacity ```html:example: blocks <div class="text-fore text-opacity-0"></div> <div class="text-fore text-opacity-10"></div> <div class="text-fore text-opacity-20"></div> <div class="text-fore text-opacity-30"></div> <div class="text-fore text-opacity-40"></div> <div class="text-fore text-opacity-50"></div> <div class="text-fore text-opa