Skip to content

Commit

Permalink
docs(toast): remove style import
Browse files Browse the repository at this point in the history
  • Loading branch information
@eiinu
eiinu committed Nov 30, 2023
1 parent faf71f0 commit 6798dce
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 94 deletions.
80 changes: 35 additions & 45 deletions src/packages/__VUE/toast/doc.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ app.use(Toast);
</template>
<script setup>
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
const textToast = (msg) => {
showToast.text(msg);
};
Expand All @@ -43,7 +42,6 @@ const textToast = (msg) => {
</template>
<script setup>
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
const textToast = (msg) => {
showToast.text(msg, {
title: 'Toast Title'
Expand All @@ -64,7 +62,6 @@ const textToast = (msg) => {
</template>
<script setup>
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
const textToast = (msg) => {
showToast.success(msg);
};
Expand All @@ -83,7 +80,6 @@ const textToast = (msg) => {
</template>
<script setup>
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
const textToast = (msg) => {
showToast.fail(msg);
};
Expand All @@ -102,7 +98,6 @@ const textToast = (msg) => {
</template>
<script setup>
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
const textToast = (msg) => {
showToast.warn(msg);
};
Expand All @@ -121,7 +116,6 @@ const textToast = (msg) => {
</template>
<script setup>
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
const textToast = (msg) => {
showToast.loading(msg);
};
Expand All @@ -140,7 +134,6 @@ const textToast = (msg) => {
</template>
<script setup>
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
const textToast = (msg) => {
showToast.text(msg, {
duration: 0
Expand All @@ -161,7 +154,6 @@ const textToast = (msg) => {
</template>
<script setup>
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
const textToast = (msg) => {
showToast.text(msg, {
center: false,
Expand All @@ -183,7 +175,6 @@ const textToast = (msg) => {
</template>
<script setup>
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
const textToast = (msg) => {
showToast.loading(msg, {
cover: true
Expand All @@ -198,7 +189,6 @@ const textToast = (msg) => {

```js
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
showToast.text('use in js module');
// Return the instance, you can manually call the hide method in the instance to close the prompt
const toast = showToast.loading('use in js module');
Expand All @@ -209,48 +199,48 @@ toast.hide();

### Methods

| Methods | Description | Attribute | Return value |
| ----------------- | ------------------ | ------------------ | --------------------------------------------- |
| showToast.text | Show text toast | message ｜ options | toast instance(message support incoming HTML) |
| showToast.success | Show success toast | message ｜ options | toast instance |
| showToast.fail | Show fail toast | message ｜ options | toast instance |
| showToast.warn | Show warn toast | message ｜ options | toast instance |
| showToast.hide | Close toast | clearAll: boolean | void |
| showToast.loading | Show loading toast | message ｜ options | toast instance |
| Methods | Description | Attribute | Return value |
| --- | --- | --- | --- |
| showToast.text | Show text toast | message ｜ options | toast instance(message support incoming HTML) |
| showToast.success | Show success toast | message ｜ options | toast instance |
| showToast.fail | Show fail toast | message ｜ options | toast instance |
| showToast.warn | Show warn toast | message ｜ options | toast instance |
| showToast.hide | Close toast | clearAll: boolean | void |
| showToast.loading | Show loading toast | message ｜ options | toast instance |

### ToastOptions

| 字段 | 说明 | 类型 | 默认值 |
| ---------------------- | -------------------------------------------------------------------------------------------------- | ---------------- | -------------------- |
| id | Identifier, share one instance at the same time, default to multiple instances | string \| number | - |
| duration | Toast duration(ms), won't disappear if value is 0 | number | `2000` |
| title | title | string | - |
| center | Whether to display in the middle of the page (display at the bottom when false) | boolean | `true` |
| bottom | The distance from the bottom of the page (px or %), which takes effect when option.center is false | string | `30px` |
| text-align-center | Whether the multi-line copy is centered | boolean | `true` |
| bgColor | background color (transparency) | string | `rgba(0, 0, 0, 0.8)` |
| custom-class | Custom Class | string | - |
| icon | Custom Icon | Component | - |
| size | Text Size **small**/**base**/**large** | string | `base` |
| cover | Whether to show the mask layer | boolean | `false` |
| cover-color | Cover Color | string | `rgba(0,0,0,0)` |
| loading-rotate | Whether the loading icon is rotated, only valid for the loading type | boolean | `true` |
| close | Callback function after close | function | `null` |
| close-on-click-overlay | Whether to close when overlay is clicked | boolean | `false` |
| custom-class | Custom Class | string | - |
| 字段 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| id | Identifier, share one instance at the same time, default to multiple instances | string \| number | - |
| duration | Toast duration(ms), won't disappear if value is 0 | number | `2000` |
| title | title | string | - |
| center | Whether to display in the middle of the page (display at the bottom when false) | boolean | `true` |
| bottom | The distance from the bottom of the page (px or %), which takes effect when option.center is false | string | `30px` |
| text-align-center | Whether the multi-line copy is centered | boolean | `true` |
| bgColor | background color (transparency) | string | `rgba(0, 0, 0, 0.8)` |
| custom-class | Custom Class | string | - |
| icon | Custom Icon | Component | - |
| size | Text Size **small**/**base**/**large** | string | `base` |
| cover | Whether to show the mask layer | boolean | `false` |
| cover-color | Cover Color | string | `rgba(0,0,0,0)` |
| loading-rotate | Whether the loading icon is rotated, only valid for the loading type | boolean | `true` |
| close | Callback function after close | function | `null` |
| close-on-click-overlay | Whether to close when overlay is clicked | boolean | `false` |
| custom-class | Custom Class | string | - |

## Theming

### CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).

| Name | Default Value |
| ------------------------------- | -------------------- |
| --nut-toast-title-font-size | _16px_ |
| --nut-toast-text-font-size | _14px_ |
| --nut-toast-font-color | _var(--nut-white)_ |
| --nut-toast-inner-padding | _24px 30px_ |
| --nut-toast-inner-bg-color | _rgba(0, 0, 0, 0.8)_ |
| --nut-toast-inner-border-radius | _12px_ |
| --nut-toast-cover-bg-color | _rgba(0, 0, 0, 0)_ |
| Name | Default Value |
| --- | --- |
| --nut-toast-title-font-size | _16px_ |
| --nut-toast-text-font-size | _14px_ |
| --nut-toast-font-color | _var(--nut-white)_ |
| --nut-toast-inner-padding | _24px 30px_ |
| --nut-toast-inner-bg-color | _rgba(0, 0, 0, 0.8)_ |
| --nut-toast-inner-border-radius | _12px_ |
| --nut-toast-cover-bg-color | _rgba(0, 0, 0, 0)_ |
80 changes: 35 additions & 45 deletions src/packages/__VUE/toast/doc.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ app.use(Toast);
</template>
<script setup>
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
const textToast = (msg) => {
showToast.text(msg);
};
Expand All @@ -43,7 +42,6 @@ const textToast = (msg) => {
</template>
<script setup>
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
const textToast = (msg) => {
showToast.text(msg, {
title: '标题文字'
Expand All @@ -64,7 +62,6 @@ const textToast = (msg) => {
</template>
<script setup>
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
const textToast = (msg) => {
showToast.success(msg);
};
Expand All @@ -83,7 +80,6 @@ const textToast = (msg) => {
</template>
<script setup>
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
const textToast = (msg) => {
showToast.fail(msg);
};
Expand All @@ -102,7 +98,6 @@ const textToast = (msg) => {
</template>
<script setup>
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
const textToast = (msg) => {
showToast.warn(msg);
};
Expand All @@ -121,7 +116,6 @@ const textToast = (msg) => {
</template>
<script setup>
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
const textToast = (msg) => {
showToast.loading(msg);
};
Expand All @@ -140,7 +134,6 @@ const textToast = (msg) => {
</template>
<script setup>
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
const textToast = (msg) => {
showToast.text(msg, {
duration: 0
Expand All @@ -161,7 +154,6 @@ const textToast = (msg) => {
</template>
<script setup>
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
const textToast = (msg) => {
showToast.text(msg, {
center: false,
Expand All @@ -183,7 +175,6 @@ const textToast = (msg) => {
</template>
<script setup>
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
const textToast = (msg) => {
showToast.loading(msg, {
cover: true
Expand All @@ -198,7 +189,6 @@ const textToast = (msg) => {

```js
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
showToast.text('在js模块中使用');
// 返回实例，可以手动调用实例中的hide方法关闭提示
const toast = showToast.loading('在js模块中使用');
Expand All @@ -209,48 +199,48 @@ toast.hide();

### 方法

| 方法名 | 说明 | 参数 | 返回值 |
| ----------------- | ------------ | -------------------------------------- | --------------------------------- |
| showToast.text | 展示文字提示 | message ｜ options | toast 实例(message 支持传入 HTML) |
| showToast.success | 展示成功提示 | message ｜ options | toast 实例 |
| showToast.fail | 展示失败提示 | message ｜ options | toast 实例 |
| showToast.warn | 展示警告提示 | message ｜ options | toast 实例 |
| showToast.hide | 关闭提示 | 默认关闭所有实例，可传 id 关闭指定实例 | void |
| showToast.loading | 展示加载提示 | message ｜ options | toast 实例 |
| 方法名 | 说明 | 参数 | 返回值 |
| --- | --- | --- | --- |
| showToast.text | 展示文字提示 | message ｜ options | toast 实例(message 支持传入 HTML) |
| showToast.success | 展示成功提示 | message ｜ options | toast 实例 |
| showToast.fail | 展示失败提示 | message ｜ options | toast 实例 |
| showToast.warn | 展示警告提示 | message ｜ options | toast 实例 |
| showToast.hide | 关闭提示 | 默认关闭所有实例，可传 id 关闭指定实例 | void |
| showToast.loading | 展示加载提示 | message ｜ options | toast 实例 |

### ToastOptions 数据结构

| 参数 | 说明 | 类型 | 默认值 |
| ---------------------- | ----------------------------------------------------------------- | ---------------- | -------------------- |
| id | 标识符，相同时共用一个实例，默认为多个实例 | string \| number | - |
| duration | 展示时长（毫秒）<br>值为 0 时，toast 不会自动消失 | number | `2000` |
| title | 标题 | string | - |
| center | 是否展示在页面中部（为 false 时展示在底部） | boolean | `true` |
| bottom | 距页面底部的距离（像素或者百分比），option.center 为 false 时生效 | string | `30px` |
| text-align-center | 多行文案是否居中 | boolean | `true` |
| bg-color | 背景颜色（透明度） | string | `rgba(0, 0, 0, 0.8)` |
| custom-class | 自定义类名 | string | - |
| icon | 自定义图标，**直接传入 Component 或者 h 函数** | Component | - |
| size | 文案尺寸，**small**/**base**/**large**三选一 | string | `base` |
| cover | 是否显示遮罩层 | boolean | `false` |
| cover-color | 遮罩层颜色，默认透明 | string | `rgba(0,0,0,0)` |
| loading-rotate | loading 图标是否旋转，仅对 loading 类型生效 | boolean | `true` |
| close | 关闭时触发的事件 | function | `null` |
| close-on-click-overlay | 是否在点击遮罩层后关闭提示 | boolean | `false` |
| custom-class | 提示框 class | string | - |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| id | 标识符，相同时共用一个实例，默认为多个实例 | string \| number | - |
| duration | 展示时长（毫秒）<br>值为 0 时，toast 不会自动消失 | number | `2000` |
| title | 标题 | string | - |
| center | 是否展示在页面中部（为 false 时展示在底部） | boolean | `true` |
| bottom | 距页面底部的距离（像素或者百分比），option.center 为 false 时生效 | string | `30px` |
| text-align-center | 多行文案是否居中 | boolean | `true` |
| bg-color | 背景颜色（透明度） | string | `rgba(0, 0, 0, 0.8)` |
| custom-class | 自定义类名 | string | - |
| icon | 自定义图标，**直接传入 Component 或者 h 函数** | Component | - |
| size | 文案尺寸，**small**/**base**/**large**三选一 | string | `base` |
| cover | 是否显示遮罩层 | boolean | `false` |
| cover-color | 遮罩层颜色，默认透明 | string | `rgba(0,0,0,0)` |
| loading-rotate | loading 图标是否旋转，仅对 loading 类型生效 | boolean | `true` |
| close | 关闭时触发的事件 | function | `null` |
| close-on-click-overlay | 是否在点击遮罩层后关闭提示 | boolean | `false` |
| custom-class | 提示框 class | string | - |

## 主题定制

### 样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。

| 名称 | 默认值 |
| ------------------------------- | -------------------- |
| --nut-toast-title-font-size | _16px_ |
| --nut-toast-text-font-size | _14px_ |
| --nut-toast-font-color | _var(--nut-white)_ |
| --nut-toast-inner-padding | _24px 30px_ |
| --nut-toast-inner-bg-color | _rgba(0, 0, 0, 0.8)_ |
| --nut-toast-inner-border-radius | _12px_ |
| --nut-toast-cover-bg-color | _rgba(0, 0, 0, 0)_ |
| 名称 | 默认值 |
| --- | --- |
| --nut-toast-title-font-size | _16px_ |
| --nut-toast-text-font-size | _14px_ |
| --nut-toast-font-color | _var(--nut-white)_ |
| --nut-toast-inner-padding | _24px 30px_ |
| --nut-toast-inner-bg-color | _rgba(0, 0, 0, 0.8)_ |
| --nut-toast-inner-border-radius | _12px_ |
| --nut-toast-cover-bg-color | _rgba(0, 0, 0, 0)_ |
2 changes: 0 additions & 2 deletions src/packages/__VUE/uploader/doc.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,6 @@ const defaultFileList = reactive([
<script setup>
import { ref } from 'vue';
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
const uploadUrl = 'https://xxxxx';
const progressPercentage = (ref < string) | (number > 0);
const onProgress = ({ event, options, percentage }) => {
Expand Down Expand Up @@ -187,7 +186,6 @@ const onProgress = ({ event, options, percentage }) => {
<script setup>
import { ref } from 'vue';
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
const uploadUrl = 'https://xxxxx';
const onOversize = (files) => {
showToast.text('oversize limit upload size (up to 50kb per file)');
Expand Down
2 changes: 0 additions & 2 deletions src/packages/__VUE/uploader/doc.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,6 @@ const defaultFileList = reactive([
<script setup>
import { ref } from 'vue';
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
const uploadUrl = 'https://xxxxx';
const progressPercentage = (ref < string) | (number > 0);
const onProgress = ({ event, options, percentage }) => {
Expand Down Expand Up @@ -187,7 +186,6 @@ const onProgress = ({ event, options, percentage }) => {
<script setup>
import { ref } from 'vue';
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
const uploadUrl = 'https://xxxxx';
const onOversize = (files) => {
showToast.text('oversize 触发 文件大小不能超过 50kb');
Expand Down

0 comments on commit 6798dce

Please sign in to comment.