iaux-popup:一个tooltippopup Web组件

  • B4_578860
    了解作者
  • 98.1KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-13 20:18
    上传日期
[待办事项:添加GHA +徽章] 互联网档案弹出 这是一个UI组件,当悬停或单击时会显示更多详细信息。 [gif] 用法 npm/yarn install @internetarchive/ia-popup import '@internetarchive/ia-popup [css信息] <style> .component-wrapper { /* Set Height, Width */ /* Component will inherit height and width */ height: 20px; width: 200px; } .primary-content.end-of-line-peekaboo { /* --- STYLE SLOT IF you want EOL fade out to work with
iaux-popup-main.zip
  • iaux-popup-main
  • index.js
    45B
  • package.json
    1.6KB
  • test
  • ia-popup.test.js
    3.1KB
  • LICENSE
    33.7KB
  • src
  • ia-popup.js
    5KB
  • web-dev-server.config.mjs
    889B
  • .gitignore
    190B
  • web-test-runner.config.mjs
    862B
  • demo
  • index.html
    2.8KB
  • README.md
    2.3KB
  • yarn.lock
    190.8KB
  • .editorconfig
    526B
内容介绍
[TODO: add GHA + badges] # Internet Archive Popup This is a UI component that displays extra details when hovered or clicked on. [gif] ## Usage `npm/yarn install @internetarchive/ia-popup` `import '@internetarchive/ia-popup` [css info] ``` <style> .component-wrapper { /* Set Height, Width */ /* Component will inherit height and width */ height: 20px; width: 200px; } .primary-content.end-of-line-peekaboo { /* --- STYLE SLOT IF you want EOL fade out to work with these attrs */ white-space: nowrap; overflow: hidden; } </style> <script> import '@internetarchive/ia-popup' </script> <div class='component-wrapper end-of-line-peekaboo'> <ia-popup header="Popup Header" content="Hello world this is our popup content" popupMode="clickOrHover" > <div> Must add main content into this slot as ia-popup will wrap itself around the content to set hover/click events. </div> </ia-popup> </div> ``` + CSS Vars to customize: ``` var(--secondaryTextColor, #767676); var(--bcColor, white); var(--popupBorderColor, #e9e9e9); var(--boxshadowColor, #ccc); var(--popupMarginTop, -20px); var(--popupMarginLeft, -3px); var(--popupAnimationTiming, 100ms); ``` See demo for more information/details. ## Local Demo with `web-dev-server` ```bash yarn start ``` To run a local development server that serves the basic demo located in `demo/index.html` ## Testing with Web Test Runner To run the suite of Web Test Runner tests, run ```bash yarn run test ``` To run the tests in watch mode (for &lt;abbr title=&#34;test driven development&#34;&gt;TDD&lt;/abbr&gt;, for example), run ```bash yarn run test:watch ``` ## Linting with ESLint, Prettier, and Types To scan the project for linting errors, run ```bash yarn run lint ``` You can lint with ESLint and Prettier individually as well ```bash yarn run lint:eslint ``` ```bash yarn run lint:prettier ``` To automatically fix many linting errors, run ```bash yarn run format ``` You can format using ESLint and Prettier individually as well ```bash yarn run format:eslint ``` ```bash yarn run format:prettier ``` ## Tooling configs For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project. If you customize the configuration a lot, you can consider moving them to individual files.
评论
    相关推荐
    • vision-with-tailwindcss
      Next.js + Tailwind CSS示例 本示例说明了如何将 (v2.1)与Next.js一起使用。 它遵循官方概述的步骤。...yarn create next-app --example with-tailwindcss with-tailwindcss-app 使用将其部署到云()。
    • css-homework
      yarn start 在开发模式下运行应用程序。 如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 1.用您的名字创建分支 例如: css/name-surname 2.运行应用 打开在浏览器中查看它。 3.打开模板...
    • nuxt-vite-tailwindcss
      nuxt-vite-tailwindcss 构建设置 # install dependencies $ yarn install # serve with hot reload at localhost:3000 $ yarn dev # build for production and launch server $ yarn build $ yarn start # generate ...
    • nextjs-TailwindCSS-taskManagerUI
      Next.js + Tailwind CSS示例 本示例说明如何将 (v2)与Next.js一起使用。 它遵循官方概述的步骤。...yarn create next-app --example with-tailwindcss with-tailwindcss-app 使用将其部署到云()。
    • with-tailwindcss
      Next.js + Tailwind CSS示例 本示例说明了如何将 (v2.1)用于Next.js。 它遵循官方概述的步骤。...yarn create next-app --example with-tailwindcss with-tailwindcss-app 使用将其部署到云()。
    • Nuxtjs-Tailwindcss-Storybook-Starter
      Nuxtjs,Tailwindcss,Storybook,eslint-airbnb的入门项目 构建设置 # install dependencies $ yarn install # serve with hot reload at localhost:3000 $ yarn dev # build for production and launch server $ ...
    • 100-days-css-challenge
      100天CSS挑战 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
    • with-tailwindcss
      Next.js + Tailwind CSS示例 本示例说明如何将 (v2)与Next.js一起使用。 它遵循官方概述的步骤。...yarn create next-app --example with-tailwindcss with-tailwindcss-app 使用将其部署到云()。
    • itcss-tools
      yarn add @bingumd/itcss-tools 用法 @use ' @bingumd/itcss-tools ' ; 客制化 @use ' @bingumd/itcss-tools ' as tools ; .c-button { font-size : tools . font-size ( ' text-lg ' ); background-color : tools...
    • vue-css-modules:在Vue组件内部将类名无缝映射到CSS模块
      yarn add vue-css-modules CDN: | (可作为window.VueCSSModules ) CSS模块:本地范围和模块化 为本地类分配一个全局唯一名称,因此组件样式不会影响其他组件。 例如 /* button.css */ . button { font-size : ...