{"_id":"@_nu/vanilla-toast","_rev":"3-3f5f742596ab9837988f15e44ffad055","name":"@_nu/vanilla-toast","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@_nu/vanilla-toast","version":"0.0.1","description":"NU 「 no-ui 」 组件库系统 nu-system 「 Toast 组件 」","author":{"name":"yfe-team"},"license":"MIT","repository":{"type":"git","url":"git+ssh://git@github.com/nu-system/vanilla-toast.git"},"bugs":{"url":"https://github.com/nu-system/vanilla-toast/issues"},"homepage":"https://nu-system.github.io/vanilla/toast/","main":"css/core.css","keywords":["!ui","css","css-component","ui","no-ui","nu-system","toast","messgate"],"gitHead":"22bb985dcbf75683907f9ceabfc8347398be6fc0","_id":"@_nu/vanilla-toast@0.0.1","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-AXJXk+uoPAIFCiXZ+4tqXCwDI01OtefC0Qm7i1dz7h3n5B/v66jqUDqvVzZg9oGWgXRodFmUQbBHKFvH9RNpkg==","shasum":"0240d3e7c997f2f0ecc9a43f6fc2b2f47f389fb3","tarball":"https://registry.npmjs.org/@_nu/vanilla-toast/-/vanilla-toast-0.0.1.tgz","fileCount":7,"unpackedSize":6421,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdGINhCRA9TVsSAnZWagAA6WoP/04z6aOJy3GbxTDQAKI2\n64asHTmsEDZnKgXYf3D9VyOSpAmEomdhpRWosJf/HLudoucZ2imMQuTuwwWx\nG2iTouBnOe106JV5ZTNCgoCG/5GJ9fDUAalJbrIrbWVPoebHsgTpWbtwtlwr\nbkJuTt7Ix4z059XNQm8RfXc5HKSawmHgZErfzZh7xt0vE/DP6xW70AKjJRSD\neHb5tuD/d/BePflIroGNYso6Y9LuJmgTOAtnzbDvq4soP8iFv6RXoeLlmovA\ny/c+iq1w60HftAcSCTC6Rhef7b0pdpIsm9tM/Ww56ZTSXnXlzNrPHyYO/+J0\n4O/MhSxffLSRW1q3sjlfVJXUU+Jc4DMAfLYevKTUlM1obdN/7L8c88ezRpEf\neJM/nw+JN8MD778isXYLIfLP2RPN2nTBtnQiA3xERg0LPKUxYTZ2gEZvxtPb\nKDXfJ7QR8dtTV18hXDuNBy5fUzmo7RTmwH4t1y6TB1ybrIR/wQVjiWWfljLU\npe/CZJDmhXTPEHh2Y3AXJEhavNAta31N2/G2vFOuHTXBf5gTBFLzp0ZO3hiI\nEAzE3IRSuIBc0AxV65hlcgXe7QXlj+hgoBv70FK9M3oBAxcXRc86Sue4ZXk5\nwwAykb5WU0ShXcNIs+2k2zMW3GQl7olT0mVfxlgJdmF73Lij3nobKRFpANq0\nWvii\r\n=8RwI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID4Rkl3FcihdIuyLbW3ebzEf1lAheeSMINISxgCA6MAqAiEAsIUgxzMcH0NNJaf2ShmLeXjN5k/MFqWK6605CXn3L1I="}]},"maintainers":[{"name":"ziven27","email":"ziven27@qq.com"}],"_npmUser":{"name":"ziven27","email":"ziven27@qq.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vanilla-toast_0.0.1_1561887584376_0.2518074163349713"},"_hasShrinkwrap":false,"deprecated":"try @_nu/css-toast"}},"time":{"created":"2019-06-30T09:39:44.151Z","0.0.1":"2019-06-30T09:39:44.499Z","modified":"2022-04-04T10:51:39.244Z"},"maintainers":[{"email":"1128yeye@sina.com","name":"nanasun"},{"email":"ziven27@qq.com","name":"ziven27"}],"description":"NU 「 no-ui 」 组件库系统 nu-system 「 Toast 组件 」","homepage":"https://nu-system.github.io/vanilla/toast/","keywords":["!ui","css","css-component","ui","no-ui","nu-system","toast","messgate"],"repository":{"type":"git","url":"git+ssh://git@github.com/nu-system/vanilla-toast.git"},"author":{"name":"yfe-team"},"bugs":{"url":"https://github.com/nu-system/vanilla-toast/issues"},"license":"MIT","readme":"# nu-vanilla-toast\n\n<iframe height=\"400\" style=\"width: 100%;\" scrolling=\"no\" title=\"nu-toast\" src=\"//codepen.io/ziven27/embed/mZyprq/?height=265&theme-id=0&default-tab=html,result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href='https://codepen.io/ziven27/pen/mZyprq/'>nu-toast</a> by ziven27\n  (<a href='https://codepen.io/ziven27'>@ziven27</a>) on <a href='https://codepen.io'>CodePen</a>.\n</iframe>\n\nNU 「 no-ui 」 组件库系统 nu-system 「 Toast 组件 」\n\n## 怎么用?\n\n```bash\nyarn add @_nu/vanilla-toast\n```\n\n```HTML\n<link src=\"https://cdn.jsdelivr.net/npm/@_nu/vanilla-toast/css/core.min.css\" />\n<link src=\"https://cdn.jsdelivr.net/npm/@_nu/vanilla-toast/css/skins/bootstrap.min.css\" />\n\n```\n\n```\n@_nu/vanilla-toast/css\n├── core.css           // 核心样式\n└── skins\n    └── bootstrap.css  // 借用 bootstrap alert 的样式\n```\n\n因为组件只有最基础的交互样式，所以在实际使用需要根据设计需求进行二次样式封装。\n\n## Dom 结构\n\n```HTML\n<div class=\"nu_toast\">\n  <div class=\"nu_toast_in\">\n    <!-- 这是放toast文字的地方 -->\n  </div>\n</div>\n```\n\n为了拓展性这边约定需要创建两层 dom 并且名称为 `nu_toast` 和 `nu_toast_in`。\n\n## Api\n\n| 选择器   |   功能   |\n|:----------|-------------:|\n| `.nu_toast._open` |  是否显示toast |\n| `.nu_dialog._[skins]` | toast 的皮肤 |\n\n这边约定用 `_open` 来控制 toast 的显示隐藏。\n\n对于设计系统我们推荐 UI 是收敛的，所以建议只需要实现 `_success`,`_warning`,`_danger` 即可。\n\n当然如果你有自定义需求，建议采用 bootstrap 的颜色方案：\n\n`_priamry`,`_secondary`,`_success`,`_warning`,`_danger`,`_info`,`_light`,`_dark`。\n\n## 如何添加动效?\n\n```css\n.nu_toast{\n  visibility: hidden;\n  opacity: 0;\n  transform: translate(0, -10px);\n  transition: 200ms;\n}\n\n.nu_toast._open {\n  visibility: visible;\n  opacity: 1;\n  transform: translate(0, 0);\n}\n```\n\n## 如何添加皮肤 ？\n\n```css\n.nu_toast {\n  border-radius: .25rem;\n  padding: .75rem 1.25rem;\n  color: #004085;\n  background-color: #cce5ff;\n  border: 1px solid #b8daff;\n}\n\n.nu_toast._danger {\n  color: #721c24;\n  background-color: #f8d7da;\n  border-color: #f5c6cb;\n}\n\n.nu_toast._warning {\n  color: #856404;\n  background-color: #fff3cd;\n  border-color: #ffeeba;\n}\n\n.nu_toast._success {\n  color: #155724;\n  background-color: #d4edda;\n  border-color: #c3e6cb;\n}\n```\n\n## Logic Only\n\n- [nu-toast-react](https://nu-system.github.io/react/toast/)\n","readmeFilename":"README.md"}