Mirrors/tachiyomi-website
2
0
Fork 0
mirror of https://github.com/tachiyomiorg/website.git synced 2024-12-21 07:31:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update dependencies and lint for errors (#426)

Browse Source 
* Update dependencies

* Update eslint-config-vuepress and fix warnings

* Linting

* Save webpack locally

Netlify gave an error for not having it but it wasn't needed before.

* Downgrade webpack

Some users have experienced the Netlify error when upgrading to recently released version 5, so downgrading to latest 4 release.

* Set 'htmlWhitespaceSensitivity' to 'ignore'
This commit is contained in:
Soitora 2020-10-27 18:35:33 +01:00 committed by GitHub
parent c140daf1e1
commit ce39645a58
16 changed files with 36034 additions and 14851 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.prettierrc
View File

@ -4,5 +4,6 @@
"printWidth": 120, "printWidth": 120,
"trailingComma": "es5", "trailingComma": "es5",
"bracketSpacing": true, "bracketSpacing": true,
"htmlWhitespaceSensitivity": "ignore",
"endOfLine": "auto" "endOfLine": "auto"
} }

27284
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

27
package.json
View File

@ -21,27 +21,28 @@
}, },
"homepage": "https://github.com/tachiyomiorg/website#readme", "homepage": "https://github.com/tachiyomiorg/website#readme",
"devDependencies": { "devDependencies": {
"@vuepress/plugin-active-header-links": "^1.6.0", "@vuepress/plugin-active-header-links": "^1.7.1",
"@vuepress/plugin-back-to-top": "^1.6.0", "@vuepress/plugin-back-to-top": "^1.7.1",
"@vuepress/plugin-google-analytics": "^1.6.0", "@vuepress/plugin-google-analytics": "^1.7.1",
"@vuepress/plugin-pwa": "^1.6.0", "@vuepress/plugin-pwa": "^1.7.1",
"eslint": "^7.11.0", "eslint": "^7.12.0",
"eslint-config-vuepress": "^2.2.0", "eslint-config-vuepress": "^3.0.1",
"eslint-plugin-markdown": "^1.0.2", "eslint-plugin-markdown": "^1.0.2",
"eslint-plugin-vue": "^7.0.1", "eslint-plugin-vue": "^7.1.0",
"node-sass": "^4.14.1", "node-sass": "^4.14.1",
"prettier": "^2.1.2", "prettier": "^2.1.2",
"sass-loader": "^10.0.3", "sass-loader": "^10.0.4",
"vuepress": "^1.6.0", "vuepress": "^1.7.1",
"vuepress-plugin-clean-urls": "^1.1.2", "vuepress-plugin-clean-urls": "^1.1.2",
"vuepress-plugin-container": "^2.1.5", "vuepress-plugin-container": "^2.1.5",
"vuepress-plugin-element-ui": "^1.1.0", "vuepress-plugin-element-ui": "^1.1.0",
"vuepress-plugin-zooming": "^1.1.8" "vuepress-plugin-zooming": "^1.1.8",
"webpack": "^4.44.2"
}, },
"dependencies": { "dependencies": {
"@mr-hope/vuepress-plugin-last-update": "^1.0.1", "@mr-hope/vuepress-plugin-last-update": "^1.4.7",
"@mr-hope/vuepress-plugin-sitemap": "^1.0.1", "@mr-hope/vuepress-plugin-sitemap": "^1.4.7",
"axios": "^0.20.0", "axios": "^0.21.0",
"core-js": "2.6.4", "core-js": "2.6.4",
"element-ui": "^2.13.2", "element-ui": "^2.13.2",
"iso-639-1": "^2.1.4", "iso-639-1": "^2.1.4",

4
src/.vuepress/components/Carousel.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<Agile :id="name" :options="config"> <Agile :id="name" :options="config">
<slot /> <slot />
<template slot="prevButton"> <template #prevButton>
<MaterialIcon icon="navigate_next" /> <MaterialIcon icon="navigate_next" />
</template> </template>
<template slot="nextButton"> <template #nextButton>
<MaterialIcon icon="navigate_next" /> <MaterialIcon icon="navigate_next" />
</template> </template>
</Agile> </Agile>

26
src/.vuepress/components/DownloadButtons.vue
View File

@ -1,16 +1,20 @@
<template> <template>
<div id="DownloadButtons"> <div id="DownloadButtons">
<el-button type="success" icon="el-icon-download" @click="downloadStable" @keyup.enter="downloadStable" <ElButton type="success" icon="el-icon-download" @click="downloadStable" @keyup.enter="downloadStable">
><span class="spacing">Stable</span><br /><span class="downloadTag">{{ <span class="spacing">Stable</span>
this.$data.tagName <br />
}}</span></el-button <span class="downloadTag">{{ this.$data.tagName }}</span>
> </ElButton>
<el-button type="warning" icon="el-icon-cpu" @click="downloadPreview" @keyup.enter="downloadPreview" <ElButton type="warning" icon="el-icon-cpu" @click="downloadPreview" @keyup.enter="downloadPreview">
><span class="spacing">Preview</span><br /><span class="downloadTag">{{ <span class="spacing">Preview</span>
this.$data.previewTagName <br />
}}</span></el-button <span class="downloadTag">{{ this.$data.previewTagName }}</span>
> </ElButton>
<span class="versionNotice">Requires <strong>Android 5.0</strong> or higher.</span> <span class="versionNotice">
Requires
<strong>Android 5.0</strong>
or higher.
</span>
</div> </div>
</template> </template>

8
src/.vuepress/components/ForkButtons.vue
View File

@ -6,8 +6,12 @@
<button class="githubForkButton" :style="githubForkStyle" :onclick="githubForkLink"> <button class="githubForkButton" :style="githubForkStyle" :onclick="githubForkLink">
{{ githubForkLabel }} {{ githubForkLabel }}
</button> </button>
<br> <br />
<span class="versionNotice">Requires <strong>Android {{androidVersion}}</strong> or higher.</span> <span class="versionNotice">
Requires
<strong>Android {{ androidVersion }}</strong>
or higher.
</span>
</div> </div>
</template> </template>

2
src/.vuepress/components/MaterialIcon.vue
View File

@ -22,7 +22,7 @@ export default {
}, },
icon: { icon: {
type: String, type: String,
required: true, default: "",
}, },
}, },
}; };

14
src/.vuepress/components/ReleaseDate.vue
View File

@ -1,19 +1,13 @@
<template> <template>
<div v-if="stable" class="buildTime"> <div v-if="stable" class="buildTime">
<el-tooltip placement="top" open-delay="250"> <ElTooltip :content="stablePublishExact" placement="top" :open-delay="250">
<div slot="content">
<strong>{{ stablePublishExact }}</strong>
</div>
<span>{{ stablePublishRelative }}</span> <span>{{ stablePublishRelative }}</span>
</el-tooltip> </ElTooltip>
</div> </div>
<div v-else-if="preview" class="buildTime"> <div v-else-if="preview" class="buildTime">
<el-tooltip placement="bottom-end" open-delay="250"> <ElTooltip :content="previewPublishExact" placement="bottom-end" :open-delay="250">
<div slot="content">
<strong>{{ previewPublishExact }}</strong>
</div>
<span>{{ previewPublishRelative }}</span> <span>{{ previewPublishRelative }}</span>
</el-tooltip> </ElTooltip>
</div> </div>
<span v-else>You need to specify props.</span> <span v-else>You need to specify props.</span>
</template> </template>

6
src/.vuepress/components/WhatsNew.vue
View File

@ -1,6 +1,10 @@
<template> <template>
<div class="guide whatsNew"> <div class="guide whatsNew">
<p class="title"><MaterialIcon icon="new_releases" /> What's new</p> <p class="title">
<MaterialIcon icon="new_releases" />
What's new
</p>
<!-- eslint-disable-next-line vue/no-v-html -->
<div v-html="whatsNew"></div> <div v-html="whatsNew"></div>
<div class="note"> <div class="note">
<p> <p>

6
src/.vuepress/config.js
View File

@ -47,9 +47,5 @@ module.exports = {
}, },
}, },
plugins: pluginsConfig, plugins: pluginsConfig,
extraWatchFiles: [ extraWatchFiles: [".vuepress/config/plugins.js", ".vuepress/config/navBar.js", ".vuepress/config/sideBar.js"],
".vuepress/config/plugins.js",
".vuepress/config/navBar.js",
".vuepress/config/sideBar.js",
],
}; };

32
src/.vuepress/theme/components/AlgoliaSearchBox.vue
View File

@ -1,14 +1,6 @@
<template> <template>
<form <form id="search-form" class="algolia-search-wrapper search-box" role="search">
id="search-form" <input id="algolia-search-input" class="search-query" :placeholder="placeholder" />
class="algolia-search-wrapper search-box"
role="search"
>
<input
id="algolia-search-input"
class="search-query"
:placeholder="placeholder"
/>
</form> </form>
</template> </template>
@ -47,12 +39,8 @@ export default {
methods: { methods: {
initialize(userOptions, lang) { initialize(userOptions, lang) {
Promise.all([ Promise.all([
import( import(/* webpackChunkName: "docsearch" */ "docsearch.js/dist/cdn/docsearch.min.js"),
/* webpackChunkName: "docsearch" */ "docsearch.js/dist/cdn/docsearch.min.js" import(/* webpackChunkName: "docsearch" */ "docsearch.js/dist/cdn/docsearch.min.css"),
),
import(
/* webpackChunkName: "docsearch" */ "docsearch.js/dist/cdn/docsearch.min.css"
),
]).then(([docsearch]) => { ]).then(([docsearch]) => {
// eslint-disable-next-line no-param-reassign // eslint-disable-next-line no-param-reassign
docsearch = docsearch.default; docsearch = docsearch.default;
@ -62,17 +50,12 @@ export default {
inputSelector: "#algolia-search-input", inputSelector: "#algolia-search-input",
// #697 Make docsearch work well at i18n mode. // #697 Make docsearch work well at i18n mode.
algoliaOptions: { algoliaOptions: {
facetFilters: [`lang:${lang}`].concat( facetFilters: [`lang:${lang}`].concat(algoliaOptions.facetFilters || []),
algoliaOptions.facetFilters || []
),
...algoliaOptions, ...algoliaOptions,
}, },
handleSelected: (input, event, suggestion) => { handleSelected: (input, event, suggestion) => {
const { pathname, hash } = new URL(suggestion.url); const { pathname, hash } = new URL(suggestion.url);
const routepath = pathname.replace( const routepath = pathname.replace(this.$site.base, "/");
this.$site.base,
"/"
);
this.$router.push(`${routepath}${hash}`); this.$router.push(`${routepath}${hash}`);
}, },
}); });
@ -80,8 +63,7 @@ export default {
}, },
update(options, lang) { update(options, lang) {
this.$el.innerHTML = this.$el.innerHTML = '<input id="algolia-search-input" class="search-query">';
'<input id="algolia-search-input" class="search-query">';
this.initialize(options, lang); this.initialize(options, lang);
}, },
}, },

35
src/.vuepress/theme/components/Navbar.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<header class="navbar"> <header class="navbar">
<!-- eslint-disable-next-line vue/require-explicit-emits -->
<SidebarButton @toggle-sidebar="$emit('toggle-sidebar')" /> <SidebarButton @toggle-sidebar="$emit('toggle-sidebar')" />
<RouterLink :to="$localePath" class="home-link"> <RouterLink :to="$localePath" class="home-link">
@ -9,13 +10,9 @@
:src="$withBase($site.themeConfig.logo)" :src="$withBase($site.themeConfig.logo)"
:alt="$siteTitle" :alt="$siteTitle"
/> />
<span <span v-if="$siteTitle" ref="siteName" class="site-name" :class="{ 'can-hide': $site.themeConfig.logo }">
v-if="$siteTitle" {{ $siteTitle }}
ref="siteName" </span>
class="site-name"
:class="{ 'can-hide': $site.themeConfig.logo }"
>{{ $siteTitle }}</span
>
</RouterLink> </RouterLink>
<div <div
@ -30,12 +27,7 @@
> >
<div v-if="$page.frontmatter.hideSearch" /> <div v-if="$page.frontmatter.hideSearch" />
<AlgoliaSearchBox v-else-if="isAlgoliaSearch" :options="algolia" /> <AlgoliaSearchBox v-else-if="isAlgoliaSearch" :options="algolia" />
<SearchBox <SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false" />
v-else-if="
$site.themeConfig.search !== false &&
$page.frontmatter.search !== false
"
/>
<NavLinks class="can-hide" /> <NavLinks class="can-hide" />
</div> </div>
</header> </header>
@ -65,17 +57,11 @@ export default {
computed: { computed: {
algolia() { algolia() {
return ( return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {};
this.$themeLocaleConfig.algolia ||
this.$site.themeConfig.algolia ||
{}
);
}, },
isAlgoliaSearch() { isAlgoliaSearch() {
return ( return this.algolia && this.algolia.apiKey && this.algolia.indexName;
this.algolia && this.algolia.apiKey && this.algolia.indexName
);
}, },
}, },
@ -87,16 +73,13 @@ export default {
// eslint-disable-next-line radix // eslint-disable-next-line radix
parseInt(css(this.$el, "paddingRight")); parseInt(css(this.$el, "paddingRight"));
const handleLinksWrapWidth = () => { const handleLinksWrapWidth = () => {
if ( if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT
) {
this.linksWrapMaxWidth = null; this.linksWrapMaxWidth = null;
} else { } else {
this.linksWrapMaxWidth = this.linksWrapMaxWidth =
this.$el.offsetWidth - this.$el.offsetWidth -
NAVBAR_VERTICAL_PADDING - NAVBAR_VERTICAL_PADDING -
((this.$refs.siteName && this.$refs.siteName.offsetWidth) || ((this.$refs.siteName && this.$refs.siteName.offsetWidth) || 0);
0);
} }
}; };
handleLinksWrapWidth(); handleLinksWrapWidth();

4
src/help/faq/README.md
View File

@ -145,7 +145,7 @@ Learn how to create automatic backups [here](/help/guides/creating-backups/#turn
#### What are some recommended extensions? #### What are some recommended extensions?
Tachiyomi does not endorse or recommend any manga source, and there is no best extension. Rather, we encourage users to spend some time to try out a few sources themselves, and discover what sources work best for them. It's because what works well for somebody else, might not work well for you. Tachiyomi does not endorse or recommend any manga source, and there is no best extension. Rather, we encourage users to spend some time to try out a few sources themselves, and discover what sources work best for them. It's because what works well for somebody else, might not work well for you.
<el-alert type="info" title="Disclaimer" description="Tachiyomi is not hosting any content, we are not affiliated with or responsible for any source that is; slow, down, missing chapters, or has subpar image quality." show-icon :closable="false"></el-alert> <ElAlert type="info" title="Disclaimer" description="Tachiyomi is not hosting any content, we are not affiliated with or responsible for any source that is; slow, down, missing chapters, or has subpar image quality." show-icon :closable="false"></ElAlert>
#### What are scanlator sources? #### What are scanlator sources?
Manga that are not officially licensed are translated by scanlators, who either publish manga on their own website or **MangaDex**. Scanlator sources always provide the fastest manga updates and have the highest scan quality. Manga that are not officially licensed are translated by scanlators, who either publish manga on their own website or **MangaDex**. Scanlator sources always provide the fastest manga updates and have the highest scan quality.
@ -250,7 +250,7 @@ If pages are loading slowly or not at all, try:
- Trying to **Clear chapter cache** under <Navigation item="more"/> → <Navigation item="settings"/> → <Navigation item="settings_advanced"/>. - Trying to **Clear chapter cache** under <Navigation item="more"/> → <Navigation item="settings"/> → <Navigation item="settings_advanced"/>.
- Going to <Navigation item="browse"/> → <Navigation item="extensions"/> → **MangaDex** → **Image Server** and then selecting a *different* server location. - Going to <Navigation item="browse"/> → <Navigation item="extensions"/> → **MangaDex** → **Image Server** and then selecting a *different* server location.
<el-alert type="info" title="Disclaimer" description="Tachiyomi is not hosting any content, we are not affiliated with or responsible for any source that is; slow, down, missing chapters, or has subpar image quality." show-icon :closable="false"></el-alert> <ElAlert type="info" title="Disclaimer" description="Tachiyomi is not hosting any content, we are not affiliated with or responsible for any source that is; slow, down, missing chapters, or has subpar image quality." show-icon :closable="false"></ElAlert>
#### Is there an alternate searching method? #### Is there an alternate searching method?
**MangaDex** allows you to search using the ID number to find manga. The easiest way to get the ID is by opening the manga in your browser and looking at the URL. **MangaDex** allows you to search using the ID number to find manga. The easiest way to get the ID is by opening the manga in your browser and looking at the URL.

146
src/sandbox/element-ui.md
View File

@ -10,81 +10,81 @@ sitemap:
View more by pressing the headers for the specified item. View more by pressing the headers for the specified item.
## [Button](https://element.eleme.io/#/en-US/component/button) ## [Button](https://element.eleme.io/#/en-US/component/button)
<el-row> <ElRow>
<el-button plain>Plain</el-button> <ElButton plain>Plain</ElButton>
<el-button type="primary" plain>Primary</el-button> <ElButton type="primary" plain>Primary</ElButton>
<el-button type="success" plain>Success</el-button> <ElButton type="success" plain>Success</ElButton>
<el-button type="info" plain>Info</el-button> <ElButton type="info" plain>Info</ElButton>
<el-button type="warning" plain>Warning</el-button> <ElButton type="warning" plain>Warning</ElButton>
<el-button type="danger" plain>Danger</el-button> <ElButton type="danger" plain>Danger</ElButton>
</el-row> </ElRow>
```html ```html
<el-row> <ElRow>
<el-button plain>Plain</el-button> <ElButton plain>Plain</ElButton>
<el-button type="primary" plain>Primary</el-button> <ElButton type="primary" plain>Primary</ElButton>
<el-button type="success" plain>Success</el-button> <ElButton type="success" plain>Success</ElButton>
<el-button type="info" plain>Info</el-button> <ElButton type="info" plain>Info</ElButton>
<el-button type="warning" plain>Warning</el-button> <ElButton type="warning" plain>Warning</ElButton>
<el-button type="danger" plain>Danger</el-button> <ElButton type="danger" plain>Danger</ElButton>
</el-row> </ElRow>
``` ```
## [Link](https://element.eleme.io/#/en-US/component/link) ## [Link](https://element.eleme.io/#/en-US/component/link)
<div> <div>
<el-link href="/sandbox/" target="_blank">default</el-link> <ElLink href="/sandbox/" target="_blank">default</ElLink>
<el-link href="/download/" type="primary">primary</el-link> <ElLink href="/download/" type="primary">primary</ElLink>
<el-link type="success">success</el-link> <ElLink type="success">success</ElLink>
<el-link type="warning">warning</el-link> <ElLink type="warning">warning</ElLink>
<el-link type="danger">danger</el-link> <ElLink type="danger">danger</ElLink>
<el-link type="info">info</el-link> <ElLink type="info">info</ElLink>
</div> </div>
```html ```html
<div> <div>
<el-link href="/sandbox/" target="_blank">default</el-link> <ElLink href="/sandbox/" target="_blank">default</ElLink>
<el-link href="/download/" type="primary">primary</el-link> <ElLink href="/download/" type="primary">primary</ElLink>
<el-link type="success">success</el-link> <ElLink type="success">success</ElLink>
<el-link type="warning">warning</el-link> <ElLink type="warning">warning</ElLink>
<el-link type="danger">danger</el-link> <ElLink type="danger">danger</ElLink>
<el-link type="info">info</el-link> <ElLink type="info">info</ElLink>
</div> </div>
``` ```
## [Tag](https://element.eleme.io/#/en-US/component/tag) ## [Tag](https://element.eleme.io/#/en-US/component/tag)
<el-tag>Neutral</el-tag> <ElTag>Neutral</ElTag>
<el-tag type="success">Success</el-tag> <ElTag type="success">Success</ElTag>
<el-tag type="info">Info</el-tag> <ElTag type="info">Info</ElTag>
<el-tag type="warning">Warning</el-tag> <ElTag type="warning">Warning</ElTag>
<el-tag type="danger">Danger</el-tag> <ElTag type="danger">Danger</ElTag>
```html ```html
<el-tag>Neutral</el-tag> <ElTag>Neutral</ElTag>
<el-tag type="success">Success</el-tag> <ElTag type="success">Success</ElTag>
<el-tag type="info">Info</el-tag> <ElTag type="info">Info</ElTag>
<el-tag type="warning">Warning</el-tag> <ElTag type="warning">Warning</ElTag>
<el-tag type="danger">Danger</el-tag> <ElTag type="danger">Danger</ElTag>
``` ```
## [Alert](https://element.eleme.io/#/en-US/component/alert) ## [Alert](https://element.eleme.io/#/en-US/component/alert)
<el-alert type="success" title="Success alert!" :closable="false"></el-alert> <ElAlert type="success" title="Success alert!" :closable="false"></ElAlert>
<el-alert type="info" title="Info alert!" :closable="false"></el-alert> <ElAlert type="info" title="Info alert!" :closable="false"></ElAlert>
<el-alert type="warning" title="Warning alert!" :closable="false"></el-alert> <ElAlert type="warning" title="Warning alert!" :closable="false"></ElAlert>
<el-alert type="error" title="Error alert!" :closable="false"></el-alert> <ElAlert type="error" title="Error alert!" :closable="false"></ElAlert>
<el-alert type="success" title="Success alert!" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." show-icon :closable="false"></el-alert> <ElAlert type="success" title="Success alert!" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." show-icon :closable="false"></ElAlert>
<el-alert type="info" title="Info alert!" description="Magna fringilla urna porttitor rhoncus dolor purus non." show-icon :closable="false"></el-alert> <ElAlert type="info" title="Info alert!" description="Magna fringilla urna porttitor rhoncus dolor purus non." show-icon :closable="false"></ElAlert>
<el-alert type="warning" title="Warning alert!" description="Non consectetur a erat nam at." show-icon :closable="false"></el-alert> <ElAlert type="warning" title="Warning alert!" description="Non consectetur a erat nam at." show-icon :closable="false"></ElAlert>
<el-alert type="error" title="Error alert!" description="Pellentesque habitant morbi tristique senectus et netus." show-icon :closable="false"></el-alert> <ElAlert type="error" title="Error alert!" description="Pellentesque habitant morbi tristique senectus et netus." show-icon :closable="false"></ElAlert>
```html ```html
<el-alert type="success" title="Success alert!" :closable="false"></el-alert> <ElAlert type="success" title="Success alert!" :closable="false"></ElAlert>
<el-alert type="info" title="Info alert!" :closable="false"></el-alert> <ElAlert type="info" title="Info alert!" :closable="false"></ElAlert>
<el-alert type="warning" title="Warning alert!" :closable="false"></el-alert> <ElAlert type="warning" title="Warning alert!" :closable="false"></ElAlert>
<el-alert type="error" title="Error alert!" :closable="false"></el-alert> <ElAlert type="error" title="Error alert!" :closable="false"></ElAlert>
<el-alert type="success" title="Success alert!" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." show-icon :closable="false"></el-alert> <ElAlert type="success" title="Success alert!" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." show-icon :closable="false"></ElAlert>
<el-alert type="info" title="Info alert!" description="Magna fringilla urna porttitor rhoncus dolor purus non." show-icon :closable="false"></el-alert> <ElAlert type="info" title="Info alert!" description="Magna fringilla urna porttitor rhoncus dolor purus non." show-icon :closable="false"></ElAlert>
<el-alert type="warning" title="Warning alert!" description="Non consectetur a erat nam at." show-icon :closable="false"></el-alert> <ElAlert type="warning" title="Warning alert!" description="Non consectetur a erat nam at." show-icon :closable="false"></ElAlert>
<el-alert type="error" title="Error alert!" description="Pellentesque habitant morbi tristique senectus et netus." show-icon :closable="false"></el-alert> <ElAlert type="error" title="Error alert!" description="Pellentesque habitant morbi tristique senectus et netus." show-icon :closable="false"></ElAlert>
``` ```
## [Tabs](https://element.eleme.io/#/en-US/component/tabs) ## [Tabs](https://element.eleme.io/#/en-US/component/tabs)
@ -131,29 +131,35 @@ View more by pressing the headers for the specified item.
## [Tooltip](https://element.eleme.io/#/en-US/component/tooltip) ## [Tooltip](https://element.eleme.io/#/en-US/component/tooltip)
### Text ### Text
<el-tooltip placement="top">
<div slot="content">First line<br/>Second line</div> #### Single-line
<span>Try hovering me!</span> <ElTooltip content="Tooltip content." placement="top"><span>Try hovering me!</span></ElTooltip>
</el-tooltip>
```html ```html
<el-tooltip placement="top"> <ElTooltip content="Tooltip content." placement="top"><span>Try hovering me!</span></ElTooltip>
<div slot="content">First line<br/>Second line</div> ```
<span>Try hovering me!</span>
</el-tooltip> #### Multi-line
<ElTooltip placement="top"><template #content><div>Tooltip<br/>content.</div></template><span>Try hovering me too!</span></ElTooltip>
```html
<ElTooltip placement="top"><template #content><div>Tooltip<br/>content.</div></template><span>Try hovering me too!</span></ElTooltip>
``` ```
### Button ### Button
<el-tooltip placement="top">
<div slot="content">First line<br/>Second line</div> #### Single-line
<el-button type="primary" plain>Hover me!</el-button> <ElTooltip content="Tooltip content." placement="top"><ElButton type="primary" plain>Hover me!</ElButton></ElTooltip>
</el-tooltip>
```html ```html
<el-tooltip placement="top"> <ElTooltip content="Tooltip content." placement="top"><ElButton type="primary" plain>Hover me!</ElButton></ElTooltip>
<div slot="content">First line<br/>Second line</div> ```
<el-button type="primary" plain>Hover me!</el-button>
</el-tooltip> #### Multi-line
<ElTooltip placement="top"><template #content><div>Tooltip<br/>content.</div></template><ElButton type="info" plain>Hover me too!</ElButton></ElTooltip>
```html
<ElTooltip placement="top"><template #content><div>Tooltip<br/>content.</div></template><ElButton type="info" plain>Hover me too!</ElButton></ElTooltip>
``` ```
## [Steps](https://element.eleme.io/#/en-US/component/steps) ## [Steps](https://element.eleme.io/#/en-US/component/steps)

6
src/sandbox/style-guide.md
View File

@ -103,9 +103,9 @@ Some **DO**s and **DO NOT**s for [FAQ](../help/faq/README.md).
> :::::: > ::::::
- **DO** use alerts to give the user a heads up: - **DO** use alerts to give the user a heads up:
> <el-alert type="info" title="Disclaimer" description="Tachiyomi is not hosting any content, we are not affiliated with or responsible for any source that is; slow, down, missing chapters, or has subpar image quality." show-icon :closable="false"></el-alert> > <ElAlert type="info" title="Disclaimer" description="Tachiyomi is not hosting any content, we are not affiliated with or responsible for any source that is; slow, down, missing chapters, or has subpar image quality." show-icon :closable="false"></ElAlert>
> <el-alert type="warning" title="Warning!" description="This feature requires you to be on Android 7 or above." show-icon :closable="false"></el-alert> > <ElAlert type="warning" title="Warning!" description="This feature requires you to be on Android 7 or above." show-icon :closable="false"></ElAlert>
> <el-alert type="error" title="Attention!" description="Make sure you have created a backup before following these instructions!" show-icon :closable="false"></el-alert> > <ElAlert type="error" title="Attention!" description="Make sure you have created a backup before following these instructions!" show-icon :closable="false"></ElAlert>
> ::: note > ::: note
> More alerts can be found on the [Element-UI](element-ui.md#alert) page. > More alerts can be found on the [Element-UI](element-ui.md#alert) page.
> ::: > :::