react实现动态可排序表格效果代码
代码语言:html
所属分类:表格
代码描述:react实现动态可排序表格效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --sat: 10%; --white: hsl(0, 0%, 100%); --gray100: hsl(var(--hue), var(--sat), 90%); --gray200: hsl(var(--hue), var(--sat), 80%); --gray300: hsl(var(--hue), var(--sat), 70%); --gray400: hsl(var(--hue), var(--sat), 60%); --gray500: hsl(var(--hue), var(--sat), 50%); --gray600: hsl(var(--hue), var(--sat), 40%); --gray700: hsl(var(--hue), var(--sat), 30%); --gray800: hsl(var(--hue), var(--sat), 20%); --gray900: hsl(var(--hue), var(--sat), 10%); --primary400: hsl(var(--hue), 90%, 60%); --primary500: hsl(var(--hue), 90%, 50%); --trans-dur: 0.3s; color-scheme: light dark; font-size: clamp(0.75rem, 0.7rem + 0.25vw, 1rem); } body, button { color: light-dark(var(--gray900), var(--gray100)); font: 1em/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; transition: background-color var(--trans-dur), color var(--trans-dur); } body { background-color: light-dark(var(--gray100), var(--gray900)); display: grid; place-items: center; height: 100vh; } main { padding: 1.5em 0; width: calc(100vw - 3em); max-width: 60em; } .icon { display: block; width: 1em; height: 1em; } .avatar { background-color: light-dark(var(--gray100), var(--gray700)); border: 0.1875em solid light-dark(var(--white), var(--gray800)); border-radius: 50%; overflow: hidden; width: 2.25em; height: 2.25em; transition: background-color var(--trans-dur), border-color var(--trans-dur); } .avatar__count { margin-inline-start: 0.5em; } .avatar__img { display: block; width: 100%; height: auto; } .avatar + .avatar { margin-inline-start: -1em; } .browser { border-radius: 0.75em; box-shadow: 0 0 0 1px light-dark(var(--gray200), var(--gray700)), 0 0 1em rgba(0, 0, 0, 0.1); padding: 0.75em 0; transition: background-color var(--trans-dur), box-shadow var(--trans-dur); } .browser__col-button { color: light-dark(var(--gray600), var(--gray300)); cursor: pointer; gap: 0.5em; outline: transparent; width: 100%; height: 100%; } .browser__col-button--active { color: light-dark(var(--gray900), var(--gray100)); } .browser__col-button:focus-visible { box-shadow: 0 0 0 2px light-dark(var(--primary500), var(--primary400)) inset; } .browser__header, .browser__row { display: grid; grid-template-columns: calc(100% - 5.25em) 5.25em; height: 3.5em; } .browser__header, .browser__line { position: relative; } .browser__line { border-bottom: 2px solid light-dark(var(--gray100), var(--gray700)); margin: 0 1.5em; transition: border-color var(--trans-dur); z-index: 1; } .browser, .browser__row { background-color: light-dark(var(--white), var(--gray800)); } .browser__row-button { border-radius: 0.25em; box-shadow: 0 0 0 2px transparent; cursor: pointer; display: grid; place-items: center; width: 2.25em; height: 2.25em; } .browser__row-button:focus-visible { box-shadow: 0 0 0 2px light-dark(var(--primary500), var(--primary400)); } .browser__row-button:hover { background-color: light-dark(var(--gray200), var(--gray600)); } [dir=rtl] .brow.........完整代码请登录后点击上方下载按钮下载查看
网友评论0