diff --git a/.github/workflows/releases-demo.yml b/.github/workflows/releases-demo.yml new file mode 100644 index 0000000..5a059e8 --- /dev/null +++ b/.github/workflows/releases-demo.yml @@ -0,0 +1,58 @@ +# 将静态内容部署到 GitHub Pages 的简易工作流程 +name: RELEASES DEMO + +on: + # 仅在推送到默认分支时触发工作流 + push: + branches: + - main + + # 这个选项可以使你手动在 Action tab 页面触发工作流 + workflow_dispatch: + +# 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages。 +permissions: + contents: read + pages: write + id-token: write + +# 允许一个并发的部署 +concurrency: + group: 'pages' + cancel-in-progress: true + +jobs: + # 单次部署的工作描述 + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Set up Bun + uses: oven-sh/setup-bun@v2 + with: + version: 'latest' + + - name: Install dependencies and build + env: + BASE_PATH: '/${{ github.event.repository.name }}' + run: | + bun i stdf@next -D + bun run build + + - name: Setup Pages + uses: actions/configure-pages@v4 + + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + # Upload dist folder + path: 'build/' + + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/CNAME b/CNAME new file mode 100644 index 0000000..35262d2 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +demo.stdf.design \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..93c146e --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2023 dufu1991 + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..bb47f18 --- /dev/null +++ b/README.md @@ -0,0 +1,31 @@ +# STDF Demo + +## Introduction + +This is a demo project for [STDF](https://stdf.design). + +It is built with [SvelteKit](https://kit.svelte.dev) + [Tailwind CSS](https://tailwindcss.com) + [STDF](https://stdf.design) . + +## Getting Started + +Install the dependencies... + +```sh +pnpm i +# or +npm i +# or +bun i +``` + +Start the development server... + +```sh +pnpm dev +# or +npm run dev +# or +bun dev +``` + +If you wish to start the development server with different components or in English language, please refer to the scripts section in `package.json`. diff --git a/package.json b/package.json new file mode 100644 index 0000000..c698362 --- /dev/null +++ b/package.json @@ -0,0 +1,101 @@ +{ + "name": "demo-stdf", + "version": "0.0.1", + "scripts": { + "dev": "vite dev", + "build": "vite build", + "preview": "vite preview", + "dev_en": "vite --mode english", + "button": "vite --mode button", + "icon": "vite --mode icon", + "navBar": "vite --mode navBar", + "divider": "vite --mode divider", + "cell": "vite --mode cell", + "switch": "vite --mode switch", + "avatar": "vite --mode avatar", + "tabs": "vite --mode tabs", + "tabBar": "vite --mode tabBar", + "steps": "vite --mode steps", + "indexBar": "vite --mode indexBar", + "radio": "vite --mode radio", + "checkbox": "vite --mode checkbox", + "input": "vite --mode input", + "grids": "vite --mode grids", + "swiper": "vite --mode swiper", + "placeholder": "vite --mode placeholder", + "skeleton": "vite --mode skeleton", + "rate": "vite --mode rate", + "slider": "vite --mode slider", + "badge": "vite --mode badge", + "noticeBar": "vite --mode noticeBar", + "progress": "vite --mode progress", + "progressLoop": "vite --mode progressLoop", + "mask": "vite --mode mask", + "toast": "vite --mode toast", + "loading": "vite --mode loading", + "popup": "vite --mode popup", + "bottomSheet": "vite --mode bottomSheet", + "modal": "vite --mode modal", + "dialog": "vite --mode dialog", + "actionSheet": "vite --mode actionSheet", + "picker": "vite --mode picker", + "asyncPicker": "vite --mode asyncPicker", + "timePicker": "vite --mode timePicker", + "calendar": "vite --mode calendar", + "pagination": "vite --mode pagination", + "numKeyboard": "vite --mode numKeyboard", + "button_en": "vite --mode button_en", + "icon_en": "vite --mode icon_en", + "navBar_en": "vite --mode navBar_en", + "divider_en": "vite --mode divider_en", + "cell_en": "vite --mode cell_en", + "switch_en": "vite --mode switch_en", + "avatar_en": "vite --mode avatar_en", + "tabs_en": "vite --mode tabs_en", + "tabBar_en": "vite --mode tabBar_en", + "steps_en": "vite --mode steps_en", + "indexBar_en": "vite --mode indexBar_en", + "radio_en": "vite --mode radio_en", + "checkbox_en": "vite --mode checkbox_en", + "input_en": "vite --mode input_en", + "grids_en": "vite --mode grids_en", + "swiper_en": "vite --mode swiper_en", + "placeholder_en": "vite --mode placeholder_en", + "skeleton_en": "vite --mode skeleton_en", + "rate_en": "vite --mode rate_en", + "slider_en": "vite --mode slider_en", + "badge_en": "vite --mode badge_en", + "noticeBar_en": "vite --mode noticeBar_en", + "progress_en": "vite --mode progress_en", + "progressLoop_en": "vite --mode progressLoop_en", + "mask_en": "vite --mode mask_en", + "toast_en": "vite --mode toast_en", + "loading_en": "vite --mode loading_en", + "popup_en": "vite --mode popup_en", + "bottomSheet_en": "vite --mode bottomSheet_en", + "modal_en": "vite --mode modal_en", + "dialog_en": "vite --mode dialog_en", + "actionSheet_en": "vite --mode actionSheet_en", + "picker_en": "vite --mode picker_en", + "asyncPicker_en": "vite --mode asyncPicker_en", + "timePicker_en": "vite --mode timePicker_en", + "calendar_en": "vite --mode calendar_en", + "pagination_en": "vite --mode pagination_en", + "numKeyboard_en": "vite --mode numKeyboard_en" + }, + "devDependencies": { + "@sveltejs/adapter-static": "^3.0.6", + "@sveltejs/kit": "^2.8.5", + "@sveltejs/vite-plugin-svelte": "^5.0.1", + "autoprefixer": "^10.4.20", + "postcss": "^8.4.49", + "rollup-plugin-stdf-icon": "^0.0.15", + "svelte": "^5.2.9", + "tailwindcss": "^3.4.15", + "vite": "^6.0.1" + }, + "type": "module", + "dependencies": { + "svelte-confetti": "^2.2.0" + } +} diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..7b75c83 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/scripts/Refresh-auto.py b/scripts/Refresh-auto.py new file mode 100644 index 0000000..a5cea63 --- /dev/null +++ b/scripts/Refresh-auto.py @@ -0,0 +1,293 @@ +#!/usr/bin/env python3 +# coding=utf-8 +# __author__ = 'hanli.zyb' +# __date__ = '2021-04-23' + +'''Check Package''' + +try: + import os, re, sys, getopt, time, json, logging + from aliyunsdkcore.client import AcsClient + from aliyunsdkcore.acs_exception.exceptions import ClientException + from aliyunsdkcore.acs_exception.exceptions import ServerException + from aliyunsdkcdn.request.v20180510.RefreshObjectCachesRequest import RefreshObjectCachesRequest + from aliyunsdkcdn.request.v20180510.PushObjectCacheRequest import PushObjectCacheRequest + from aliyunsdkcdn.request.v20180510.DescribeRefreshTasksRequest import DescribeRefreshTasksRequest + from aliyunsdkcdn.request.v20180510.DescribeRefreshQuotaRequest import DescribeRefreshQuotaRequest +except: + sys.exit("[error] Please pip install aliyun-python-sdk-cdn and aliyun-python-sdk-core and logging，please install now......") +logging.basicConfig(level=logging.DEBUG, filename='./RefreshAndPredload.log') + +class Envariable(object): + LISTS = [] + REGION = 'cn-zhangzhou' + AK = os.environ.get("ALIYUN_CDN_AK") + SK = os.environ.get("ALIYUN_CDN_SK") + FD = None + CLI = None + TASK_TYPE = None + TASK_AREA = None + TASK_OTYPE = None + + def set_ak(ak): + Envariable.AK = ak + + def get_ak(): + return Envariable.AK + + def set_sk(sk): + Envariable.SK = sk + + def get_sk(): + return Envariable.SK + + def set_fd(fd): + Envariable.FD = fd + + def get_fd(): + return Envariable.FD + + def set_task_type(task_type): + Envariable.TASK_TYPE = task_type + + def get_task_type(): + return Envariable.TASK_TYPE + + def set_task_area(task_area): + Envariable.TASK_AREA = task_area + + def get_task_area(): + return Envariable.TASK_AREA + + def set_task_otype(task_otype): + Envariable.TASK_OTYPE = task_otype + + def get_task_otype(): + return Envariable.TASK_OTYPE + + def set_acs_client(): + Envariable.CLI = AcsClient(Envariable.get_ak(), Envariable.get_sk(), Envariable.REGION) + + def get_acs_client(): + return Envariable.CLI + +class InitHandler(object): + def __init__(self,ak,sk,region): + try: + self.client = AcsClient(self,Envariable.get_ak(),Envariable.get_sk(),Envariable.REGION) + except Exception: + logging.info("[error]: initial AcsClient failed") and exit(1) + +class BaseCheck(object): + + def __init__(self): + self.invalidurl = '' + self.lines = 0 + self.urllist = Envariable.get_fd() + + def printQuota(self): + + try: + if Envariable.get_acs_client(): + client = Envariable.get_acs_client() + else: + Envariable.set_acs_client() + client = Envariable.get_acs_client() + quotas = DescribeRefreshQuotaRequest() + quotaResp = json.loads(Envariable.get_acs_client().do_action_with_exception(quotas)) + except Exception as e: + logging.info("\n[error]: initial AcsClient failed\n") and sys.exit(1) + + if Envariable.TASK_TYPE: + if Envariable.TASK_TYPE == 'push': + if self.lines > int(quotaResp['PreloadRemain']): + sys.exit("\n[error]：PreloadRemain is not enough {0}".format(quotaResp['PreloadRemain'])) + return True + if Envariable.TASK_TYPE == 'clear': + if Envariable.get_task_otype() == 'File' and self.lines > int(quotaResp['UrlRemain']): + sys.exit("\n[error]：UrlRemain is not enough {0}".format(quotaResp['UrlRemain'])) + elif Envariable.get_task_otype() == 'Directory' and self.lines > int(quotaResp['DirRemain']): + sys.exit("\n[error]：DirRemain is not enough {0}".format(quotaResp['DirRemain'])) + else: + return True + + def urlFormat(self): + with open(self.urllist, "r") as f: + for line in f.readlines(): + self.lines += 1 + if not re.match(r'^((https)|(http))',line): + self.invalidurl = line + '\n' + self.invalidurl + if self.invalidurl != '': + sys.exit("\n[error]: URL format is illegal \n{0}".format(self.invalidurl)) + return True + +class doTask(object): + + def urlencode_pl(inputs_str): + len_str = len(inputs_str) + if str == "" or len_str <= 0: + return "" + index_j = 0 + index_i = 0 + result_end = "" + for index_i in range(0, len_str): + index_sb = index_i + 1 + chs = inputs_str[index_i:index_sb] + if (chs >= 'A' and chs <= 'Z') or (chs >= 'a' and chs <= 'z') or (chs >= '0' and chs <= '9') or ( + chs == ":") or (chs == "/"): + if result_end == "": + result_end = chs + else: + result_end += chs + elif chs == ' ': + result_end += '+' + elif chs == '.' or chs == '-' or chs == '_' or chs == '*': + result_end += chs + else: + result_end = '%s%%%02X' % (result_end, ord(chs)) + + return result_end + + def doProd(self): + gop = 100 + mins = 1 + maxs = gop + with open(Envariable.get_fd(), "r") as f: + for line in f.readlines(): + if mins != maxs: + line = line.strip("\n") + "\n" + else: + line = line.strip("\n") + line = line.strip() + line = doTask.urlencode_pl(line) + "\n" + Envariable.LISTS.append(line) + if mins >= maxs: + yield Envariable.LISTS + mins = maxs + maxs = gop + maxs - 1 + else: + mins += 1 + if len(Envariable.LISTS) > 0: yield Envariable.LISTS + + def doRefresh(lists): + try: + if Envariable.get_acs_client(): + client = Envariable.get_acs_client() + else: + Envariable.set_acs_client() + client = Envariable.get_acs_client() + if Envariable.get_task_type() == 'clear': + taskID = 'RefreshTaskId' + request = RefreshObjectCachesRequest() + if Envariable.get_task_otype(): + request.set_ObjectType(Envariable.get_task_otype()) + elif Envariable.get_task_type() == 'push': + taskID = 'PushTaskId' + request = PushObjectCacheRequest() + if Envariable.get_task_area(): + request.set_Area(Envariable.get_task_area()) + taskreq = DescribeRefreshTasksRequest() + request.set_accept_format('json') + request.set_ObjectPath(lists) + response = json.loads(client.do_action_with_exception(request)) + print(response) + timeout = 0 + while True: + count = 0 + taskreq.set_accept_format('json') + taskreq.set_TaskId(int(response[taskID])) + taskresp = json.loads(client.do_action_with_exception(taskreq)) + print("[" + response[taskID] + "]" + "is doing... ...") + for t in taskresp['Tasks']['CDNTask']: + if t['Status'] != 'Complete': + count += 1 + if count == 0: + logging.info("[" + response[taskID] + "]" + "is finish") + break + elif timeout > 5: + logging.info("[" + response[taskID] + "]" + "timeout") + break + else: + timeout += 1 + time.sleep(5) + continue + except Exception as e: + logging.info("\n[error]：%s",e) and sys.exit(1) + +class Refresh(object): + + def main(self,argv): + if len(argv) < 1: + sys.exit("\n[usage]: " + sys.argv[0] + " -h ") + try: + opts, args = getopt.getopt(argv, "hi:k:n:r:t:a:o:") + except Exception as e: + sys.exit("\n[usage]: " + sys.argv[0] + " -h ") + + for opt, arg in opts: + if opt == '-h': + self.helps() + sys.exit() + # elif opt == '-i': + # Envariable.set_ak(arg) + # elif opt == '-k': + # Envariable.set_sk(arg) + elif opt == '-r': + Envariable.set_fd(arg) + elif opt == '-t': + Envariable.set_task_type(arg) + elif opt == '-a': + Envariable.set_task_area(arg) + elif opt == '-o': + Envariable.set_task_otype(arg) + elif opt == '-q': + Envariable.set_task_id(arg) + else: + sys.exit("\n[usage]: " + sys.argv[0] + " -h \n") + + try: + if not (Envariable.get_ak() and Envariable.get_sk() and Envariable.get_fd() and Envariable.get_task_type()): + sys.exit("\n[error]: Must be by parameter '-i', '-k', '-r', '-t'\n") + + if not (Envariable.get_task_type() in ("push", "clear")): + sys.exit("\n[error]: taskType Error, '-t' option in 'push' or 'clear'\n") + + if Envariable.get_task_area() and Envariable.get_task_otype(): + sys.exit("\n[error]: -a and -o cannot exist at same time\n") + + if Envariable.get_task_area(): + if not Envariable.get_task_area() in ("domestic","overseas"): + sys.exit("\n[error]: Area value Error, '-a' option in 'domestic' or 'overseas'\n") + + if Envariable.get_task_otype(): + if not Envariable.get_task_otype() in ("File", "Directory"): + sys.exit("\n[error]: ObjectType value Error, '-a' options in 'File' or 'Directory'\n") + if Envariable.get_task_type() == 'push': + sys.exit("\n[error]: -t must be clear and 'push' -a use together\n") + except Exception as e: + logging.info("\n[error]: Parameter {0} error\n".format(str(e))) and sys.exit(1) + + handler = BaseCheck() + if handler.urlFormat() and handler.printQuota(): + for g in doTask.doProd(Envariable.get_fd()): + Envariable.LISTS = [] + doTask.doRefresh(''.join(g)) + time.sleep(1) + + def helps(self): + print("\nscript options explain: \ + \n\t -i 访问阿里云凭证，访问控制台上可以获得； \ + \n\t -k 访问阿里云密钥，访问控制台上可以获得； \ + \n\t -r filename指“文件所在的路径+文件名称”，自动化脚本运行后将会读取文件内记录的URL；文件内的URL记录方式为每行一条URL，有特殊字符先做URLencode，以http或https开头； \ + \n\t -t 任务类型，clear：刷新，push：预热； \ + \n\t -a [String, 可选项，预热范围，不传默认是全球；\ + \n\t domestic 仅中国内地； \ + \n\t overseas 全球（不包含中国内地）； \ + \n\t -o [String,] 可选项，刷新的类型； \ + \n\t File 文件刷新（默认值）； \ + \n\t Directory 目录刷新") + +#TODO +if __name__ == '__main__': + fun = Refresh() + fun.main(sys.argv[1:]) \ No newline at end of file diff --git a/scripts/cdn-list.txt b/scripts/cdn-list.txt new file mode 100644 index 0000000..3cb4d60 --- /dev/null +++ b/scripts/cdn-list.txt @@ -0,0 +1 @@ +https://demo.stdf.design/ \ No newline at end of file diff --git a/src/app.css b/src/app.css new file mode 100644 index 0000000..acf9b5e --- /dev/null +++ b/src/app.css @@ -0,0 +1,72 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --theme-color-primary-50: 245, 248, 255; + --theme-color-primary-100: 232, 238, 255; + --theme-color-primary-200: 187, 203, 254; + --theme-color-primary-300: 143, 165, 253; + --theme-color-primary-400: 99, 124, 253; + --theme-color-primary-500: 55, 81, 252; + --theme-color-primary: 11, 36, 251; + --theme-color-primary-700: 7, 20, 207; + --theme-color-primary-800: 4, 9, 164; + --theme-color-primary-900: 1, 1, 120; + --theme-color-primary-950: 3, 0, 77; + --theme-color-dark-50: 255, 254, 245; + --theme-color-dark-100: 255, 251, 232; + --theme-color-dark-200: 255, 244, 199; + --theme-color-dark-300: 255, 234, 166; + --theme-color-dark-400: 255, 222, 133; + --theme-color-dark-500: 255, 209, 100; + --theme-color-dark: 255, 192, 67; + --theme-color-dark-700: 210, 148, 41; + --theme-color-dark-800: 166, 108, 22; + --theme-color-dark-900: 121, 72, 8; + --theme-color-dark-950: 77, 41, 0; + --theme-color-primaryBlack: 1, 3, 25; + --theme-color-primaryWhite: 242, 242, 243; + --theme-color-darkBlack: 25, 17, 1; + --theme-color-darkWhite: 243, 242, 242; + --theme-color-functional-success: 17, 187, 141; + --theme-color-functional-warning: 185, 80, 0; + --theme-color-functional-error: 218, 20, 20; + --theme-color-functional-info: 46, 90, 172; + --theme-color-extend0: 0, 172, 238; + --theme-color-extend1: 255, 105, 55; + --theme-color-extend2: 0, 112, 74; + } +} +@font-face { + font-family: 'Trueno'; + src: url('/fonts/Trueno.otf') format('opentype'); +} +*::-webkit-scrollbar { + width: 6px; +} +*::-webkit-scrollbar-thumb { + border-radius: 3px; + background-color: rgba(133, 133, 133, 0.3); +} +*::-webkit-scrollbar-track { + background-color: rgba(133, 133, 133, 0.1); +} +html { + overflow-y: overlay; + -webkit-tap-highlight-color: transparent; + scrollbar-width: none; /* Firefox */ +} +body::-webkit-scrollbar { + display: none; +} +body { + -ms-overflow-style: none; +} +* { + -webkit-overflow-scrolling: touch; +} +button:focus { + outline: none; +} diff --git a/src/app.html b/src/app.html new file mode 100644 index 0000000..5c5d70f --- /dev/null +++ b/src/app.html @@ -0,0 +1,18 @@ + + + + + + + + + STDF Demo + %sveltekit.head% + + + +
%sveltekit.body%
+ + + \ No newline at end of file diff --git a/src/data/aphorisms.js b/src/data/aphorisms.js new file mode 100644 index 0000000..8b4cef7 --- /dev/null +++ b/src/data/aphorisms.js @@ -0,0 +1,51 @@ +export default [ + // 中文 + { text: '爱是永恒不变的力量，能够超越所有维度，当我归来，你已垂暮，我一次呼吸划过了你一辈子的岁月。', from: '—— 《星际穿越》' }, + { text: '爱一朵花不猜它能开多久，放宽了心情，把什么都变美了。', from: '—— 郭静《在树上唱歌》' }, + { text: '不是所有的坚持都有结果，但是总有一些坚持，能从一寸冰封的土地里，培育出十万朵怒放的蔷薇。', from: '—— 八月长安《最好的我们》' }, + { text: '当没有任何一个人信任你的时候，沉默和坚持就是最好的反击和证明。', from: '—— 《沉默的羔羊》' }, + { text: '既不回头，何必不忘。既然无缘，何需誓言。今日种种，似水无痕。明夕何夕，君已陌路。', from: '—— 《仙剑奇侠传一》' }, + { text: '记忆是相见的另一种方式。', from: '—— 纪伯伦​​​​' }, + { text: '没有值得不值得，只有愿意不愿意。', from: '—— 彩衣' }, + { text: '每朵云都下落不明，每盏月亮都不知所踪。', from: '—— 八月长安《暗恋》' }, + { text: '让人类永远保持理智，是一种奢求。', from: '—— MOSS' }, + { text: '生命的闪耀不坚持到底怎能看到 ，与其苟延残喘不如纵情燃烧 。', from: '—— 《追梦赤子心》' }, + { text: '生活坏到一定程度就会好起来，因为它无法更坏，努力过后，才知道许多事情，坚持坚持，就过来了。', from: '—— 宫崎骏《千与千寻》' }, + { + text: '我每天醒在鸟声里。我从梦里就听到鸟叫，直到我醒来。我听得出几种极熟悉的叫声，那是每天都叫的，似乎每天都在那个固定的枝头。', + from: '—— 汪曾祺', + }, + { text: '我相信人类的勇气可以跨越时间，跨越当下，跨越未来。', from: '—— 《流浪地球2》' }, + { + text: '于千万人之中遇见你所要遇见的人，于千万年之中，时间的无涯的荒野里，没有早一步，也没有晚一步，刚巧赶上了，那也没有别的话可说，惟有轻轻地问一声：“噢，你也在这里吗？”', + from: '—— 张爱玲《爱》', + }, + { text: '御剑乘风来，除魔天地间，有酒乐逍遥，无酒我亦癫。一饮尽江河，再饮吞日月，千杯醉不倒，唯我酒剑仙。', from: '—— 酒剑仙' }, + { text: '最美的不是下雨天，是曾与你躲过雨的屋檐。', from: '—— 周杰伦《不能说的秘密》' }, + + // English + { text: 'All the splendor in the world is not worth a good friend.', from: '— Voltaire' }, + { text: 'Continuous labor is the life of the iron law, also the art of iron.', from: '— Balzac' }, + { + text: 'Do not go gentle into that good night; Old age should burn and rave at close of day. Rage, rage against the dying of the light.', + from: '— Dylan Thomas', + }, + { + text: 'Hope is a good thing, maybe the best of things and no good thing ever dies.', + from: '— The Shawshank Redemption', + fromItalic: true, + }, + { text: 'Honesty and diligence should be your eternal mates.', from: '— Franklin' }, + { text: 'If a man deceives me once, shame on him; if twice,shame on me.', from: '— John Ray' }, + { text: 'Life is a kind of endless yearning, eager to continue to rise, become more great and noble.', from: '— Du Charm' }, + { text: 'The best way to find yourself is to lose yourself in the service of others.', from: '— Gandhi' }, + { text: 'The best way to cheer yourself up is to try to cheer somebody else up.', from: '— Mark Twain' }, + { + text: 'The body is always in the end. In addition to thinking, there is no beautiful and interesting things to stay, because thought is life.', + from: '— Bernard Shaw', + }, + { + text: "We should not be at any price to keep our friendship, so that it is defiled. If you have to sacrifice friendship for that great love, that's no way to do it; but if you can keep it, it will be a perfect state.", + from: '— Tagore', + }, +]; diff --git a/src/data/menuList.js b/src/data/menuList.js new file mode 100644 index 0000000..35a0c04 --- /dev/null +++ b/src/data/menuList.js @@ -0,0 +1,403 @@ +export default [ + { + class: '通用', + class_en: 'Universal', + childs: [ + { + title: '按钮 Button', + title_zh: '按钮', + title_en: 'Button', + nav: 'button', + tip: '按下它，让世界变得更美好吧。', + tip_en: 'Press it and make the world a better place.', + alias: 'button|按钮', + }, + { + title: '底部浮窗 BottomSheet', + title_zh: '底部浮窗', + title_en: 'BottomSheet', + nav: 'bottomSheet', + tip: '浮窗犹如小偷，突然出现让你焦灼，却也能唤起你的警觉。', + tip_en: 'The floating window is like a thief, suddenly appearing to make you anxious, but it can also arouse your alertness.', + alias: + 'bottomSheet|底部浮窗|底部|底|部|浮窗|bottomSheet底部浮窗|bottomSheet 底部浮窗|底部弹窗|bottomSheet底部弹窗|bottomSheet 底部弹窗|底部弹出框|bottomSheet底部弹出框|bottomSheet 底部弹出框|底部弹出层|bottomSheet底部弹出层|bottomSheet 底部弹出层', + }, + { + title: '图标 Icon', + title_zh: '图标', + title_en: 'Icon', + nav: 'icon', + tip: '使用 SVG Sprites，请参照指南引入与使用。', + tip_en: 'Use SVG Sprites, please refer to the guide to import and use.', + alias: 'icon|图标|svg', + }, + { + title: '遮罩 Mask', + title_zh: '遮罩', + title_en: 'Mask', + nav: 'mask', + tip: '遮罩虽能掩盖身形，却无法掩藏内心。', + tip_en: 'Although the mask can cover the figure, it cannot hide the heart.', + alias: 'mask|遮罩|遮|罩|mask遮罩|mask 遮罩|遮罩层|mask遮罩层|mask 遮罩层|Overlay|maskOverlay|mask Overlay', + }, + { + title: '弹出层 Popup', + title_zh: '弹出层', + title_en: 'Popup', + nav: 'popup', + tip: '机会就像弹珠，只有你努力地推它，它才会弹出来。', + tip_en: 'Opportunity is like a marble, only if you push it hard, it will pop out.', + alias: + 'popup|弹出层|弹出|弹|出|层|popup弹出层|popup 弹出层|弹窗|popup弹窗|popup 弹窗|弹出框|popup弹出框|popup 弹出框|弹出层|popup弹出层|popup 弹出层', + }, + ], + }, + { + class: '布局', + class_en: 'Layout', + childs: [ + { + title: '分割线 Divider', + title_zh: '分割线', + title_en: 'Divider', + nav: 'divider', + tip: '分开的日子越久，最初的喜悦越发淡薄。', + tip_en: 'The longer the days are separated, the more the initial joy fades.', + alias: 'divider|分割线|分割|line', + }, + { + title: '网格 Grids', + title_zh: '网格', + title_en: 'Grids', + nav: 'grids', + tip: '可是怎么说，总觉得，我们之间留了太多空白格。', + tip_en: 'How can I say, I always feel that there are too many blank grids between us.', + alias: 'grids|网格|grid|row|col|column', + }, + { + title: '占位符 Placeholder', + title_zh: '占位符', + title_en: 'Placeholder', + nav: 'placeholder', + tip: '人生重要的不是所站的位置，而是所朝的方向。', + tip_en: 'What is important in life is not the position you stand, but the direction you face.', + alias: 'placeholder|占位符|占位', + }, + { + title: '骨架屏 Skeleton', + title_zh: '骨架屏', + title_en: 'Skeleton', + nav: 'skeleton', + tip: '骨架是支撑身体的关键，而人生信念则是支撑生命的骨架。', + tip_en: 'The skeleton is the key to supporting the body, and the belief in life is the skeleton that supports life.', + alias: 'skeleton|骨架屏|骨架', + }, + ], + }, + { + class: '导航', + class_en: 'Navigation', + childs: [ + { + title: '索引栏 IndexBar', + title_zh: '索引栏', + title_en: 'IndexBar', + nav: 'indexBar', + tip: '你不迷途知返，我怎么给你以索引？', + tip_en: "If you don't know the way back, how can I give you an index?", + alias: 'indexBar|索引栏|indexbar|index|bar|索引|index 栏|索引条|index条|index 条', + }, + { + title: '导航栏 NavBar', + title_zh: '导航栏', + title_en: 'NavBar', + nav: 'navBar', + tip: '没有指引，在黑暗中只能乱撞。', + tip_en: 'Without guidance, you can only bump in the dark.', + alias: 'navBar|导航栏|navbar|nav|bar|导航|nav-bar|nav bar', + }, + { + title: '分页 Pagination', + title_zh: '分页', + title_en: 'Pagination', + nav: 'pagination', + tip: '人生就像一部电影，不论多么精彩，也有谢幕的时候。', + tip_en: 'Life is like a movie, no matter how wonderful it is, there is a curtain call.', + alias: 'pagination|分页|page|分|页|pagination分页|pagination 分页|page分页|page 分页', + }, + { + title: '步骤条 Steps', + title_zh: '步骤条', + title_en: 'Steps', + nav: 'steps', + tip: '人生没有白走的路，每一步都算数。', + tip_en: 'Life has no wasted steps, every step counts.', + alias: 'steps|step|步骤条|步骤|step条|step 条|步骤栏|step栏|step 栏', + }, + { + title: '标签栏 TabBar', + title_zh: '标签栏', + title_en: 'TabBar', + nav: 'tabBar', + tip: '看脚下一片黑暗，望头顶星光璀璨。', + tip_en: "Looking down, it's all darkness; looking up, the stars are shining brightly.", + alias: 'tabBar|标签栏|tabbar|tab|bar|标签|tab 栏', + }, + { + title: '标签页 Tabs', + title_zh: '标签页', + title_en: 'Tabs', + nav: 'tabs', + tip: '偶尔隐藏，是为了在合适的时候更好地绽放。', + tip_en: 'Occasionally hide, it is to bloom better at the right time.', + alias: 'tabs|tab|标签页|标签|tab页', + }, + ], + }, + { + class: '数据输入', + class_en: 'Data entry', + childs: [ + { + title: '动作面板 ActionSheet', + title_zh: '动作面板', + title_en: 'ActionSheet', + nav: 'actionSheet', + tip: '我的世界只有一个选项，就是你。', + tip_en: 'There is only one option in my world, and that is you.', + alias: + 'actionSheet|动作面板|动作|动|作|面板|actionSheet动作面板|actionSheet 动作面板|动作面板|actionSheet动作面板|actionSheet 动作面板|动作面板|actionSheet动作面板|actionSheet 动作面板', + }, + { + title: '异步选择器 AsyncPicker', + title_zh: '异步选择器', + title_en: 'AsyncPicker', + nav: 'asyncPicker', + tip: '错过的话，就请错过一辈子吧！', + tip_en: 'If you miss it, please miss it for a lifetime!', + alias: 'asyncPicker|异步选择器|异步|asyncPicker异步选择器|asyncPicker 异步选择器|async picker|asyncpicker|异步picker|异步picker', + }, + { + title: '日历 Calendar', + title_zh: '日历', + title_en: 'Calendar', + nav: 'calendar', + tip: '在无人问津日子里，正是登峰造极的好时机。', + tip_en: 'In the days when no one cares, it is a good time to reach the peak.', + alias: + 'calendar|日历|日|历|calendar日历|calendar 日历|日期|calendar日期|calendar 日期|周选择|calendar周选择|calendar 周选择|周|calendar周|calendar 周|日期区间|月选择|日期范围选择', + }, + { + title: '复选框 Checkbox', + title_zh: '复选框', + title_en: 'Checkbox', + nav: 'checkbox', + tip: '要么全不，要么全部。', + tip_en: 'Either all or none.', + alias: + 'checkbox|复选框|复选|checkbox复选框|checkbox 复选框|复选按钮|checkbox复选按钮|checkbox 复选按钮|多选框|多选|checkbox多选框|checkbox 多选框|多选按钮|checkbox多选按钮|checkbox 多选按钮', + }, + { + title: '输入框 Input', + title_zh: '输入框', + title_en: 'Input', + nav: 'input', + tip: '对方正在输入......', + tip_en: 'The other party is typing...', + alias: + 'input|输入框|输入|input输入框|input 输入框|Textarea|textarea|文本域|文本框|文本|textarea文本域|textarea 文本域|多行输入框|多行输入|多行|textarea多行输入框|textarea 多行输入框', + }, + { + title: '数字键盘 NumKeyboard', + title_zh: '数字键盘', + title_en: 'NumKeyboard', + nav: 'numKeyboard', + tip: '3 0624700 | 3 0624770 | 5 34202 13942 | 4314 0624', + tip_en: '3 0624700 | 3 0624770 | 5 34202 13942 | 4314 0624', + alias: + 'numKeyboard|数字键盘|数字|键盘|numKeyboard数字键盘|numKeyboard 数字键盘|金额键盘|numKeyboard金额键盘|numKeyboard 金额键盘|number|keyboard|amount|money|', + }, + { + title: '选择器 Picker', + title_zh: '选择器', + title_en: 'Picker', + nav: 'picker', + tip: '采摘花瓣时，你得不到花的美丽。', + tip_en: 'When you pick petals, you don’t get the beauty of the flower.', + alias: 'picker|选择器|选择|picker选择器|picker 选择器', + }, + { + title: '单选框 Radio', + title_zh: '单选框', + title_en: 'Radio', + nav: 'radio', + tip: '如果要在正确和善良中选择一个，请选择善良。', + tip_en: 'If you have to choose between right and good, choose good.', + alias: 'radio|单选框|单选|radio单选框|radio 单选框|单选按钮|radio单选按钮|radio 单选按钮', + }, + { + title: '评分 Rate', + title_zh: '评分', + title_en: 'Rate', + nav: 'rate', + tip: '散场时，对方剩余的手机电量，就是这场约会的评分。', + tip_en: 'At the end of the game, the remaining battery power of the other party is the score of this date.', + alias: 'rate|评分|评|分|rate评分|rate 评分', + }, + { + title: '滑块 Slider', + title_zh: '滑块', + title_en: 'Slider', + nav: 'slider', + tip: '请滑动解锁您的烦恼。', + tip_en: 'Please slide to unlock your troubles.', + alias: 'slider|滑块|滑|块|slider滑块|slider 滑块', + }, + { + title: '开关 Switch', + title_zh: '开关', + title_en: 'Switch', + nav: 'switch', + tip: '死亡是一个开关，活着却是一根绳索。', + tip_en: 'Death is a switch, but life is a rope.', + alias: 'switch|开关|开|关|switch开关|switch 开关', + }, + { + title: '步进器 Stepper', + title_zh: '步进器', + title_en: 'Stepper', + nav: 'stepper', + tip: '人生如同诗行，或进或退皆成章。保持心灵节奏，生命之诗韵味悠长。', + tip_en: + 'Life is like a poem, advancing or retreating all form chapters. Maintain the rhythm of the soul, and the poetic flavor of life will last long.', + alias: 'stepper|步进器|步|进|器|stepper步进器|stepper 步进器', + }, + { + title: '时间选择器 TimePicker', + title_zh: '时间选择器', + title_en: 'TimePicker', + nav: 'timePicker', + tip: '死亡不是失去生命，而是走出了时间的枷锁。', + tip_en: 'Death is not the loss of life, but the release of the shackles of time.', + alias: + 'timePicker|时间选择器|时间|timePicker时间选择器|timePicker 时间选择器|time picker|timepicker|时间picker|时间picker|日期选择器|日期|datePicker日期选择器|datePicker 日期选择器|date picker|datepicker|日期picker|日期picker', + }, + ], + }, + { + class: '信息展示', + class_en: 'Info display', + childs: [ + { + title: '头像 Avatar', + title_zh: '头像', + title_en: 'Avatar', + nav: 'avatar', + tip: '其实我发给您的头像，是情侣头像...', + tip_en: 'Actually, the avatar I sent to you is a couple avatar...', + alias: 'avatar|头像|头|像|avatar头像|avatar 头像', + }, + { + title: '徽标 Badge', + title_zh: '徽标', + title_en: 'Badge', + nav: 'badge', + tip: '在标记消失之前，回到我身边。', + tip_en: 'Before the mark disappears, come back to me.', + alias: 'badge|徽标|徽|标|badge徽标|badge 徽标|标记|badge标记|badge 标记', + }, + { + title: '单元格 Cell', + title_zh: '单元格', + title_en: 'Cell', + nav: 'cell', + tip: '当全世界抛弃您的时候请记住，您身上有几亿细胞都在为你而活。', + tip_en: 'When the whole world abandons you, remember that there are billions of cells on your body that are living for you.', + alias: 'cell|单元格|单元|cell单元格|cell 单元格', + }, + { + title: '通告栏 NoticeBar', + title_zh: '通告栏', + title_en: 'NoticeBar', + nav: 'noticeBar', + tip: '我方开放地下城，这是告知，不是商量。', + tip_en: 'Our side opens the dungeon, this is to inform, not to discuss.', + alias: + 'noticeBar|通告栏|通告|通|栏|noticeBar通告栏|noticeBar 通告栏|通知栏|noticeBar通知栏|noticeBar 通知栏|公告栏|noticeBar公告栏|noticeBar 公告栏', + }, + { + title: '进度条 Progress', + title_zh: '进度条', + title_en: 'Progress', + nav: 'progress', + tip: '好运进度：▓▓▓▓▓▓▓▓▓▓▓▓ 100%', + tip_en: 'Good luck progr: ▓▓▓▓▓▓▓▓▓▓▓▓ 100%', + alias: 'progress|进度条|进度|进|度|progress进度条|progress 进度条', + }, + { + title: '进度环 ProgressLoop', + title_zh: '进度环', + title_en: 'ProgressLoop', + nav: 'progressLoop', + tip: '人生不是一个完美的圆环，一旦完美，你就再没有任何可能性。', + tip_en: 'Life is not a perfect circle. Once perfect, you have no possibility.', + alias: + 'progressLoop|进度环|进度|进|度|progressLoop进度环|progressLoop 进度环|环形进度条|progressLoop环形进度条|progressLoop 环形进度条|progress loop|progress-loop', + }, + { + title: '轮播 Swiper', + title_zh: '轮播', + title_en: 'Swiper', + nav: 'swiper', + tip: '人世间悲喜烂剧，昼夜轮播不停。', + tip_en: 'The ups and downs of life, day and night, are not stopping.', + alias: 'swiper|轮播|轮|播|swiper轮播|swiper 轮播|轮播图|swiper轮播图|swiper 轮播图|走马灯|swiper走马灯|swiper 走马灯|carousel', + }, + ], + }, + { + class: '反馈', + class_en: 'Feedback', + childs: [ + { + title: '对话框 Dialog', + title_zh: '对话框', + title_en: 'Dialog', + nav: 'dialog', + tip: '无法确定任何事情，尤其是按下“确定”键的那一刻，我最不确定。', + tip_en: 'Nothing can be determined, especially at the moment when the "OK" button is pressed, I am the most uncertain.', + alias: + 'dialog|对话框|对话|对|话|框|dialog对话框|dialog 对话框|对话框|dialog对话框|dialog 对话框|对话框|dialog对话框|dialog 对话框|对话框|dialog对话框|dialog 对话框', + }, + { + title: '加载 Loading', + title_zh: '加载', + title_en: 'Loading', + nav: 'loading', + tip: '不要再苦苦等待答案了，没有回复已是答案。', + tip_en: "Don't wait for the answer, no reply is the answer.", + alias: 'loading|加载|加载中|loading加载|loading 加载|loading加载中|loading 加载中|loading加载中...|loading 加载中...', + }, + { + title: '弹框 Modal', + title_zh: '弹框', + title_en: 'Modal', + nav: 'modal', + tip: '弹框即人生，要么选择关闭，要么选择继续。', + tip_en: 'The modal is life, either choose to close or choose to continue.', + alias: + 'modal|弹框|弹|框|modal弹框|modal 弹框|弹窗|modal弹窗|modal 弹窗|弹出框|modal弹出框|modal 弹出框|弹框|modal弹框|modal 弹框|模态框|modal模态框|modal 模态框', + }, + { + title: '轻提示 Toast', + title_zh: '轻提示', + title_en: 'Toast', + nav: 'toast', + tip: '总有一些东西，要用消失来证明它的珍贵。', + tip_en: 'There are always some things that have to disappear to prove their value.', + alias: + 'toast|轻提示|轻|提示|toast轻提示|toast 轻提示|轻弹窗|toast轻弹窗|toast 轻弹窗|轻提示框|toast轻提示框|toast 轻提示框|吐司|toast吐司|toast 吐司', + }, + ], + }, +]; diff --git a/src/data/themes/AzurePink.js b/src/data/themes/AzurePink.js new file mode 100644 index 0000000..f3b9b44 --- /dev/null +++ b/src/data/themes/AzurePink.js @@ -0,0 +1,46 @@ +export default { + name: 'AzurePink', + color: { + primary: { + 50: '245, 247, 255', // #F5F7FF + 100: '232, 237, 255', // #E8EDFF + 200: '176, 186, 237', // #B0BAED + 300: '126, 139, 219', // #7E8BDB + 400: '83, 94, 201', // #535EC9 + 500: '45, 54, 183', // #2D36B7 + default: '13, 18, 165', // #0D12A5 + 700: '8, 8, 143', // #08088F + 800: '9, 5, 121', // #090579 + 900: '8, 2, 99', // #080263 + 950: '8, 0, 77', // #08004D + }, + dark: { + 50: '255, 245, 248', // #FFF5F8 + 100: '255, 232, 240', // #FFE8F0 + 200: '251, 190, 213', // #FBBED5 + 300: '247, 149, 190', // #F795BE + 400: '243, 109, 169', // #F36DA9 + 500: '239, 70, 152', // #EF4698 + default: '235, 33, 136', // #EB2188 + 700: '195, 21, 117', // #C31575 + 800: '156, 11, 95', // #9C0B5F + 900: '116, 4, 73', // #740449 + 950: '77, 0, 50', // #4D0032 + }, + primaryBlack: '1, 1, 25', // #010119 + primaryWhite: '242, 242, 243', // #F2F2F3 + darkBlack: '25, 1, 13', // #19010D + darkWhite: '243, 242, 242', // #F3F2F2 + functional: { + success: '43, 164, 23', // #2ba417 + warning: '227, 115, 24', // #e37318 + error: '213, 73, 65', // #d54941 + info: '0, 82, 217', // #0052d9 + }, + extend: [ + { color: '20, 40, 160', alias: 'Samsung' }, // #1428A0 + { color: '253, 73, 0', alias: 'Xiaomi' }, // #fd4900 + { color: '4, 106, 56', alias: 'OPPO' }, // ##046a38 + ], + }, +}; diff --git a/src/data/themes/CamelliaRed.js b/src/data/themes/CamelliaRed.js new file mode 100644 index 0000000..21c1ed3 --- /dev/null +++ b/src/data/themes/CamelliaRed.js @@ -0,0 +1,46 @@ +export default { + name: 'CamelliaRed', + color: { + primary: { + 50: '255, 246, 245', // #FFF6F5 + 100: '255, 234, 232', // #FFEAE8 + 200: '252, 199, 196', // #FCC7C4 + 300: '248, 163, 162', // #F8A3A2 + 400: '245, 128, 130', // #F58082 + 500: '241, 95, 102', // #F15F66 + default: '238, 63, 77', // #EE3F4D + 700: '198, 39, 58', // #C6273A + 800: '157, 21, 41', // #9D1529 + 900: '117, 8, 28', // #75081C + 950: '77, 0, 17', // #4D0011 + }, + dark: { + 50: '254, 250, 255', // #FEFAFF + 100: '251, 232, 255', // #FBE8FF + 200: '246, 214, 255', // #F6D6FF + 300: '240, 196, 255', // #F0C4FF + 400: '233, 179, 255', // #E9B3FF + 500: '225, 161, 255', // #E1A1FF + default: '216, 143, 255', // #D88FFF + 700: '164, 88, 210', // #A458D2 + 800: '116, 46, 166', // #742EA6 + 900: '74, 17, 121', // #4A1179 + 950: '40, 0, 77', // #28004D + }, + primaryBlack: '25, 1, 3', // #190103 + primaryWhite: '243, 242, 242', // #F3F2F2 + darkBlack: '16, 1, 25', // #100119 + darkWhite: '242, 242, 243', // #F2F2F3 + functional: { + success: '82, 196, 26', // #52c41a + warning: '250, 173, 20', // #faad14 + error: '255, 77, 79', // #ff4d4f + info: '22, 119, 255', // #1677ff + }, + extend: [ + { color: '59, 89, 152', alias: 'Facebook' }, // #3b5998 + { color: '237, 28, 22', alias: 'CocaCola' }, // #ed1c16 + { color: '0, 104, 181', alias: 'Intel' }, // #0068b5 + ], + }, +}; diff --git a/src/data/themes/Nintendo.js b/src/data/themes/Nintendo.js new file mode 100644 index 0000000..628fda2 --- /dev/null +++ b/src/data/themes/Nintendo.js @@ -0,0 +1,46 @@ +export default { + name: 'Nintendo', + color: { + primary: { + 50: '255, 246, 245', // #FFF6F5 + 100: '255, 234, 232', // #FFEAE8 + 200: '250, 185, 182', // #FAB9B6 + 300: '245, 136, 134', // #F58886 + 400: '240, 87, 90', // #F0575A + 500: '235, 43, 52', // #EB2B34 + default: '230, 0, 18', // #E60012 + 700: '192, 0, 22', // #C00016 + 800: '153, 0, 23', // #990017 + 900: '115, 0, 21', // #730015 + 950: '77, 0, 17', // #4D0011 + }, + dark: { + 50: '245, 255, 254', // #F5FFFE + 100: '232, 255, 254', // #E8FFFE + 200: '182, 249, 249', // #B6F9F9 + 300: '133, 240, 244', // #85F0F4 + 400: '87, 228, 238', // #57E4EE + 500: '42, 214, 233', // #2AD6E9 + default: '0, 195, 227', // #00C3E3 + 700: '0, 158, 189', // #009EBD + 800: '0, 121, 152', // #007998 + 900: '0, 87, 114', // #005772 + 950: '0, 56, 77', // #00384D + }, + primaryBlack: '25, 1, 3', // #190103 + primaryWhite: '243, 242, 242', // #F3F2F2 + darkBlack: '1, 22, 25', // #011619 + darkWhite: '242, 243, 243', // #F2F3F3 + functional: { + success: '0, 180, 42', // #00b42a + warning: '255, 125, 0', // #ff7d00 + error: '245, 63, 63', // #f53f3f + info: '22, 93, 255', // #165dff + }, + extend: [ + { color: '0, 82, 217', alias: 'Tencent' }, // #0052d9 + { color: '26, 173, 25', alias: 'WeChat' }, // #1aad19 + { color: '243, 112, 33', alias: 'Hermès' }, // #f37021 + ], + }, +}; diff --git a/src/data/themes/SmartLive.js b/src/data/themes/SmartLive.js new file mode 100644 index 0000000..2d27aa6 --- /dev/null +++ b/src/data/themes/SmartLive.js @@ -0,0 +1,46 @@ +export default { + name: 'SmartLive', + color: { + primary: { + 50: '252, 245, 255', // #FCF5FF + 100: '248, 232, 255', // #F8E8FF + 200: '205, 174, 222', // #CDAEDE + 300: '165, 125, 189', // #A57DBD + 400: '126, 84, 157', // #7E549D + 500: '91, 51, 124', // #5B337C + default: '60, 26, 91', // #3C1A5B + 700: '52, 19, 87', // #341357 + 800: '44, 12, 84', // #2C0C54 + 900: '37, 6, 80', // #250650 + 950: '29, 0, 77', // #1D004D + }, + dark: { + 50: '253, 255, 245', // #FDFFF5 + 100: '252, 255, 232', // #FCFFE8 + 200: '250, 255, 200', // #FAFFC8 + 300: '251, 255, 168', // #FBFFA8 + 400: '253, 255, 136', // #FDFF88 + 500: '255, 252, 104', // #FFFC68 + default: '255, 247, 72', // #FFF748 + 700: '210, 197, 45', // #D2C52D + 800: '166, 149, 23', // #A69517 + 900: '121, 104, 9', // #796809 + 950: '77, 62, 0', // #4D3E00 + }, + primaryBlack: '13, 1, 25', // #0D0119 + primaryWhite: '242, 242, 243', // #F2F2F3 + darkBlack: '25, 24, 1', // #191801 + darkWhite: '243, 243, 242', // #F3F3F2 + functional: { + success: '21, 91, 54', // #155b36 + warning: '208, 126, 11', // #d07e0b + error: '218, 20, 20', // #da1414 + info: '99, 176, 227', // #63b0e3 + }, + extend: [ + { color: '118, 185, 0', alias: 'NVIDIA' }, // #76b900 + { color: '251, 114, 153', alias: 'bilibili' }, // #fb7299 + { color: '22, 119, 255', alias: 'AliPay' }, // #1677ff + ], + }, +}; diff --git a/src/data/themes/chameleon.js b/src/data/themes/chameleon.js new file mode 100644 index 0000000..ff784dc --- /dev/null +++ b/src/data/themes/chameleon.js @@ -0,0 +1,46 @@ +export default { + name: 'Chameleon', + color: { + primary: { + 50: '245, 255, 248', // #F5FFF8 + 100: '232, 255, 239', // #E8FFEF + 200: '173, 236, 195', // #ADECC3 + 300: '120, 218, 157', // #78DA9D + 400: '74, 199, 126', // #4AC77E + 500: '35, 181, 100', // #23B564 + default: '2, 162, 78', // #02A24E + 700: '1, 141, 73', // #018D49 + 800: '1, 119, 66', // #017742 + 900: '0, 98, 57', // #006239 + 950: '0, 77, 47', // #004D2F + }, + dark: { + 50: '255, 245, 252', // #FFF5FC + 100: '255, 232, 250', // #FFE8FA + 200: '250, 204, 241', // #FACCF1 + 300: '246, 177, 234', // #F6B1EA + 400: '241, 151, 229', // #F197E5 + 500: '237, 126, 226', // #ED7EE2 + default: '232, 102, 223', // #E866DF + 700: '193, 64, 189', // #C140BD + 800: '154, 34, 154', // #9A229A + 900: '112, 13, 115', // #700D73 + 950: '71, 0, 77', // #47004D + }, + primaryBlack: '1, 25, 12', // #01190C + primaryWhite: '242, 243, 242', // #F2F3F2 + darkBlack: '25, 1, 23', // #190117 + darkWhite: '243, 242, 243', // #F3F2F3 + functional: { + success: '103, 194, 58', // #67c23a + warning: '230, 162, 60', // #e6a23c + error: '245, 108, 108', // #f56c6c + info: '144, 147, 153', // #909399 + }, + extend: [ + { color: '56, 189, 248', alias: 'Tailwind' }, // #38bdf8 + { color: '194, 12, 12', alias: 'NetEaseCloudMusic' }, // #c20c0c + { color: '65, 95, 255', alias: 'vivo' }, // #415fff + ], + }, +}; diff --git a/src/data/themes/index.js b/src/data/themes/index.js new file mode 100644 index 0000000..d9032dd --- /dev/null +++ b/src/data/themes/index.js @@ -0,0 +1,78 @@ +import { stdfTheme } from 'stdf/theme'; +import chameleonTheme from './chameleon'; +import AzurePink from './AzurePink'; +import SmartLive from './SmartLive'; +import CamelliaRed from './CamelliaRed'; +import Nintendo from './Nintendo'; + +/** + * 传入 rgb 格式 255, 255, 255 的颜色值，返回 hex 格式的颜色值 + * Pass in the color value of rgb format 255, 255, 255 and return the color value of hex format + * @param {string} rgb + * @returns {string} + */ +const rgbToHex = rgb => { + // 如果传入的是 hex 格式的颜色值，直接返回 + // If the color value passed in is in hex format, return directly + if (rgb.includes('#')) { + return rgb; + } + const rgbArr = rgb.split(','); + let hex = '#'; + rgbArr.forEach(item => { + const num = parseInt(item); + hex += num.toString(16).padStart(2, '0'); + }); + return hex; +}; + +/** + * 将 theme 对象中所有的 rgb 格式 255, 255, 255 转换为 hex 格式 #ffffff + * Let all rgb formats 255, 255, 255 in the theme object be converted to hex format #ffffff + * @param {Object} theme + * @returns {Object} + */ +const rgbToHexFunc = theme => { + const obj = theme.color; + const primary = obj.primary; + for (const key in primary) { + if (Object.hasOwnProperty.call(primary, key)) { + const element = primary[key]; + if (typeof element === 'string' && element.includes(',')) { + primary[key] = rgbToHex(element); + } + } + } + const dark = obj.dark; + for (const key in dark) { + if (Object.hasOwnProperty.call(dark, key)) { + const element = dark[key]; + if (typeof element === 'string' && element.includes(',')) { + dark[key] = rgbToHex(element); + } + } + } + obj.functional.success = rgbToHex(obj.functional.success); + obj.functional.warning = rgbToHex(obj.functional.warning); + obj.functional.error = rgbToHex(obj.functional.error); + obj.functional.info = rgbToHex(obj.functional.info); + const extend = obj.extend; + extend.forEach(item => { + item.color = rgbToHex(item.color); + }); + obj.primaryBlack = rgbToHex(obj.primaryBlack); + obj.primaryWhite = rgbToHex(obj.primaryWhite); + obj.darkBlack = rgbToHex(obj.darkBlack); + obj.darkWhite = rgbToHex(obj.darkWhite); + theme.color = obj; + return theme; +}; + +export default [ + { name_CN: 'STDF', name: stdfTheme.name, theme: rgbToHexFunc(stdfTheme) }, + { name_CN: '任天堂', name: Nintendo.name, theme: rgbToHexFunc(Nintendo) }, + { name_CN: '蔚蓝粉', name: AzurePink.name, theme: rgbToHexFunc(AzurePink) }, + { name_CN: '变色龙', name: chameleonTheme.name, theme: rgbToHexFunc(chameleonTheme) }, + { name_CN: '慧活力', name: SmartLive.name, theme: rgbToHexFunc(SmartLive) }, + { name_CN: '山茶红', name: CamelliaRed.name, theme: rgbToHexFunc(CamelliaRed) }, +]; diff --git a/src/lib/symbol/ri-account-circle-fill.svg b/src/lib/symbol/ri-account-circle-fill.svg new file mode 100644 index 0000000..110027b --- /dev/null +++ b/src/lib/symbol/ri-account-circle-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-account-circle-line.svg b/src/lib/symbol/ri-account-circle-line.svg new file mode 100644 index 0000000..02edd7d --- /dev/null +++ b/src/lib/symbol/ri-account-circle-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-add-line.svg b/src/lib/symbol/ri-add-line.svg new file mode 100644 index 0000000..5b518ce --- /dev/null +++ b/src/lib/symbol/ri-add-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-aliens-fill.svg b/src/lib/symbol/ri-aliens-fill.svg new file mode 100644 index 0000000..8224b9e --- /dev/null +++ b/src/lib/symbol/ri-aliens-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-android-fill.svg b/src/lib/symbol/ri-android-fill.svg new file mode 100644 index 0000000..412d503 --- /dev/null +++ b/src/lib/symbol/ri-android-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-apple-fill.svg b/src/lib/symbol/ri-apple-fill.svg new file mode 100644 index 0000000..6dbe040 --- /dev/null +++ b/src/lib/symbol/ri-apple-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-apps-2-line.svg b/src/lib/symbol/ri-apps-2-line.svg new file mode 100644 index 0000000..2a0d17e --- /dev/null +++ b/src/lib/symbol/ri-apps-2-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-arrow-down-s-line.svg b/src/lib/symbol/ri-arrow-down-s-line.svg new file mode 100644 index 0000000..6c07343 --- /dev/null +++ b/src/lib/symbol/ri-arrow-down-s-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-arrow-left-s-line.svg b/src/lib/symbol/ri-arrow-left-s-line.svg new file mode 100644 index 0000000..087efae --- /dev/null +++ b/src/lib/symbol/ri-arrow-left-s-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-arrow-right-s-line.svg b/src/lib/symbol/ri-arrow-right-s-line.svg new file mode 100644 index 0000000..48dcbb0 --- /dev/null +++ b/src/lib/symbol/ri-arrow-right-s-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-arrow-up-s-fill.svg b/src/lib/symbol/ri-arrow-up-s-fill.svg new file mode 100644 index 0000000..7d07d88 --- /dev/null +++ b/src/lib/symbol/ri-arrow-up-s-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-arrow-up-s-line.svg b/src/lib/symbol/ri-arrow-up-s-line.svg new file mode 100644 index 0000000..f5111cd --- /dev/null +++ b/src/lib/symbol/ri-arrow-up-s-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-bank-line.svg b/src/lib/symbol/ri-bank-line.svg new file mode 100644 index 0000000..b61a58c --- /dev/null +++ b/src/lib/symbol/ri-bank-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-barcode-fill.svg b/src/lib/symbol/ri-barcode-fill.svg new file mode 100644 index 0000000..a26eae1 --- /dev/null +++ b/src/lib/symbol/ri-barcode-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-battery-2-charge-line.svg b/src/lib/symbol/ri-battery-2-charge-line.svg new file mode 100644 index 0000000..446bae0 --- /dev/null +++ b/src/lib/symbol/ri-battery-2-charge-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-battery-charge-line.svg b/src/lib/symbol/ri-battery-charge-line.svg new file mode 100644 index 0000000..782b91a --- /dev/null +++ b/src/lib/symbol/ri-battery-charge-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-bear-smile-line.svg b/src/lib/symbol/ri-bear-smile-line.svg new file mode 100644 index 0000000..a2bb85a --- /dev/null +++ b/src/lib/symbol/ri-bear-smile-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-bluetooth-connect-line.svg b/src/lib/symbol/ri-bluetooth-connect-line.svg new file mode 100644 index 0000000..2e1bc22 --- /dev/null +++ b/src/lib/symbol/ri-bluetooth-connect-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-bluetooth-line.svg b/src/lib/symbol/ri-bluetooth-line.svg new file mode 100644 index 0000000..a72531b --- /dev/null +++ b/src/lib/symbol/ri-bluetooth-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-cake-2-fill.svg b/src/lib/symbol/ri-cake-2-fill.svg new file mode 100644 index 0000000..dec8864 --- /dev/null +++ b/src/lib/symbol/ri-cake-2-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-car-line.svg b/src/lib/symbol/ri-car-line.svg new file mode 100644 index 0000000..cab93a4 --- /dev/null +++ b/src/lib/symbol/ri-car-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-check-double-line.svg b/src/lib/symbol/ri-check-double-line.svg new file mode 100644 index 0000000..21db802 --- /dev/null +++ b/src/lib/symbol/ri-check-double-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-check-fill.svg b/src/lib/symbol/ri-check-fill.svg new file mode 100644 index 0000000..a195ed0 --- /dev/null +++ b/src/lib/symbol/ri-check-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-check-line.svg b/src/lib/symbol/ri-check-line.svg new file mode 100644 index 0000000..a195ed0 --- /dev/null +++ b/src/lib/symbol/ri-check-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-checkbox-blank-circle-line.svg b/src/lib/symbol/ri-checkbox-blank-circle-line.svg new file mode 100644 index 0000000..0c131d2 --- /dev/null +++ b/src/lib/symbol/ri-checkbox-blank-circle-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-checkbox-circle-fill.svg b/src/lib/symbol/ri-checkbox-circle-fill.svg new file mode 100644 index 0000000..e02610d --- /dev/null +++ b/src/lib/symbol/ri-checkbox-circle-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-checkbox-circle-line.svg b/src/lib/symbol/ri-checkbox-circle-line.svg new file mode 100644 index 0000000..ea59dbe --- /dev/null +++ b/src/lib/symbol/ri-checkbox-circle-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-checkbox-fill.svg b/src/lib/symbol/ri-checkbox-fill.svg new file mode 100644 index 0000000..0d243a1 --- /dev/null +++ b/src/lib/symbol/ri-checkbox-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-checkbox-line.svg b/src/lib/symbol/ri-checkbox-line.svg new file mode 100644 index 0000000..7c4da58 --- /dev/null +++ b/src/lib/symbol/ri-checkbox-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-checkbox-multiple-fill.svg b/src/lib/symbol/ri-checkbox-multiple-fill.svg new file mode 100644 index 0000000..2cc4cb8 --- /dev/null +++ b/src/lib/symbol/ri-checkbox-multiple-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-checkbox-multiple-line.svg b/src/lib/symbol/ri-checkbox-multiple-line.svg new file mode 100644 index 0000000..2c23848 --- /dev/null +++ b/src/lib/symbol/ri-checkbox-multiple-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-chrome-fill.svg b/src/lib/symbol/ri-chrome-fill.svg new file mode 100644 index 0000000..6720a5a --- /dev/null +++ b/src/lib/symbol/ri-chrome-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-close-circle-fill.svg b/src/lib/symbol/ri-close-circle-fill.svg new file mode 100644 index 0000000..585779a --- /dev/null +++ b/src/lib/symbol/ri-close-circle-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-close-circle-line.svg b/src/lib/symbol/ri-close-circle-line.svg new file mode 100644 index 0000000..331ba3a --- /dev/null +++ b/src/lib/symbol/ri-close-circle-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-close-fill.svg b/src/lib/symbol/ri-close-fill.svg new file mode 100644 index 0000000..ddd4652 --- /dev/null +++ b/src/lib/symbol/ri-close-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-close-line.svg b/src/lib/symbol/ri-close-line.svg new file mode 100644 index 0000000..ddd4652 --- /dev/null +++ b/src/lib/symbol/ri-close-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-code-box-fill.svg b/src/lib/symbol/ri-code-box-fill.svg new file mode 100644 index 0000000..7551e9f --- /dev/null +++ b/src/lib/symbol/ri-code-box-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-command-fill.svg b/src/lib/symbol/ri-command-fill.svg new file mode 100644 index 0000000..07a7772 --- /dev/null +++ b/src/lib/symbol/ri-command-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-command-line.svg b/src/lib/symbol/ri-command-line.svg new file mode 100644 index 0000000..07a7772 --- /dev/null +++ b/src/lib/symbol/ri-command-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-compass-3-fill.svg b/src/lib/symbol/ri-compass-3-fill.svg new file mode 100644 index 0000000..af37f9a --- /dev/null +++ b/src/lib/symbol/ri-compass-3-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-compass-3-line.svg b/src/lib/symbol/ri-compass-3-line.svg new file mode 100644 index 0000000..a070e73 --- /dev/null +++ b/src/lib/symbol/ri-compass-3-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-compass-line.svg b/src/lib/symbol/ri-compass-line.svg new file mode 100644 index 0000000..6234e81 --- /dev/null +++ b/src/lib/symbol/ri-compass-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-computer-line.svg b/src/lib/symbol/ri-computer-line.svg new file mode 100644 index 0000000..ed7d606 --- /dev/null +++ b/src/lib/symbol/ri-computer-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-cup-fill.svg b/src/lib/symbol/ri-cup-fill.svg new file mode 100644 index 0000000..20c84d2 --- /dev/null +++ b/src/lib/symbol/ri-cup-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-cup-line.svg b/src/lib/symbol/ri-cup-line.svg new file mode 100644 index 0000000..8b142d3 --- /dev/null +++ b/src/lib/symbol/ri-cup-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-customer-service-2-line.svg b/src/lib/symbol/ri-customer-service-2-line.svg new file mode 100644 index 0000000..92b4e46 --- /dev/null +++ b/src/lib/symbol/ri-customer-service-2-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-delete-back-2-line.svg b/src/lib/symbol/ri-delete-back-2-line.svg new file mode 100644 index 0000000..4544168 --- /dev/null +++ b/src/lib/symbol/ri-delete-back-2-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-discuss-fill.svg b/src/lib/symbol/ri-discuss-fill.svg new file mode 100644 index 0000000..8aa3691 --- /dev/null +++ b/src/lib/symbol/ri-discuss-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-discuss-line.svg b/src/lib/symbol/ri-discuss-line.svg new file mode 100644 index 0000000..821de38 --- /dev/null +++ b/src/lib/symbol/ri-discuss-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-drag-move-line.svg b/src/lib/symbol/ri-drag-move-line.svg new file mode 100644 index 0000000..b5b00a6 --- /dev/null +++ b/src/lib/symbol/ri-drag-move-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-emotion-line.svg b/src/lib/symbol/ri-emotion-line.svg new file mode 100644 index 0000000..9c90cdc --- /dev/null +++ b/src/lib/symbol/ri-emotion-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-emotion-sad-fill.svg b/src/lib/symbol/ri-emotion-sad-fill.svg new file mode 100644 index 0000000..77eeb19 --- /dev/null +++ b/src/lib/symbol/ri-emotion-sad-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-emotion-sad-line.svg b/src/lib/symbol/ri-emotion-sad-line.svg new file mode 100644 index 0000000..65f99a3 --- /dev/null +++ b/src/lib/symbol/ri-emotion-sad-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-error-warning-line.svg b/src/lib/symbol/ri-error-warning-line.svg new file mode 100644 index 0000000..d40c871 --- /dev/null +++ b/src/lib/symbol/ri-error-warning-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-fingerprint-line.svg b/src/lib/symbol/ri-fingerprint-line.svg new file mode 100644 index 0000000..0594b44 --- /dev/null +++ b/src/lib/symbol/ri-fingerprint-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-github-fill.svg b/src/lib/symbol/ri-github-fill.svg new file mode 100644 index 0000000..9ad1d73 --- /dev/null +++ b/src/lib/symbol/ri-github-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-hand-heart-line.svg b/src/lib/symbol/ri-hand-heart-line.svg new file mode 100644 index 0000000..ef0d6fa --- /dev/null +++ b/src/lib/symbol/ri-hand-heart-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-heart-3-fill.svg b/src/lib/symbol/ri-heart-3-fill.svg new file mode 100644 index 0000000..67c5761 --- /dev/null +++ b/src/lib/symbol/ri-heart-3-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-home-3-fill.svg b/src/lib/symbol/ri-home-3-fill.svg new file mode 100644 index 0000000..dc139e2 --- /dev/null +++ b/src/lib/symbol/ri-home-3-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-home-3-line.svg b/src/lib/symbol/ri-home-3-line.svg new file mode 100644 index 0000000..c0118f7 --- /dev/null +++ b/src/lib/symbol/ri-home-3-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-home-7-line.svg b/src/lib/symbol/ri-home-7-line.svg new file mode 100644 index 0000000..b19e545 --- /dev/null +++ b/src/lib/symbol/ri-home-7-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-hotel-bed-fill.svg b/src/lib/symbol/ri-hotel-bed-fill.svg new file mode 100644 index 0000000..84ae239 --- /dev/null +++ b/src/lib/symbol/ri-hotel-bed-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-hotel-bed-line.svg b/src/lib/symbol/ri-hotel-bed-line.svg new file mode 100644 index 0000000..e20af2d --- /dev/null +++ b/src/lib/symbol/ri-hotel-bed-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-image-2-fill.svg b/src/lib/symbol/ri-image-2-fill.svg new file mode 100644 index 0000000..76fd733 --- /dev/null +++ b/src/lib/symbol/ri-image-2-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-indent-decrease.svg b/src/lib/symbol/ri-indent-decrease.svg new file mode 100644 index 0000000..350cf08 --- /dev/null +++ b/src/lib/symbol/ri-indent-decrease.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-information-line.svg b/src/lib/symbol/ri-information-line.svg new file mode 100644 index 0000000..cba15f5 --- /dev/null +++ b/src/lib/symbol/ri-information-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-lock-line.svg b/src/lib/symbol/ri-lock-line.svg new file mode 100644 index 0000000..d314891 --- /dev/null +++ b/src/lib/symbol/ri-lock-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-macbook-fill.svg b/src/lib/symbol/ri-macbook-fill.svg new file mode 100644 index 0000000..0adcb4a --- /dev/null +++ b/src/lib/symbol/ri-macbook-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-medal-fill.svg b/src/lib/symbol/ri-medal-fill.svg new file mode 100644 index 0000000..359fe24 --- /dev/null +++ b/src/lib/symbol/ri-medal-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-mic-off-fill.svg b/src/lib/symbol/ri-mic-off-fill.svg new file mode 100644 index 0000000..5b1cf3a --- /dev/null +++ b/src/lib/symbol/ri-mic-off-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-money-cny-circle-line.svg b/src/lib/symbol/ri-money-cny-circle-line.svg new file mode 100644 index 0000000..4b287a4 --- /dev/null +++ b/src/lib/symbol/ri-money-cny-circle-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-moon-fill.svg b/src/lib/symbol/ri-moon-fill.svg new file mode 100644 index 0000000..7c581a7 --- /dev/null +++ b/src/lib/symbol/ri-moon-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-moon-line.svg b/src/lib/symbol/ri-moon-line.svg new file mode 100644 index 0000000..c111745 --- /dev/null +++ b/src/lib/symbol/ri-moon-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-more-fill.svg b/src/lib/symbol/ri-more-fill.svg new file mode 100644 index 0000000..8772c9c --- /dev/null +++ b/src/lib/symbol/ri-more-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-more-line.svg b/src/lib/symbol/ri-more-line.svg new file mode 100644 index 0000000..3fe1a50 --- /dev/null +++ b/src/lib/symbol/ri-more-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-movie-2-fill.svg b/src/lib/symbol/ri-movie-2-fill.svg new file mode 100644 index 0000000..f8c30a1 --- /dev/null +++ b/src/lib/symbol/ri-movie-2-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-notification-2-line.svg b/src/lib/symbol/ri-notification-2-line.svg new file mode 100644 index 0000000..a8072f6 --- /dev/null +++ b/src/lib/symbol/ri-notification-2-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-paint-brush-fill.svg b/src/lib/symbol/ri-paint-brush-fill.svg new file mode 100644 index 0000000..54f987a --- /dev/null +++ b/src/lib/symbol/ri-paint-brush-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-paint-brush-line.svg b/src/lib/symbol/ri-paint-brush-line.svg new file mode 100644 index 0000000..7538cb2 --- /dev/null +++ b/src/lib/symbol/ri-paint-brush-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-palette-line.svg b/src/lib/symbol/ri-palette-line.svg new file mode 100644 index 0000000..4f41b35 --- /dev/null +++ b/src/lib/symbol/ri-palette-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-parent-line.svg b/src/lib/symbol/ri-parent-line.svg new file mode 100644 index 0000000..c3fbc10 --- /dev/null +++ b/src/lib/symbol/ri-parent-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-phone-fill.svg b/src/lib/symbol/ri-phone-fill.svg new file mode 100644 index 0000000..2de9782 --- /dev/null +++ b/src/lib/symbol/ri-phone-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-plane-fill.svg b/src/lib/symbol/ri-plane-fill.svg new file mode 100644 index 0000000..b66fb2c --- /dev/null +++ b/src/lib/symbol/ri-plane-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-plane-line.svg b/src/lib/symbol/ri-plane-line.svg new file mode 100644 index 0000000..b66fb2c --- /dev/null +++ b/src/lib/symbol/ri-plane-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-qr-code-fill.svg b/src/lib/symbol/ri-qr-code-fill.svg new file mode 100644 index 0000000..88869b1 --- /dev/null +++ b/src/lib/symbol/ri-qr-code-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-qr-scan-line.svg b/src/lib/symbol/ri-qr-scan-line.svg new file mode 100644 index 0000000..6b5323c --- /dev/null +++ b/src/lib/symbol/ri-qr-scan-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-radio-button-fill.svg b/src/lib/symbol/ri-radio-button-fill.svg new file mode 100644 index 0000000..73a60db --- /dev/null +++ b/src/lib/symbol/ri-radio-button-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-radio-button-line.svg b/src/lib/symbol/ri-radio-button-line.svg new file mode 100644 index 0000000..b48073d --- /dev/null +++ b/src/lib/symbol/ri-radio-button-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-restaurant-2-fill.svg b/src/lib/symbol/ri-restaurant-2-fill.svg new file mode 100644 index 0000000..6c8bf5c --- /dev/null +++ b/src/lib/symbol/ri-restaurant-2-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-restaurant-2-line.svg b/src/lib/symbol/ri-restaurant-2-line.svg new file mode 100644 index 0000000..423eaa0 --- /dev/null +++ b/src/lib/symbol/ri-restaurant-2-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-riding-line.svg b/src/lib/symbol/ri-riding-line.svg new file mode 100644 index 0000000..e6b70ad --- /dev/null +++ b/src/lib/symbol/ri-riding-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-send-plane-line.svg b/src/lib/symbol/ri-send-plane-line.svg new file mode 100644 index 0000000..cf513a4 --- /dev/null +++ b/src/lib/symbol/ri-send-plane-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-service-line.svg b/src/lib/symbol/ri-service-line.svg new file mode 100644 index 0000000..b90f9d0 --- /dev/null +++ b/src/lib/symbol/ri-service-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-share-forward-2-fill.svg b/src/lib/symbol/ri-share-forward-2-fill.svg new file mode 100644 index 0000000..b0b0a1b --- /dev/null +++ b/src/lib/symbol/ri-share-forward-2-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-share-forward-line.svg b/src/lib/symbol/ri-share-forward-line.svg new file mode 100644 index 0000000..06edd01 --- /dev/null +++ b/src/lib/symbol/ri-share-forward-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-share-line.svg b/src/lib/symbol/ri-share-line.svg new file mode 100644 index 0000000..eff2e7e --- /dev/null +++ b/src/lib/symbol/ri-share-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-shield-user-line.svg b/src/lib/symbol/ri-shield-user-line.svg new file mode 100644 index 0000000..a2fc12a --- /dev/null +++ b/src/lib/symbol/ri-shield-user-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-ship-2-line.svg b/src/lib/symbol/ri-ship-2-line.svg new file mode 100644 index 0000000..1e4169f --- /dev/null +++ b/src/lib/symbol/ri-ship-2-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-shopping-basket-line.svg b/src/lib/symbol/ri-shopping-basket-line.svg new file mode 100644 index 0000000..022f0ab --- /dev/null +++ b/src/lib/symbol/ri-shopping-basket-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-skip-down-line.svg b/src/lib/symbol/ri-skip-down-line.svg new file mode 100644 index 0000000..2a09e0b --- /dev/null +++ b/src/lib/symbol/ri-skip-down-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-smartphone-line.svg b/src/lib/symbol/ri-smartphone-line.svg new file mode 100644 index 0000000..27062a9 --- /dev/null +++ b/src/lib/symbol/ri-smartphone-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-spy-fill.svg b/src/lib/symbol/ri-spy-fill.svg new file mode 100644 index 0000000..eb84073 --- /dev/null +++ b/src/lib/symbol/ri-spy-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-star-fill.svg b/src/lib/symbol/ri-star-fill.svg new file mode 100644 index 0000000..89706df --- /dev/null +++ b/src/lib/symbol/ri-star-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-star-line.svg b/src/lib/symbol/ri-star-line.svg new file mode 100644 index 0000000..2455a96 --- /dev/null +++ b/src/lib/symbol/ri-star-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-subtract-line.svg b/src/lib/symbol/ri-subtract-line.svg new file mode 100644 index 0000000..55b9272 --- /dev/null +++ b/src/lib/symbol/ri-subtract-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-sun-line.svg b/src/lib/symbol/ri-sun-line.svg new file mode 100644 index 0000000..2d4bace --- /dev/null +++ b/src/lib/symbol/ri-sun-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-surgical-mask-fill.svg b/src/lib/symbol/ri-surgical-mask-fill.svg new file mode 100644 index 0000000..8553a73 --- /dev/null +++ b/src/lib/symbol/ri-surgical-mask-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-survey-fill.svg b/src/lib/symbol/ri-survey-fill.svg new file mode 100644 index 0000000..1f7fe72 --- /dev/null +++ b/src/lib/symbol/ri-survey-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-survey-line.svg b/src/lib/symbol/ri-survey-line.svg new file mode 100644 index 0000000..a21e129 --- /dev/null +++ b/src/lib/symbol/ri-survey-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-svelte-line.svg b/src/lib/symbol/ri-svelte-line.svg new file mode 100644 index 0000000..449e71f --- /dev/null +++ b/src/lib/symbol/ri-svelte-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-switch-fill.svg b/src/lib/symbol/ri-switch-fill.svg new file mode 100644 index 0000000..8140e6a --- /dev/null +++ b/src/lib/symbol/ri-switch-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-tablet-line.svg b/src/lib/symbol/ri-tablet-line.svg new file mode 100644 index 0000000..f4ac7b7 --- /dev/null +++ b/src/lib/symbol/ri-tablet-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-thumb-up-fill.svg b/src/lib/symbol/ri-thumb-up-fill.svg new file mode 100644 index 0000000..7fc40b9 --- /dev/null +++ b/src/lib/symbol/ri-thumb-up-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-train-line.svg b/src/lib/symbol/ri-train-line.svg new file mode 100644 index 0000000..e798574 --- /dev/null +++ b/src/lib/symbol/ri-train-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-ubuntu-fill.svg b/src/lib/symbol/ri-ubuntu-fill.svg new file mode 100644 index 0000000..4b274b0 --- /dev/null +++ b/src/lib/symbol/ri-ubuntu-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-ubuntu-line.svg b/src/lib/symbol/ri-ubuntu-line.svg new file mode 100644 index 0000000..e65a3d5 --- /dev/null +++ b/src/lib/symbol/ri-ubuntu-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-user-3-line.svg b/src/lib/symbol/ri-user-3-line.svg new file mode 100644 index 0000000..e7c59bd --- /dev/null +++ b/src/lib/symbol/ri-user-3-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-user-add-line.svg b/src/lib/symbol/ri-user-add-line.svg new file mode 100644 index 0000000..ddaa9d7 --- /dev/null +++ b/src/lib/symbol/ri-user-add-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-user-smile-line.svg b/src/lib/symbol/ri-user-smile-line.svg new file mode 100644 index 0000000..d960853 --- /dev/null +++ b/src/lib/symbol/ri-user-smile-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-volume-down-line.svg b/src/lib/symbol/ri-volume-down-line.svg new file mode 100644 index 0000000..3e4ca8f --- /dev/null +++ b/src/lib/symbol/ri-volume-down-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-volume-mute-line.svg b/src/lib/symbol/ri-volume-mute-line.svg new file mode 100644 index 0000000..b012b1a --- /dev/null +++ b/src/lib/symbol/ri-volume-mute-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-volume-up-line.svg b/src/lib/symbol/ri-volume-up-line.svg new file mode 100644 index 0000000..82950c5 --- /dev/null +++ b/src/lib/symbol/ri-volume-up-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-wifi-line.svg b/src/lib/symbol/ri-wifi-line.svg new file mode 100644 index 0000000..3df2f45 --- /dev/null +++ b/src/lib/symbol/ri-wifi-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-wifi-off-line.svg b/src/lib/symbol/ri-wifi-off-line.svg new file mode 100644 index 0000000..3522d7c --- /dev/null +++ b/src/lib/symbol/ri-wifi-off-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-windows-fill.svg b/src/lib/symbol/ri-windows-fill.svg new file mode 100644 index 0000000..1618f61 --- /dev/null +++ b/src/lib/symbol/ri-windows-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-wireless-charging-line.svg b/src/lib/symbol/ri-wireless-charging-line.svg new file mode 100644 index 0000000..f7c2a55 --- /dev/null +++ b/src/lib/symbol/ri-wireless-charging-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-zzz-fill.svg b/src/lib/symbol/ri-zzz-fill.svg new file mode 100644 index 0000000..fe9734e --- /dev/null +++ b/src/lib/symbol/ri-zzz-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/symbol/ri-zzz-line.svg b/src/lib/symbol/ri-zzz-line.svg new file mode 100644 index 0000000..fe9734e --- /dev/null +++ b/src/lib/symbol/ri-zzz-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/routes/+layout.js b/src/routes/+layout.js new file mode 100644 index 0000000..babfd5e --- /dev/null +++ b/src/routes/+layout.js @@ -0,0 +1,3 @@ +// 修改 ssr 为 false ，使其不再使用服务端渲染，而是使用客户端渲染 +// Change ssr to false to use client-side rendering instead of server-side rendering +export const ssr = false; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte new file mode 100644 index 0000000..5012d53 --- /dev/null +++ b/src/routes/+layout.svelte @@ -0,0 +1,180 @@ + + +
+ item.nav === $page.url.pathname.substring(7))[0][isZh ? 'title_zh' : 'title_en'] + + (isZh ? '示例' : ' Demo')} + left={showLeft ? 'back' : null} + injClass="bg-white/60 dark:bg-black/60 backdrop-blur" + onclickLeft={() => window.history.back()} + > + {#snippet rightChild()} +
+ {#if isIframe === '0'} +
+ + + +
+
+ + + +
+ {/if} + + +
+ {/snippet} + +
+{@render children?.()} +
+ +
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte new file mode 100644 index 0000000..9c408d2 --- /dev/null +++ b/src/routes/+page.svelte @@ -0,0 +1,52 @@ + + +
+ + + + +
+ +
stdf.design
+ +
+
+ {#each menuList as menu} +
{isZh ? menu.class : menu.class_en}
+ + {#each menu.childs as child, i} + + + + {/each} + + {/each} +
+
{isZh ? '当前组件总数：' : 'Current number of components: '}{menuListArr.length}
+
+ +
+
diff --git a/src/routes/components/Aphorism.svelte b/src/routes/components/Aphorism.svelte new file mode 100644 index 0000000..9337731 --- /dev/null +++ b/src/routes/components/Aphorism.svelte @@ -0,0 +1,26 @@ + + +
+ {#each aphorismsList as item} +
1}> +
{item.text}
+
{item.from}
+
+ {/each} +
diff --git a/src/routes/components/ThemeSwitch.svelte b/src/routes/components/ThemeSwitch.svelte new file mode 100644 index 0000000..0b25fb8 --- /dev/null +++ b/src/routes/components/ThemeSwitch.svelte @@ -0,0 +1,60 @@ + + +
+ {#each themes as item} + + {/each} +
diff --git a/src/routes/en_US/actionSheet/+page.svelte b/src/routes/en_US/actionSheet/+page.svelte new file mode 100644 index 0000000..6d4a2ec --- /dev/null +++ b/src/routes/en_US/actionSheet/+page.svelte @@ -0,0 +1,101 @@ + + + +
+ (visible1 = true)} /> + + + (visible2 = true)} /> + + + (visible3 = true)} /> + + + (visible4 = true)} /> + + + (visible5 = true)} /> + + + (visible6 = true)} /> + + + (visible7 = true)} /> + (toastVisible1 = true)} /> + + + (visible8 = true)} /> + (toastVisible2 = true)} /> + + + (visible9 = true)} /> + + + + (visible10 = true)} /> + + + (visible11 = true)} /> + + + (visible12 = true)} /> + +
diff --git a/src/routes/en_US/asyncPicker/+page.svelte b/src/routes/en_US/asyncPicker/+page.svelte new file mode 100644 index 0000000..da81529 --- /dev/null +++ b/src/routes/en_US/asyncPicker/+page.svelte @@ -0,0 +1,731 @@ + + + +
+
+ {#if allItems.length} + Currently selected: + {#each allItems as item} + {item.label} + {/each} + {:else} +
Please select data
+ {/if} +
+
+ {#if allIndexs.length} + The index values of current selections in their respective columns are: + {#each allIndexs as index} + {index} + {/each} + {:else} +
Please select data
+ {/if} +
+ { + visible1 = true; + data = linkageData; + lastLevel = false; + firstLevel = true; + currentLevel = 0; + level1Data = linkageData[0].children; + }} + /> + + + { + visible2 = true; + data = linkageData; + lastLevel = false; + firstLevel = true; + currentLevel = 0; + level1Data = linkageData[0].children; + }} + /> + + + { + visible3 = true; + data = linkageData; + lastLevel = false; + firstLevel = true; + currentLevel = 0; + level1Data = linkageData[0].children; + }} + /> + + + { + visible5 = true; + data = linkageData; + lastLevel = false; + firstLevel = true; + currentLevel = 0; + level1Data = linkageData[0].children; + }} + /> + + + { + visible4 = true; + diffLabelKeyData = linkageDiffLabeData; + labelKey = 'province'; + diffLabelKeyCurrentLevel = 0; + diffLabelKeyLastLevel = false; + diffLabelKeyFirstLevel = true; + diffLabelKeyLevel1Data = linkageDiffLabeData[0].children; + }} + /> + + + { + visible6 = true; + data = linkageData; + lastLevel = false; + firstLevel = true; + currentLevel = 0; + level1Data = linkageData[0].children; + }} + /> + + + { + visible8 = true; + data = linkageData; + lastLevel = false; + firstLevel = true; + currentLevel = 0; + level1Data = linkageData[0].children; + }} + /> + + + { + visible7 = true; + data = linkageData; + lastLevel = false; + firstLevel = true; + currentLevel = 0; + level1Data = linkageData[0].children; + }} + /> + + + { + visible9 = true; + data = linkageData; + lastLevel = false; + firstLevel = true; + currentLevel = 0; + titleBind = 'Please select province'; + level1Data = linkageData[0].children; + }} + /> + +
+ diff --git a/src/routes/en_US/asyncPicker/data_en.js b/src/routes/en_US/asyncPicker/data_en.js new file mode 100644 index 0000000..6afb518 --- /dev/null +++ b/src/routes/en_US/asyncPicker/data_en.js @@ -0,0 +1,402 @@ +const linkageData = [ + { + label: 'Yunnan', + children: [ + { + label: 'Kunming', + children: [{ label: 'Panlong District' }, { label: 'Wuhua District' }, { label: 'Guandu District' }, { label: 'Xishan District' }], + }, + { + label: 'Qujing', + children: [ + { label: 'Qilin District' }, + { label: 'Zhanyi District' }, + { label: 'Malong County' }, + { label: 'Luliang County' }, + { label: 'Shizong County' }, + { label: 'Luoping County' }, + { label: 'Fuyuan County' }, + { label: 'Huize County' }, + { label: 'Xuanwei City' }, + ], + }, + { + label: 'Yuxi', + children: [ + { label: 'Hongta District' }, + { label: 'Jiangchuan District' }, + { label: 'Chengjiang County' }, + { label: 'Tonghai County' }, + { label: 'Huaning County' }, + ], + }, + { + label: 'Baoshan', + children: [ + { label: 'Longyang District' }, + { label: 'Shidian County' }, + { label: 'Longling County' }, + { label: 'Changning County' }, + { label: 'Tengchong City' }, + { label: 'Longling County' }, + ], + }, + { + label: 'Lijiang', + children: [ + { label: 'Gucheng District' }, + { label: 'Yongsheng County' }, + { label: 'Huaping County' }, + { label: 'Yulong Naxi Autonomous County' }, + { label: 'Ninglang Yi Autonomous County' }, + ], + }, + { + label: "Pu'er", + children: [ + { label: 'Simao District' }, + { label: "Ning'er Hani and Yi Autonomous County" }, + { label: 'Mojiang Hani Autonomous County' }, + { label: 'Jingdong Yi Autonomous County' }, + { label: 'Jinggu Dai and Yi Autonomous County' }, + ], + }, + { + label: 'Lincang', + children: [ + { label: 'Linxiang District' }, + { label: 'Fengqing County' }, + { label: 'Yun County' }, + { label: 'Yongde County' }, + { label: 'Zhenkang County' }, + ], + }, + { + label: 'Chuxiong', + children: [ + { label: 'Chuxiong City' }, + { label: 'Shuangbai County' }, + { label: 'Mouding County' }, + { label: 'Nanhua County' }, + { label: "Yao'an County" }, + { label: 'Dayao County' }, + ], + }, + { + label: 'Honghe', + children: [ + { label: 'Gejiu City' }, + { label: 'Kaiyuan City' }, + { label: 'Mengzi City' }, + { label: 'Mile City' }, + { label: 'Pingbian Miao Autonomous County' }, + { label: 'Jianshui County' }, + ], + }, + { + label: 'Wenshan', + children: [ + { label: 'Wenshan City' }, + { label: 'Yanshan County' }, + { label: 'Xichou County' }, + { label: 'Malipo County' }, + { label: 'Maguan County' }, + { label: 'Qiubei County' }, + { label: 'Guangnan County' }, + { label: 'Funing County' }, + ], + }, + ], + }, + { + label: 'Guangdong', + children: [ + { + label: 'Guangzhou', + children: [ + { label: 'Tianhe District' }, + { label: 'Haizhu District' }, + { label: 'Liwan District' }, + { label: 'Yuexiu District' }, + { label: 'Baiyun District' }, + { label: 'Huangpu District' }, + ], + }, + { + label: 'Shenzhen', + children: [ + { label: 'Luohu District' }, + { label: 'Futian District' }, + { label: 'Nanshan District' }, + { label: "Bao'an District" }, + { label: 'Longgang District' }, + { label: 'Yantian District' }, + ], + }, + { label: 'Zhuhai', children: [{ label: 'Xiangzhou District' }, { label: 'Doumen District' }, { label: 'Jinwan District' }] }, + { + label: 'Shantou', + children: [ + { label: 'Longhu District' }, + { label: 'Jinping District' }, + { label: 'Gongjing District' }, + { label: 'Chaoyang District' }, + { label: 'Chaonan District' }, + { label: 'Chenghai District' }, + ], + }, + { + label: 'Foshan', + children: [ + { label: 'Chancheng District' }, + { label: 'Nanhai District' }, + { label: 'Shunde District' }, + { label: 'Sanshui District' }, + { label: 'Gaoming District' }, + ], + }, + ], + }, + { + label: 'Sichuan', + children: [ + { + label: 'Chengdu', + children: [ + { label: 'Jinjiang District' }, + { label: 'Qingyang District' }, + { label: 'Jinniu District' }, + { label: 'Wuhou District' }, + { label: 'Chenghua District' }, + { label: 'Longquanyi District' }, + ], + }, + { + label: 'Mianyang', + children: [ + { label: 'Fucheng District' }, + { label: 'Youxian District' }, + { label: 'Anzhou District' }, + { label: 'Santai County' }, + { label: 'Yanting County' }, + { label: 'Zitong County' }, + ], + }, + { + label: 'Zigong', + children: [ + { label: 'Ziliujing District' }, + { label: 'Gongjing District' }, + { label: "Da'an District" }, + { label: 'Yantan District' }, + { label: 'Rong County' }, + { label: 'Fushun County' }, + ], + }, + { + label: 'Panzhihua', + children: [ + { label: 'Dong District' }, + { label: 'Xi District' }, + { label: 'Renhe District' }, + { label: 'Miyi County' }, + { label: 'Yanbian County' }, + ], + }, + ], + }, + { + label: 'Beijing', + children: [ + { + label: 'Beijing', + children: [ + { label: 'Dongcheng District' }, + { label: 'Xicheng District' }, + { label: 'Chaoyang District' }, + { label: 'Fengtai District' }, + { label: 'Shijingshan District' }, + { label: 'Haidian District' }, + ], + }, + ], + }, + { + label: 'Zhejiang', + children: [ + { + label: 'Hangzhou', + children: [ + { label: 'Shangcheng District' }, + { label: 'Xiacheng District' }, + { label: 'Jianggan District' }, + { label: 'Gongshu District' }, + { label: 'Xihu District' }, + { label: 'Binjiang District' }, + ], + }, + { + label: 'Ningbo', + children: [ + { label: 'Haishu District' }, + { label: 'Jiangdong District' }, + { label: 'Jiangbei District' }, + { label: 'Beilun District' }, + { label: 'Zhenhai District' }, + { label: 'Yinzhou District' }, + ], + }, + { + label: 'Wenzhou', + children: [ + { label: 'Lucheng District' }, + { label: 'Longwan District' }, + { label: 'Ouhai District' }, + { label: 'Dongtou District' }, + { label: 'Yongjia County' }, + { label: 'Pingyang County' }, + ], + }, + { + label: 'Jiaxing', + children: [ + { label: 'Nanhu District' }, + { label: 'Xiuzhou District' }, + { label: 'Jiashan County' }, + { label: 'Haiyan County' }, + { label: 'Haining City' }, + { label: 'Pinghu City' }, + ], + }, + { + label: 'Huzhou', + children: [ + { label: 'Wuxing District' }, + { label: 'Nanxun District' }, + { label: 'Deqing County' }, + { label: 'Changxing County' }, + { label: 'Anji County' }, + ], + }, + ], + }, +]; + +const linkageDiffLabeData = [ + { + province: 'Yunnan', + children: [ + { + city: 'Kunming', + children: [ + { region: 'Panlong District' }, + { region: 'Wuhua District' }, + { region: 'Guandu District' }, + { region: 'Xishan District' }, + { region: 'Dongchuan District' }, + { region: 'Chenggong District' }, + { region: 'Jinning District' }, + { region: 'Fumin County' }, + { region: 'Yiliang County' }, + { region: 'Shilin Yi Autonomous County' }, + { region: 'Songming County' }, + { region: 'Luquan Yi and Miao Autonomous County' }, + { region: 'Xundian Hui and Yi Autonomous County' }, + { region: 'Anning City' }, + ], + }, + { + city: 'Qujing', + children: [ + { region: 'Qilin District' }, + { region: 'Zhanyi District' }, + { region: 'Malong County' }, + { region: 'Luliang County' }, + { region: 'Shizong County' }, + { region: 'Luoping County' }, + { region: 'Fuyuan County' }, + { region: 'Huize County' }, + { region: 'Xuanwei City' }, + ], + }, + { + city: 'Yuxi', + children: [ + { region: 'Hongta District' }, + { region: 'Jiangchuan District' }, + { region: 'Chengjiang County' }, + { region: 'Tonghai County' }, + { region: 'Huaning County' }, + { region: 'Yimen County' }, + { region: 'Eshan Yi Autonomous County' }, + { region: 'Xinping Yi and Dai Autonomous County' }, + { region: 'Yuanjiang Hani, Yi and Dai Autonomous County' }, + ], + }, + { + city: 'Baoshan', + children: [ + { region: 'Longyang District' }, + { region: 'Shidian County' }, + { region: 'Longling County' }, + { region: 'Changning County' }, + { region: 'Tengchong City' }, + ], + }, + { + city: 'Lijiang', + children: [ + { region: 'Gucheng District' }, + { region: 'Yongsheng County' }, + { region: 'Huaping County' }, + { region: 'Yulong Naxi Autonomous County' }, + { region: 'Ninglang Yi Autonomous County' }, + ], + }, + { + city: "Pu'er", + children: [ + { region: 'Simao District' }, + { region: "Ning'er Hani and Yi Autonomous County" }, + { region: 'Mojiang Hani Autonomous County' }, + { region: 'Jingdong Yi Autonomous County' }, + { region: 'Jinggu Dai and Yi Autonomous County' }, + { region: 'Zhenyuan Yi, Hani and Lahu Autonomous County' }, + { region: 'Jiangcheng Hani and Yi Autonomous County' }, + { region: 'Menglian Dai, Lahu and Va Autonomous County' }, + { region: 'Lancang Lahu Autonomous County' }, + { region: 'Ximeng Va Autonomous County' }, + ], + }, + ], + }, + { + province: 'Guangdong', + children: [ + { + city: 'Guangzhou', + children: [ + { region: 'Tianhe District' }, + { region: 'Haizhu District' }, + { region: 'Liwan District' }, + { region: 'Yuexiu District' }, + { region: 'Baiyun District' }, + { region: 'Huangpu District' }, + ], + }, + { + city: 'Shenzhen', + children: [ + { region: 'Luohu District' }, + { region: 'Futian District' }, + { region: 'Nanshan District' }, + { region: "Bao'an District" }, + { region: 'Longgang District' }, + { region: 'Yantian District' }, + ], + }, + ], + }, +]; + +export { linkageData, linkageDiffLabeData }; diff --git a/src/routes/en_US/avatar/+page.svelte b/src/routes/en_US/avatar/+page.svelte new file mode 100644 index 0000000..58cd5b1 --- /dev/null +++ b/src/routes/en_US/avatar/+page.svelte @@ -0,0 +1,137 @@ + + + +
+
Different rounded corners
+
+ + + + + +
+ +
Different picture types and size
+
+ + + + +
+ +
Custom background color
+
+ + + + +
+ +
Different border
+
+ + + + +
+ +
Replace text
+
+ + + + +
+ +
Replace Icon
+
+ {#each icons as icon} + + {/each} +
+ +
Different size
+
+
+ + + + + +
+
+ + + + + +
+
+ + + +
Avatar group
+
Default
+ + +
smaller
+ + +
loose
+ + +
Border thick point
+ + +
Make the corners smaller
+ + +
Reverse
+ + +
A maximum of 6 are displayed
+ + +
Top layer display increase
+ + +
Do not show top layer
+ + +
Custom top layer
+ + {#snippet top()} + + {/snippet} + +
diff --git a/src/routes/en_US/badge/+page.svelte b/src/routes/en_US/badge/+page.svelte new file mode 100644 index 0000000..5bb61a0 --- /dev/null +++ b/src/routes/en_US/badge/+page.svelte @@ -0,0 +1,85 @@ + + + +
+
Basic usage
+
+ + + + +
+ +
Different rounded corners
+
+ + + + +
+ +
Located on the left
+
+ + + + +
+ +
Match other components
+
+ + + +
+ + + + {#snippet detailChild()} + + {/snippet} + + + {#snippet detailChild()} + + {/snippet} + + + {#snippet detailChild()} + + {/snippet} + + + {#snippet detailChild()} + + {/snippet} + + +
Badge animation
+
+ + + + +
+ + {#snippet detailChild()} + + {/snippet} + + + +
Custom background color and border
+
+ + + + + + +
+
diff --git a/src/routes/en_US/bottomSheet/+page.svelte b/src/routes/en_US/bottomSheet/+page.svelte new file mode 100644 index 0000000..0400e15 --- /dev/null +++ b/src/routes/en_US/bottomSheet/+page.svelte @@ -0,0 +1,157 @@ + + + +
+ (visible1 = true)} /> + +
+
This is the content area
+
+ + + (visible8 = true)} /> + + + + + (visible2 = true)} /> + (toastBackVisible = true)} + onclose={() => (toastCloseVisible = true)} + > + + + + + + (visible3 = true)} /> + + + + + (visible4 = true)} /> + + + + + (visible5 = true)} /> + + + + + (visible6 = true)} /> + + + + + (visible7 = true)} /> + + + + + (visible9 = true)} /> + +
+
Header area
+
Title
+
Back and close icon
+
Divider
+
None
+
Position still reserved as a sliding touch area
+
+ +
+
+ + + (visible10 = true)} /> + + + + + (visible13 = true)} /> + + + + + (visible14 = true)} /> + + + + + (visible12 = true)} /> + + + + + (visible11 = true)} /> + +
+ Set closeHeight to 10. If the position distance is less than 10% of the page height when sliding ends, it will be automatically + closed. +
+ +
+ + + diff --git a/src/routes/en_US/button/+page.svelte b/src/routes/en_US/button/+page.svelte new file mode 100644 index 0000000..1dd7d81 --- /dev/null +++ b/src/routes/en_US/button/+page.svelte @@ -0,0 +1,168 @@ + + + +
+
+
Different states
+ + + + + +
+
+
Different rounded style
+ + + + + +
+
+
Different fill mode
+ + + + + + + +
+
+
Different border style
+ + + +
+
+
Different size
+ + + + + + +
+
+
Different heights
+ + +
+
+
Fixed size
+
+ + + + + + + + +
+
+
+
Disable
+ + +
+
+
With icon
+ + +
+
+
With loading (disabled by default)
+ + + +
+
+
With icon (passed through Snippet)
+ + +
+
+
Load (passed through Snippet)
+ + +
+
+
Love version
+ + +
+
+
Customize
+ + + + + +
+
+
Button group
+ + + +
+ + + + +
+ + + + diff --git a/src/routes/en_US/calendar/+page.svelte b/src/routes/en_US/calendar/+page.svelte new file mode 100644 index 0000000..f4bff50 --- /dev/null +++ b/src/routes/en_US/calendar/+page.svelte @@ -0,0 +1,179 @@ + + + +
+ (visible1 = true)} /> + + + (visible7 = true)} /> + + + (visible8 = true)} /> + + + (visible2 = true)} /> + + + (visible3 = true)} /> + + + (visible4 = true)} /> + + + (visible5 = true)} /> + + + (visible6 = true)} /> + + + (visible9 = true)} /> + + + (visible10 = true)} /> + + + (visible18 = true)} /> + + + (visible11 = true)} /> + + + (visible19 = true)} /> + + + (visible12 = true)} /> + + + (visible13 = true)} /> + + + (visible14 = true)} /> + + + (visible15 = true)} /> + + + (visible16 = true)} /> + + + (visible23 = true)} /> + + + (visible17 = true)} /> + + +
+ {#if selectedDates.length} + The following is the following total {selectedDates.length} day: + {:else} +
Please select the date
+ {/if} +
+
+ {#each selectedDates as item} +
{item}
+ {/each} +
+ (visible20 = true)} /> + + +
+ {#if selectedFormatDates.length} + The following is the following total {selectedFormatDates.length} day: + {:else} +
Please select the date
+ {/if} +
+
+ {#each selectedFormatDates as item} +
{item}
+ {/each} +
+ (visible21 = true)} /> + + + (visible22 = true)} /> + + + (visible24 = true)} /> + +
diff --git a/src/routes/en_US/cell/+page.svelte b/src/routes/en_US/cell/+page.svelte new file mode 100644 index 0000000..c32fc56 --- /dev/null +++ b/src/routes/en_US/cell/+page.svelte @@ -0,0 +1,124 @@ + + + +
+
+ + + + {#snippet detailChild()} + I'm Snippet + {/snippet} + + + + (visible = true)} /> + + + + + + + + + + + {#snippet leftChild()} +
+ +
+ {/snippet} + + + {#snippet leftChild()} +
+ +
+ {/snippet} + {#snippet rightChild()} +
+ +
+ {/snippet} + + + {#snippet leftChild()} +
+ +
+ {/snippet} + + + + + + + + + {#snippet leftChild()} +
+ +
+ {/snippet} + + + + {#snippet leftChild()} +
+ +
+ {/snippet} + +
+ + + + + + + + + + + + + + +
+ + + + + + + + + +
+
+ + +
+
+ + + +
+
diff --git a/src/routes/en_US/checkbox/+page.svelte b/src/routes/en_US/checkbox/+page.svelte new file mode 100644 index 0000000..f67e819 --- /dev/null +++ b/src/routes/en_US/checkbox/+page.svelte @@ -0,0 +1,319 @@ + + + +
+
Horizontal Layout
+
Basic Usage
+ + + +
Text Position
+ + + + + + + +
Custom Icons
+ + + + + + + + + + + +
Snippet as Button Component
+ + {#snippet checkboxChild({ item })} + + {/snippet} + + + +
Snippet as Custom Element
+ + {#snippet checkboxChild({ item })} + + {/snippet} + + + +
Image Options
+ + {#snippet checkboxChild({ item })} +
+ + +
{ + dotaImgsFun(item.name); + }} + > + +
+
+ +
+
+ {/snippet} + +
+ {imgCheckeds.length > 0 ? 'Selected' : 'No heroes selected'} + {imgCheckeds.join(' + ')} +
+ +
+ +
+
Inline Layout
+
Snippet Inline Layout
+ + {#snippet checkboxChild({ item })} + + +
{ + dotaInlineFun(item.name); + }} + > + {item.label} +
+ {/snippet} + +
Selected: {checkInlines.join('-')}
+
+ + +
+
Vertical Layout
+
Basic Usage
+ + + +
Long Text Options
+ + + +
Left Aligned Text
+ + +
Complex Options && Custom Selection Effect
+ + {#snippet checkboxChild({ item })} + + +
dotaVoicesFun(item.name)}> +
+ +
+
+ {item.label} + {#each item.voices as voice} +
{voice}
+ {/each} +
+
+
+ {/snippet} + + +
Batch Operations
+ +
Selected: {checkDotas.map(a => dotaAll.find(b => b.name === a).label).join('-')}
+
Unselected: {noCheckDotas.map(a => dotaAll.find(b => b.name === a).label).join('-')}
+
+
+ +
+
+ +
+
+ +
+
+ + +
With Animation
+
+
+
Unselected
+ {#each animateNos as item (item)} +
+ {item} +
+ {/each} +
+
+
Selected
+ {#each animateYess as item (item)} +
+ {item} +
+ {/each} +
+
+
diff --git a/src/routes/en_US/dialog/+page.svelte b/src/routes/en_US/dialog/+page.svelte new file mode 100644 index 0000000..77798a1 --- /dev/null +++ b/src/routes/en_US/dialog/+page.svelte @@ -0,0 +1,168 @@ + + + +
+ (visible1 = true)} /> + + + (visible2 = true)} /> + + {#snippet contentChild()} + + {/snippet} + + + (visible3 = true)} /> + + + (visible5 = true)} /> + + + (visible6 = true)} /> + + + (visible4 = true)} /> + + {#snippet contentChild()} +
+ +
+ {/snippet} + + + (visible11 = true)} /> + + + (visible7 = true)} /> + + + (visible8 = true)} /> + + + (visible9 = true)} /> + + + (visible10 = true)} /> + + + (visible19 = true)} /> + + + (visible12 = true)} /> + + + (visible13 = true)} /> + + + (visible15 = true)} /> + + + (visible14 = true)} /> + (toastVisible = true)} /> + + + (visible16 = true)} /> + (toastVisible2 = true)} /> + + + (visible17 = true)} /> + (toastVisible3 = true)} /> + + + (visible18 = true)} /> + + {#snippet primaryChild()} + + {#if loading} + + {:else} + Enter + {/if} + + {/snippet} + + +
+ + + diff --git a/src/routes/en_US/divider/+page.svelte b/src/routes/en_US/divider/+page.svelte new file mode 100644 index 0000000..e682efb --- /dev/null +++ b/src/routes/en_US/divider/+page.svelte @@ -0,0 +1,81 @@ + + + +
+
+
Different lengths
+ + + + + +
+
+
Text
+ + +
+
+
Different heights
+
Start
+ +
Height is 0
+ +
Height is 4
+ +
Height is 8
+
+ +
+
Text position
+ + + +
+
+
Line style
+ + + +
+
+
Custom color
+ + + + + +
+
+
Vertical divider
+
+ Three days in the skyThree days in a rowHuman computer +
+
+
+
Different weights
+ + + +
+ GuardianThree days in the skyThree days in a rowHuman computer +
+
+
+
Custom vertical divider
+
+ Increase spacing + + Custom + + Color + + Line style +
+
+
diff --git a/src/routes/en_US/grids/+page.svelte b/src/routes/en_US/grids/+page.svelte new file mode 100644 index 0000000..04bbdb8 --- /dev/null +++ b/src/routes/en_US/grids/+page.svelte @@ -0,0 +1,292 @@ + + + +
Using Placeholder Example 3﹡4
+ + + 3﹡1 + + + 1﹡3 + + + 2﹡1 + + + 1﹡2 + + + 1﹡1 + + + 1﹡1 + + + +
Using Placeholder Example 4﹡6
+ + + 3﹡2 + + + 1﹡3 + + + 4﹡1 + + + 2﹡1 + + + 1﹡1 + + + 1﹡1 + + + 1﹡1 + + + 1﹡1 + + + 1﹡1 + + + 1﹡4 + + + +
Increase Margin and Cell Gap
+ + + 3﹡1 + + + 1﹡3 + + + 2﹡1 + + + 1﹡2 + + + 1﹡1 + + + 1﹡1 + + + +
Scene Example 6﹡5
+
+
+ + +
+
{weekDay}
+
{day}
+
{month}
+
+ + +
+ {time} +
+ + +
+
+ + {#snippet falseChild()} +
+ +
+ {/snippet} + {#snippet trueChild()} +
+ +
+ {/snippet} + +
+
Colorful
+
+ + + +
+ +
+ + +
+
+ {#if currentDevice === 'iOS'} + + {:else if currentDevice === 'Android'} + + {:else if currentDevice === 'Windows'} + + {:else if currentDevice === 'macOS'} + + {:else} + + {/if} +
+
+
+ {#if currentDevice === 'iOS'} + A15 Bionic + {:else if currentDevice === 'Android'} + Snapdragon + {:else if currentDevice === 'Windows'} + AMD YES + {:else if currentDevice === 'macOS'} + M1 Ultra + {:else} + Intel + {/if} +
+
+ {#if currentDevice === 'iOS'} + iPhone + {:else if currentDevice === 'Android'} + Android + {:else if currentDevice === 'Windows'} + Windows + {:else if currentDevice === 'macOS'} + MacBook Pro + {:else} + Ubuntu + {/if} +
+
+
+ + +
+
+ + {#snippet falseChild()} +
+ +
+ {/snippet} + {#snippet trueChild()} +
+ +
+ {/snippet} + +
+
Bluetooth
+
+ + +
+
+ + +
+
STDF
+
+ + +
+
92%
+
+ +
+
充电中
+
+ + +
+ {#if currentDevice === 'iOS'} + + {:else if currentDevice === 'Android'} + + {:else if currentDevice === 'Windows'} + + {:else if currentDevice === 'macOS'} + + {:else} + + {/if} +
+ + +
+
+ +
+
+
68%
+
+
+ + +
+
+ + {#snippet falseChild()} +
+ +
+ {/snippet} + {#snippet trueChild()} +
+ +
+ {/snippet} + +
+
Wi-Fi
+
+ + +
+
diff --git a/src/routes/en_US/icon/+page.svelte b/src/routes/en_US/icon/+page.svelte new file mode 100644 index 0000000..5dcb2f0 --- /dev/null +++ b/src/routes/en_US/icon/+page.svelte @@ -0,0 +1,112 @@ + + + +
+
+
Basic usage
+
+ {#each icons as icon} +
+ +
{icon}
+
+ {/each} +
+
+
+
Follow the theme color
+
+ {#each icons as icon} +
+ +
+ {/each} +
+
+
+
Different size
+
+ {#each icons as icon, i} +
+ +
{18 + i * 6}
+
+ {/each} +
+
+
+
Different transparency
+
+ {#each icons as icon, i} +
+ +
{(0.2 + i * 0.2).toFixed(1)}
+
+ {/each} +
+
+
+
+ Custom colorBy injClass +
+
+ {#each icons as icon} +
+ +
+ {/each} +
+
+
+
+ Custom colorby Snippet +
+
+ {#each icons as icon} +
+ +
+ {/each} +
+
+
+
Snippet
+
+ {#each icons as icon, index} +
+ + + +
+ {/each} +
+
+
+
Offset
+
+ {#each icons as icon, i} +
+ + top:{-4 + i * 2} +
+ {/each} +
+
+
diff --git a/src/routes/en_US/icon/allIcon.md b/src/routes/en_US/icon/allIcon.md new file mode 100644 index 0000000..fa5e315 --- /dev/null +++ b/src/routes/en_US/icon/allIcon.md @@ -0,0 +1,124 @@ +Demo 中用到的所有 svg 图标 + +- account-circle-fill +- account-circle-line +- aliens-fill +- android-fill +- apple-fill +- apps-2-line +- arrow-down-s-line +- arrow-left-s-line +- arrow-right-s-line +- arrow-up-s-fill +- arrow-up-s-line +- bank-line +- barcode-fill +- battery-2-charge-line +- battery-charge-line +- bear-smile-line +- bluetooth-connect-line +- bluetooth-line +- cake-2-fill +- car-line +- check-fill +- check-line +- checkbox-blank-circle-line +- checkbox-circle-fill +- checkbox-circle-line +- checkbox-fill +- checkbox-line +- checkbox-multiple-fill +- checkbox-multiple-line +- chrome-fill +- close-circle-fill +- close-circle-line +- close-fill +- close-line +- code-box-fill +- command-fill +- command-line +- compass-3-fill +- compass-3-line +- compass-line +- computer-line +- cup-fill +- cup-line +- customer-service-2-line +- discuss-fill +- discuss-line +- drag-move-line +- delete-back-2-line +- emotion-line +- emotion-sad-fill +- emotion-sad-line +- error-warning-line +- fingerprint-line +- github-fill +- hand-heart-line +- heart-3-fill +- home-3-fill +- home-3-line +- home-7-line +- hotel-bed-fill +- hotel-bed-line +- image-2-fill +- indent-decrease +- information-line +- lock-line +- macbook-fill +- medal-fill +- mic-off-fill +- money-cny-circle-line +- moon-fill +- moon-line +- more-fil +- more-line +- movie-2-fill +- notification-2-line +- paint-brush-fill +- paint-brush-line +- parent-line +- phone-fill +- plane-fill +- plane-line +- qr-code-fill +- qr-scan-line +- radio-button-fill +- radio-button-line +- restaurant-2-fill +- restaurant-2-line +- riding-line +- send-plane-line +- service-line +- share-forward-2-fill +- share-forward-line +- share-line +- shield-user-line +- ship-2-line +- shopping-basket-line +- smartphone-line +- spy-fill +- star-fill +- star-line +- sun-line +- surgical-mask-fill +- survey-fill +- survey-line +- switch-fill +- skip-down-line +- tablet-line +- thumb-up-fill +- train-line +- ubuntu-fill +- ubuntu-line +- user-3-line +- user-smile-line +- volume-down-line +- volume-mute-line +- volume-up-line +- wifi-line +- wifi-off-line +- windows-fill +- wireless-charging-line +- zzz-fill +- zzz-lin diff --git a/src/routes/en_US/indexBar/+page.svelte b/src/routes/en_US/indexBar/+page.svelte new file mode 100644 index 0000000..0b45bb8 --- /dev/null +++ b/src/routes/en_US/indexBar/+page.svelte @@ -0,0 +1,184 @@ + + + +{#if dataFlag === 0} + { + toastObj = { index, group, childIndex, child }; + visible = true; + }} + /> +{:else if dataFlag === 1} + { + toastObj = { index, group, childIndex, child }; + visible = true; + }} + /> +{:else} + { + toastObj = { index, group, childIndex, child }; + visible = true; + }} + /> +{/if} + + +
+ + + + +
diff --git a/src/routes/en_US/input/+page.svelte b/src/routes/en_US/input/+page.svelte new file mode 100644 index 0000000..04be862 --- /dev/null +++ b/src/routes/en_US/input/+page.svelte @@ -0,0 +1,280 @@ + + + +
Basic Usage
+ + +
Without Title
+ + +
Custom Placeholder
+ + +
+ Different Input Types + {#if isIframe} + Please check keyboard types on mobile devices + {/if} +
+ + + + + + + + + + + +
Line Style
+ + + + +
Different Transition Times
+ + + + + + +
Different Title Positions
+ + + + +
Different Input Text Positions
+ + + +
Different Border Radius Styles
+ + + + + + +
Different Vertical Spacing
+ + + + + + + +
With Clear Button
+ + +
Disabled
+ + +
Different States
+ + + + + + + + +
Left Icon
+ + + +
Left Text
+ + +
Left Icon and Text
+ + +
Left Text and Icon
+ + +
Left Icon, Text, Icon
+ + +
Right Icon
+ + + +
Right Text
+ + +
Right Icon and Text
+ + +
Right Text and Icon
+ + +
Right Icon, Text, Icon
+ + +
Left Text and Right Icon
+ + +
All Six Items
+ + +
Tips and Data Items
+ + + + + + + +
All Configurable Items
+ + +
label1 and label4 Using Snippet
+ + {#snippet label1Child()} +
+ + + + +
+ {/snippet} + {#snippet label4Child()} +
+ +
+ {/snippet} + + +
Dynamic Display
+ + {#snippet label5Child()} +
+ {#if mobileLength === 11} + + {:else if mobileLength === 0}{:else} + + {/if} +
+ {/snippet} + + +
Bind Value
+ + + + +
Click label4 Trigger Event
+ + +
Textarea
+ + +
Textarea Auto Height
+ + +
Listen to Keydown Event
+
You pressed {key}
+ (key = v)} /> diff --git a/src/routes/en_US/loading/+page.svelte b/src/routes/en_US/loading/+page.svelte new file mode 100644 index 0000000..1396c05 --- /dev/null +++ b/src/routes/en_US/loading/+page.svelte @@ -0,0 +1,150 @@ + + + +
+ + +
+
+ {#each ['Default', 'Theme', 'Custom', 'Inverse', 'Inv theme'] as item} +
{item}
+ {/each} +
+
+ {#each arr1 as item, i} +
+
+ +
+
{'1_' + i}
+
+
+
+ +
+
{'1_' + i}
+
+
+
+ +
+
{'1_' + i}
+
+
+
+ +
+
{'1_' + i}
+
+
+
+ +
+
{'1_' + i}
+
+ {/each} +
+
+
Continually updated...
+ + +
+
+ {#each ['Default', 'Custom', 'Inverse'] as item} +
{item}
+ {/each} +
+
+ {#each arr2 as item, i} +
+
+ +
+
{'2_' + i}
+
+
+
+ +
+
{'2_' + i}
+
+
+
+ +
+
{'2_' + i}
+
+ {/each} +
+
+
Continually updated...
+ + +
+
+ {#each ['Default', 'Custom', 'Default', 'Custom'] as item} +
{item}
+ {/each} +
+
+ {#each arr4 as item, i} +
+
+ +
+
{'4_' + i}
+
+
+
+ +
+
{'4_' + i}
+
+ {/each} +
+
+
Continually updated...
+ + +
+
Continually updated...
+ + +
+ +
+ {#each speedBtns as item} +
+ +
+ {/each} +
diff --git a/src/routes/en_US/mask/+page.svelte b/src/routes/en_US/mask/+page.svelte new file mode 100644 index 0000000..5e1c433 --- /dev/null +++ b/src/routes/en_US/mask/+page.svelte @@ -0,0 +1,57 @@ + + + +
+ (visible1 = true)} /> + (visible1 = false)} /> + + (visible2 = true)} /> + (visible2 = false)} /> + + (visible3 = true)} /> + (visible3 = false)} /> + + (visible4 = true)} /> + +
+
+
+
+ + (visible5 = true)} /> + (visible5 = false)} /> + + (visible6 = true)} /> + (visible6 = false)} /> + + (visible7 = true)} /> + (visible7 = false)} /> + + (visible8 = true)} /> + (visible8 = false)} /> + + (visible9 = true)} /> + (visible9 = false)} /> + + (visible10 = true)} /> + + + (visible11 = true)} /> + +
diff --git a/src/routes/en_US/modal/+page.svelte b/src/routes/en_US/modal/+page.svelte new file mode 100644 index 0000000..804aafa --- /dev/null +++ b/src/routes/en_US/modal/+page.svelte @@ -0,0 +1,128 @@ + + + +
+ (visible1 = true)} /> + + + (visible2 = true)} /> + + {#snippet contentChild()} + + {/snippet} + + + (visible3 = true)} /> + + + (visible4 = true)} /> + + {#snippet contentChild()} + + {/snippet} + + + (visible5 = true)} /> + + + (visible6 = true)} /> + + + (visible8 = true)} /> + + + (visible9 = true)} /> + + + (visible12 = true)} /> + + + (visible10 = true)} /> + + {#snippet contentChild()} +
+ +
+ {/snippet} + + + (visible7 = true)} /> + + + (visible11 = true)} /> + + + (visible13 = true)} /> + (toastVisible = true)} /> + + + (visible14 = true)} /> + + + (visible15 = true)} /> + +
+ + + diff --git a/src/routes/en_US/navBar/+page.svelte b/src/routes/en_US/navBar/+page.svelte new file mode 100644 index 0000000..108be54 --- /dev/null +++ b/src/routes/en_US/navBar/+page.svelte @@ -0,0 +1,67 @@ + + + +
+ + + (visible1 = true)} /> + + { + visible2 = true; + rightIndex = index; + }} + /> + + + + + {#snippet titleChild()} +
Custom text color by Snippet
+ {/snippet} + + + {#snippet titleChild()} +
+
title Snippet renders
+
right Snippet renders
+
+ {/snippet} + {#snippet rightChild()} +
+ +
+ {/snippet} + + + + + {#snippet leftChild()} +
+ +
+ {/snippet} + {#snippet titleChild()} +
custom styles by injClass and Snippet
+ {/snippet} + {#snippet rightChild()} +
+ +
+ {/snippet} + +
diff --git a/src/routes/en_US/noticeBar/+page.svelte b/src/routes/en_US/noticeBar/+page.svelte new file mode 100644 index 0000000..d144061 --- /dev/null +++ b/src/routes/en_US/noticeBar/+page.svelte @@ -0,0 +1,74 @@ + + + +
Basic usage
+ + +
The announcements are short and do not scroll
+ + +
Set notification spacing
+ + +
Set rolling speed
+ + +
Right arrow (listen for click events)
+ (visible = true)}> + + +
No content on the right
+ + +
Nothing on the left
+ + +
Set text size
+ + +
Custom left
+ +
+ +
+ + {#snippet leftChild()}🥳{/snippet} + + +
Custom right
+ + {#snippet rightChild()}🥳{/snippet} + + +
Vertical rolling
+ + +
Scroll transition to 1 second
+ + +
The scrolling interval is 8 seconds
+ + +
Excessively long text
+ + +
Single bar does not roll
+ + +
Custom style
+ +
+ +
+ +
diff --git a/src/routes/en_US/numKeyboard/+page.svelte b/src/routes/en_US/numKeyboard/+page.svelte new file mode 100644 index 0000000..374ad76 --- /dev/null +++ b/src/routes/en_US/numKeyboard/+page.svelte @@ -0,0 +1,122 @@ + + + + (visible1 = true)} /> + + + (visible2 = true)} /> + + + (visible3 = true)} /> + + + (visible9 = true)} /> + + + (visible4 = true)} /> + + + (visible5 = true)} /> + + + (visible6 = true)} /> + + + (visible7 = true)} /> + + + (visible8 = true)} /> + + + (visible10 = true)} /> + + + (visible18 = true)} /> + + + (visible11 = true)} /> + + + +
+ {value} + {#if value === '5201314'} + + {/if} +
+ (visible12 = true)} /> + (top = 0)} /> + + (visible13 = true)} /> + + + (visible14 = true)} /> + + + (visible15 = true)} /> + + + (visible16 = true)} /> + + + (visible17 = true)} /> + + + (visible19 = true)} /> + diff --git a/src/routes/en_US/pagination/+page.svelte b/src/routes/en_US/pagination/+page.svelte new file mode 100644 index 0000000..1082d54 --- /dev/null +++ b/src/routes/en_US/pagination/+page.svelte @@ -0,0 +1,122 @@ + + +
Basic usage
+ + +
Event listening
+
Current page: {current}
+ (current = c)} onnext={c => (current = c)} onchange={c => (current = c)} /> + +
Initial display omitted page
+
Can be used to guide users
+ + +
Set initial page
+ + +
Max display 11 pages
+
Display more pages but the page number is small
+ + +
Max display 5 pages
+
Suitable for scenes with a small paging area
+
+
This is my territory
+
+ +
+
+ +
No data
+ + +
Only one page
+ + +
Total pages are less than the maximum display pages
+
No omitted page
+ + +
Total pages are less than the maximum display pages
+
No omitted page
+ + +
Total pages are many
+
Will exist two omitted pages
+ + +
Each page is only 3 items
+ + +
Highlighted page is border
+ + +
Highlighted page is block
+ + +
Increase the radius of the highlighted page
+ + +
Omitted page column is 2
+ + +
Inject injClass
+ + +
Simulate request
+
+ {#each data as item} +
1}> +
{item.text}
+
{item.from}
+
+ {/each} + {#if loading} +
+
Querying the {currentPage} page data...
+ +
+ {/if} +
+ + +
Continuous mode
+
Only allow clicking on the previous and next pages
+ + +
diff --git a/src/routes/en_US/picker/+page.svelte b/src/routes/en_US/picker/+page.svelte new file mode 100644 index 0000000..bf60634 --- /dev/null +++ b/src/routes/en_US/picker/+page.svelte @@ -0,0 +1,771 @@ + + + +
+ (visible1 = true)} /> + + + (visible2 = true)} /> + + + (visible3 = true)} /> + + + (visible4 = true)} /> + + + (visible5 = true)} + subTitle="Need to close automatic selection of the last selected item" + /> + + + (visible6 = true)} /> + + + (visible7 = true)} /> + + + (visible8 = true)} /> + (currentDetail = items[0].label)} /> + + (visible20 = true)} /> + + + (visible9 = true)} /> + + + (visible10 = true)} /> + + + (visible11 = true)} /> + + + (visible21 = true)} /> + + + (visible12 = true)} /> + + + (visible13 = true)} /> + + + (visible14 = true)} /> + + + (visible15 = true)} /> + + + (visible16 = true)} /> + + + (visible22 = true)} /> + + + (visible17 = true)} /> + + +
+ {#if allItems.length} + Currently selected: + {#each allItems as item} + {item.label} + {/each} + {:else} +
Please select data
+ {/if} +
+
+ {#if allIndexs.length} + Currently selected value is located at the index of each column: + {#each allIndexs as index} + {index} + {/each} + {:else} +
Please select data
+ {/if} +
+ (visible18 = true)} /> + { + allItems = items; + allIndexs = indexs; + }} + /> + + (visible19 = true)} /> + +
+ + + diff --git a/src/routes/en_US/picker/data_en.js b/src/routes/en_US/picker/data_en.js new file mode 100644 index 0000000..aa92c80 --- /dev/null +++ b/src/routes/en_US/picker/data_en.js @@ -0,0 +1,608 @@ +const someProvinceList = [ + { label: 'California' }, + { label: 'New York' }, + { label: 'Texas' }, + { label: 'Florida' }, + { label: 'Illinois' }, + { label: 'Pennsylvania' }, + { label: 'Ohio' }, + { label: 'Michigan' }, + { label: 'Georgia' }, + { label: 'Virginia' }, + { label: 'Washington' }, + { label: 'Arizona' }, + { label: 'Massachusetts' }, + { label: 'Tennessee' }, +]; +const weekList = [ + { label: 'Monday' }, + { label: 'Tuesday' }, + { label: 'Wednesday' }, + { label: 'Thursday' }, + { label: 'Friday' }, + { label: 'Saturday' }, + { label: 'Sunday' }, +]; +const amOrPmList = [{ label: 'AM' }, { label: 'PM' }]; +const timeList = [ + { label: '01:00' }, + { label: '02:00' }, + { label: '03:00' }, + { label: '04:00' }, + { label: '05:00' }, + { label: '06:00' }, + { label: '07:00' }, + { label: '08:00' }, + { label: '09:00' }, + { label: '10:00' }, + { label: '11:00' }, + { label: '12:00' }, +]; +const cityList = [ + { cityName: 'losangeles' }, + { cityName: 'sandiego' }, + { cityName: 'sanfrancisco' }, + { cityName: 'sacramento' }, + { cityName: 'fresno' }, + { cityName: 'oakland' }, + { cityName: 'sanjose' }, + { cityName: 'bakersfield' }, + { cityName: 'anaheim' }, + { cityName: 'riverside' }, + { cityName: 'stockton' }, +]; +const linkageData = [ + { + label: 'California', + children: [ + { + label: 'Los Angeles', + children: [ + { label: 'Downtown' }, + { label: 'Hollywood' }, + { label: 'Beverly Hills' }, + { label: 'Santa Monica' }, + { label: 'Pasadena' }, + ], + }, + { + label: 'San Francisco', + children: [ + { label: 'Downtown' }, + { label: 'Mission District' }, + { label: 'North Beach' }, + { label: 'Chinatown' }, + { label: 'Haight-Ashbury' }, + { label: 'Castro' }, + ], + }, + { + label: 'San Diego', + children: [ + { label: 'Downtown' }, + { label: 'La Jolla' }, + { label: 'Pacific Beach' }, + { label: 'Mission Beach' }, + { label: 'Coronado' }, + ], + }, + { + label: 'Sacramento', + children: [ + { label: 'Downtown' }, + { label: 'Midtown' }, + { label: 'East Sacramento' }, + { label: 'Land Park' }, + { label: 'Natomas' }, + { label: 'Arden-Arcade' }, + ], + }, + { + label: 'Oakland', + children: [{ label: 'Downtown' }, { label: 'Lake Merritt' }, { label: 'Rockridge' }], + }, + { + label: 'San Jose', + children: [ + { label: 'Downtown' }, + { label: 'Willow Glen' }, + { label: 'Almaden Valley' }, + { label: 'Berryessa' }, + { label: 'Evergreen' }, + ], + }, + { + label: 'Fresno', + children: [ + { label: 'Downtown' }, + { label: 'Tower District' }, + { label: 'River Park' }, + { label: 'Fig Garden' }, + { label: 'Woodward Park' }, + ], + }, + { + label: 'Long Beach', + children: [ + { label: 'Downtown' }, + { label: 'Belmont Shore' }, + { label: 'Bixby Knolls' }, + { label: 'Naples' }, + { label: 'Alamitos Beach' }, + { label: 'Rose Park' }, + ], + }, + { + label: 'Bakersfield', + children: [{ label: 'Downtown' }, { label: 'Rosedale' }, { label: 'Oildale' }, { label: 'Seven Oaks' }, { label: 'Stockdale' }], + }, + { + label: 'Anaheim', + children: [ + { label: 'Downtown' }, + { label: 'Anaheim Hills' }, + { label: 'The Colony' }, + { label: 'The Platinum Triangle' }, + { label: 'West Anaheim' }, + { label: 'East Anaheim' }, + { label: 'South Anaheim' }, + { label: 'Resort District' }, + ], + }, + ], + }, + { + label: 'Texas', + children: [ + { + label: 'Houston', + children: [ + { label: 'Downtown' }, + { label: 'Midtown' }, + { label: 'Heights' }, + { label: 'River Oaks' }, + { label: 'Memorial' }, + { label: 'Medical Center' }, + ], + }, + { + label: 'Dallas', + children: [ + { label: 'Downtown' }, + { label: 'Uptown' }, + { label: 'Deep Ellum' }, + { label: 'Oak Lawn' }, + { label: 'Bishop Arts' }, + { label: 'Knox Henderson' }, + ], + }, + { + label: 'Austin', + children: [{ label: 'Downtown' }, { label: 'South Congress' }, { label: 'East Austin' }], + }, + { + label: 'San Antonio', + children: [ + { label: 'Downtown' }, + { label: 'Alamo Heights' }, + { label: 'Pearl District' }, + { label: 'King William' }, + { label: 'Stone Oak' }, + ], + }, + ], + }, + { + label: 'Illinois', + children: [ + { + label: 'Chicago', + children: [ + { label: 'Loop' }, + { label: 'River North' }, + { label: 'Lincoln Park' }, + { label: 'Wicker Park' }, + { label: 'Gold Coast' }, + { label: 'Lakeview' }, + ], + }, + { + label: 'Springfield', + children: [ + { label: 'Downtown' }, + { label: 'West Side' }, + { label: 'East Side' }, + { label: 'North End' }, + { label: 'South Side' }, + { label: 'Jerome' }, + ], + }, + { + label: 'Rockford', + children: [ + { label: 'Downtown' }, + { label: 'East Side' }, + { label: 'North End' }, + { label: 'Rural Oaks' }, + { label: 'Churchill Grove' }, + { label: 'Signal Hill' }, + ], + }, + { + label: 'Peoria', + children: [ + { label: 'Downtown' }, + { label: 'West Bluff' }, + { label: 'East Bluff' }, + { label: 'North Valley' }, + { label: 'South Side' }, + ], + }, + ], + }, + { + label: 'New York', + children: [ + { + label: 'New York City', + children: [ + { label: 'Manhattan' }, + { label: 'Brooklyn' }, + { label: 'Queens' }, + { label: 'The Bronx' }, + { label: 'Staten Island' }, + { label: 'Harlem' }, + ], + }, + ], + }, + { + label: 'Washington', + children: [ + { + label: 'Seattle', + children: [ + { label: 'Downtown' }, + { label: 'Capitol Hill' }, + { label: 'Ballard' }, + { label: 'Fremont' }, + { label: 'Queen Anne' }, + { label: 'South Lake Union' }, + ], + }, + { + label: 'Spokane', + children: [ + { label: 'Downtown' }, + { label: 'South Hill' }, + { label: 'North Side' }, + { label: 'West Central' }, + { label: 'East Central' }, + { label: 'Riverside' }, + ], + }, + { + label: 'Tacoma', + children: [ + { label: 'Downtown' }, + { label: 'North End' }, + { label: 'South End' }, + { label: 'East Side' }, + { label: 'West End' }, + { label: 'Central' }, + ], + }, + { + label: 'Vancouver', + children: [ + { label: 'Downtown' }, + { label: 'Uptown' }, + { label: 'Hazel Dell' }, + { label: 'Salmon Creek' }, + { label: "Fisher's Landing" }, + { label: 'Cascade Park' }, + ], + }, + { + label: 'Bellevue', + children: [ + { label: 'Downtown' }, + { label: 'West Bellevue' }, + { label: 'Crossroads' }, + { label: 'Eastgate' }, + { label: 'Factoria' }, + ], + }, + ], + }, +]; +const linkagDiffLabelKeyData = [ + { + province: 'California', + children: [ + { + city: 'Los Angeles', + children: [ + { region: 'Downtown' }, + { region: 'Hollywood' }, + { region: 'Beverly Hills' }, + { region: 'Santa Monica' }, + { region: 'Pasadena' }, + { region: 'Venice Beach' }, + { region: 'Westwood' }, + ], + }, + { + city: 'San Francisco', + children: [ + { region: 'Downtown' }, + { region: 'Mission District' }, + { region: 'North Beach' }, + { region: 'Chinatown' }, + { region: 'Haight-Ashbury' }, + { region: 'Castro' }, + ], + }, + { + city: 'San Diego', + children: [ + { region: 'Downtown' }, + { region: 'La Jolla' }, + { region: 'Pacific Beach' }, + { region: 'Mission Beach' }, + { region: 'Coronado' }, + { region: 'North Park' }, + ], + }, + ], + }, + { + province: 'Florida', + children: [ + { + city: 'Miami', + children: [ + { region: 'Downtown' }, + { region: 'South Beach' }, + { region: 'Brickell' }, + { region: 'Coconut Grove' }, + { region: 'Little Havana' }, + { region: 'Coral Gables' }, + ], + }, + { + city: 'Orlando', + children: [ + { region: 'Downtown' }, + { region: 'Winter Park' }, + { region: 'Lake Nona' }, + { region: 'College Park' }, + { region: 'Baldwin Park' }, + { region: 'Mills 50' }, + ], + }, + { + city: 'Tampa', + children: [{ region: 'Downtown' }, { region: 'Hyde Park' }, { region: 'Ybor City' }, { region: 'Channelside' }], + }, + ], + }, + { + province: 'Illinois', + children: [ + { + city: 'Chicago', + children: [ + { region: 'Loop' }, + { region: 'River North' }, + { region: 'Lincoln Park' }, + { region: 'Wicker Park' }, + { region: 'Gold Coast' }, + { region: 'Lakeview' }, + ], + }, + { + city: 'Springfield', + children: [ + { region: 'Downtown' }, + { region: 'West Side' }, + { region: 'East Side' }, + { region: 'North End' }, + { region: 'South Side' }, + { region: 'Jerome' }, + ], + }, + { + city: 'Peoria', + children: [ + { region: 'Downtown' }, + { region: 'West Bluff' }, + { region: 'East Bluff' }, + { region: 'North Valley' }, + { region: 'South Side' }, + ], + }, + ], + }, + { + province: 'New York', + children: [ + { + city: 'New York City', + children: [ + { region: 'Manhattan' }, + { region: 'Brooklyn' }, + { region: 'Queens' }, + { region: 'The Bronx' }, + { region: 'Staten Island' }, + { region: 'Harlem' }, + ], + }, + ], + }, +]; +const linkagCustomChildrenKeyData = [ + { + label: 'California', + child: [ + { + label: 'Los Angeles', + child: [ + { label: 'Downtown' }, + { label: 'Hollywood' }, + { label: 'Beverly Hills' }, + { label: 'Santa Monica' }, + { label: 'Pasadena' }, + { label: 'Venice Beach' }, + { label: 'Westwood' }, + ], + }, + { + label: 'San Francisco', + child: [ + { label: 'Downtown' }, + { label: 'Mission District' }, + { label: 'North Beach' }, + { label: 'Chinatown' }, + { label: 'Haight-Ashbury' }, + { label: 'Castro' }, + ], + }, + { + label: 'San Diego', + child: [ + { label: 'Downtown' }, + { label: 'La Jolla' }, + { label: 'Pacific Beach' }, + { label: 'Mission Beach' }, + { label: 'Coronado' }, + { label: 'North Park' }, + ], + }, + ], + }, + { + label: 'Florida', + child: [ + { + label: 'Miami', + child: [ + { label: 'Downtown' }, + { label: 'South Beach' }, + { label: 'Brickell' }, + { label: 'Coconut Grove' }, + { label: 'Little Havana' }, + { label: 'Coral Gables' }, + ], + }, + { + label: 'Orlando', + child: [ + { label: 'Downtown' }, + { label: 'Winter Park' }, + { label: 'Lake Nona' }, + { label: 'College Park' }, + { label: 'Baldwin Park' }, + { label: 'Mills 50' }, + ], + }, + { + label: 'Tampa', + child: [{ label: 'Downtown' }, { label: 'Hyde Park' }, { label: 'Ybor City' }, { label: 'Channelside' }], + }, + ], + }, + { + label: 'Illinois', + child: [ + { + label: 'Chicago', + child: [ + { label: 'Loop' }, + { label: 'River North' }, + { label: 'Lincoln Park' }, + { label: 'Wicker Park' }, + { label: 'Gold Coast' }, + { label: 'Lakeview' }, + ], + }, + { + label: 'Springfield', + child: [ + { label: 'Downtown' }, + { label: 'West Side' }, + { label: 'East Side' }, + { label: 'North End' }, + { label: 'South Side' }, + { label: 'Jerome' }, + ], + }, + { + label: 'Peoria', + child: [ + { label: 'Downtown' }, + { label: 'West Bluff' }, + { label: 'East Bluff' }, + { label: 'North Valley' }, + { label: 'South Side' }, + ], + }, + ], + }, + { + label: 'New York', + child: [ + { + label: 'New York City', + child: [ + { label: 'Manhattan' }, + { label: 'Brooklyn' }, + { label: 'Queens' }, + { label: 'The Bronx' }, + { label: 'Staten Island' }, + { label: 'Harlem' }, + ], + }, + ], + }, + { + label: 'Washington', + child: [ + { + label: 'Seattle', + child: [ + { label: 'Downtown' }, + { label: 'Capitol Hill' }, + { label: 'Ballard' }, + { label: 'Fremont' }, + { label: 'Queen Anne' }, + { label: 'South Lake Union' }, + ], + }, + { + label: 'Spokane', + child: [ + { label: 'Downtown' }, + { label: 'South Hill' }, + { label: 'North Side' }, + { label: 'West Central' }, + { label: 'East Central' }, + { label: 'Riverside' }, + ], + }, + { + label: 'Tacoma', + child: [ + { label: 'Downtown' }, + { label: 'North End' }, + { label: 'South End' }, + { label: 'East Side' }, + { label: 'West End' }, + { label: 'Central' }, + ], + }, + ], + }, +]; + +export { someProvinceList, weekList, amOrPmList, timeList, cityList, linkageData, linkagDiffLabelKeyData, linkagCustomChildrenKeyData }; diff --git a/src/routes/en_US/placeholder/+page.svelte b/src/routes/en_US/placeholder/+page.svelte new file mode 100644 index 0000000..dc62e06 --- /dev/null +++ b/src/routes/en_US/placeholder/+page.svelte @@ -0,0 +1,34 @@ + + + +
Basic usage
+Basic usage + +
Set height
+High for 32 + +
Different fillet
+
+ unfillet + XL Rounded corner + Full fillet +
+ +
shaded
+shadow + +
customize injClass
+Gradient background + +
Combined with Grids
+ + 3﹡2 + 1﹡3 + 3﹡1 + 2﹡2 + 1﹡1 + 1﹡1 + +
diff --git a/src/routes/en_US/popup/+page.svelte b/src/routes/en_US/popup/+page.svelte new file mode 100644 index 0000000..5b5e179 --- /dev/null +++ b/src/routes/en_US/popup/+page.svelte @@ -0,0 +1,171 @@ + + + +
+ (visible1 = true)} /> + + + (visible2 = true)} /> + + + (visible3 = true)} /> + + + (visible4 = true)} /> + + + (visible5 = true)} /> + + + (visible6 = true)} /> + + + (visible7 = true)} /> + + + (visible10 = true)} /> + + + (visible11 = true)} /> + + + (visible16 = true)} /> + + + (visible8 = true)} /> + + + (visible9 = true)} /> + + + (visible12 = true)} /> + + + (visible13 = true)} /> + +
+ +
+ + + (visible14 = true)} /> + +
+
AirPods Pro connected
+
+ +
+
+
set
+
music
+
+
+ + + (visible20 = true)} /> + +
+ + + +
+ + + (visible17 = true)} /> + +
+
+
+ +
+
+
Mobile phone
+
Hu Ge
+
+
+
+
+ +
+
+ +
+
+
+ + + (visible18 = true)} /> + +
+
+ +
+
+ + + (visible15 = true)} /> + + + (visible19 = true)} /> + + + + + (visible21 = true)} /> + +
+ + + diff --git a/src/routes/en_US/progress/+page.svelte b/src/routes/en_US/progress/+page.svelte new file mode 100644 index 0000000..26dbe7a --- /dev/null +++ b/src/routes/en_US/progress/+page.svelte @@ -0,0 +1,87 @@ + + + +
+
Basic usage
+ + +
Different heights
+
+ + + + +
+ +
Percentage different position
+
+ + + + +
+ +
Different styles of rounded corners
+
+ + + + + +
+ +
Ash setting
+
+ + +
+ +
Transition effect
+
+ + + + + +
+ + + +
+ + +
Custom color
+
+ + + + +
+ +
Custom text
+
+ +
completed 2/3
+ + +
completed 2/3
+ +
+ diff --git a/src/routes/en_US/progressLoop/+page.svelte b/src/routes/en_US/progressLoop/+page.svelte new file mode 100644 index 0000000..d2c164c --- /dev/null +++ b/src/routes/en_US/progressLoop/+page.svelte @@ -0,0 +1,127 @@ + + + +
Basic usage
+
+ +
+ +
Different width
+
+
+ +
+
+ +
+
+ +
+
+ +
Straight end
+
+ +
+ +
Counterclockwise direction
+
+ +
+ +
Custom color
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
Custom text
+
+
+ +
+
Completed
+
6666
+
step
+
+ +
+
+ +
+
Residual flow
+
66
+
GB
+
+ +
+
+ +
complete 2/3
+ +
+
+ +
Transition effect
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + + +
+ + diff --git a/src/routes/en_US/radio/+page.svelte b/src/routes/en_US/radio/+page.svelte new file mode 100644 index 0000000..552af7e --- /dev/null +++ b/src/routes/en_US/radio/+page.svelte @@ -0,0 +1,201 @@ + + + +
+
Horizontal Layout
+
Basic Usage
+ + + +
Get Selected Value
+ +
Selected: {value}
+ + +
Text Position
+ + + + + + + +
Custom Icon
+ + + + + + + + + + + +
Snippet as Button Component
+ + {#snippet radioChild({ item })} + + {/snippet} + + + +
Snippet as Custom Element
+ + {#snippet radioChild({ item })} + + {/snippet} + + + +
Image Options
+ + {#snippet radioChild({ item })} +
+ + +
(imgChecked = item.name)} + > + +
+
+ +
+
+ {/snippet} + +
+ Selected {imgChecked} +
+ +
+ +
+
Inline Layout
+
Snippet Inline Layout
+ + {#snippet radioChild({ item })} + + +
(checkInline = item.name)} + > + {item.label} +
+ {/snippet} + +
Selected: {checkInline}
+
+ + +
+
Vertical Layout
+
Basic Usage
+ + + +
Long Text Options
+ + + +
Text Position
+ + +
Complex Options && Custom Selected Effect
+ + {#snippet radioChild({ item })} + + +
(voiceChecked = item.name)}> +
+ +
+
+ {item.label} + {#each item.voices as voice} +
{voice}
+ {/each} +
+
+
+ {/snippet} + +
diff --git a/src/routes/en_US/rate/+page.svelte b/src/routes/en_US/rate/+page.svelte new file mode 100644 index 0000000..8e1f257 --- /dev/null +++ b/src/routes/en_US/rate/+page.svelte @@ -0,0 +1,107 @@ + + + +
Basic Usage
+
+ +
+
Set Initial Score
+
+ +
+
Allow Zero Score
+
+ +
+
Custom Total Score
+
+ +
+
Set Unselected Opacity
+
+ +
+
Allow Half Selection
+
+ +
+
Vertical Half Selection
+
+ +
+
Half Selection with Zero Score
+
+ +
+
Increase Spacing
+
+ +
+
Disabled
+
+ +
+
Read Only
+
+ +
+
Different Sizes
+
+ +
+
+ +
+
+ +
+
Custom Icons
+
+ + + +
+
+ + + +
+
+ + + +
+
+ +
👍
+ +
+
+ +
🍺
+ +
+
+ +
M
+ +
+
Event Listening
+
+ (value = v)} /> +

Rating: {value} stars

+
+ +
Click Animation for All Active Icons
+
+ +
+ +
Disable Click Animation
+
+ +
diff --git a/src/routes/en_US/skeleton/+page.svelte b/src/routes/en_US/skeleton/+page.svelte new file mode 100644 index 0000000..231f88d --- /dev/null +++ b/src/routes/en_US/skeleton/+page.svelte @@ -0,0 +1,67 @@ + + + +
+
example 1
+
+ +
+ + +
+
+ +
example 2
+
+ + + + +
+ + + +
example 3
+
+ +
+ +
+
+ +
example 4
+
+
+ + +
+ +
+ +
example 5
+
+ + + + +
+ +
example 6
+ {#each [1, 1, 1] as item} +
+
+
+ +
+ + +
+
+
+ +
+ + {/each} +
diff --git a/src/routes/en_US/slider/+page.svelte b/src/routes/en_US/slider/+page.svelte new file mode 100644 index 0000000..4230d8c --- /dev/null +++ b/src/routes/en_US/slider/+page.svelte @@ -0,0 +1,117 @@ + + + +
Basic Usage
+
+ +
+
Monitor value
+
+ (value = v)} {value} /> + Current value: {value} +
+
Step size of 5
+
+ +
+
Step size of 0.1
+
+ +
+
Set selectable range (60-80)
+
+ +
+
Range selection
+
+ +
+
Set range for interval (40-80)
+
+ (valueRange = arr)} /> + Current range: {valueRange[0]} - {valueRange[1]} +
+
Different border radius
+
+ +
+
+ +
+
+ +
+
Outlined slider
+
+ +
+
+ +
+
Always show Tip
+
+ +
+
+ +
+
+ +
+
Don't show Tip
+
+ +
+
Combined layout
+
+ +
+ +
+ +
+
Using Snippet
+
+ (valueBar = v)}> + {#snippet children()} +
+
+ {#each barList as item, i} +
+ {/each} +
+
+ {/snippet} + +
+
Disabled
+
+ +
+
Read-only
+
+ +
diff --git a/src/routes/en_US/stepper/+page.svelte b/src/routes/en_US/stepper/+page.svelte new file mode 100644 index 0000000..804eb43 --- /dev/null +++ b/src/routes/en_US/stepper/+page.svelte @@ -0,0 +1,134 @@ + + + +
Basic Usage
+
+ +
+ +
Set Maximum/Minimum/Initial Value
+
+ +
+ +
Set Step
+
+ +
+ +
Highlight Number Area
+
+ +
+ +
Highlight Number Area
+
+ + +
+ +
Different Radius
+
+
+
+
+
+
+
+
+ +
Vertical
+
+ + + + + +
+ +
Format Display Numbers
+
+
Keep one decimal place
+ +
+
+
Keep four decimal places
+ +
+ +
Asynchronous Display Numbers
+
+
Toast shows asynchronous status
+ handleChange1('increase')} ondecrease={() => handleChange1('decrease')} /> +
+ +
Internal display asynchronous status
+
+ handleChange2('increase')} + ondecrease={() => handleChange2('decrease')} + /> + handleChange3('increase')} + ondecrease={() => handleChange3('decrease')} + /> +
+ +
No external padding
+
+ +
+
+ +
+
+ +
+ +
Inject Class in Different Positions
+
+ +
+
+ +
+
+ +
diff --git a/src/routes/en_US/steps/+page.svelte b/src/routes/en_US/steps/+page.svelte new file mode 100644 index 0000000..32bce75 --- /dev/null +++ b/src/routes/en_US/steps/+page.svelte @@ -0,0 +1,265 @@ + + + +
Horizontal arrangement
+
Simple usage
+ + +
Different fillet
+ + + +
Tape icon
+ + +
Different icon border
+ + + + + + +
Tape completion step
+ + +
Tape icon && Complete steps
+ + +
The step bar area uses text
+ + +
Use images for the step bar area
+ + + + +
Longitudinal arrangement
+
Different fillet
+
+ + + +
+ +
Different icon border
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
Tape description information
+ + + + +
Tape completion step
+ + +
The step bar area uses text
+ + +
Use images for the step bar area
+
+ + +
+ +
The content area injects elements
+ + +
+
+ +
+
+ +
+
+ + + + + + diff --git a/src/routes/en_US/steps/injCom1_en.svelte b/src/routes/en_US/steps/injCom1_en.svelte new file mode 100644 index 0000000..af5a128 --- /dev/null +++ b/src/routes/en_US/steps/injCom1_en.svelte @@ -0,0 +1,6 @@ +
+
Here you inject a picture as a component
+
+ +
+
diff --git a/src/routes/en_US/steps/injCom2_en.svelte b/src/routes/en_US/steps/injCom2_en.svelte new file mode 100644 index 0000000..f5d0192 --- /dev/null +++ b/src/routes/en_US/steps/injCom2_en.svelte @@ -0,0 +1,11 @@ + + +
Here you inject something in the form of a component
+
+ + + + +
diff --git a/src/routes/en_US/swiper/+page.svelte b/src/routes/en_US/swiper/+page.svelte new file mode 100644 index 0000000..5929665 --- /dev/null +++ b/src/routes/en_US/swiper/+page.svelte @@ -0,0 +1,320 @@ + + + +
Basic Usage
+ + +
Initial Index 2
+ + +
8s Interval
+ + +
1500ms Duration
+ + +
Disable Autoplay
+ + +
External Indicator
+ + +
Hide Indicator
+ + +
Right Aligned Indicator
+ + +
Dot Indicator
+ + +
Line Indicator
+ + +
Long Line Indicator
+ +
+ + +
Square Indicator
+ +
+ + +
+ Custom Indicator Background +

Inject Class

+
+ + +
+ Custom Indicator Color +

Remove Background

+
+ + +
Custom Aspect Ratio
+ + +
+ Container Padding +

With Custom Colors and Radius

+
+ +
+ + +
+ Inner Shadow +

Inject Class

+
+ + +
Inactive Item X, Z Translation
+ +
+ +
+ + +
Inactive Item X, Y, Z Rotation
+ +
+ +
+ +
+ +
+ +
+ + +
Custom Inactive Item Style
+ +
+ + +
Custom Container Width
+
+ +
+ +
Component as Content
+ + +
+ onchange Event +

Current Index: {indexChange}

+
+ (indexChange = current)} /> + +
+ onclick Event +

Clicked Index: {indexClick === -1 ? 'None' : indexClick}

+
+ (indexClick = current)} /> + + + diff --git a/src/routes/en_US/swiper/Item_en.svelte b/src/routes/en_US/swiper/Item_en.svelte new file mode 100644 index 0000000..e939b60 --- /dev/null +++ b/src/routes/en_US/swiper/Item_en.svelte @@ -0,0 +1,9 @@ + + +
+
This container uses a single component as its content
+
+
+
diff --git a/src/routes/en_US/switch/+page.svelte b/src/routes/en_US/switch/+page.svelte new file mode 100644 index 0000000..aaaa70c --- /dev/null +++ b/src/routes/en_US/switch/+page.svelte @@ -0,0 +1,134 @@ + + + +
+
+
+
Different Radius
+
+ + + +
+
+
+
Different Colors
+
+ + + + +
+
+
+
With Text / State / Icon
+
+ + + + + {#snippet falseChild()} +
+ +
+ {/snippet} + {#snippet trueChild()} +
+ +
+ {/snippet} + +
+
+
+
Disabled
+
+ + +
+
+
+
Async Control
+
+
+ +
Wait 2 seconds
+
+
+ +
Wait 3 seconds
+
+
+
+
+ +
Used in Cell
+ + + + + + + + (visible = true)} + /> + { + visible = false; + confirmswitchActive = !confirmswitchActive; + }} + /> +
diff --git a/src/routes/en_US/tabBar/+page.svelte b/src/routes/en_US/tabBar/+page.svelte new file mode 100644 index 0000000..644b9a2 --- /dev/null +++ b/src/routes/en_US/tabBar/+page.svelte @@ -0,0 +1,89 @@ + + + +
+
+
+
Basic usage
+ +
+
+
Text only
+ +
+
+
Icon only
+ +
+
+
Belt line
+ +
+ +
+ +
+ +
+
+
ICONS change colors only
+ +
+
+
Customize the outermost layer
+ +
+
+
customize Tab
+ +
+
+
Only customize selected Tab
+ +
+
+
Custom line
+ +
+
+
Care edition
+ +
+
+
monitor onchange event
+
At present TabBar activated active：{active}
+ (active = a)} /> +
+
+
+
+ +
diff --git a/src/routes/en_US/tabs/+page.svelte b/src/routes/en_US/tabs/+page.svelte new file mode 100644 index 0000000..d67f9f3 --- /dev/null +++ b/src/routes/en_US/tabs/+page.svelte @@ -0,0 +1,218 @@ + + + +
+
use Tabs
+
+
Basic usage
+ + I am a plane + I am a ship + I am a train + I am a car + + + +
Accelerate the transition
+ + I am a plane + I am a ship + I am a train + I am a car + + + +
Transition mitigation
+ + I am a plane + I am a ship + I am a train + I am a car + + + +
Use linear style
+ + I am a plane + I am a ship + I am a train + I am a car + + + +
The TAB is located at the bottom
+ + I am a plane + I am a ship + I am a train + I am a car + + + +
The TAB is located on the left
+ + {#snippet children({ active })} + I am a plane + I am a ship + I am a train + I am a car + {/snippet} + + + +
The TAB is located on the right
+ + {#snippet children({ active })} + I am a plane + I am a ship + I am a train + I am a car + {/snippet} + + + +
Custom transition
+ + {#snippet children({ active })} +
+ {#each labels as item, i} + {#if active === i} +
I am {item.text}
+ {/if} + {/each} +
+ {/snippet} + + + +
monitor change event
+ + I am a plane + I am a ship + I am a train + I am a car + +
At present Tabs activated active：{changeActive}
+ + +
Overflow mode
+ + {#each overflowLabels as item} + I am {item.text} + {/each} + + + {#each overflowLabels as item} + I am {item.text} + {/each} + + + +
Overflow mode closes automatic scrolling
+ + {#each overflowLabels as item} + I am {item.text} + {/each} + + + +
Overflow mode shows 2 items
+ + {#each overflowLabels as item} + I am {item.text} + {/each} + +
+ + +
different Tab style
+
+
Different fillet
+ + + + + +
Match text with ICONS
+ + + + +
Care edition
+ + +
Linear style
+ + + +
customize Tab Outer style
+ + +
customize Tab style
+ + +
Custom selection Tab style
+ + +
Customize the indicator style
+ + + +
Different mx
+
+ + + + +
+
+ + +
Use alone Tab
+
+ +
At present Tab clickable active：{active}
+
+ +
diff --git a/src/routes/en_US/timePicker/+page.svelte b/src/routes/en_US/timePicker/+page.svelte new file mode 100644 index 0000000..070931f --- /dev/null +++ b/src/routes/en_US/timePicker/+page.svelte @@ -0,0 +1,139 @@ + + + +
+
+ {#if defaultTimeStr !== ''} + Currently selected: + {defaultTimeStr} + {:else} +
Please select a time
+ {/if} +
+ (visible1 = true)} /> + (defaultTimeStr = time)} /> + + (visible2 = true)} /> + + + (visible3 = true)} /> + + + (visible4 = true)} /> + + + (visible5 = true)} /> + + + (visible6 = true)} /> + + + (visible8 = true)} /> + + + (visible22 = true)} /> + + + (visible9 = true)} /> + + + (visible10 = true)} /> + + + (visible11 = true)} /> + + + (visible12 = true)} /> + + + (visible13 = true)} /> + + +
+ {#if customFormatStr !== ''} + Currently selected: + {customFormatStr} + {:else} +
Please select a time
+ {/if} +
+ (visible15 = true)} + /> + (customFormatStr = timeStr)} + /> + +
+ {#if monthFirstStr !== ''} + Currently selected: + {monthFirstStr} + {:else} +
Please select a time
+ {/if} +
+ (visible16 = true)} /> + (monthFirstStr = timeStr)} /> + +
+ Currently selected:
+ {timeObjStr} +
+ (visible17 = true)} /> + (timeObj = obj)} /> + + (visible14 = true)} /> + + + (visible18 = true)} /> + + + (visible19 = true)} /> + + + (visible20 = true)} /> + + + (visible21 = true)} /> + +
diff --git a/src/routes/en_US/toast/+page.svelte b/src/routes/en_US/toast/+page.svelte new file mode 100644 index 0000000..3a45ad2 --- /dev/null +++ b/src/routes/en_US/toast/+page.svelte @@ -0,0 +1,175 @@ + + + +
+ (visible1 = true)} /> + + + (visible2 = true)} /> + + + (visible3 = true)} /> + + + (visible4 = true)} /> + + + (visible5 = true)} /> + + + (visible6 = true)} /> + + + (visible7 = true)} /> + + + (visible8 = true)} /> + + + (visible9 = true)} /> + + + (visible30 = true)} /> + + + (visible31 = true)} /> + + + (visible32 = true)} /> + + + (visible27 = true)} /> + + + (visible10 = true)} /> + + + (visible11 = true)} /> + + + (visible12 = true)} /> + + + (visible13 = true)} /> + + + (visible14 = true)} /> + + + (visible15 = true)} /> + + + (visible16 = true)} /> + + + (visible17 = true)} /> + + + (visible18 = true)} /> + + + (visible19 = true)} /> + + + (visible20 = true)} /> + + + (visible28 = true)} /> + + + (visible29 = true)} /> + + + (visible21 = true)} /> + + + (visible22 = true)} /> + + + (visible23 = true)} /> + + + (visible24 = true)} /> + + + + +
+
Customize the prompt content
+ +
Close in {time} seconds
+
+ + + (visible26 = true)} /> + +
+ +
+
+ +
+
diff --git a/src/routes/zh_CN/actionSheet/+page.svelte b/src/routes/zh_CN/actionSheet/+page.svelte new file mode 100644 index 0000000..ed84763 --- /dev/null +++ b/src/routes/zh_CN/actionSheet/+page.svelte @@ -0,0 +1,101 @@ + + + +
+ (visible1 = true)} /> + + + (visible2 = true)} /> + + + (visible3 = true)} /> + + + (visible4 = true)} /> + + + (visible5 = true)} /> + + + (visible6 = true)} /> + + + (visible7 = true)} /> + (toastVisible1 = true)} /> + + + (visible8 = true)} /> + (toastVisible2 = true)} /> + + + (visible9 = true)} /> + + + + (visible10 = true)} /> + + + (visible11 = true)} /> + + + (visible12 = true)} /> + +
diff --git a/src/routes/zh_CN/asyncPicker/+page.svelte b/src/routes/zh_CN/asyncPicker/+page.svelte new file mode 100644 index 0000000..b618f4a --- /dev/null +++ b/src/routes/zh_CN/asyncPicker/+page.svelte @@ -0,0 +1,749 @@ + + + +
+
+ {#if allItems.length} + 当前选定了： + {#each allItems as item} + {item.label} + {/each} + {:else} +
请选定数据
+ {/if} +
+
+ {#if allIndexs.length} + 当前选定值位于所在列的索引值分别为： + {#each allIndexs as index} + {index} + {/each} + {:else} +
请选定数据
+ {/if} +
+ { + visible1 = true; + data = linkageData; + lastLevel = false; + firstLevel = true; + currentLevel = 0; + level1Data = linkageData[0].children; + }} + /> + + + { + visible2 = true; + data = linkageData; + lastLevel = false; + firstLevel = true; + currentLevel = 0; + level1Data = linkageData[0].children; + }} + /> + + + { + visible3 = true; + data = linkageData; + lastLevel = false; + firstLevel = true; + currentLevel = 0; + level1Data = linkageData[0].children; + }} + /> + + + { + visible5 = true; + data = linkageData; + lastLevel = false; + firstLevel = true; + currentLevel = 0; + level1Data = linkageData[0].children; + }} + /> + + + { + visible4 = true; + diffLabelKeyData = linkageDiffLabeData; + labelKey = 'province'; + diffLabelKeyCurrentLevel = 0; + diffLabelKeyLastLevel = false; + diffLabelKeyFirstLevel = true; + diffLabelKeyLevel1Data = linkageDiffLabeData[0].children; + }} + /> + + + { + visible6 = true; + data = linkageData; + lastLevel = false; + firstLevel = true; + currentLevel = 0; + level1Data = linkageData[0].children; + }} + /> + + + { + visible8 = true; + data = linkageData; + lastLevel = false; + firstLevel = true; + currentLevel = 0; + level1Data = linkageData[0].children; + }} + /> + + + { + visible7 = true; + data = linkageData; + lastLevel = false; + firstLevel = true; + currentLevel = 0; + level1Data = linkageData[0].children; + }} + /> + + + { + visible9 = true; + data = linkageData; + lastLevel = false; + firstLevel = true; + currentLevel = 0; + titleBind = '请选择省级'; + level1Data = linkageData[0].children; + }} + /> + +
+ diff --git a/src/routes/zh_CN/asyncPicker/data.js b/src/routes/zh_CN/asyncPicker/data.js new file mode 100644 index 0000000..1e267fc --- /dev/null +++ b/src/routes/zh_CN/asyncPicker/data.js @@ -0,0 +1,426 @@ +const linkageData = [ + { + label: '云南', + children: [ + { + label: '昆明', + children: [ + { label: '盘龙区' }, + { label: '五华区' }, + { label: '官渡区' }, + { label: '西山区' }, + { label: '东川区' }, + { label: '呈贡区' }, + { label: '晋宁区' }, + { label: '富民县' }, + { label: '宜良县' }, + { label: '石林彝族自治县' }, + { label: '嵩明县' }, + { label: '禄劝彝族苗族自治县' }, + { label: '寻甸回族彝族自治县' }, + { label: '安宁市' }, + ], + }, + { + label: '曲靖', + children: [ + { label: '麒麟区' }, + { label: '沾益区' }, + { label: '马龙县' }, + { label: '陆良县' }, + { label: '师宗县' }, + { label: '罗平县' }, + { label: '富源县' }, + { label: '会泽县' }, + { label: '宣威市' }, + ], + }, + { + label: '玉溪', + children: [ + { label: '红塔区' }, + { label: '江川区' }, + { label: '澄江县' }, + { label: '通海县' }, + { label: '华宁县' }, + { label: '易门县' }, + { label: '峨山彝族自治县' }, + { label: '新平彝族傣族自治县' }, + { label: '元江哈尼族彝族傣族自治县' }, + ], + }, + { + label: '保山', + children: [ + { label: '隆阳区' }, + { label: '施甸县' }, + { label: '龙陵县' }, + { label: '昌宁县' }, + { label: '腾冲市' }, + { label: '龙陵县' }, + ], + }, + { + label: '丽江', + children: [ + { label: '古城区' }, + { label: '永胜县' }, + { label: '华坪县' }, + { label: '玉龙纳西族自治县' }, + { label: '宁蒗彝族自治县' }, + ], + }, + { + label: '普洱', + children: [ + { label: '思茅区' }, + { label: '宁洱哈尼族彝族自治县' }, + { label: '墨江哈尼族自治县' }, + { label: '景东彝族自治县' }, + { label: '景谷傣族彝族自治县' }, + { label: '镇沅彝族哈尼族拉祜族自治县' }, + { label: '江城哈尼族彝族自治县' }, + { label: '孟连傣族拉祜族佤族自治县' }, + { label: '澜沧拉祜族自治县' }, + { label: '西盟佤族自治县' }, + ], + }, + { + label: '临沧', + children: [ + { label: '临翔区' }, + { label: '凤庆县' }, + { label: '云县' }, + { label: '永德县' }, + { label: '镇康县' }, + { label: '双江拉祜族佤族布朗族傣族自治县' }, + { label: '耿马傣族佤族自治县' }, + { label: '沧源佤族自治县' }, + ], + }, + { + label: '楚雄', + children: [ + { label: '楚雄市' }, + { label: '双柏县' }, + { label: '牟定县' }, + { label: '南华县' }, + { label: '姚安县' }, + { label: '大姚县' }, + { label: '永仁县' }, + { label: '元谋县' }, + { label: '武定县' }, + { label: '禄丰县' }, + ], + }, + { + label: '红河', + children: [ + { label: '个旧市' }, + { label: '开远市' }, + { label: '蒙自市' }, + { label: '弥勒市' }, + { label: '屏边苗族自治县' }, + { label: '建水县' }, + { label: '石屏县' }, + { label: '泸西县' }, + { label: '元阳县' }, + { label: '红河县' }, + { label: '金平苗族瑶族傣族自治县' }, + { label: '绿春县' }, + { label: '河口瑶族自治县' }, + ], + }, + { + label: '文山', + children: [ + { label: '文山市' }, + { label: '砚山县' }, + { label: '西畴县' }, + { label: '麻栗坡县' }, + { label: '马关县' }, + { label: '丘北县' }, + { label: '广南县' }, + { label: '富宁县' }, + ], + }, + ], + }, + { + label: '广东', + children: [ + { + label: '广州', + children: [ + { label: '天河区' }, + { label: '海珠区' }, + { label: '荔湾区' }, + { label: '越秀区' }, + { label: '白云区' }, + { label: '黄埔区' }, + ], + }, + { + label: '深圳', + children: [ + { label: '罗湖区' }, + { label: '福田区' }, + { label: '南山区' }, + { label: '宝安区' }, + { label: '龙岗区' }, + { label: '盐田区' }, + ], + }, + { + label: '珠海', + children: [{ label: '香洲区' }, { label: '斗门区' }, { label: '金湾区' }], + }, + { + label: '汕头', + children: [ + { label: '龙湖区' }, + { label: '金平区' }, + { label: '濠江区' }, + { label: '潮阳区' }, + { label: '潮南区' }, + { label: '澄海区' }, + ], + }, + { + label: '佛山', + children: [{ label: '禅城区' }, { label: '南海区' }, { label: '顺德区' }, { label: '三水区' }, { label: '高明区' }], + }, + ], + }, + { + label: '四川', + children: [ + { + label: '成都', + children: [ + { label: '锦江区' }, + { label: '青羊区' }, + { label: '金牛区' }, + { label: '武侯区' }, + { label: '成华区' }, + { label: '龙泉驿区' }, + ], + }, + { + label: '绵阳', + children: [ + { label: '涪城区' }, + { label: '游仙区' }, + { label: '安州区' }, + { label: '三台县' }, + { label: '盐亭县' }, + { label: '梓潼县' }, + ], + }, + { + label: '自贡', + children: [ + { label: '自流井区' }, + { label: '贡井区' }, + { label: '大安区' }, + { label: '沿滩区' }, + { label: '荣县' }, + { label: '富顺县' }, + ], + }, + { + label: '攀枝花', + children: [{ label: '东区' }, { label: '西区' }, { label: '仁和区' }, { label: '米易县' }, { label: '盐边县' }], + }, + ], + }, + { + label: '北京', + children: [ + { + label: '北京市', + children: [ + { label: '东城区' }, + { label: '西城区' }, + { label: '朝阳区' }, + { label: '丰台区' }, + { label: '石景山区' }, + { label: '海淀区' }, + ], + }, + ], + }, + { + label: '浙江', + children: [ + { + label: '杭州', + children: [ + { label: '上城区' }, + { label: '下城区' }, + { label: '江干区' }, + { label: '拱墅区' }, + { label: '西湖区' }, + { label: '滨江区' }, + ], + }, + { + label: '宁波', + children: [ + { label: '海曙区' }, + { label: '江东区' }, + { label: '江北区' }, + { label: '北仑区' }, + { label: '镇海区' }, + { label: '鄞州区' }, + ], + }, + { + label: '温州', + children: [ + { label: '鹿城区' }, + { label: '龙湾区' }, + { label: '瓯海区' }, + { label: '洞头区' }, + { label: '永嘉县' }, + { label: '平阳县' }, + ], + }, + { + label: '嘉兴', + children: [ + { label: '南湖区' }, + { label: '秀洲区' }, + { label: '嘉善县' }, + { label: '海盐县' }, + { label: '海宁市' }, + { label: '平湖市' }, + ], + }, + { + label: '湖州', + children: [{ label: '吴兴区' }, { label: '南浔区' }, { label: '德清县' }, { label: '长兴县' }, { label: '安吉县' }], + }, + ], + }, +]; + +const linkageDiffLabeData = [ + { + province: '云南', + children: [ + { + city: '昆明', + children: [ + { region: '盘龙区' }, + { region: '五华区' }, + { region: '官渡区' }, + { region: '西山区' }, + { region: '东川区' }, + { region: '呈贡区' }, + { region: '晋宁区' }, + { region: '富民县' }, + { region: '宜良县' }, + { region: '石林彝族自治县' }, + { region: '嵩明县' }, + { region: '禄劝彝族苗族自治县' }, + { region: '寻甸回族彝族自治县' }, + { region: '安宁市' }, + ], + }, + { + city: '曲靖', + children: [ + { region: '麒麟区' }, + { region: '沾益区' }, + { region: '马龙县' }, + { region: '陆良县' }, + { region: '师宗县' }, + { region: '罗平县' }, + { region: '富源县' }, + { region: '会泽县' }, + { region: '宣威市' }, + ], + }, + { + city: '玉溪', + children: [ + { region: '红塔区' }, + { region: '江川区' }, + { region: '澄江县' }, + { region: '通海县' }, + { region: '华宁县' }, + { region: '易门县' }, + { region: '峨山彝族自治县' }, + { region: '新平彝族傣族自治县' }, + { region: '元江哈尼族彝族傣族自治县' }, + ], + }, + { + city: '保山', + children: [ + { region: '隆阳区' }, + { region: '施甸县' }, + { region: '龙陵县' }, + { region: '昌宁县' }, + { region: '腾冲市' }, + { region: '龙陵县' }, + ], + }, + { + city: '丽江', + children: [ + { region: '古城区' }, + { region: '永胜县' }, + { region: '华坪县' }, + { region: '玉龙纳西族自治县' }, + { region: '宁蒗彝族自治县' }, + ], + }, + { + city: '普洱', + children: [ + { region: '思茅区' }, + { region: '宁洱哈尼族彝族自治县' }, + { region: '墨江哈尼族自治县' }, + { region: '景东彝族自治县' }, + { region: '景谷傣族彝族自治县' }, + { region: '镇沅彝族哈尼族拉祜族自治县' }, + { region: '江城哈尼族彝族自治县' }, + { region: '孟连傣族拉祜族佤族自治县' }, + { region: '澜沧拉祜族自治县' }, + { region: '西盟佤族自治县' }, + ], + }, + ], + }, + { + province: '广东', + children: [ + { + city: '广州', + children: [ + { region: '天河区' }, + { region: '海珠区' }, + { region: '荔湾区' }, + { region: '越秀区' }, + { region: '白云区' }, + { region: '黄埔区' }, + ], + }, + { + city: '深圳', + children: [ + { region: '罗湖区' }, + { region: '福田区' }, + { region: '南山区' }, + { region: '宝安区' }, + { region: '龙岗区' }, + { region: '盐田区' }, + ], + }, + ], + }, +]; + +export { linkageData, linkageDiffLabeData }; diff --git a/src/routes/zh_CN/avatar/+page.svelte b/src/routes/zh_CN/avatar/+page.svelte new file mode 100644 index 0000000..57f0603 --- /dev/null +++ b/src/routes/zh_CN/avatar/+page.svelte @@ -0,0 +1,137 @@ + + + +
+
不同圆角
+
+ + + + + +
+ +
不同图片类型与大小
+
+ + + + +
+ +
自定义背景色
+
+ + + + +
+ +
不同边框
+
+ + + + +
+ +
替换文本
+
+ + + + +
+ +
替换 Icon
+
+ {#each icons as icon} + + {/each} +
+ +
不同大小
+
+
+ + + + + +
+
+ + + + + +
+
+ + + +
头像组
+
默认
+ + +
小点
+ + +
宽松一点
+ + +
边框粗点
+ + +
圆角小点
+ + +
反向
+ + +
最多显示 6 个
+ + +
顶层显示增加
+ + +
不显示顶层
+ + +
自定义顶层
+ + {#snippet top()} + + {/snippet} + +
diff --git a/src/routes/zh_CN/badge/+page.svelte b/src/routes/zh_CN/badge/+page.svelte new file mode 100644 index 0000000..3516415 --- /dev/null +++ b/src/routes/zh_CN/badge/+page.svelte @@ -0,0 +1,85 @@ + + + +
+
基础用法
+
+ + + + +
+ +
不同圆角
+
+ + + + +
+ +
位于左侧
+
+ + + + +
+ +
搭配其他组件
+
+ + + +
+ + + + {#snippet detailChild()} + + {/snippet} + + + {#snippet detailChild()} + + {/snippet} + + + {#snippet detailChild()} + + {/snippet} + + + {#snippet detailChild()} + + {/snippet} + + +
徽标动画
+
+ + + + +
+ + {#snippet detailChild()} + + {/snippet} + + + +
自定义背景色与边框
+
+ + + + + + +
+
diff --git a/src/routes/zh_CN/bottomSheet/+page.svelte b/src/routes/zh_CN/bottomSheet/+page.svelte new file mode 100644 index 0000000..1b86ca9 --- /dev/null +++ b/src/routes/zh_CN/bottomSheet/+page.svelte @@ -0,0 +1,149 @@ + + + +
+ (visible1 = true)} /> + +
+
这里是内容区域
+
+ + + (visible8 = true)} /> + + + + + (visible2 = true)} /> + (toastBackVisible = true)} + onclose={() => (toastCloseVisible = true)} + > + + + + + + (visible3 = true)} /> + + + + + (visible4 = true)} /> + + + + + (visible5 = true)} /> + + + + + (visible6 = true)} /> + + + + + (visible7 = true)} /> + + + + + (visible9 = true)} /> + +
+
头部区域
+
标题
+
返回与关闭图标
+
分割线
+
都不显示
+
位置依旧保留作为滑动触控区域
+
+ +
+
+ + + (visible10 = true)} /> + + + + + (visible13 = true)} /> + + + + + (visible14 = true)} /> + + + + + (visible12 = true)} /> + + + + + (visible11 = true)} /> + +
将 closeHeight 设置为 10，如果滑动结束时位置距离页面底部小于页面高度的 10% 则自动关闭。
+ +
+ + + diff --git a/src/routes/zh_CN/button/+page.svelte b/src/routes/zh_CN/button/+page.svelte new file mode 100644 index 0000000..642073b --- /dev/null +++ b/src/routes/zh_CN/button/+page.svelte @@ -0,0 +1,168 @@ + + + +
+
+
不同状态色
+ + + + + +
+
+
不同圆角风格
+ + + + + +
+
+
不同填充模式
+ + + + + + + +
+
+
不同边框风格
+ + + +
+
+
不同大小
+ + + + + + +
+
+
不同高度
+ + +
+
+
固定大小
+
+ + + + + + + + +
+
+
+
禁用
+ + +
+
+
带图标
+ + +
+
+
带加载（默认禁用）
+ + + +
+
+
带图标（通过 Snippet 传入）
+ + +
+
+
加载（通过 Snippet 传入）
+ + +
+
+
关爱版
+ + +
+
+
自定义
+ + + + + +
+
+
按钮组
+ + + +
+ + + + +
+ + + + diff --git a/src/routes/zh_CN/calendar/+page.svelte b/src/routes/zh_CN/calendar/+page.svelte new file mode 100644 index 0000000..9339b48 --- /dev/null +++ b/src/routes/zh_CN/calendar/+page.svelte @@ -0,0 +1,185 @@ + + + +
+ (visible1 = true)} /> + + + (visible7 = true)} /> + + + (visible8 = true)} /> + + + (visible2 = true)} /> + + + (visible3 = true)} /> + + + (visible4 = true)} /> + + + (visible5 = true)} /> + + + (visible6 = true)} /> + + + (visible9 = true)} /> + + + (visible10 = true)} /> + + + (visible18 = true)} /> + + + (visible11 = true)} /> + + + (visible19 = true)} /> + + + (visible12 = true)} /> + + + (visible13 = true)} /> + + + (visible14 = true)} /> + + + (visible15 = true)} /> + + + (visible16 = true)} /> + + + (visible23 = true)} /> + + + (visible17 = true)} /> + + +
+ {#if selectedDates.length} + 当前选定了以下共 {selectedDates.length} 天： + {:else} +
请选定日期
+ {/if} +
+
+ {#each selectedDates as item} +
{item}
+ {/each} +
+ (visible20 = true)} /> + + +
+ {#if selectedFormatDates.length} + 当前选定了以下共 {selectedFormatDates.length} 天： + {:else} +
请选定日期
+ {/if} +
+
+ {#each selectedFormatDates as item} +
{item}
+ {/each} +
+ (visible21 = true)} /> + + + (visible22 = true)} /> + + + (visible24 = true)} /> + +
diff --git a/src/routes/zh_CN/cell/+page.svelte b/src/routes/zh_CN/cell/+page.svelte new file mode 100644 index 0000000..14072aa --- /dev/null +++ b/src/routes/zh_CN/cell/+page.svelte @@ -0,0 +1,120 @@ + + + +
+
+ + + + {#snippet detailChild()} + 我是 Snippet + {/snippet} + + + + (visible = true)} /> + + + + + + + + + + + {#snippet leftChild()} +
+ +
+ {/snippet} + + + {#snippet leftChild()} +
+ +
+ {/snippet} + {#snippet rightChild()} +
+ +
+ {/snippet} + + + {#snippet leftChild()} +
+ +
+ {/snippet} + + + + + + + + + {#snippet leftChild()} +
+ +
+ {/snippet} + + + + {#snippet leftChild()} +
+ +
+ {/snippet} + +
+ + + + + + + + + + + + + + +
+ + + + + + + + + +
+
+ + +
+
+ + + +
+
diff --git a/src/routes/zh_CN/checkbox/+page.svelte b/src/routes/zh_CN/checkbox/+page.svelte new file mode 100644 index 0000000..e857141 --- /dev/null +++ b/src/routes/zh_CN/checkbox/+page.svelte @@ -0,0 +1,315 @@ + + + +
+
横向排列
+
简单用法
+ + + +
文字在不同位置
+ + + + + + + +
自定义图标
+ + + + + + + + + + + +
Snippet 为 Button 组件
+ + {#snippet checkboxChild({ item })} + + {/snippet} + + + +
Snippet 为自定义元素
+ + {#snippet checkboxChild({ item })} + + {/snippet} + + + +
图片选项
+ + {#snippet checkboxChild({ item })} +
+ + +
{ + dotaImgsFun(item.name); + }} + > + +
+
+ +
+
+ {/snippet} + +
+ {imgCheckeds.length > 0 ? '已选' : '未选择任何英雄'} + {imgCheckeds.join(' + ')} +
+ +
+ +
+
行内元素排列
+
Snippet 行内元素排列
+ + {#snippet checkboxChild({ item })} + + +
{ + dotaInlineFun(item.name); + }} + > + {item.label} +
+ {/snippet} + +
已选：{checkInlines.join('-')}
+
+ + +
+
纵向排列
+
基础用法
+ + + +
长文字选项
+ + + +
文字靠左
+ + +
复杂选项 && 自定义选中效果
+ + {#snippet checkboxChild({ item })} + + +
dotaVoicesFun(item.name)}> +
+ +
+
+ {item.label} + {#each item.voices as voice} +
{voice}
+ {/each} +
+
+
+ {/snippet} + + +
批量操作
+ +
已选：{checkDotas.map(a => dotaAll.find(b => b.name === a).label).join('-')}
+
未选：{noCheckDotas.map(a => dotaAll.find(b => b.name === a).label).join('-')}
+
+
+ +
+
+ +
+
+ +
+
+ + +
带动画
+
+
+
未选
+ {#each animateNos as item (item)} +
+ {item} +
+ {/each} +
+
+
已选
+ {#each animateYess as item (item)} +
+ {item} +
+ {/each} +
+
+
diff --git a/src/routes/zh_CN/dialog/+page.svelte b/src/routes/zh_CN/dialog/+page.svelte new file mode 100644 index 0000000..5199ad3 --- /dev/null +++ b/src/routes/zh_CN/dialog/+page.svelte @@ -0,0 +1,168 @@ + + + +
+ (visible1 = true)} /> + + + (visible2 = true)} /> + + {#snippet contentChild()} + + {/snippet} + + + (visible3 = true)} /> + + + (visible5 = true)} /> + + + (visible6 = true)} /> + + + (visible4 = true)} /> + + {#snippet contentChild()} +
+ +
+ {/snippet} + + + (visible11 = true)} /> + + + (visible7 = true)} /> + + + (visible8 = true)} /> + + + (visible9 = true)} /> + + + (visible10 = true)} /> + + + (visible19 = true)} /> + + + (visible12 = true)} /> + + + (visible13 = true)} /> + + + (visible15 = true)} /> + + + (visible14 = true)} /> + (toastVisible = true)} /> + + + (visible16 = true)} /> + (toastVisible2 = true)} /> + + + (visible17 = true)} /> + (toastVisible3 = true)} /> + + + (visible18 = true)} /> + + {#snippet primaryChild()} + + {#if loading} + + {:else} + 进入 + {/if} + + {/snippet} + + +
+ + + diff --git a/src/routes/zh_CN/divider/+page.svelte b/src/routes/zh_CN/divider/+page.svelte new file mode 100644 index 0000000..413f7a7 --- /dev/null +++ b/src/routes/zh_CN/divider/+page.svelte @@ -0,0 +1,78 @@ + + + +
+
+
不同长度
+ + + + + +
+
+
包含文字
+ + +
+
+
不同高度
+
开始
+ +
高度为0
+ +
高度为4
+ +
高度为8
+
+ +
+
文字位置
+ + + +
+
+
线条风格
+ + + +
+
+
自定义颜色
+ + + + + +
+
+
垂直分割线
+
+ 三日凌空三日连珠人列计算机 +
+
+
+
不同粗细
+ + + +
+ 执剑人三日凌空三日连珠人列计算机 +
+
+
+
自定义垂直分割线
+
+ 加大间距 + + 自定义 + + 颜色 + + 与线条风格 +
+
+
diff --git a/src/routes/zh_CN/grids/+page.svelte b/src/routes/zh_CN/grids/+page.svelte new file mode 100644 index 0000000..a0c2f2a --- /dev/null +++ b/src/routes/zh_CN/grids/+page.svelte @@ -0,0 +1,292 @@ + + + +
使用占位符示例 3﹡4
+ + + 3﹡1 + + + 1﹡3 + + + 2﹡1 + + + 1﹡2 + + + 1﹡1 + + + 1﹡1 + + + +
使用占位符示例 4﹡6
+ + + 3﹡2 + + + 1﹡3 + + + 4﹡1 + + + 2﹡1 + + + 1﹡1 + + + 1﹡1 + + + 1﹡1 + + + 1﹡1 + + + 1﹡1 + + + 1﹡4 + + + +
增加外边距与单元格间距
+ + + 3﹡1 + + + 1﹡3 + + + 2﹡1 + + + 1﹡2 + + + 1﹡1 + + + 1﹡1 + + + +
场景示例 6﹡5
+
+
+ + +
+
{weekDay}
+
{day}
+
{month}
+
+ + +
+ {time} +
+ + +
+
+ + {#snippet falseChild()} +
+ +
+ {/snippet} + {#snippet trueChild()} +
+ +
+ {/snippet} + +
+
彩色
+
+ + + +
+ +
+ + +
+
+ {#if currentDevice === 'iOS'} + + {:else if currentDevice === 'Android'} + + {:else if currentDevice === 'Windows'} + + {:else if currentDevice === 'macOS'} + + {:else} + + {/if} +
+
+
+ {#if currentDevice === 'iOS'} + A15 Bionic + {:else if currentDevice === 'Android'} + 骁龙8 Gen1 + {:else if currentDevice === 'Windows'} + AMD YES + {:else if currentDevice === 'macOS'} + M1 Ultra + {:else} + Intel + {/if} +
+
+ {#if currentDevice === 'iOS'} + iPhone + {:else if currentDevice === 'Android'} + Android + {:else if currentDevice === 'Windows'} + Windows + {:else if currentDevice === 'macOS'} + MacBook Pro + {:else} + Ubuntu + {/if} +
+
+
+ + +
+
+ + {#snippet falseChild()} +
+ +
+ {/snippet} + {#snippet trueChild()} +
+ +
+ {/snippet} + +
+
蓝 牙
+
+ + +
+
+ + +
+
STDF
+
+ + +
+
92%
+
+ +
+
充电中
+
+ + +
+ {#if currentDevice === 'iOS'} + + {:else if currentDevice === 'Android'} + + {:else if currentDevice === 'Windows'} + + {:else if currentDevice === 'macOS'} + + {:else} + + {/if} +
+ + +
+
+ +
+
+
68%
+
+
+ + +
+
+ + {#snippet falseChild()} +
+ +
+ {/snippet} + {#snippet trueChild()} +
+ +
+ {/snippet} + +
+
Wi-Fi
+
+ + +
+
diff --git a/src/routes/zh_CN/icon/+page.svelte b/src/routes/zh_CN/icon/+page.svelte new file mode 100644 index 0000000..2216450 --- /dev/null +++ b/src/routes/zh_CN/icon/+page.svelte @@ -0,0 +1,112 @@ + + + +
+
+
基础用法
+
+ {#each icons as icon} +
+ +
{icon}
+
+ {/each} +
+
+
+
跟随主题色
+
+ {#each icons as icon} +
+ +
+ {/each} +
+
+
+
不同大小
+
+ {#each icons as icon, i} +
+ +
{18 + i * 6}
+
+ {/each} +
+
+
+
不同透明度
+
+ {#each icons as icon, i} +
+ +
{(0.2 + i * 0.2).toFixed(1)}
+
+ {/each} +
+
+
+
+ 自定义颜色通过 injClass +
+
+ {#each icons as icon} +
+ +
+ {/each} +
+
+
+
+ 自定义颜色通过 Snippet +
+
+ {#each icons as icon} +
+ +
+ {/each} +
+
+
+
Snippet
+
+ {#each icons as icon, index} +
+ + + +
+ {/each} +
+
+
+
偏移
+
+ {#each icons as icon, i} +
+ + top:{-4 + i * 2} +
+ {/each} +
+
+
diff --git a/src/routes/zh_CN/icon/allIcon.md b/src/routes/zh_CN/icon/allIcon.md new file mode 100644 index 0000000..fa5e315 --- /dev/null +++ b/src/routes/zh_CN/icon/allIcon.md @@ -0,0 +1,124 @@ +Demo 中用到的所有 svg 图标 + +- account-circle-fill +- account-circle-line +- aliens-fill +- android-fill +- apple-fill +- apps-2-line +- arrow-down-s-line +- arrow-left-s-line +- arrow-right-s-line +- arrow-up-s-fill +- arrow-up-s-line +- bank-line +- barcode-fill +- battery-2-charge-line +- battery-charge-line +- bear-smile-line +- bluetooth-connect-line +- bluetooth-line +- cake-2-fill +- car-line +- check-fill +- check-line +- checkbox-blank-circle-line +- checkbox-circle-fill +- checkbox-circle-line +- checkbox-fill +- checkbox-line +- checkbox-multiple-fill +- checkbox-multiple-line +- chrome-fill +- close-circle-fill +- close-circle-line +- close-fill +- close-line +- code-box-fill +- command-fill +- command-line +- compass-3-fill +- compass-3-line +- compass-line +- computer-line +- cup-fill +- cup-line +- customer-service-2-line +- discuss-fill +- discuss-line +- drag-move-line +- delete-back-2-line +- emotion-line +- emotion-sad-fill +- emotion-sad-line +- error-warning-line +- fingerprint-line +- github-fill +- hand-heart-line +- heart-3-fill +- home-3-fill +- home-3-line +- home-7-line +- hotel-bed-fill +- hotel-bed-line +- image-2-fill +- indent-decrease +- information-line +- lock-line +- macbook-fill +- medal-fill +- mic-off-fill +- money-cny-circle-line +- moon-fill +- moon-line +- more-fil +- more-line +- movie-2-fill +- notification-2-line +- paint-brush-fill +- paint-brush-line +- parent-line +- phone-fill +- plane-fill +- plane-line +- qr-code-fill +- qr-scan-line +- radio-button-fill +- radio-button-line +- restaurant-2-fill +- restaurant-2-line +- riding-line +- send-plane-line +- service-line +- share-forward-2-fill +- share-forward-line +- share-line +- shield-user-line +- ship-2-line +- shopping-basket-line +- smartphone-line +- spy-fill +- star-fill +- star-line +- sun-line +- surgical-mask-fill +- survey-fill +- survey-line +- switch-fill +- skip-down-line +- tablet-line +- thumb-up-fill +- train-line +- ubuntu-fill +- ubuntu-line +- user-3-line +- user-smile-line +- volume-down-line +- volume-mute-line +- volume-up-line +- wifi-line +- wifi-off-line +- windows-fill +- wireless-charging-line +- zzz-fill +- zzz-lin diff --git a/src/routes/zh_CN/indexBar/+page.svelte b/src/routes/zh_CN/indexBar/+page.svelte new file mode 100644 index 0000000..2c57f7e --- /dev/null +++ b/src/routes/zh_CN/indexBar/+page.svelte @@ -0,0 +1,183 @@ + + + +{#if dataFlag === 0} + { + toastObj = { index, group, childIndex, child }; + visible = true; + }} + /> +{:else if dataFlag === 1} + { + toastObj = { index, group, childIndex, child }; + visible = true; + }} + /> +{:else} + { + toastObj = { index, group, childIndex, child }; + visible = true; + }} + /> +{/if} + + +
+ + + + +
diff --git a/src/routes/zh_CN/input/+page.svelte b/src/routes/zh_CN/input/+page.svelte new file mode 100644 index 0000000..a9e47bc --- /dev/null +++ b/src/routes/zh_CN/input/+page.svelte @@ -0,0 +1,266 @@ + + + +
基础用法
+ + +
不带标题
+ + +
自定义 placeholder
+ + +
+ 不同输入类型 + {#if isIframe} + 请在移动设备查看键盘类型 + {/if} +
+ + + + + + + + + + + +
线性风格
+ + + + +
不同过渡时间
+ + + + + + +
不同标题位置
+ + + + +
不同输入文字位置
+ + + +
不同圆角风格
+ + + + + + +
不同垂直间距
+ + + + + + + +
带清除
+ + +
禁用
+ + +
不同状态色
+ + + + + + + + +
左侧带图标
+ + + +
左侧带文字
+ + +
左侧带图标与文字
+ + +
左侧带文字与图标
+ + +
左侧带图标、文字、图标
+ + +
右侧带图标
+ + + +
右侧带文字
+ + +
右侧带图标与文字
+ + +
右侧带文字与图标
+ + +
右侧带图标、文字、图标
+ + +
左侧带文字右侧带图标
+ + +
左右六项全带
+ + +
提示信息与数据项组合
+ + + + + + + +
展示所有可配置项
+ + +
label1 和 label4 使用 Snippet
+ + {#snippet label1Child()} +
+ + + + +
+ {/snippet} + {#snippet label4Child()} +
+ +
+ {/snippet} + + +
动态显示
+ + {#snippet label5Child()} +
+ {#if mobileLength === 11} + + {:else if mobileLength === 0}{:else} + + {/if} +
+ {/snippet} + + +
绑定 value
+ + + + +
点击 label4 触发事件
+ + +
textarea
+ + +
textarea 自动高度
+ + +
监听 keydown 事件
+
你按下了 {key}
+ (key = v)} /> diff --git a/src/routes/zh_CN/loading/+page.svelte b/src/routes/zh_CN/loading/+page.svelte new file mode 100644 index 0000000..f18975e --- /dev/null +++ b/src/routes/zh_CN/loading/+page.svelte @@ -0,0 +1,150 @@ + + + +
+ + +
+
+ {#each ['默认色', '主题色', '自选色', '反差色', '反主色'] as item} +
{item}
+ {/each} +
+
+ {#each arr1 as item, i} +
+
+ +
+
{'1_' + i}
+
+
+
+ +
+
{'1_' + i}
+
+
+
+ +
+
{'1_' + i}
+
+
+
+ +
+
{'1_' + i}
+
+
+
+ +
+
{'1_' + i}
+
+ {/each} +
+
+
持续更新...
+ + +
+
+ {#each ['默认色', '自选色', '反差色'] as item} +
{item}
+ {/each} +
+
+ {#each arr2 as item, i} +
+
+ +
+
{'2_' + i}
+
+
+
+ +
+
{'2_' + i}
+
+
+
+ +
+
{'2_' + i}
+
+ {/each} +
+
+
持续更新...
+ + +
+
+ {#each ['默认色', '自选色', '默认色', '自选色'] as item} +
{item}
+ {/each} +
+
+ {#each arr4 as item, i} +
+
+ +
+
{'4_' + i}
+
+
+
+ +
+
{'4_' + i}
+
+ {/each} +
+
+
持续更新...
+ + +
+
持续更新...
+ + +
+ +
+ {#each speedBtns as item} +
+ +
+ {/each} +
diff --git a/src/routes/zh_CN/mask/+page.svelte b/src/routes/zh_CN/mask/+page.svelte new file mode 100644 index 0000000..f5ed40f --- /dev/null +++ b/src/routes/zh_CN/mask/+page.svelte @@ -0,0 +1,57 @@ + + + +
+ (visible1 = true)} /> + (visible1 = false)} /> + + (visible2 = true)} /> + (visible2 = false)} /> + + (visible3 = true)} /> + (visible3 = false)} /> + + (visible4 = true)} /> + +
+
+
+
+ + (visible5 = true)} /> + (visible5 = false)} /> + + (visible6 = true)} /> + (visible6 = false)} /> + + (visible7 = true)} /> + (visible7 = false)} /> + + (visible8 = true)} /> + (visible8 = false)} /> + + (visible9 = true)} /> + (visible9 = false)} /> + + (visible10 = true)} /> + + + (visible11 = true)} /> + +
diff --git a/src/routes/zh_CN/modal/+page.svelte b/src/routes/zh_CN/modal/+page.svelte new file mode 100644 index 0000000..91ed98f --- /dev/null +++ b/src/routes/zh_CN/modal/+page.svelte @@ -0,0 +1,128 @@ + + + +
+ (visible1 = true)} /> + + + (visible2 = true)} /> + + {#snippet contentChild()} + + {/snippet} + + + (visible3 = true)} /> + + + (visible4 = true)} /> + + {#snippet contentChild()} + + {/snippet} + + + (visible5 = true)} /> + + + (visible6 = true)} /> + + + (visible8 = true)} /> + + + (visible9 = true)} /> + + + (visible12 = true)} /> + + + (visible10 = true)} /> + + {#snippet contentChild()} +
+ +
+ {/snippet} + + + (visible7 = true)} /> + + + (visible11 = true)} /> + + + (visible13 = true)} /> + (toastVisible = true)} /> + + + (visible14 = true)} /> + + + (visible15 = true)} /> + +
+ + + diff --git a/src/routes/zh_CN/navBar/+page.svelte b/src/routes/zh_CN/navBar/+page.svelte new file mode 100644 index 0000000..b05bc74 --- /dev/null +++ b/src/routes/zh_CN/navBar/+page.svelte @@ -0,0 +1,67 @@ + + + +
+ + + (visible1 = true)} /> + + { + visible2 = true; + rightIndex = index; + }} + /> + + + + + {#snippet titleChild()} +
自定义文字颜色 by Snippet
+ {/snippet} + + + {#snippet titleChild()} +
+
title 插槽渲染标题区域
+
right 插槽渲染右侧且可点击
+
+ {/snippet} + {#snippet rightChild()} +
+ +
+ {/snippet} + + + + + {#snippet leftChild()} +
+ +
+ {/snippet} + {#snippet titleChild()} +
injClass 与 Snippet 结合自定义样式
+ {/snippet} + {#snippet rightChild()} +
+ +
+ {/snippet} + +
diff --git a/src/routes/zh_CN/noticeBar/+page.svelte b/src/routes/zh_CN/noticeBar/+page.svelte new file mode 100644 index 0000000..d3de4bd --- /dev/null +++ b/src/routes/zh_CN/noticeBar/+page.svelte @@ -0,0 +1,71 @@ + + + +
基础用法
+ + +
通告内容较短不滚动
+ + +
设定通告间距
+ + +
设定滚动速度
+ + +
右侧箭头（监听点击事件）
+ (visible = true)}> + + +
右侧无内容
+ + +
左侧无内容
+ + +
设定文字大小
+ + +
自定义左侧
+ +
+ +
+ + {#snippet leftChild()}🥳{/snippet} + + +
自定义右侧
+ + {#snippet rightChild()}🥳{/snippet} + + +
垂直滚动
+ + +
滚动过渡为 1 秒
+ + +
滚动间隔为 8 秒
+ + +
文字过长
+ + +
单条不滚动
+ + +
自定义样式
+ +
+ +
+ +
diff --git a/src/routes/zh_CN/numKeyboard/+page.svelte b/src/routes/zh_CN/numKeyboard/+page.svelte new file mode 100644 index 0000000..b2f5d2f --- /dev/null +++ b/src/routes/zh_CN/numKeyboard/+page.svelte @@ -0,0 +1,122 @@ + + + + (visible1 = true)} /> + + + (visible2 = true)} /> + + + (visible3 = true)} /> + + + (visible9 = true)} /> + + + (visible4 = true)} /> + + + (visible5 = true)} /> + + + (visible6 = true)} /> + + + (visible7 = true)} /> + + + (visible8 = true)} /> + + + (visible10 = true)} /> + + + (visible18 = true)} /> + + + (visible11 = true)} /> + + + +
+ {value} + {#if value === '5201314'} + + {/if} +
+ (visible12 = true)} /> + (top = 0)} /> + + (visible13 = true)} /> + + + (visible14 = true)} /> + + + (visible15 = true)} /> + + + (visible16 = true)} /> + + + (visible17 = true)} /> + + + (visible19 = true)} /> + diff --git a/src/routes/zh_CN/pagination/+page.svelte b/src/routes/zh_CN/pagination/+page.svelte new file mode 100644 index 0000000..3728a80 --- /dev/null +++ b/src/routes/zh_CN/pagination/+page.svelte @@ -0,0 +1,122 @@ + + +
基础用法
+ + +
事件监听
+
当前页码：{current}
+ (current = c)} onnext={c => (current = c)} onchange={c => (current = c)} /> + +
初始展示省略页码
+
可用于引导用户
+ + +
设置初始页
+ + +
最大显示 11 页
+
同时显示较多页但页码较小
+ + +
最大显示 5 页
+
适合分页区域较小的场景
+
+
这是我的地盘
+
+ +
+
+ +
无数据
+ + +
仅一页
+ + +
总页数未超过最大显示页数
+
不会存在省略页码
+ + +
总页数超过最大显示页数但不算多
+
不会同时存在前后两个省略页码
+ + +
总页数很多
+
会同时存在前后两个省略页码
+ + +
每页仅 3 项
+ + +
高亮页码为边框
+ + +
高亮页码为块状
+ + +
增加高亮页码圆角
+ + +
省略页码列数为 2
+ + +
注入 injClass
+ + +
模拟请求
+
+ {#each data as item} +
1}> +
{item.text}
+
{item.from}
+
+ {/each} + {#if loading} +
+
查询第 {currentPage} 页数据...
+ +
+ {/if} +
+ + +
连续模式
+
只允许点击上下页
+ + +
diff --git a/src/routes/zh_CN/picker/+page.svelte b/src/routes/zh_CN/picker/+page.svelte new file mode 100644 index 0000000..4d50522 --- /dev/null +++ b/src/routes/zh_CN/picker/+page.svelte @@ -0,0 +1,796 @@ + + + +
+ (visible1 = true)} /> + + + (visible2 = true)} /> + + + (visible3 = true)} /> + + + (visible4 = true)} /> + + + (visible5 = true)} subTitle="需要关闭自动选定上次选中项" /> + + + (visible6 = true)} /> + + + (visible7 = true)} /> + + + (visible8 = true)} /> + (currentDetail = items[0].label)} /> + + (visible20 = true)} /> + + + (visible9 = true)} /> + + + (visible10 = true)} /> + + + (visible11 = true)} /> + + + (visible21 = true)} /> + + + (visible12 = true)} /> + + + (visible13 = true)} /> + + + (visible14 = true)} /> + + + (visible15 = true)} /> + + + (visible16 = true)} /> + + + (visible22 = true)} /> + + + (visible17 = true)} /> + + +
+ {#if allItems.length} + 当前选定了： + {#each allItems as item} + {item.label} + {/each} + {:else} +
请选定数据
+ {/if} +
+
+ {#if allIndexs.length} + 当前选定值位于所在列的索引值分别为： + {#each allIndexs as index} + {index} + {/each} + {:else} +
请选定数据
+ {/if} +
+ (visible18 = true)} /> + { + allItems = items; + allIndexs = indexs; + }} + /> + + (visible19 = true)} /> + +
+ + + diff --git a/src/routes/zh_CN/picker/data.js b/src/routes/zh_CN/picker/data.js new file mode 100644 index 0000000..aabfe1b --- /dev/null +++ b/src/routes/zh_CN/picker/data.js @@ -0,0 +1,637 @@ +const someProvinceList = [ + { label: '云南' }, + { label: '北京' }, + { label: '广东' }, + { label: '重庆' }, + { label: '四川' }, + { label: '湖北' }, + { label: '河南' }, + { label: '湖南' }, + { label: '山东' }, + { label: '江苏' }, + { label: '浙江' }, + { label: '江西' }, + { label: '安徽' }, + { label: '福建' }, +]; +const weekList = [ + { label: '星期一' }, + { label: '星期二' }, + { label: '星期三' }, + { label: '星期四' }, + { label: '星期五' }, + { label: '星期六' }, + { label: '星期日' }, +]; +const amOrPmList = [{ label: '上午' }, { label: '下午' }]; +const timeList = [ + { label: '01:00' }, + { label: '02:00' }, + { label: '03:00' }, + { label: '04:00' }, + { label: '05:00' }, + { label: '06:00' }, + { label: '07:00' }, + { label: '08:00' }, + { label: '09:00' }, + { label: '10:00' }, + { label: '11:00' }, + { label: '12:00' }, +]; +const cityList = [ + { cityName: '昆明' }, + { cityName: '曲靖' }, + { cityName: '玉溪' }, + { cityName: '保山' }, + { cityName: '昭通' }, + { cityName: '丽江' }, + { cityName: '普洱' }, + { cityName: '临沧' }, + { cityName: '楚雄' }, + { cityName: '红河' }, + { cityName: '文山' }, +]; +const linkageData = [ + { + label: '云南', + children: [ + { + label: '昆明', + children: [ + { label: '盘龙区' }, + { label: '五华区' }, + { label: '官渡区' }, + { label: '西山区' }, + { label: '东川区' }, + { label: '呈贡区' }, + { label: '晋宁区' }, + { label: '富民县' }, + { label: '宜良县' }, + { label: '石林彝族自治县' }, + { label: '嵩明县' }, + { label: '禄劝彝族苗族自治县' }, + { label: '寻甸回族彝族自治县' }, + { label: '安宁市' }, + ], + }, + { + label: '曲靖', + children: [ + { label: '麒麟区' }, + { label: '沾益区' }, + { label: '马龙县' }, + { label: '陆良县' }, + { label: '师宗县' }, + { label: '罗平县' }, + { label: '富源县' }, + { label: '会泽县' }, + { label: '宣威市' }, + ], + }, + { + label: '玉溪', + children: [ + { label: '红塔区' }, + { label: '江川区' }, + { label: '澄江县' }, + { label: '通海县' }, + { label: '华宁县' }, + { label: '易门县' }, + { label: '峨山彝族自治县' }, + { label: '新平彝族傣族自治县' }, + { label: '元江哈尼族彝族傣族自治县' }, + ], + }, + { + label: '保山', + children: [ + { label: '隆阳区' }, + { label: '施甸县' }, + { label: '龙陵县' }, + { label: '昌宁县' }, + { label: '腾冲市' }, + { label: '龙陵县' }, + ], + }, + { + label: '丽江', + children: [ + { label: '古城区' }, + { label: '永胜县' }, + { label: '华坪县' }, + { label: '玉龙纳西族自治县' }, + { label: '宁蒗彝族自治县' }, + ], + }, + { + label: '普洱', + children: [ + { label: '思茅区' }, + { label: '宁洱哈尼族彝族自治县' }, + { label: '墨江哈尼族自治县' }, + { label: '景东彝族自治县' }, + { label: '景谷傣族彝族自治县' }, + { label: '镇沅彝族哈尼族拉祜族自治县' }, + { label: '江城哈尼族彝族自治县' }, + { label: '孟连傣族拉祜族佤族自治县' }, + { label: '澜沧拉祜族自治县' }, + { label: '西盟佤族自治县' }, + ], + }, + { + label: '临沧', + children: [ + { label: '临翔区' }, + { label: '凤庆县' }, + { label: '云县' }, + { label: '永德县' }, + { label: '镇康县' }, + { label: '双江拉祜族佤族布朗族傣族自治县' }, + { label: '耿马傣族佤族自治县' }, + { label: '沧源佤族自治县' }, + ], + }, + { + label: '楚雄', + children: [ + { label: '楚雄市' }, + { label: '双柏县' }, + { label: '牟定县' }, + { label: '南华县' }, + { label: '姚安县' }, + { label: '大姚县' }, + { label: '永仁县' }, + { label: '元谋县' }, + { label: '武定县' }, + { label: '禄丰县' }, + ], + }, + { + label: '红河', + children: [ + { label: '个旧市' }, + { label: '开远市' }, + { label: '蒙自市' }, + { label: '弥勒市' }, + { label: '屏边苗族自治县' }, + { label: '建水县' }, + { label: '石屏县' }, + { label: '泸西县' }, + { label: '元阳县' }, + { label: '红河县' }, + { label: '金平苗族瑶族傣族自治县' }, + { label: '绿春县' }, + { label: '河口瑶族自治县' }, + ], + }, + { + label: '文山', + children: [ + { label: '文山市' }, + { label: '砚山县' }, + { label: '西畴县' }, + { label: '麻栗坡县' }, + { label: '马关县' }, + { label: '丘北县' }, + { label: '广南县' }, + { label: '富宁县' }, + ], + }, + ], + }, + { + label: '广东', + children: [ + { + label: '广州', + children: [ + { label: '天河区' }, + { label: '海珠区' }, + { label: '荔湾区' }, + { label: '越秀区' }, + { label: '白云区' }, + { label: '黄埔区' }, + ], + }, + { + label: '深圳', + children: [ + { label: '罗湖区' }, + { label: '福田区' }, + { label: '南山区' }, + { label: '宝安区' }, + { label: '龙岗区' }, + { label: '盐田区' }, + ], + }, + { + label: '珠海', + children: [{ label: '香洲区' }, { label: '斗门区' }, { label: '金湾区' }], + }, + { + label: '汕头', + children: [ + { label: '龙湖区' }, + { label: '金平区' }, + { label: '濠江区' }, + { label: '潮阳区' }, + { label: '潮南区' }, + { label: '澄海区' }, + ], + }, + { + label: '佛山', + children: [{ label: '禅城区' }, { label: '南海区' }, { label: '顺德区' }, { label: '三水区' }, { label: '高明区' }], + }, + ], + }, + { + label: '四川', + children: [ + { + label: '成都', + children: [ + { label: '锦江区' }, + { label: '青羊区' }, + { label: '金牛区' }, + { label: '武侯区' }, + { label: '成华区' }, + { label: '龙泉驿区' }, + ], + }, + { + label: '绵阳', + children: [ + { label: '涪城区' }, + { label: '游仙区' }, + { label: '安州区' }, + { label: '三台县' }, + { label: '盐亭县' }, + { label: '梓潼县' }, + ], + }, + { + label: '自贡', + children: [ + { label: '自流井区' }, + { label: '贡井区' }, + { label: '大安区' }, + { label: '沿滩区' }, + { label: '荣县' }, + { label: '富顺县' }, + ], + }, + { + label: '攀枝花', + children: [{ label: '东区' }, { label: '西区' }, { label: '仁和区' }, { label: '米易县' }, { label: '盐边县' }], + }, + ], + }, + { + label: '北京', + children: [ + { + label: '北京市', + children: [ + { label: '东城区' }, + { label: '西城区' }, + { label: '朝阳区' }, + { label: '丰台区' }, + { label: '石景山区' }, + { label: '海淀区' }, + ], + }, + ], + }, + { + label: '浙江', + children: [ + { + label: '杭州', + children: [ + { label: '上城区' }, + { label: '下城区' }, + { label: '江干区' }, + { label: '拱墅区' }, + { label: '西湖区' }, + { label: '滨江区' }, + ], + }, + { + label: '宁波', + children: [ + { label: '海曙区' }, + { label: '江东区' }, + { label: '江北区' }, + { label: '北仑区' }, + { label: '镇海区' }, + { label: '鄞州区' }, + ], + }, + { + label: '温州', + children: [ + { label: '鹿城区' }, + { label: '龙湾区' }, + { label: '瓯海区' }, + { label: '洞头区' }, + { label: '永嘉县' }, + { label: '平阳县' }, + ], + }, + { + label: '嘉兴', + children: [ + { label: '南湖区' }, + { label: '秀洲区' }, + { label: '嘉善县' }, + { label: '海盐县' }, + { label: '海宁市' }, + { label: '平湖市' }, + ], + }, + { + label: '湖州', + children: [{ label: '吴兴区' }, { label: '南浔区' }, { label: '德清县' }, { label: '长兴县' }, { label: '安吉县' }], + }, + ], + }, +]; +const linkagDiffLabelKeyData = [ + { + province: '云南', + children: [ + { + city: '昆明', + children: [ + { region: '盘龙区' }, + { region: '五华区' }, + { region: '官渡区' }, + { region: '西山区' }, + { region: '东川区' }, + { region: '呈贡区' }, + { region: '晋宁区' }, + ], + }, + { + city: '曲靖', + children: [ + { region: '麒麟区' }, + { region: '沾益区' }, + { region: '马龙县' }, + { region: '陆良县' }, + { region: '师宗县' }, + { region: '罗平县' }, + ], + }, + { + city: '玉溪', + children: [ + { region: '红塔区' }, + { region: '江川区' }, + { region: '澄江县' }, + { region: '通海县' }, + { region: '华宁县' }, + { region: '易门县' }, + ], + }, + ], + }, + { + province: '贵州', + children: [ + { + city: '贵阳', + children: [ + { region: '南明区' }, + { region: '云岩区' }, + { region: '花溪区' }, + { region: '乌当区' }, + { region: '白云区' }, + { region: '观山湖区' }, + ], + }, + { + city: '遵义', + children: [ + { region: '红花岗区' }, + { region: '汇川区' }, + { region: '播州区' }, + { region: '桐梓县' }, + { region: '绥阳县' }, + { region: '正安县' }, + ], + }, + { + city: '六盘水', + children: [{ region: '钟山区' }, { region: '六枝特区' }, { region: '水城县' }, { region: '盘县' }], + }, + ], + }, + { + province: '四川', + children: [ + { + city: '成都', + children: [ + { region: '锦江区' }, + { region: '青羊区' }, + { region: '金牛区' }, + { region: '武侯区' }, + { region: '成华区' }, + { region: '龙泉驿区' }, + ], + }, + { + city: '绵阳', + children: [ + { region: '涪城区' }, + { region: '游仙区' }, + { region: '安州区' }, + { region: '三台县' }, + { region: '盐亭县' }, + { region: '梓潼县' }, + ], + }, + { + city: '攀枝花', + children: [{ region: '东区' }, { region: '西区' }, { region: '仁和区' }, { region: '米易县' }, { region: '盐边县' }], + }, + ], + }, + { + province: '北京', + children: [ + { + city: '北京', + children: [ + { region: '东城区' }, + { region: '西城区' }, + { region: '朝阳区' }, + { region: '丰台区' }, + { region: '石景山区' }, + { region: '海淀区' }, + ], + }, + ], + }, +]; +const linkagCustomChildrenKeyData = [ + { + label: '云南', + child: [ + { + label: '昆明', + child: [ + { label: '盘龙区' }, + { label: '五华区' }, + { label: '官渡区' }, + { label: '西山区' }, + { label: '东川区' }, + { label: '呈贡区' }, + { label: '晋宁区' }, + ], + }, + { + label: '曲靖', + child: [ + { label: '麒麟区' }, + { label: '沾益区' }, + { label: '马龙县' }, + { label: '陆良县' }, + { label: '师宗县' }, + { label: '罗平县' }, + ], + }, + { + label: '玉溪', + child: [ + { label: '红塔区' }, + { label: '江川区' }, + { label: '澄江县' }, + { label: '通海县' }, + { label: '华宁县' }, + { label: '易门县' }, + ], + }, + ], + }, + { + label: '贵州', + child: [ + { + label: '贵阳', + child: [ + { label: '南明区' }, + { label: '云岩区' }, + { label: '花溪区' }, + { label: '乌当区' }, + { label: '白云区' }, + { label: '观山湖区' }, + ], + }, + { + label: '遵义', + child: [ + { label: '红花岗区' }, + { label: '汇川区' }, + { label: '播州区' }, + { label: '桐梓县' }, + { label: '绥阳县' }, + { label: '正安县' }, + ], + }, + { + label: '六盘水', + child: [{ label: '钟山区' }, { label: '六枝特区' }, { label: '水城县' }, { label: '盘县' }], + }, + ], + }, + { + label: '四川', + child: [ + { + label: '成都', + child: [ + { label: '锦江区' }, + { label: '青羊区' }, + { label: '金牛区' }, + { label: '武侯区' }, + { label: '成华区' }, + { label: '龙泉驿区' }, + ], + }, + { + label: '绵阳', + child: [ + { label: '涪城区' }, + { label: '游仙区' }, + { label: '安州区' }, + { label: '三台县' }, + { label: '盐亭县' }, + { label: '梓潼县' }, + ], + }, + { + label: '攀枝花', + child: [{ label: '东区' }, { label: '西区' }, { label: '仁和区' }, { label: '米易县' }, { label: '盐边县' }], + }, + ], + }, + { + label: '北京', + child: [ + { + label: '北京', + child: [ + { label: '东城区' }, + { label: '西城区' }, + { label: '朝阳区' }, + { label: '丰台区' }, + { label: '石景山区' }, + { label: '海淀区' }, + ], + }, + ], + }, + { + label: '浙江', + child: [ + { + label: '杭州', + child: [ + { label: '西湖区' }, + { label: '上城区' }, + { label: '下城区' }, + { label: '江干区' }, + { label: '拱墅区' }, + { label: '滨江区' }, + ], + }, + { + label: '宁波', + child: [ + { label: '海曙区' }, + { label: '江东区' }, + { label: '江北区' }, + { label: '北仑区' }, + { label: '镇海区' }, + { label: '鄞州区' }, + ], + }, + { + label: '温州', + child: [ + { label: '鹿城区' }, + { label: '龙湾区' }, + { label: '瓯海区' }, + { label: '洞头区' }, + { label: '永嘉县' }, + { label: '平阳县' }, + ], + }, + ], + }, +]; + +export { someProvinceList, weekList, amOrPmList, timeList, cityList, linkageData, linkagDiffLabelKeyData, linkagCustomChildrenKeyData }; diff --git a/src/routes/zh_CN/placeholder/+page.svelte b/src/routes/zh_CN/placeholder/+page.svelte new file mode 100644 index 0000000..358b84b --- /dev/null +++ b/src/routes/zh_CN/placeholder/+page.svelte @@ -0,0 +1,34 @@ + + + +
基础用法
+基础用法 + +
设置高度
+高为 32 + +
不同圆角
+
+ 无圆角 + XL 圆角 + 全圆角 +
+ +
有阴影
+阴影 + +
自定义 injClass
+渐变背景 + +
与 Grids 结合
+ + 3﹡2 + 1﹡3 + 3﹡1 + 2﹡2 + 1﹡1 + 1﹡1 + +
diff --git a/src/routes/zh_CN/popup/+page.svelte b/src/routes/zh_CN/popup/+page.svelte new file mode 100644 index 0000000..b5b561c --- /dev/null +++ b/src/routes/zh_CN/popup/+page.svelte @@ -0,0 +1,171 @@ + + + +
+ (visible1 = true)} /> + + + (visible2 = true)} /> + + + (visible3 = true)} /> + + + (visible4 = true)} /> + + + (visible5 = true)} /> + + + (visible6 = true)} /> + + + (visible7 = true)} /> + + + (visible10 = true)} /> + + + (visible11 = true)} /> + + + (visible16 = true)} /> + + + (visible8 = true)} /> + + + (visible9 = true)} /> + + + (visible12 = true)} /> + + + (visible13 = true)} /> + +
+ +
+ + + (visible14 = true)} /> + +
+
AirPods Pro 已连接
+
+ +
+
+
设置
+
音乐
+
+
+ + + (visible20 = true)} /> + +
+ + + +
+ + + (visible17 = true)} /> + +
+
+
+ +
+
+
手机
+
胡歌
+
+
+
+
+ +
+
+ +
+
+
+ + + (visible18 = true)} /> + +
+
+ +
+
+ + + (visible15 = true)} /> + + + (visible19 = true)} /> + + + + + (visible21 = true)} /> + +
+ + + diff --git a/src/routes/zh_CN/progress/+page.svelte b/src/routes/zh_CN/progress/+page.svelte new file mode 100644 index 0000000..1f59802 --- /dev/null +++ b/src/routes/zh_CN/progress/+page.svelte @@ -0,0 +1,87 @@ + + + +
+
基础用法
+ + +
不同高度
+
+ + + + +
+ +
百分比不同位置
+
+ + + + +
+ +
不同圆角风格
+
+ + + + + +
+ +
禁用
+
+ + +
+ +
过渡效果
+
+ + + + + +
+ + + +
+ + +
自定义颜色
+
+ + + + +
+ +
自定义文字
+
+ +
已完成 2/3
+ + +
已完成 2/3
+ +
+ diff --git a/src/routes/zh_CN/progressLoop/+page.svelte b/src/routes/zh_CN/progressLoop/+page.svelte new file mode 100644 index 0000000..30934d1 --- /dev/null +++ b/src/routes/zh_CN/progressLoop/+page.svelte @@ -0,0 +1,127 @@ + + + +
基础用法
+
+ +
+ +
不同宽度
+
+
+ +
+
+ +
+
+ +
+
+ +
直边端点
+
+ +
+ +
逆时针方向
+
+ +
+ +
自定义颜色
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
自定义文字
+
+
+ +
+
已完成
+
6666
+
步
+
+ +
+
+ +
+
剩余流量
+
66
+
GB
+
+ +
+
+ +
完成 2/3
+ +
+
+ +
过渡效果
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + + +
+ + diff --git a/src/routes/zh_CN/radio/+page.svelte b/src/routes/zh_CN/radio/+page.svelte new file mode 100644 index 0000000..368acdc --- /dev/null +++ b/src/routes/zh_CN/radio/+page.svelte @@ -0,0 +1,197 @@ + + + +
+
横向排列
+
简单用法
+ + + +
获取选中值
+ +
已选：{value}
+ + +
文字在不同位置
+ + + + + + + +
自定义图标
+ + + + + + + + + + + +
Snippet 为 Button 组件
+ + {#snippet radioChild({ item })} + + {/snippet} + + + +
Snippet 为自定义元素
+ + {#snippet radioChild({ item })} + + {/snippet} + + + +
图片选项
+ + {#snippet radioChild({ item })} +
+ + +
(imgChecked = item.name)} + > + +
+
+ +
+
+ {/snippet} + +
+ 已选 {imgChecked} +
+ +
+ +
+
行内元素排列
+
Snippet 行内元素排列
+ + {#snippet radioChild({ item })} + + +
(checkInline = item.name)} + > + {item.label} +
+ {/snippet} + +
已选：{checkInline}
+
+ + +
+
纵向排列
+
基础用法
+ + + +
长文字选项
+ + + +
文字靠左
+ + +
复杂选项 && 自定义选中效果
+ + {#snippet radioChild({ item })} + + +
(voiceChecked = item.name)}> +
+ +
+
+ {item.label} + {#each item.voices as voice} +
{voice}
+ {/each} +
+
+
+ {/snippet} + +
diff --git a/src/routes/zh_CN/rate/+page.svelte b/src/routes/zh_CN/rate/+page.svelte new file mode 100644 index 0000000..4dac766 --- /dev/null +++ b/src/routes/zh_CN/rate/+page.svelte @@ -0,0 +1,107 @@ + + + +
基础用法
+
+ +
+
设置初始分数
+
+ +
+
允许零分
+
+ +
+
自定义总分
+
+ +
+
设置未选中透明度
+
+ +
+
允许半选
+
+ +
+
竖向半选
+
+ +
+
半选允许零分
+
+ +
+
加大间距
+
+ +
+
禁用
+
+ +
+
只读
+
+ +
+
不同大小
+
+ +
+
+ +
+
+ +
+
自定义
+
+ + + +
+
+ + + +
+
+ + + +
+
+ +
👍
+ +
+
+ +
🍺
+ +
+
+ +
富
+ +
+
监听事件
+
+ (value = v)} /> +

评分：{value} 星

+
+ +
所有激活图标都有点击动画
+
+ +
+ +
关闭点击动画
+
+ +
diff --git a/src/routes/zh_CN/skeleton/+page.svelte b/src/routes/zh_CN/skeleton/+page.svelte new file mode 100644 index 0000000..393c4ab --- /dev/null +++ b/src/routes/zh_CN/skeleton/+page.svelte @@ -0,0 +1,67 @@ + + + +
+
示例 1
+
+ +
+ + +
+
+ +
示例 2
+
+ + + + +
+ + + +
示例 3
+
+ +
+ +
+
+ +
示例 4
+
+
+ + +
+ +
+ +
示例 5
+
+ + + + +
+ +
示例 6
+ {#each [1, 1, 1] as item} +
+
+
+ +
+ + +
+
+
+ +
+ + {/each} +
diff --git a/src/routes/zh_CN/slider/+page.svelte b/src/routes/zh_CN/slider/+page.svelte new file mode 100644 index 0000000..86055e4 --- /dev/null +++ b/src/routes/zh_CN/slider/+page.svelte @@ -0,0 +1,117 @@ + + + +
基础用法
+
+ +
+
监听 value
+
+ (value = v)} {value} /> + 当前值：{value} +
+
步长为 5
+
+ +
+
步长为 0.1
+
+ +
+
设定可选范围（60-80）
+
+ +
+
区间选择
+
+ +
+
区间设定可选范围（40-80）
+
+ (valueRange = arr)} /> + 当前区间：{valueRange[0]} - {valueRange[1]} +
+
不同圆角
+
+ +
+
+ +
+
+ +
+
线框滑块
+
+ +
+
+ +
+
一直显示 Tip
+
+ +
+
+ +
+
+ +
+
不显示 Tip
+
+ +
+
组合布局
+
+ +
+ +
+ +
+
使用 Snippet
+
+ (valueBar = v)}> + {#snippet children()} +
+
+ {#each barList as item, i} +
+ {/each} +
+
+ {/snippet} + +
+
禁用
+
+ +
+
只读
+
+ +
diff --git a/src/routes/zh_CN/stepper/+page.svelte b/src/routes/zh_CN/stepper/+page.svelte new file mode 100644 index 0000000..f4b3c7d --- /dev/null +++ b/src/routes/zh_CN/stepper/+page.svelte @@ -0,0 +1,134 @@ + + + +
基础用法
+
+ +
+ +
设置最大值/最小值/初始值
+
+ +
+ +
设置步长
+
+ +
+ +
强调数字区域
+
+ +
+ +
强调区域不用主题色
+
+ + +
+ +
不同圆角
+
+
+
+
+
+
+
+
+ +
竖向
+
+ + + + + +
+ +
格式化显示数字
+
+
保留一位小数
+ +
+
+
保留四位小数
+ +
+ +
异步显示数字
+
+
Toast 显示异步状态
+ handleChange1('increase')} ondecrease={() => handleChange1('decrease')} /> +
+ +
内部显示异步状态
+
+ handleChange2('increase')} + ondecrease={() => handleChange2('decrease')} + /> + handleChange3('increase')} + ondecrease={() => handleChange3('decrease')} + /> +
+ +
外部无 padding
+
+ +
+
+ +
+
+ +
+ +
不同位置注入 Class
+
+ +
+
+ +
+
+ +
diff --git a/src/routes/zh_CN/steps/+page.svelte b/src/routes/zh_CN/steps/+page.svelte new file mode 100644 index 0000000..3ab4ad7 --- /dev/null +++ b/src/routes/zh_CN/steps/+page.svelte @@ -0,0 +1,249 @@ + + + +
横向排列
+
简单用法
+ + +
不同圆角
+ + + +
带图标
+ + +
图标不同边框
+ + + + + + +
带完成步骤
+ + +
带图标 && 完成步骤
+ + +
步骤栏区域使用文字
+ + +
步骤栏区域使用图片
+ + + + +
纵向排列
+
不同圆角
+
+ + + +
+ +
图标不同边框
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
带描述信息
+ + + + +
带完成步骤
+ + +
步骤栏区域使用文字
+ + +
步骤栏区域使用图片
+
+ + +
+ +
内容区域注入元素
+ + +
+
+ +
+
+ +
+
+ + + + + + diff --git a/src/routes/zh_CN/steps/injCom1.svelte b/src/routes/zh_CN/steps/injCom1.svelte new file mode 100644 index 0000000..1a6fbe0 --- /dev/null +++ b/src/routes/zh_CN/steps/injCom1.svelte @@ -0,0 +1,6 @@ +
+
此处以组件形式注入一张图片
+
+ +
+
diff --git a/src/routes/zh_CN/steps/injCom2.svelte b/src/routes/zh_CN/steps/injCom2.svelte new file mode 100644 index 0000000..691fab1 --- /dev/null +++ b/src/routes/zh_CN/steps/injCom2.svelte @@ -0,0 +1,11 @@ + + +
此处以组件形式注入一些内容
+
+ + + + +
diff --git a/src/routes/zh_CN/swiper/+page.svelte b/src/routes/zh_CN/swiper/+page.svelte new file mode 100644 index 0000000..4e1800e --- /dev/null +++ b/src/routes/zh_CN/swiper/+page.svelte @@ -0,0 +1,320 @@ + + + +
基础用法
+ + +
初始索引为2
+ + +
间隔8秒
+ + +
过渡1500毫秒
+ + +
关闭自动播放
+ + +
外部指示器
+ + +
关闭指示器
+ + +
指示器右对齐
+ + +
圆点指示器
+ + +
线性指示器
+ + +
长线指示器
+ +
+ + +
方形指示器
+ +
+ + +
+ 指定指示器背景色 +

注入 Class

+
+ + +
+ 指定指示器颜色 +

同时去除背景色

+
+ + +
指定容器宽高比
+ + +
+ 配置容器内边距 +

同时指定指示器颜色、去除指示器背景色、配置容器内部圆角

+
+ +
+ + +
+ 容器内部增加投影 +

注入 Class

+
+ + +
未激活容器X、Z轴偏移
+ +
+ +
+ + +
未激活容器X、Y、Z轴旋转
+ +
+ +
+ +
+ +
+ +
+ + +
未激活容器注入 Class
+ +
+ + +
指定容器宽度
+
+ +
+ +
容器内容使用组件
+ + +
+ 监听 onchange 事件 +

当前激活索引值：{indexChange}

+
+ (indexChange = current)} /> + +
+ 监听 onclick 事件 +

点击索引值：{indexClick === -1 ? '未点击' : indexClick}

+
+ (indexClick = current)} /> + + + diff --git a/src/routes/zh_CN/swiper/Item.svelte b/src/routes/zh_CN/swiper/Item.svelte new file mode 100644 index 0000000..d53a5e3 --- /dev/null +++ b/src/routes/zh_CN/swiper/Item.svelte @@ -0,0 +1,9 @@ + + +
+
此容器使用单个组件作为内容
+
+
+
diff --git a/src/routes/zh_CN/switch/+page.svelte b/src/routes/zh_CN/switch/+page.svelte new file mode 100644 index 0000000..cc780eb --- /dev/null +++ b/src/routes/zh_CN/switch/+page.svelte @@ -0,0 +1,134 @@ + + + +
+
+
+
不同圆角
+
+ + + +
+
+
+
不同颜色
+
+ + + + +
+
+
+
带文字 / 状态 / 图标
+
+ + + + + {#snippet falseChild()} +
+ +
+ {/snippet} + {#snippet trueChild()} +
+ +
+ {/snippet} + +
+
+
+
禁用
+
+ + +
+
+
+
异步控制
+
+
+ +
点击 2 秒后触发
+
+
+ +
点击 3 秒后触发
+
+
+
+
+ +
Cell 中使用
+ + + + + + + + (visible = true)} + /> + { + visible = false; + confirmswitchActive = !confirmswitchActive; + }} + /> +
diff --git a/src/routes/zh_CN/tabBar/+page.svelte b/src/routes/zh_CN/tabBar/+page.svelte new file mode 100644 index 0000000..52a8c84 --- /dev/null +++ b/src/routes/zh_CN/tabBar/+page.svelte @@ -0,0 +1,89 @@ + + + +
+
+
+
基础用法
+ +
+
+
仅文字
+ +
+
+
仅图标
+ +
+
+
带线条
+ +
+ +
+ +
+ +
+
+
图标仅换颜色
+ +
+
+
自定义最外层
+ +
+
+
自定义 Tab
+ +
+
+
仅自定义选定 Tab
+ +
+
+
自定义线条
+ +
+
+
关爱版
+ +
+
+
监听 onchange 事件
+
当前 TabBar 激活的 active：{active}
+ (active = a)} /> +
+
+
+
+ +
diff --git a/src/routes/zh_CN/tabs/+page.svelte b/src/routes/zh_CN/tabs/+page.svelte new file mode 100644 index 0000000..ef189ce --- /dev/null +++ b/src/routes/zh_CN/tabs/+page.svelte @@ -0,0 +1,218 @@ + + + +
+
使用 Tabs
+
+
基础用法
+ + 我是飞机 + 我是轮船 + 我是火车 + 我是汽车 + + + +
加快过渡
+ + 我是飞机 + 我是轮船 + 我是火车 + 我是汽车 + + + +
减缓过渡
+ + 我是飞机 + 我是轮船 + 我是火车 + 我是汽车 + + + +
使用线性风格
+ + 我是飞机 + 我是轮船 + 我是火车 + 我是汽车 + + + +
选项卡位于底部
+ + 我是飞机 + 我是轮船 + 我是火车 + 我是汽车 + + + +
选项卡位于左侧
+ + {#snippet children({ active })} + 我是飞机 + 我是轮船 + 我是火车 + 我是汽车 + {/snippet} + + + +
选项卡位于右侧
+ + {#snippet children({ active })} + 我是飞机 + 我是轮船 + 我是火车 + 我是汽车 + {/snippet} + + + +
自定义过渡
+ + {#snippet children({ active })} +
+ {#each labels as item, i} + {#if active === i} +
我是{item.text}
+ {/if} + {/each} +
+ {/snippet} + + + +
监听 change 事件
+ + 我是飞机 + 我是轮船 + 我是火车 + 我是汽车 + +
当前 Tabs 激活的 active：{changeActive}
+ + +
溢出模式
+ + {#each overflowLabels as item} + 我是{item.text} + {/each} + + + {#each overflowLabels as item} + 我是{item.text} + {/each} + + + +
溢出模式关闭自动滚动
+ + {#each overflowLabels as item} + 我是{item.text} + {/each} + + + +
溢出模式完整显示 2 项
+ + {#each overflowLabels as item} + 我是{item.text} + {/each} + +
+ + +
不同的 Tab 风格
+
+
不同圆角
+ + + + + +
文字与图标搭配
+ + + + +
关爱版
+ + +
线性风格
+ + + +
自定义 Tab 外层风格
+ + +
自定义 Tab 风格
+ + +
自定义选定 Tab 风格
+ + +
自定义指示器风格
+ + + +
不同的左右间距
+
+ + + + +
+
+ + +
单独使用 Tab
+
+ +
当前 Tab 点击的 active：{active}
+
+ +
diff --git a/src/routes/zh_CN/timePicker/+page.svelte b/src/routes/zh_CN/timePicker/+page.svelte new file mode 100644 index 0000000..401f48a --- /dev/null +++ b/src/routes/zh_CN/timePicker/+page.svelte @@ -0,0 +1,135 @@ + + + +
+
+ {#if defaultTimeStr !== ''} + 当前选定了： + {defaultTimeStr} + {:else} +
请选定时间
+ {/if} +
+ (visible1 = true)} /> + (defaultTimeStr = time)} /> + + (visible2 = true)} /> + + + (visible3 = true)} /> + + + (visible4 = true)} /> + + + (visible5 = true)} /> + + + (visible6 = true)} /> + + + (visible8 = true)} /> + + + (visible22 = true)} /> + + + (visible9 = true)} /> + + + (visible10 = true)} /> + + + (visible11 = true)} /> + + + (visible12 = true)} /> + + + (visible13 = true)} /> + + +
+ {#if customFormatStr !== ''} + 当前选定了： + {customFormatStr} + {:else} +
请选定时间
+ {/if} +
+ (visible15 = true)} /> + (customFormatStr = timeStr)} + /> + +
+ {#if monthFirstStr !== ''} + 当前选定了： + {monthFirstStr} + {:else} +
请选定时间
+ {/if} +
+ (visible16 = true)} /> + (monthFirstStr = timeStr)} /> + +
+ 当前选定了：
+ {timeObjStr} +
+ (visible17 = true)} /> + (timeObj = obj)} /> + + (visible14 = true)} /> + + + (visible18 = true)} /> + + + (visible19 = true)} /> + + + (visible20 = true)} /> + + + (visible21 = true)} /> + +
diff --git a/src/routes/zh_CN/toast/+page.svelte b/src/routes/zh_CN/toast/+page.svelte new file mode 100644 index 0000000..ce7be62 --- /dev/null +++ b/src/routes/zh_CN/toast/+page.svelte @@ -0,0 +1,167 @@ + + + +
+ (visible1 = true)} /> + + + (visible2 = true)} /> + + + (visible3 = true)} /> + + + (visible4 = true)} /> + + + (visible5 = true)} /> + + + (visible6 = true)} /> + + + (visible7 = true)} /> + + + (visible8 = true)} /> + + + (visible9 = true)} /> + + + (visible30 = true)} /> + + + (visible31 = true)} /> + + + (visible32 = true)} /> + + + (visible27 = true)} /> + + + (visible10 = true)} /> + + + (visible11 = true)} /> + + + (visible12 = true)} /> + + + (visible13 = true)} /> + + + (visible14 = true)} /> + + + (visible15 = true)} /> + + + (visible16 = true)} /> + + + (visible17 = true)} /> + + + (visible18 = true)} /> + + + (visible19 = true)} /> + + + (visible20 = true)} /> + + + (visible28 = true)} /> + + + (visible29 = true)} /> + + + (visible21 = true)} /> + + + (visible22 = true)} /> + + + (visible23 = true)} /> + + + (visible24 = true)} /> + + + + +
+
自定义提示内容
+ +
{time} 秒后关闭
+
+ + + (visible26 = true)} /> + +
+ +
+
+ +
+
diff --git a/static/404.html b/static/404.html new file mode 100644 index 0000000..0f7b2e8 --- /dev/null +++ b/static/404.html @@ -0,0 +1,45 @@ + + + + + Single Page Apps for GitHub Pages + + + + diff --git a/static/assets/images/airpods-pro2.png b/static/assets/images/airpods-pro2.png new file mode 100644 index 0000000..7398d0c Binary files /dev/null and b/static/assets/images/airpods-pro2.png differ diff --git a/static/assets/images/avatar_1.jpg b/static/assets/images/avatar_1.jpg new file mode 100644 index 0000000..940b5c0 Binary files /dev/null and b/static/assets/images/avatar_1.jpg differ diff --git a/static/assets/images/avatar_2.png b/static/assets/images/avatar_2.png new file mode 100644 index 0000000..5d50142 Binary files /dev/null and b/static/assets/images/avatar_2.png differ diff --git "a/static/assets/images/dota_\345\260\217\347\211\233.png" "b/static/assets/images/dota_\345\260\217\347\211\233.png" new file mode 100644 index 0000000..a805a98 Binary files /dev/null and "b/static/assets/images/dota_\345\260\217\347\211\233.png" differ diff --git "a/static/assets/images/dota_\346\226\257\346\270\251.png" "b/static/assets/images/dota_\346\226\257\346\270\251.png" new file mode 100644 index 0000000..6e7e7d1 Binary files /dev/null and "b/static/assets/images/dota_\346\226\257\346\270\251.png" differ diff --git "a/static/assets/images/dota_\346\260\264\344\272\272.png" "b/static/assets/images/dota_\346\260\264\344\272\272.png" new file mode 100644 index 0000000..019b4f1 Binary files /dev/null and "b/static/assets/images/dota_\346\260\264\344\272\272.png" differ diff --git "a/static/assets/images/dota_\347\201\253\345\245\263.png" "b/static/assets/images/dota_\347\201\253\345\245\263.png" new file mode 100644 index 0000000..1b8b8f2 Binary files /dev/null and "b/static/assets/images/dota_\347\201\253\345\245\263.png" differ diff --git "a/static/assets/images/dota_\347\201\253\346\236\252.png" "b/static/assets/images/dota_\347\201\253\346\236\252.png" new file mode 100644 index 0000000..ebac356 Binary files /dev/null and "b/static/assets/images/dota_\347\201\253\346\236\252.png" differ diff --git "a/static/assets/images/icon_\344\274\232\345\221\230.png" "b/static/assets/images/icon_\344\274\232\345\221\230.png" new file mode 100644 index 0000000..eb2c59f Binary files /dev/null and "b/static/assets/images/icon_\344\274\232\345\221\230.png" differ diff --git "a/static/assets/images/icon_\345\244\226\345\215\226.png" "b/static/assets/images/icon_\345\244\226\345\215\226.png" new file mode 100644 index 0000000..5aea400 Binary files /dev/null and "b/static/assets/images/icon_\345\244\226\345\215\226.png" differ diff --git "a/static/assets/images/icon_\346\270\270\346\210\217.png" "b/static/assets/images/icon_\346\270\270\346\210\217.png" new file mode 100644 index 0000000..27d1f4b Binary files /dev/null and "b/static/assets/images/icon_\346\270\270\346\210\217.png" differ diff --git "a/static/assets/images/icon_\347\201\253\350\275\246\347\245\250.png" "b/static/assets/images/icon_\347\201\253\350\275\246\347\245\250.png" new file mode 100644 index 0000000..9598e32 Binary files /dev/null and "b/static/assets/images/icon_\347\201\253\350\275\246\347\245\250.png" differ diff --git "a/static/assets/images/icon_\347\276\216\351\243\237.png" "b/static/assets/images/icon_\347\276\216\351\243\237.png" new file mode 100644 index 0000000..7ae70a8 Binary files /dev/null and "b/static/assets/images/icon_\347\276\216\351\243\237.png" differ diff --git "a/static/assets/images/icon_\350\257\204\344\273\267.png" "b/static/assets/images/icon_\350\257\204\344\273\267.png" new file mode 100644 index 0000000..3ad2d56 Binary files /dev/null and "b/static/assets/images/icon_\350\257\204\344\273\267.png" differ diff --git "a/static/assets/images/icon_\351\242\201\345\245\226.png" "b/static/assets/images/icon_\351\242\201\345\245\226.png" new file mode 100644 index 0000000..6590d97 Binary files /dev/null and "b/static/assets/images/icon_\351\242\201\345\245\226.png" differ diff --git a/static/assets/images/wall_1.jpg b/static/assets/images/wall_1.jpg new file mode 100644 index 0000000..70e0858 Binary files /dev/null and b/static/assets/images/wall_1.jpg differ diff --git a/static/assets/images/wall_2.jpg b/static/assets/images/wall_2.jpg new file mode 100644 index 0000000..e12e1a2 Binary files /dev/null and b/static/assets/images/wall_2.jpg differ diff --git a/static/assets/images/wall_3.jpg b/static/assets/images/wall_3.jpg new file mode 100644 index 0000000..d325f69 Binary files /dev/null and b/static/assets/images/wall_3.jpg differ diff --git a/static/assets/images/wall_4.jpg b/static/assets/images/wall_4.jpg new file mode 100644 index 0000000..fde483b Binary files /dev/null and b/static/assets/images/wall_4.jpg differ diff --git a/static/assets/logos/adidas.png b/static/assets/logos/adidas.png new file mode 100644 index 0000000..7aedf1a Binary files /dev/null and b/static/assets/logos/adidas.png differ diff --git a/static/assets/logos/adobe.png b/static/assets/logos/adobe.png new file mode 100644 index 0000000..f7ac599 Binary files /dev/null and b/static/assets/logos/adobe.png differ diff --git a/static/assets/logos/apple.png b/static/assets/logos/apple.png new file mode 100644 index 0000000..1aaca24 Binary files /dev/null and b/static/assets/logos/apple.png differ diff --git a/static/assets/logos/chrome.png b/static/assets/logos/chrome.png new file mode 100644 index 0000000..8988743 Binary files /dev/null and b/static/assets/logos/chrome.png differ diff --git a/static/assets/logos/figma.png b/static/assets/logos/figma.png new file mode 100644 index 0000000..a653d0a Binary files /dev/null and b/static/assets/logos/figma.png differ diff --git a/static/assets/logos/github.png b/static/assets/logos/github.png new file mode 100644 index 0000000..f238e36 Binary files /dev/null and b/static/assets/logos/github.png differ diff --git a/static/assets/logos/google.png b/static/assets/logos/google.png new file mode 100644 index 0000000..bba5738 Binary files /dev/null and b/static/assets/logos/google.png differ diff --git a/static/assets/logos/instagram.png b/static/assets/logos/instagram.png new file mode 100644 index 0000000..0b3781e Binary files /dev/null and b/static/assets/logos/instagram.png differ diff --git a/static/assets/logos/microsoft.png b/static/assets/logos/microsoft.png new file mode 100644 index 0000000..e1f801e Binary files /dev/null and b/static/assets/logos/microsoft.png differ diff --git a/static/assets/logos/netflix.png b/static/assets/logos/netflix.png new file mode 100644 index 0000000..b29418d Binary files /dev/null and b/static/assets/logos/netflix.png differ diff --git a/static/assets/logos/nike.png b/static/assets/logos/nike.png new file mode 100644 index 0000000..2b37375 Binary files /dev/null and b/static/assets/logos/nike.png differ diff --git a/static/assets/logos/pinterest.png b/static/assets/logos/pinterest.png new file mode 100644 index 0000000..ac5a80b Binary files /dev/null and b/static/assets/logos/pinterest.png differ diff --git a/static/assets/logos/safari.png b/static/assets/logos/safari.png new file mode 100644 index 0000000..35116df Binary files /dev/null and b/static/assets/logos/safari.png differ diff --git a/static/assets/logos/spotify.png b/static/assets/logos/spotify.png new file mode 100644 index 0000000..a3b8e6f Binary files /dev/null and b/static/assets/logos/spotify.png differ diff --git a/static/assets/logos/starbucks.png b/static/assets/logos/starbucks.png new file mode 100644 index 0000000..1025201 Binary files /dev/null and b/static/assets/logos/starbucks.png differ diff --git a/static/assets/logos/tik-tok.png b/static/assets/logos/tik-tok.png new file mode 100644 index 0000000..51c418d Binary files /dev/null and b/static/assets/logos/tik-tok.png differ diff --git a/static/assets/logos/twitter.png b/static/assets/logos/twitter.png new file mode 100644 index 0000000..fbd37b9 Binary files /dev/null and b/static/assets/logos/twitter.png differ diff --git a/static/assets/logos/youtube.png b/static/assets/logos/youtube.png new file mode 100644 index 0000000..e8988ce Binary files /dev/null and b/static/assets/logos/youtube.png differ diff --git a/static/assets/stdf_512px.png b/static/assets/stdf_512px.png new file mode 100644 index 0000000..79b6f6f Binary files /dev/null and b/static/assets/stdf_512px.png differ diff --git a/static/assets/stdf_dark_512px.png b/static/assets/stdf_dark_512px.png new file mode 100644 index 0000000..46f1de5 Binary files /dev/null and b/static/assets/stdf_dark_512px.png differ diff --git a/static/fonts/Trueno.otf b/static/fonts/Trueno.otf new file mode 100644 index 0000000..82a3952 Binary files /dev/null and b/static/fonts/Trueno.otf differ diff --git a/static/stdf.svg b/static/stdf.svg new file mode 100644 index 0000000..59130e0 --- /dev/null +++ b/static/stdf.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/stdf_dark.svg b/static/stdf_dark.svg new file mode 100644 index 0000000..599d3a3 --- /dev/null +++ b/static/stdf_dark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/svelte.config.js b/svelte.config.js new file mode 100644 index 0000000..3e98b73 --- /dev/null +++ b/svelte.config.js @@ -0,0 +1,28 @@ +import adapter from '@sveltejs/adapter-static'; +import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; + +/** @type {import('@sveltejs/kit').Config} */ +const config = { + kit: { + // 使用纯静态适配器，并配置打包文件的输入目录 + // Use pure static adapter and configure the input directory of the package file + adapter: adapter({ + // may differ from host to host + // 可能因主机而异 + fallback: '404.html', + }), + // paths: { + // // @ts-ignore + // base: process.argv.includes('dev') ? '' : process.env.BASE_PATH, + // }, + }, + onwarn: (warning, handler) => { + if (warning.code.startsWith('a11y-')) { + return; + } + handler(warning); + }, + preprocess: vitePreprocess(), +}; + +export default config; diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..3bf8be1 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,77 @@ +/** @type {import('tailwindcss').Config} */ +export default { + content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/stdf/**/*.svelte'], + theme: { + colors: { + // 主题色 + // Theme Color + primary: { + 50: 'rgba(var(--theme-color-primary-50), )', + 100: 'rgba(var(--theme-color-primary-100), )', + 200: 'rgba(var(--theme-color-primary-200), )', + 300: 'rgba(var(--theme-color-primary-300), )', + 400: 'rgba(var(--theme-color-primary-400), )', + 500: 'rgba(var(--theme-color-primary-500), )', + DEFAULT: 'rgba(var(--theme-color-primary), )', + 700: 'rgba(var(--theme-color-primary-700), )', + 800: 'rgba(var(--theme-color-primary-800), )', + 900: 'rgba(var(--theme-color-primary-900), )', + 950: 'rgba(var(--theme-color-primary-950), )', + }, + dark: { + 50: 'rgba(var(--theme-color-dark-50), )', + 100: 'rgba(var(--theme-color-dark-100), )', + 200: 'rgba(var(--theme-color-dark-200), )', + 300: 'rgba(var(--theme-color-dark-300), )', + 400: 'rgba(var(--theme-color-dark-400), )', + 500: 'rgba(var(--theme-color-dark-500), )', + DEFAULT: 'rgba(var(--theme-color-dark), )', + 700: 'rgba(var(--theme-color-dark-700), )', + 800: 'rgba(var(--theme-color-dark-800), )', + 900: 'rgba(var(--theme-color-dark-900), )', + 950: 'rgba(var(--theme-color-dark-950), )', + }, + primaryBlack: 'rgba(var(--theme-color-primaryBlack), )', + primaryWhite: 'rgba(var(--theme-color-primaryWhite), )', + darkBlack: 'rgba(var(--theme-color-darkBlack), )', + darkWhite: 'rgba(var(--theme-color-darkWhite), )', + + // 功能色 + // Functional Color + success: 'rgba(var(--theme-color-functional-success), )', + warning: 'rgba(var(--theme-color-functional-warning), )', + error: 'rgba(var(--theme-color-functional-error), )', + info: 'rgba(var(--theme-color-functional-info), )', + + // 扩展色 + // Extended Color + extend0: 'rgba(var(--theme-color-extend0), )', + extend1: 'rgba(var(--theme-color-extend1), )', + extend2: 'rgba(var(--theme-color-extend2), )', + + // 中性色 + // Neutral Color + black: '#000000', + white: '#ffffff', + gray: { + 50: '#f2f2f2', + 100: '#e6e6e6', + 200: '#cccccc', + 300: '#b3b3b3', + 400: '#999999', + 500: '#808080', + 600: '#666666', + 700: '#4D4D4D', + 800: '#333333', + 900: '#1A1A1A', + 950: '#0D0D0D', + }, + transparent: 'transparent', + }, + extend: { + fontFamily: { Trueno: 'Trueno' }, + }, + }, + darkMode: 'class', + plugins: [], +}; diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..e0a16f7 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,9 @@ +import { sveltekit } from '@sveltejs/kit/vite'; +import { defineConfig } from 'vite'; +import svgSprite from 'rollup-plugin-stdf-icon'; + +export default defineConfig({ + // @ts-ignore + plugins: [sveltekit({}), svgSprite()], + server: { hmr: true, host: '0.0.0.0', port: 8888 }, +});