mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 18:04:26 +04:00
Compare commits
1 Commits
dev-orders
...
changeset-
| Author | SHA1 | Date | |
|---|---|---|---|
|
2d320870f5 |
@@ -1,6 +1,11 @@
|
||||
>= 1%
|
||||
last 2 versions
|
||||
Firefox ESR
|
||||
last 1 major version
|
||||
not dead
|
||||
safari >= 15.4
|
||||
iOS >= 15.4
|
||||
Chrome >= 60
|
||||
Firefox >= 60
|
||||
Edge >= 15.15063
|
||||
Explorer 11
|
||||
iOS >= 10
|
||||
Safari >= 10
|
||||
Android >= 6
|
||||
not ExplorerMobile <= 11
|
||||
|
||||
57
.build/download-images.js
Normal file
57
.build/download-images.js
Normal file
@@ -0,0 +1,57 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
'use strict'
|
||||
|
||||
const fs = require('node:fs')
|
||||
const path = require('node:path')
|
||||
const request = require('request')
|
||||
const filePath = path.join(__dirname, '../src/pages/_data/photos.json')
|
||||
|
||||
const photos = JSON.parse(fs.readFileSync(filePath, 'utf8'))
|
||||
|
||||
const urlTitle = (str) => {
|
||||
str = str
|
||||
.toLowerCase()
|
||||
.replaceAll('&', 'and')
|
||||
.replace(/[^[a-z0-9-]/g, '-')
|
||||
.replace(/-+/g, '-')
|
||||
|
||||
return str
|
||||
}
|
||||
|
||||
const download = function (uri, filename, callback, error) {
|
||||
request.head(uri, function (err, res, body) {
|
||||
request(uri).pipe(fs.createWriteStream(filename))
|
||||
.on('close', callback)
|
||||
.on('error', error)
|
||||
})
|
||||
}
|
||||
|
||||
async function downloadPhotos() {
|
||||
for (const key in photos) {
|
||||
const photo = photos[key]
|
||||
|
||||
let filename, i = 1;
|
||||
|
||||
do {
|
||||
filename = `${urlTitle(photo['title'])}${i > 1 ? `-${i}` : ''}.jpg`
|
||||
i++
|
||||
} while (fs.existsSync(path.join(__dirname, `../src/static/photos/${filename}`)))
|
||||
|
||||
await new Promise((resolve, reject) => {
|
||||
download(photo['path'], path.join(__dirname, `../src/static/photos/${filename}`), function () {
|
||||
resolve()
|
||||
}, function () {
|
||||
reject()
|
||||
});
|
||||
})
|
||||
|
||||
photos[key]['file'] = filename
|
||||
photos[key]['horizontal'] = photo['width'] > photo['height']
|
||||
}
|
||||
|
||||
fs.writeFileSync(filePath, JSON.stringify(photos))
|
||||
}
|
||||
|
||||
downloadPhotos();
|
||||
|
||||
37
.build/import-icons.js
Normal file
37
.build/import-icons.js
Normal file
@@ -0,0 +1,37 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
'use strict'
|
||||
|
||||
const fs = require('fs'),
|
||||
path = require('path');
|
||||
|
||||
const iconsTags = require('../node_modules/@tabler/icons/icons.json'),
|
||||
iconsPkg = require('../node_modules/@tabler/icons/package.json');
|
||||
|
||||
const prepareSvgFile = (svg) => {
|
||||
return svg.replace(/\n/g, '').replace(/>\s+</g, '><').replace(/\s+/g, ' ')
|
||||
}
|
||||
|
||||
let svgList = {}
|
||||
for (let iconName in iconsTags) {
|
||||
let iconData = iconsTags[iconName]
|
||||
svgList[iconName] = {
|
||||
name: iconName,
|
||||
svg: {
|
||||
outline: iconData.styles.outline ? prepareSvgFile(fs.readFileSync(path.join(__dirname, `../node_modules/@tabler/icons/icons/outline/${iconName}.svg`), 'utf8')) : null,
|
||||
filled: iconData.styles.filled ? prepareSvgFile(fs.readFileSync(path.join(__dirname, `../node_modules/@tabler/icons/icons/filled/${iconName}.svg`), 'utf8')) : null,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fs.writeFileSync(
|
||||
path.join(__dirname, `../src/pages/_data/icons-info.json`),
|
||||
JSON.stringify({
|
||||
version: iconsPkg.version,
|
||||
count: Object.values(svgList).reduce((acc, icon) => {
|
||||
return acc + (icon.svg.outline ? 1 : 0) + (icon.svg.filled ? 1 : 0)
|
||||
}, 0)
|
||||
})
|
||||
)
|
||||
|
||||
fs.writeFileSync(path.join(__dirname, `../src/pages/_data/icons.json`), JSON.stringify(svgList))
|
||||
44
.build/import-illustrations.js
Normal file
44
.build/import-illustrations.js
Normal file
@@ -0,0 +1,44 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
'use strict'
|
||||
|
||||
const fs = require('fs'),
|
||||
path = require('path'),
|
||||
glob = require('glob');
|
||||
|
||||
const illustrations = glob
|
||||
.sync(path.join(__dirname, `../src/static/illustrations/light/*.png`))
|
||||
.map((file) => {
|
||||
return path.basename(file, '.png')
|
||||
})
|
||||
|
||||
fs.writeFileSync(
|
||||
path.join(__dirname, `../src/pages/_data/illustrations.json`),
|
||||
JSON.stringify(illustrations)
|
||||
)
|
||||
|
||||
|
||||
// let i = {}
|
||||
// const dirs = ['light', 'dark', 'autodark']
|
||||
// const ilustrations = ['not-found', 'computer-fix', 'boy-with-key', 'boy-girl']
|
||||
|
||||
// for(const dir of dirs) {
|
||||
// i[dir] = {}
|
||||
|
||||
// for(const ilustration of ilustrations) {
|
||||
// let svg = fs.readFileSync(path.join(__dirname, `../src/pages/_free-illustrations/${dir}/${ilustration}.svg`), 'utf8')
|
||||
|
||||
// svg = svg
|
||||
// .replace(/\n+/g, ' ')
|
||||
// .replace(/>\s+</g, '><')
|
||||
// .replace(/\s+/g, ' ')
|
||||
// .replace(/^[\n\s-]+/, '')
|
||||
|
||||
// i[dir][ilustration] = svg
|
||||
// }
|
||||
// }
|
||||
|
||||
// fs.writeFileSync(
|
||||
// path.join(__dirname, `../src/pages/_data/free-illustrations.json`),
|
||||
// JSON.stringify(i)
|
||||
// )
|
||||
36
.build/reformat-mdx.js
Normal file
36
.build/reformat-mdx.js
Normal file
@@ -0,0 +1,36 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
'use strict'
|
||||
|
||||
const fs = require('fs'),
|
||||
path = require('path'),
|
||||
glob = require('glob'),
|
||||
beautifyHtml = require('js-beautify').html;
|
||||
|
||||
const docs = glob
|
||||
.sync(path.join(__dirname, `../docs/**/*.mdx`))
|
||||
|
||||
docs.forEach((file, i) => {
|
||||
const oldContent = fs.readFileSync(file, 'utf8')
|
||||
|
||||
// get codeblocks from markdown
|
||||
const content = oldContent.replace(/(```([a-z0-9]+).*?\n)(.*?)(```)/gs, (m, m1, m2, m3, m4) => {
|
||||
if (m2 === 'html') {
|
||||
let m3m = beautifyHtml(m3, {
|
||||
"indent_size": 2,
|
||||
"indent_char": " ",
|
||||
}).trim();
|
||||
|
||||
// remove empty lines
|
||||
m3m = m3m.replace(/^\s*[\r\n]/gm, '');
|
||||
|
||||
return m1 + m3m + "\n" + m4;
|
||||
}
|
||||
return m
|
||||
})
|
||||
|
||||
if (content !== oldContent) {
|
||||
fs.writeFileSync(file, content, 'utf8')
|
||||
console.log(`Reformatted ${file}`)
|
||||
}
|
||||
})
|
||||
26
.build/unused-files.js
Normal file
26
.build/unused-files.js
Normal file
@@ -0,0 +1,26 @@
|
||||
const glob = require('glob');
|
||||
const fs = require('fs')
|
||||
const path = require('path')
|
||||
|
||||
const srcDir = path.join(__dirname, '../src')
|
||||
|
||||
let foundFiles = []
|
||||
glob.sync(`${srcDir}/pages/**/*.{html,md}`).forEach((file) => {
|
||||
let fileContent = fs.readFileSync(file)
|
||||
|
||||
fileContent.toString().replace(/\{% include(_cached)? "([a-z0-9\/_-]+\.html)"/g, (f, c, filename) => {
|
||||
filename = `${srcDir}/pages/_includes/${filename}`
|
||||
|
||||
if (!foundFiles.includes(filename)) {
|
||||
foundFiles.push(filename)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
let includeFiles = glob.sync(`${srcDir}/pages/_includes/**/*.html`)
|
||||
|
||||
includeFiles.forEach((file) => {
|
||||
if (!foundFiles.includes(file)) {
|
||||
console.log('file', file)
|
||||
}
|
||||
})
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/core": patch
|
||||
---
|
||||
|
||||
Fix overflow of `label` in a `floating-input`
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/core": patch
|
||||
---
|
||||
|
||||
Enable `scrollSpy` in `countup` module
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/core": patch
|
||||
---
|
||||
|
||||
Add segmented control component
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"preview": patch
|
||||
---
|
||||
|
||||
Fix timeline card layout and profile header styles
|
||||
@@ -1,4 +0,0 @@
|
||||
---
|
||||
---
|
||||
|
||||
Refactor bundlewatch workflow to use Turbo
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/core": patch
|
||||
---
|
||||
|
||||
Fix size of `apexcharts` tooltip marker
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/core": patch
|
||||
---
|
||||
|
||||
Fix negative margins in `.navbar-bordered` variant
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/core": minor
|
||||
---
|
||||
|
||||
Refactored the project into a monorepo, removed Gulp, and introduced a new, more efficient build process.
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/core": patch
|
||||
---
|
||||
|
||||
Use the full license agreement for illustrations in docs
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
Improve documentation for buttons
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/core": patch
|
||||
---
|
||||
|
||||
Fix vertical alignment in single page and error layouts
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/core": "minor"
|
||||
---
|
||||
|
||||
Add documentation for segmented control component
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/core": patch
|
||||
---
|
||||
|
||||
Fix `.avatar-upload` double borders
|
||||
@@ -1,4 +0,0 @@
|
||||
---
|
||||
---
|
||||
|
||||
Update `robots.txt` handling and improve sitemap URL generation
|
||||
12
.github/workflows/bundlewatch.yml
vendored
12
.github/workflows/bundlewatch.yml
vendored
@@ -19,14 +19,6 @@ jobs:
|
||||
- name: Clone repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Cache turbo build setup
|
||||
uses: actions/cache@v4
|
||||
with:
|
||||
path: .turbo
|
||||
key: ${{ runner.os }}-turbo-${{ github.sha }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-turbo-
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
@@ -34,6 +26,8 @@ jobs:
|
||||
|
||||
- name: Install PNPM
|
||||
uses: pnpm/action-setup@v4
|
||||
with:
|
||||
version: 8
|
||||
|
||||
- name: Set up Bundler
|
||||
uses: ruby/setup-ruby@v1
|
||||
@@ -44,7 +38,7 @@ jobs:
|
||||
- name: Install pnpm dependencies
|
||||
run: pnpm install --no-frozen-lockfile
|
||||
|
||||
- name: Build
|
||||
- name: Run build
|
||||
run: pnpm run build
|
||||
|
||||
- name: Run bundlewatch
|
||||
|
||||
3
.github/workflows/release.yml
vendored
3
.github/workflows/release.yml
vendored
@@ -3,6 +3,7 @@ name: Release
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
- dev
|
||||
|
||||
permissions:
|
||||
@@ -30,6 +31,8 @@ jobs:
|
||||
|
||||
- name: Install PNPM
|
||||
uses: pnpm/action-setup@v4
|
||||
with:
|
||||
version: 8
|
||||
|
||||
- name: Install Dependencies
|
||||
run: pnpm install
|
||||
|
||||
13
.github/workflows/test.yml
vendored
13
.github/workflows/test.yml
vendored
@@ -1,7 +1,8 @@
|
||||
name: Test build
|
||||
|
||||
on:
|
||||
pull_request: null
|
||||
pull_request:
|
||||
types: [ opened, reopened ]
|
||||
|
||||
env:
|
||||
NODE: 20
|
||||
@@ -16,14 +17,6 @@ jobs:
|
||||
- name: Clone repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Cache turbo build setup
|
||||
uses: actions/cache@v4
|
||||
with:
|
||||
path: .turbo
|
||||
key: ${{ runner.os }}-turbo-${{ github.sha }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-turbo-
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
@@ -31,6 +24,8 @@ jobs:
|
||||
|
||||
- name: Install PNPM
|
||||
uses: pnpm/action-setup@v4
|
||||
with:
|
||||
version: 8
|
||||
|
||||
- run: node --version
|
||||
|
||||
|
||||
9
.gitignore
vendored
9
.gitignore
vendored
@@ -19,18 +19,15 @@ node_modules/
|
||||
/svg-tmp/
|
||||
/components/
|
||||
/percy.sh
|
||||
/preview/pages/playground.html
|
||||
/preview/pages/screenshot.html
|
||||
/preview/pages/screenshot-*.html
|
||||
/preview/pages/playground-*.html
|
||||
/preview/pages/features.html
|
||||
/src/pages/playground.html
|
||||
/src/pages/playground-*.html
|
||||
/src/pages/features.html
|
||||
|
||||
.pnp.loader.mjs
|
||||
.pnp.cjs
|
||||
.yarn
|
||||
.next
|
||||
.vercel
|
||||
.turbo
|
||||
package-lock.json
|
||||
|
||||
demo/
|
||||
|
||||
16
.vscode/settings.json
vendored
16
.vscode/settings.json
vendored
@@ -1,12 +1,14 @@
|
||||
{
|
||||
"files.exclude": {
|
||||
"**/.git": true,
|
||||
"**/.svn": true,
|
||||
"**/.hg": true,
|
||||
"**/CVS": true,
|
||||
"**/.DS_Store": true,
|
||||
"**/Thumbs.db": true,
|
||||
"**/.idea/": true
|
||||
"**/.git": false,
|
||||
"**/.svn": false,
|
||||
"**/.hg": false,
|
||||
"**/CVS": false,
|
||||
"**/.DS_Store": false,
|
||||
"**/Thumbs.db": false,
|
||||
"**/.idea/": false,
|
||||
"dist": false,
|
||||
"demo": false
|
||||
},
|
||||
"explorerExclude.backup": {}
|
||||
}
|
||||
@@ -1,5 +1,11 @@
|
||||
# Changelog
|
||||
|
||||
## 1.0.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 11f4487: Use the full license agreement for illustrations in docs
|
||||
|
||||
## 1.0.0 - 2025-01-28
|
||||
|
||||
### Minor Changes
|
||||
|
||||
@@ -110,7 +110,7 @@ Once you complete the setup, you'll be able to run the various commands provided
|
||||
|
||||
## Build locally
|
||||
|
||||
You need to have `pnpm` installed.
|
||||
You need to have `pnpm` and `bundler` installed.
|
||||
|
||||
1. From the root `/tabler` directory, run installation in the command line: `pnpm install`
|
||||
2. Then execute `pnpm run start` to start up the application stack.
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
'use strict'
|
||||
|
||||
import { readFileSync, writeFileSync } from 'node:fs';
|
||||
import { join, dirname } from 'node:path';
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import { sync } from 'glob';
|
||||
import beautify from 'js-beautify';
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
const docs = sync(join(__dirname, '..', 'docs', '**', '*.mdx'))
|
||||
|
||||
docs.forEach((file, i) => {
|
||||
const oldContent = readFileSync(file, 'utf8')
|
||||
|
||||
// get codeblocks from markdown
|
||||
const content = oldContent.replace(/(```([a-z0-9]+).*?\n)(.*?)(```)/gs, (m, m1, m2, m3, m4) => {
|
||||
if (m2 === 'html') {
|
||||
// m3 = beautify.default.html(m3, {
|
||||
// "indent_size": 2,
|
||||
// "indent_char": " ",
|
||||
// }).trim();
|
||||
|
||||
// remove empty lines
|
||||
m3 = m3.replace(/^\s*[\r\n]/gm, '');
|
||||
|
||||
return m1 + m3 + "\n" + m4;
|
||||
}
|
||||
return m
|
||||
})
|
||||
|
||||
if (content !== oldContent) {
|
||||
writeFileSync(file, content, 'utf8')
|
||||
console.log(`Reformatted ${file}`)
|
||||
}
|
||||
})
|
||||
@@ -1,46 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
'use strict'
|
||||
|
||||
import { readFileSync, writeFileSync } from 'node:fs';
|
||||
import { join, dirname, basename } from 'node:path';
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import { sync } from 'glob';
|
||||
import banner from '@repo/banner';
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
const styles = sync(join(__dirname, '..', 'dist', 'css', '*.css'))
|
||||
|
||||
const plugins = {
|
||||
'tabler-flags': 'Flags',
|
||||
'tabler-flags.rtl': 'Flags RTL',
|
||||
'tabler-marketing': 'Marketing',
|
||||
'tabler-marketing.rtl': 'Marketing RTL',
|
||||
'tabler-payments': 'Payments',
|
||||
'tabler-payments.rtl': 'Payments RTL',
|
||||
'tabler-socials': 'Socials',
|
||||
'tabler-socials.rtl': 'Socials RTL',
|
||||
'tabler-vendors': 'Vendors',
|
||||
'tabler-vendors.rtl': 'Vendors RTL',
|
||||
}
|
||||
|
||||
styles.forEach((file, i) => {
|
||||
const content = readFileSync(file, 'utf8')
|
||||
const filename = basename(file)
|
||||
const pluginKey = Object.keys(plugins).find(plugin => filename.includes(plugin))
|
||||
const plugin = plugins[pluginKey]
|
||||
const regex = /^(@charset ['"][a-zA-Z0-9-]+['"];?)\n?/i
|
||||
|
||||
let newContent = ''
|
||||
|
||||
if (content.match(regex)) {
|
||||
newContent = content.replace(regex, (m, m1) => {
|
||||
return `${m1}\n${banner(plugin)}\n`
|
||||
})
|
||||
} else {
|
||||
newContent = `${banner(plugin)}\n${content}`
|
||||
}
|
||||
|
||||
writeFileSync(file, newContent, 'utf8')
|
||||
})
|
||||
@@ -1,15 +0,0 @@
|
||||
export default context => {
|
||||
return {
|
||||
map: {
|
||||
inline: false,
|
||||
annotation: true,
|
||||
sourcesContent: true
|
||||
},
|
||||
plugins: {
|
||||
autoprefixer: {
|
||||
cascade: false
|
||||
},
|
||||
rtlcss: context.env === 'RTL'
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
import path from 'node:path'
|
||||
import process from 'node:process'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import { babel } from '@rollup/plugin-babel'
|
||||
import { nodeResolve } from '@rollup/plugin-node-resolve'
|
||||
import replace from '@rollup/plugin-replace'
|
||||
import banner from '@repo/banner'
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
const ESM = process.env.ESM === 'true'
|
||||
|
||||
let destinationFile = `tabler${ESM ? '.esm' : ''}`
|
||||
const external = []
|
||||
const plugins = [
|
||||
babel({
|
||||
exclude: 'node_modules/**',
|
||||
babelHelpers: 'bundled'
|
||||
})
|
||||
]
|
||||
|
||||
plugins.push(
|
||||
replace({
|
||||
'process.env.NODE_ENV': '"production"',
|
||||
preventAssignment: true
|
||||
}),
|
||||
nodeResolve()
|
||||
)
|
||||
|
||||
const rollupConfig = {
|
||||
input: path.resolve(__dirname, `../js/tabler.${ESM ? 'esm' : 'umd'}.js`),
|
||||
output: {
|
||||
banner: banner(),
|
||||
file: path.resolve(__dirname, `../dist/js/${destinationFile}.js`),
|
||||
format: ESM ? 'esm' : 'umd',
|
||||
generatedCode: 'es2015'
|
||||
},
|
||||
external,
|
||||
plugins
|
||||
}
|
||||
|
||||
if (!ESM) {
|
||||
rollupConfig.output.name = 'tabler'
|
||||
}
|
||||
|
||||
export default rollupConfig
|
||||
3
core/js/src/bootstrap.js
vendored
3
core/js/src/bootstrap.js
vendored
@@ -1,3 +0,0 @@
|
||||
export * as Popper from '@popperjs/core';
|
||||
|
||||
export { Dropdown, Tooltip, Popover, Tab, Toast } from 'bootstrap';
|
||||
@@ -1,150 +0,0 @@
|
||||
{
|
||||
"name": "@tabler/core",
|
||||
"version": "1.0.0",
|
||||
"description": "Premium and Open Source dashboard template with responsive and high quality UI.",
|
||||
"homepage": "https://tabler.io",
|
||||
"scripts": {
|
||||
"dev": "pnpm run watch",
|
||||
"build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run copy",
|
||||
"clean": "rm -rf dist/* demo",
|
||||
"css": "pnpm run css-compile && pnpm run css-prefix && pnpm run css-rtl && pnpm run css-minify && pnpm run css-banner",
|
||||
"css-compile": "sass scss/:dist/css/ --no-source-map --load-path=node_modules",
|
||||
"css-banner": "node build/add-banner.mjs",
|
||||
"css-prefix": "postcss --config build/postcss.config.mjs --replace 'dist/css/*.css' '!dist/css/*.rtl*.css' '!dist/css/*.min.css'",
|
||||
"css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir 'dist/css' --ext '.rtl.css' 'dist/css/*.css' '!dist/css/*.min.css' '!dist/css/*.rtl.css'",
|
||||
"css-minify": "pnpm run css-minify-main && pnpm run css-minify-rtl",
|
||||
"css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix '.min' 'dist/css/*.css' '!dist/css/*.min.css' '!dist/css/*rtl*.css'",
|
||||
"css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix '.min' 'dist/css/*rtl.css' '!dist/css/*.min.css'",
|
||||
"js": "pnpm run js-compile && pnpm run js-minify",
|
||||
"js-compile": "pnpm run js-compile-standalone && pnpm run js-compile-standalone-esm",
|
||||
"js-compile-standalone": "rollup --config build/rollup.config.mjs --sourcemap",
|
||||
"js-compile-standalone-esm": "rollup --environment ESM:true --config build/rollup.config.mjs --sourcemap",
|
||||
"js-minify": "pnpm run js-minify-standalone && pnpm run js-minify-standalone-esm",
|
||||
"js-minify-standalone": "terser --compress passes=2 --mangle --comments '/^!/' --source-map 'content=dist/js/tabler.js.map,includeSources,url=tabler.min.js.map' --output dist/js/tabler.min.js dist/js/tabler.js",
|
||||
"js-minify-standalone-esm": "terser --compress passes=2 --mangle --comments '/^!/' --source-map 'content=dist/js/tabler.esm.js.map,includeSources,url=tabler.esm.min.js.map' --output dist/js/tabler.esm.min.js dist/js/tabler.esm.js",
|
||||
"copy": "pnpm run copy-img",
|
||||
"copy-img": "cp -r img dist/img",
|
||||
"watch": "pnpm run watch-css & pnpm run watch-js",
|
||||
"watch-css": "nodemon --watch scss/ --ext scss --exec 'pnpm run css-compile && pnpm run css-prefix'",
|
||||
"watch-js": "nodemon --watch js/ --ext js --exec 'pnpm run js-compile'",
|
||||
"bundlewatch": "bundlewatch",
|
||||
"format:check": "prettier --check src/**/*.{js,scss} --cache",
|
||||
"format:write": "prettier --write src/**/*.{js,scss} --cache"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/tabler/tabler.git"
|
||||
},
|
||||
"keywords": [
|
||||
"css",
|
||||
"sass",
|
||||
"mobile-first",
|
||||
"responsive",
|
||||
"front-end",
|
||||
"framework",
|
||||
"web"
|
||||
],
|
||||
"author": "codecalm",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/tabler/tabler/issues"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/codecalm"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20"
|
||||
},
|
||||
"files": [
|
||||
"docs/**/*",
|
||||
"dist/**/*",
|
||||
"js/**/*.{js,map}",
|
||||
"img/**/*.{svg}",
|
||||
"scss/**/*.scss"
|
||||
],
|
||||
"style": "dist/css/tabler.css",
|
||||
"sass": "scss/tabler.scss",
|
||||
"unpkg": "dist/js/tabler.min.js",
|
||||
"umd:main": "dist/js/tabler.min.js",
|
||||
"module": "dist/js/tabler.esm.js",
|
||||
"main": "dist/js/tabler.js",
|
||||
"bundlewatch": {
|
||||
"files": [
|
||||
{
|
||||
"path": "./dist/css/tabler.css",
|
||||
"maxSize": "75 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler.min.css",
|
||||
"maxSize": "70 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler.rtl.css",
|
||||
"maxSize": "75 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler.rtl.min.css",
|
||||
"maxSize": "70 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler-flags.css",
|
||||
"maxSize": "2 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler-flags.min.css",
|
||||
"maxSize": "2 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler-payments.css",
|
||||
"maxSize": "2 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler-payments.min.css",
|
||||
"maxSize": "2 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler-socials.css",
|
||||
"maxSize": "2 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler-socials.min.css",
|
||||
"maxSize": "2 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler-vendors.css",
|
||||
"maxSize": "7.5 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler-vendors.min.css",
|
||||
"maxSize": "6.5 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/js/tabler.js",
|
||||
"maxSize": "60 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/js/tabler.min.js",
|
||||
"maxSize": "45 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/js/tabler.esm.js",
|
||||
"maxSize": "60 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/js/tabler.esm.min.js",
|
||||
"maxSize": "45 kB"
|
||||
}
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"bootstrap": "5.3.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@repo/banner": "workspace:*"
|
||||
},
|
||||
"directories": {
|
||||
"doc": "docs"
|
||||
}
|
||||
}
|
||||
@@ -1,101 +0,0 @@
|
||||
.nav-segmented {
|
||||
--#{$prefix}nav-bg: var(--#{$prefix}bg-surface-tertiary);
|
||||
--#{$prefix}nav-padding: 2px;
|
||||
--#{$prefix}nav-height: 2.5rem;
|
||||
--#{$prefix}nav-gap: .25rem;
|
||||
--#{$prefix}nav-active-bg: var(--#{$prefix}bg-surface);
|
||||
--#{$prefix}nav-font-size: inherit;
|
||||
--#{$prefix}nav-radius: 6px;
|
||||
|
||||
|
||||
--#{$prefix}nav-link-disabled-color: var(--#{$prefix}disabled-color);
|
||||
--#{$prefix}nav-link-gap: .25rem;
|
||||
--#{$prefix}nav-link-padding-x: .75rem;
|
||||
--#{$prefix}nav-link-icon-size: 1.25rem;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--#{$prefix}nav-gap);
|
||||
padding: var(--#{$prefix}nav-padding);
|
||||
list-style: none;
|
||||
background: var(--#{$prefix}nav-bg);
|
||||
border-radius: calc(var(--#{$prefix}nav-radius) + var(--#{$prefix}nav-padding));
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
|
||||
|
||||
.nav-link {
|
||||
display: inline-flex;
|
||||
gap: calc(.25rem + var(--#{$prefix}nav-link-gap));
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
font-size: var(--#{$prefix}nav-font-size);
|
||||
min-width: calc(var(--#{$prefix}nav-height) - 2 * var(--#{$prefix}nav-padding));
|
||||
height: calc(var(--#{$prefix}nav-height) - 2 * var(--#{$prefix}nav-padding));
|
||||
padding: 0 calc(var(--#{$prefix}nav-link-padding-x) - 2px);
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
color: var(--#{$prefix}secondary);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: background-color $transition-time, color $transition-time;
|
||||
border-radius: var(--#{$prefix}nav-radius);
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
|
||||
&:hover,
|
||||
&.hover {
|
||||
background: rgba(0, 0, 0, .04);
|
||||
color: var(--#{$prefix}body-color);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: var(--#{$prefix}nav-link-disabled-color);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link-input:checked + .nav-link,
|
||||
.nav-link.active {
|
||||
color: var(--#{$prefix}body-color);
|
||||
background: var(--#{$prefix}nav-active-bg);
|
||||
border-color: var(--#{$prefix}border-color);
|
||||
}
|
||||
|
||||
.nav-link-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-link-icon {
|
||||
width: var(--#{$prefix}nav-link-icon-size);
|
||||
height: var(--#{$prefix}nav-link-icon-size);
|
||||
margin: 0 -.25rem;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-segmented-vertical {
|
||||
flex-direction: column;
|
||||
|
||||
.nav-link {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sm {
|
||||
--#{$prefix}nav-height: 2rem;
|
||||
--#{$prefix}nav-font-size: var(--tblr-font-size-h5);
|
||||
--#{$prefix}nav-radius: 4px;
|
||||
--#{$prefix}nav-link-padding-x: .5rem;
|
||||
--#{$prefix}nav-link-gap: .25rem;
|
||||
--#{$prefix}nav-link-icon-size: 1rem;
|
||||
}
|
||||
|
||||
.nav-lg {
|
||||
--#{$prefix}nav-height: 3rem;
|
||||
--#{$prefix}nav-font-size: var(--tblr-font-size-h3);
|
||||
--#{$prefix}nav-radius: 8px;
|
||||
--#{$prefix}nav-link-padding-x: 1rem;
|
||||
--#{$prefix}nav-link-gap: .5rem;
|
||||
--#{$prefix}nav-link-icon-size: 1.5rem;
|
||||
}
|
||||
@@ -91,6 +91,17 @@ Use the `.btn-ghost-*` class to make your button look simple yet aesthetically a
|
||||
</div>
|
||||
```
|
||||
|
||||
```html
|
||||
<a href="#" class="btn btn-ghost-primary">Primary</a>
|
||||
<a href="#" class="btn btn-ghost-secondary">Secondary</a>
|
||||
<a href="#" class="btn btn-ghost-success">Success</a>
|
||||
<a href="#" class="btn btn-ghost-warning">Warning</a>
|
||||
<a href="#" class="btn btn-ghost-danger">Danger</a>
|
||||
<a href="#" class="btn btn-ghost-info">Info</a>
|
||||
<a href="#" class="btn btn-ghost-dark">Dark</a>
|
||||
<a href="#" class="btn btn-ghost-light">Light</a>
|
||||
```
|
||||
|
||||
## Square buttons
|
||||
|
||||
Use the `.btn-square` class to remove the border radius, if you want the corners of your button to be square rather than rounded.
|
||||
@@ -99,6 +110,12 @@ Use the `.btn-square` class to remove the border radius, if you want the corners
|
||||
<a href="#" class="btn btn-square">Square button</a>
|
||||
```
|
||||
|
||||
```html
|
||||
<a href="#" class="btn btn-square">
|
||||
Square button
|
||||
</a>
|
||||
```
|
||||
|
||||
## Pill buttons
|
||||
|
||||
Add the `.btn-pill` class to your button to make it rounded and give it a modern and attractive look.
|
||||
@@ -107,6 +124,12 @@ Add the `.btn-pill` class to your button to make it rounded and give it a modern
|
||||
<a href="#" class="btn btn-pill">Pill button</a>
|
||||
```
|
||||
|
||||
```html
|
||||
<a href="#" class="btn btn-pill">
|
||||
Pill button
|
||||
</a>
|
||||
```
|
||||
|
||||
## Outline buttons
|
||||
|
||||
Replace the default modifier class with the `.btn-outline-*` class, if you want to remove the color and the background of your button and give it a more subtle look. Outline buttons are perfect to use as secondary buttons, as they don't distract users from the main action.
|
||||
@@ -122,6 +145,33 @@ Replace the default modifier class with the `.btn-outline-*` class, if you want
|
||||
<a href="#" class="btn btn-outline-light">Light</a>
|
||||
```
|
||||
|
||||
```html
|
||||
<a href="#" class="btn btn-outline-primary">
|
||||
Primary
|
||||
</a>
|
||||
<a href="#" class="btn btn-outline-secondary">
|
||||
Secondary
|
||||
</a>
|
||||
<a href="#" class="btn btn-outline-success">
|
||||
Success
|
||||
</a>
|
||||
<a href="#" class="btn btn-outline-warning">
|
||||
Warning
|
||||
</a>
|
||||
<a href="#" class="btn btn-outline-danger">
|
||||
Danger
|
||||
</a>
|
||||
<a href="#" class="btn btn-outline-info">
|
||||
Info
|
||||
</a>
|
||||
<a href="#" class="btn btn-outline-dark">
|
||||
Dark
|
||||
</a>
|
||||
<a href="#" class="btn btn-outline-light">
|
||||
Light
|
||||
</a>
|
||||
```
|
||||
|
||||
## Button size
|
||||
|
||||
Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate those which should have primary focus from those of secondary importance. Adapt the button size to your design and encourage users to take actions.
|
||||
@@ -144,7 +194,6 @@ Icons can be found [**here**](/docs/components/icons)
|
||||
|
||||
```html example centered separated height="7rem"
|
||||
<button type="button" class="btn">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/upload -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
|
||||
@@ -153,21 +202,18 @@ Icons can be found [**here**](/docs/components/icons)
|
||||
</svg> Upload
|
||||
</button>
|
||||
<button type="button" class="btn btn-warning">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/heart -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
|
||||
</svg> I like
|
||||
</button>
|
||||
<button type="button" class="btn btn-success">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/check -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M5 12l5 5l10 -10" />
|
||||
</svg> I agree
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/plus -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<line x1="12" y1="5" x2="12" y2="19" />
|
||||
@@ -175,53 +221,80 @@ Icons can be found [**here**](/docs/components/icons)
|
||||
</svg> More
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/link -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M9 15l6 -6" />
|
||||
<path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
|
||||
<path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
|
||||
<path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
|
||||
<path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" />
|
||||
</svg> Link
|
||||
</button>
|
||||
<button type="button" class="btn btn-info">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/message -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-message">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M8 9h8" />
|
||||
<path d="M8 13h6" />
|
||||
<path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12z" />
|
||||
<path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1" />
|
||||
<line x1="12" y1="12" x2="12" y2="12.01" />
|
||||
<line x1="8" y1="12" x2="8" y2="12.01" />
|
||||
<line x1="16" y1="12" x2="16" y2="12.01" />
|
||||
</svg> Comment
|
||||
</button>
|
||||
```
|
||||
|
||||
```html
|
||||
<button type="button" class="btn">
|
||||
<!-- SVG icon from http://tabler-icons.io -->
|
||||
<svg>...</svg>
|
||||
Upload
|
||||
</button>
|
||||
<button type="button" class="btn btn-warning">
|
||||
<!-- SVG icon from http://tabler-icons.io -->
|
||||
<svg>...</svg>
|
||||
I like
|
||||
</button>
|
||||
<button type="button" class="btn btn-success">
|
||||
<!-- SVG icon from http://tabler-icons.io -->
|
||||
<svg>...</svg>
|
||||
I agree
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary">
|
||||
<!-- SVG icon from http://tabler-icons.io -->
|
||||
<svg>...</svg>
|
||||
More
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger">
|
||||
<!-- SVG icon from http://tabler-icons.io -->
|
||||
<svg>...</svg>
|
||||
Link
|
||||
</button>
|
||||
<button type="button" class="btn btn-info">
|
||||
<!-- SVG icon from http://tabler-icons.io -->
|
||||
<svg>...</svg>
|
||||
Comment
|
||||
</button>
|
||||
```
|
||||
|
||||
## Social buttons
|
||||
|
||||
You can use the icons of popular social networking sites, which users are familiar with. Thanks to buttons with social media icons users can share content or follow a website with just one click, without leaving the website.
|
||||
|
||||
```html example vertical centered separated scrollable height="15rem"
|
||||
<a href="#" class="btn btn-facebook">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
|
||||
</svg> Facebook
|
||||
</a>
|
||||
<a href="#" class="btn btn-twitter">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
|
||||
</svg> Twitter
|
||||
</a>
|
||||
<a href="#" class="btn btn-google">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-google -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M17.788 5.108a9 9 0 1 0 3.212 6.892h-8" />
|
||||
</svg> Google
|
||||
</a>
|
||||
<a href="#" class="btn btn-youtube">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-youtube -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<rect x="3" y="5" width="18" height="14" rx="4" />
|
||||
@@ -229,14 +302,12 @@ You can use the icons of popular social networking sites, which users are famili
|
||||
</svg> Youtube
|
||||
</a>
|
||||
<a href="#" class="btn btn-vimeo">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-vimeo -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M3 8.5l1 1s1.5 -1.102 2 -.5c.509 .609 1.863 7.65 2.5 9c.556 1.184 1.978 2.89 4 1.5c2 -1.5 7.5 -5.5 8.5 -11.5c.444 -2.661 -1 -4 -2.5 -4c-2 0 -4.047 1.202 -4.5 4c2.05 -1.254 2.551 1.003 1.5 3c-1.052 2.005 -2 3 -2.5 3c-.49 0 -.924 -1.165 -1.5 -3.5c-.59 -2.42 -.5 -6.5 -3 -6.5s-5.5 4.5 -5.5 4.5z" />
|
||||
</svg> Vimeo
|
||||
</a>
|
||||
<a href="#" class="btn btn-dribbble">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-dribbble -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
@@ -246,14 +317,12 @@ You can use the icons of popular social networking sites, which users are famili
|
||||
</svg> Dribbble
|
||||
</a>
|
||||
<a href="#" class="btn btn-github">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-github -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
|
||||
</svg> Github
|
||||
</a>
|
||||
<a href="#" class="btn btn-instagram">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-instagram -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<rect x="4" y="4" width="16" height="16" rx="4" />
|
||||
@@ -262,7 +331,6 @@ You can use the icons of popular social networking sites, which users are famili
|
||||
</svg> Instagram
|
||||
</a>
|
||||
<a href="#" class="btn btn-pinterest">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-pinterest -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<line x1="8" y1="20" x2="12" y2="11" />
|
||||
@@ -271,14 +339,12 @@ You can use the icons of popular social networking sites, which users are famili
|
||||
</svg> Pinterest
|
||||
</a>
|
||||
<a href="#" class="btn btn-vk">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-vk -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M14 19h-4a8 8 0 0 1 -8 -8v-5h4v5a4 4 0 0 0 4 4h0v-9h4v4.5l.03 -.004a4.531 4.531 0 0 0 3.97 -4.496h4l-.342 1.711a6.858 6.858 0 0 1 -3.658 4.789h0a5.34 5.34 0 0 1 3.566 4.111l.434 2.389h0h-4a4.531 4.531 0 0 0 -3.97 -4.496v4.5z" />
|
||||
</svg> VK
|
||||
</a>
|
||||
<a href="#" class="btn btn-rss">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-rss -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<circle cx="5" cy="19" r="1" />
|
||||
@@ -287,7 +353,6 @@ You can use the icons of popular social networking sites, which users are famili
|
||||
</svg> RSS
|
||||
</a>
|
||||
<a href="#" class="btn btn-flickr">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-flickr -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<circle cx="7" cy="12" r="3" />
|
||||
@@ -295,7 +360,6 @@ You can use the icons of popular social networking sites, which users are famili
|
||||
</svg> Flickr
|
||||
</a>
|
||||
<a href="#" class="btn btn-bitbucket">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-bitbucket -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M3.648 4a0.64 .64 0 0 0 -.64 .744l3.14 14.528c.07 .417 .43 .724 .852 .728h10a0.644 .644 0 0 0 .642 -.539l3.35 -14.71a0.641 .641 0 0 0 -.64 -.744l-16.704 -.007z" />
|
||||
@@ -303,7 +367,6 @@ You can use the icons of popular social networking sites, which users are famili
|
||||
</svg> Bitbucket
|
||||
</a>
|
||||
<a href="#" class="btn btn-tabler">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-tabler -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M8 9l3 3l-3 3" />
|
||||
@@ -315,38 +378,99 @@ You can use the icons of popular social networking sites, which users are famili
|
||||
|
||||
```html
|
||||
<a href="#" class="btn btn-facebook">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
|
||||
<svg>...</svg>
|
||||
Facebook
|
||||
</a>
|
||||
<a href="#" class="btn btn-twitter">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
|
||||
<svg>...</svg>
|
||||
Twitter
|
||||
</a>
|
||||
<a href="#" class="btn btn-google">
|
||||
<!-- SVG icon from http://tabler-icons.io -->
|
||||
<svg>...</svg>
|
||||
Google
|
||||
</a>
|
||||
<a href="#" class="btn btn-youtube">
|
||||
<!-- SVG icon from http://tabler-icons.io -->
|
||||
<svg>...</svg>
|
||||
Youtube
|
||||
</a>
|
||||
<a href="#" class="btn btn-vimeo">
|
||||
<!-- SVG icon from http://tabler-icons.io -->
|
||||
<svg>...</svg>
|
||||
Vimeo
|
||||
</a>
|
||||
<a href="#" class="btn btn-dribbble">
|
||||
<!-- SVG icon from http://tabler-icons.io -->
|
||||
<svg>...</svg>
|
||||
Dribbble
|
||||
</a>
|
||||
<a href="#" class="btn btn-github">
|
||||
<!-- SVG icon from http://tabler-icons.io -->
|
||||
<svg>...</svg>
|
||||
Github
|
||||
</a>
|
||||
<a href="#" class="btn btn-instagram">
|
||||
<!-- SVG icon from http://tabler-icons.io -->
|
||||
<svg>...</svg>
|
||||
Instagram
|
||||
</a>
|
||||
<a href="#" class="btn btn-pinterest">
|
||||
<!-- SVG icon from http://tabler-icons.io -->
|
||||
<svg>...</svg>
|
||||
Pinterest
|
||||
</a>
|
||||
<a href="#" class="btn btn-vk">
|
||||
<!-- SVG icon from http://tabler-icons.io -->
|
||||
<svg>...</svg>
|
||||
VK
|
||||
</a>
|
||||
<a href="#" class="btn btn-rss">
|
||||
<!-- SVG icon from http://tabler-icons.io -->
|
||||
<svg>...</svg>
|
||||
RSS
|
||||
</a>
|
||||
<a href="#" class="btn btn-flickr">
|
||||
<!-- SVG icon from http://tabler-icons.io -->
|
||||
<svg>...</svg>
|
||||
Flickr
|
||||
</a>
|
||||
<a href="#" class="btn btn-bitbucket">
|
||||
<!-- SVG icon from http://tabler-icons.io -->
|
||||
<svg>...</svg>
|
||||
Bitbucket
|
||||
</a>
|
||||
<a href="#" class="btn btn-tabler">
|
||||
<!-- SVG icon from http://tabler-icons.io -->
|
||||
<svg>...</svg>
|
||||
Tabler
|
||||
</a>
|
||||
```
|
||||
|
||||
You can also add an icon without the name of a social networking site, if you want to display more buttons on a small space.
|
||||
|
||||
```html example separated scrollable height="7rem"
|
||||
<a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-x btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-x -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-x">
|
||||
<a href="#" class="btn btn-twitter btn-icon" aria-label="Button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M4 4l11.733 16h4.267l-11.733 -16z" />
|
||||
<path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" />
|
||||
<path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-google btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-google -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M17.788 5.108a9 9 0 1 0 3.212 6.892h-8" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-youtube btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-youtube -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<rect x="3" y="5" width="18" height="14" rx="4" />
|
||||
@@ -354,14 +478,12 @@ You can also add an icon without the name of a social networking site, if you wa
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-vimeo btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-vimeo -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M3 8.5l1 1s1.5 -1.102 2 -.5c.509 .609 1.863 7.65 2.5 9c.556 1.184 1.978 2.89 4 1.5c2 -1.5 7.5 -5.5 8.5 -11.5c.444 -2.661 -1 -4 -2.5 -4c-2 0 -4.047 1.202 -4.5 4c2.05 -1.254 2.551 1.003 1.5 3c-1.052 2.005 -2 3 -2.5 3c-.49 0 -.924 -1.165 -1.5 -3.5c-.59 -2.42 -.5 -6.5 -3 -6.5s-5.5 4.5 -5.5 4.5z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-dribbble btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-dribbble -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
@@ -371,14 +493,12 @@ You can also add an icon without the name of a social networking site, if you wa
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-github btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-github -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-instagram btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-instagram -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<rect x="4" y="4" width="16" height="16" rx="4" />
|
||||
@@ -387,7 +507,6 @@ You can also add an icon without the name of a social networking site, if you wa
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-pinterest btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-pinterest -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<line x1="8" y1="20" x2="12" y2="11" />
|
||||
@@ -396,14 +515,12 @@ You can also add an icon without the name of a social networking site, if you wa
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-vk btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-vk -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M14 19h-4a8 8 0 0 1 -8 -8v-5h4v5a4 4 0 0 0 4 4h0v-9h4v4.5l.03 -.004a4.531 4.531 0 0 0 3.97 -4.496h4l-.342 1.711a6.858 6.858 0 0 1 -3.658 4.789h0a5.34 5.34 0 0 1 3.566 4.111l.434 2.389h0h-4a4.531 4.531 0 0 0 -3.97 -4.496v4.5z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-rss btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/rss -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<circle cx="5" cy="19" r="1" />
|
||||
@@ -412,7 +529,6 @@ You can also add an icon without the name of a social networking site, if you wa
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-flickr btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-flickr -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<circle cx="7" cy="12" r="3" />
|
||||
@@ -420,7 +536,6 @@ You can also add an icon without the name of a social networking site, if you wa
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-bitbucket btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-bitbucket -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M3.648 4a0.64 .64 0 0 0 -.64 .744l3.14 14.528c.07 .417 .43 .724 .852 .728h10a0.644 .644 0 0 0 .642 -.539l3.35 -14.71a0.641 .641 0 0 0 -.64 -.744l-16.704 -.007z" />
|
||||
@@ -428,7 +543,6 @@ You can also add an icon without the name of a social networking site, if you wa
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-tabler btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-tabler -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M8 9l3 3l-3 3" />
|
||||
@@ -440,6 +554,59 @@ You can also add an icon without the name of a social networking site, if you wa
|
||||
|
||||
```html
|
||||
<a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
|
||||
<svg>...</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-twitter btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
|
||||
<svg>...</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-google btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-google -->
|
||||
<svg>...</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-youtube btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-youtube -->
|
||||
<svg>...</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-vimeo btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-vimeo -->
|
||||
<svg>...</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-dribbble btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-dribbble -->
|
||||
<svg>...</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-github btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-github -->
|
||||
<svg>...</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-instagram btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-instagram -->
|
||||
<svg>...</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-pinterest btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-pinterest -->
|
||||
<svg>...</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-vk btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-vk -->
|
||||
<svg>...</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-rss btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/rss -->
|
||||
<svg>...</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-flickr btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-flickr -->
|
||||
<svg>...</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-bitbucket btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-bitbucket -->
|
||||
<svg>...</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-tabler btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-tabler -->
|
||||
<svg>...</svg>
|
||||
</a>
|
||||
```
|
||||
@@ -450,21 +617,18 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
|
||||
|
||||
```html example centered separated height="7rem"
|
||||
<a href="#" class="btn btn-primary btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/activity -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M3 12h4l3 8l4 -16l3 8h4" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-github btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-github -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-success btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/bell -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
|
||||
@@ -472,14 +636,12 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-warning btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/star -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-danger btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/trash -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<line x1="4" y1="7" x2="20" y2="7" />
|
||||
@@ -490,7 +652,6 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-purple btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/chart-bar -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<rect x="3" y="12" width="6" height="8" rx="1" />
|
||||
@@ -500,7 +661,6 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/git-merge -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<circle cx="7" cy="18" r="2" />
|
||||
@@ -514,6 +674,31 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
|
||||
|
||||
```html
|
||||
<a href="#" class="btn btn-primary btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/activity -->
|
||||
<svg>...</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-github btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/brand-github -->
|
||||
<svg>...</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-success btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/bell -->
|
||||
<svg>...</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-warning btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/star -->
|
||||
<svg>...</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-danger btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/trash -->
|
||||
<svg>...</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-purple btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/chart-bar -->
|
||||
<svg>...</svg>
|
||||
</a>
|
||||
<a href="#" class="btn btn-icon" aria-label="Button">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/git-merge -->
|
||||
<svg>...</svg>
|
||||
</a>
|
||||
```
|
||||
@@ -522,10 +707,9 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
|
||||
|
||||
Create a dropdown button that will encourage users to click for more options. You can add a label with an icon or remove the label and add an icon on its own if you want to save space. Choose the option that will best suit your design and improve the user experience.
|
||||
|
||||
```html example separated height="10rem"
|
||||
```html example centered separated height="7rem"
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/calendar -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<rect x="4" y="5" width="16" height="16" rx="2" />
|
||||
@@ -543,7 +727,6 @@ Create a dropdown button that will encourage users to click for more options. Yo
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/calendar -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<rect x="4" y="5" width="16" height="16" rx="2" />
|
||||
@@ -571,11 +754,44 @@ Create a dropdown button that will encourage users to click for more options. Yo
|
||||
```html
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/calendar -->
|
||||
<svg>...</svg>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
Action
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
Another action
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
|
||||
<!-- SVG icon from http://tabler.io/icons/icon/calendar -->
|
||||
<svg>...</svg>
|
||||
Show calendar
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">
|
||||
Action
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
Another action
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
|
||||
Show calendar
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">
|
||||
Action
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
Another action
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@@ -585,6 +801,11 @@ Create a dropdown button that will encourage users to click for more options. Yo
|
||||
Add the `.btn-loading` class to show a button's loading state, which can be useful in the case of operations that take longer to process. Thanks to that, users will be aware of the current state of their action and won't give it up before it's finished.
|
||||
|
||||
```html example centered separated height="7rem"
|
||||
<a href="#" class="btn btn-primary btn-loading">Button</a>
|
||||
<a href="#" class="btn btn-primary btn-loading">Loading button with loooong content</a>
|
||||
```
|
||||
|
||||
```html
|
||||
<a href="#" class="btn btn-primary btn-loading">
|
||||
Button
|
||||
</a>
|
||||
@@ -594,6 +815,12 @@ Add the `.btn-loading` class to show a button's loading state, which can be usef
|
||||
```
|
||||
|
||||
```html example centered height="7rem"
|
||||
<a href="#" class="btn btn-primary">
|
||||
<span class="spinner-border spinner-border-sm me-2" role="status"></span> Button
|
||||
</a>
|
||||
```
|
||||
|
||||
```html
|
||||
<a href="#" class="btn btn-primary">
|
||||
<span class="spinner-border spinner-border-sm me-2" role="status"></span>
|
||||
Button
|
||||
@@ -668,12 +895,24 @@ Use buttons with avatars to simplify the process of interaction and make your de
|
||||
|
||||
```html example centered separated height="7rem"
|
||||
<a href="#" class="btn">
|
||||
<span class="avatar" style="background-image: url(https://images.unsplash.com/photo-1542534759-05f6c34a9e63?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)"></span> Avatar
|
||||
<span class="avatar" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1542534759-05f6c34a9e63?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)'}}></span> Avatar
|
||||
</a>
|
||||
<a href="#" class="btn">
|
||||
<span class="avatar" style="background-image: url(https://images.unsplash.com/photo-1546539782-6fc531453083?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)"></span> Avatar
|
||||
<span class="avatar" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1546539782-6fc531453083?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)'}}></span> Avatar
|
||||
</a>
|
||||
<a href="#" class="btn">
|
||||
<span class="avatar" style="background-image: url(https://images.unsplash.com/photo-1541585452861-0375331f10bf?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)"></span> Avatar
|
||||
<span class="avatar" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1541585452861-0375331f10bf?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)'}}></span> Avatar
|
||||
</a>
|
||||
```
|
||||
|
||||
```html
|
||||
<a href="#" class="btn">
|
||||
<span class="avatar" style="background-image: url(...)"></span> Avatar
|
||||
</a>
|
||||
<a href="#" class="btn">
|
||||
<span class="avatar" style="background-image: url(...)"></span> Avatar
|
||||
</a>
|
||||
<a href="#" class="btn">
|
||||
<span class="avatar" style="background-image: url(...)"></span> Avatar
|
||||
</a>
|
||||
```
|
||||
|
||||
@@ -1,201 +0,0 @@
|
||||
---
|
||||
title: Segmented Control
|
||||
summary: A segmented control is a set of two or more segments, each of which functions as a mutually exclusive button. A segmented control is used to display a set of mutually exclusive options.
|
||||
---
|
||||
|
||||
To create a segmented control, use the `nav` element with the `nav-segmented` class. Inside the `nav` element, add `button` or `a` elements with the `nav-link` class. The `nav-link` class is used to style the buttons as links.
|
||||
|
||||
```html
|
||||
<nav class="nav nav-segmented" role="tablist">
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
|
||||
First
|
||||
</button>
|
||||
...
|
||||
</nav>
|
||||
```
|
||||
|
||||
See the example below to see how the segmented control looks.
|
||||
|
||||
```html example centered background="white"
|
||||
<nav class="nav nav-segmented" role="tablist">
|
||||
<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
|
||||
First
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
Second
|
||||
</button>
|
||||
<button class="nav-link" disabled role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
Disabled
|
||||
</button>
|
||||
</nav>
|
||||
```
|
||||
|
||||
## Full width
|
||||
|
||||
To make the segmented control full width, add the `w-100` class to the `nav` element. It will take up the full width of its parent container.
|
||||
|
||||
```html
|
||||
<nav class="nav nav-segmented w-100" role="tablist">
|
||||
...
|
||||
</nav>
|
||||
```
|
||||
|
||||
The results can be seen in the example below.
|
||||
|
||||
```html example vcentered background="white"
|
||||
<nav class="nav nav-segmented w-100" role="tablist">
|
||||
<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
|
||||
Daily
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
Weekly
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
Monthly
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
Quarterly
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
Yearly
|
||||
</button>
|
||||
</nav>
|
||||
```
|
||||
|
||||
## With emojis
|
||||
|
||||
You can also use emojis in the segmented control. To do this, add the emoji inside the `button` element.
|
||||
|
||||
```html example centered background="white"
|
||||
<nav class="nav nav-segmented nav-1" role="tablist">
|
||||
<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
|
||||
👦
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
👦🏿
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
👦🏾
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
👦🏽
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
👦🏼
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
👦🏻
|
||||
</button>
|
||||
</nav>
|
||||
```
|
||||
|
||||
## With icons
|
||||
|
||||
You can also use icons in the segmented control. To do this, add the icon inside the `button` element.
|
||||
|
||||
|
||||
```html example centered background="white"
|
||||
<nav class="nav nav-segmented" role="tablist">
|
||||
<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
|
||||
<!-- Download SVG icon from http://tabler.io/icons/icon/list -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-link-icon icon-2"><path d="M9 6l11 0"></path><path d="M9 12l11 0"></path><path d="M9 18l11 0"></path><path d="M5 6l0 .01"></path><path d="M5 12l0 .01"></path><path d="M5 18l0 .01"></path></svg>
|
||||
List
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
<!-- Download SVG icon from http://tabler.io/icons/icon/layout -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-link-icon icon-2"><path d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path></svg>
|
||||
Kanban
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
<!-- Download SVG icon from http://tabler.io/icons/icon/calendar -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-link-icon icon-2"><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"></path><path d="M16 3v4"></path><path d="M8 3v4"></path><path d="M4 11h16"></path><path d="M11 15h1"></path><path d="M12 15v3"></path></svg>
|
||||
Calendar
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
<!-- Download SVG icon from http://tabler.io/icons/icon/files -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-link-icon icon-2"><path d="M15 3v4a1 1 0 0 0 1 1h4"></path><path d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2z"></path><path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>
|
||||
Files
|
||||
</button>
|
||||
</nav>
|
||||
```
|
||||
|
||||
## Vertical direction
|
||||
|
||||
To create a vertical segmented control, add the `nav-segmented-vertical` class to the `nav` element.
|
||||
|
||||
```html
|
||||
<nav class="nav nav-segmented-vertical" role="tablist">
|
||||
...
|
||||
</nav>
|
||||
```
|
||||
|
||||
The results can be seen in the example below.
|
||||
|
||||
```html example centered background="white"
|
||||
<nav class="nav nav-segmented nav-segmented-vertical" role="tablist">
|
||||
<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
|
||||
<!-- Download SVG icon from http://tabler.io/icons/icon/list -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-link-icon icon-2"><path d="M9 6l11 0"></path><path d="M9 12l11 0"></path><path d="M9 18l11 0"></path><path d="M5 6l0 .01"></path><path d="M5 12l0 .01"></path><path d="M5 18l0 .01"></path></svg>
|
||||
List
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
<!-- Download SVG icon from http://tabler.io/icons/icon/layout -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-link-icon icon-2"><path d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path></svg>
|
||||
Kanban
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
<!-- Download SVG icon from http://tabler.io/icons/icon/calendar -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-link-icon icon-2"><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"></path><path d="M16 3v4"></path><path d="M8 3v4"></path><path d="M4 11h16"></path><path d="M11 15h1"></path><path d="M12 15v3"></path></svg>
|
||||
Calendar
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
<!-- Download SVG icon from http://tabler.io/icons/icon/files -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-link-icon icon-2"><path d="M15 3v4a1 1 0 0 0 1 1h4"></path><path d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2z"></path><path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>
|
||||
Files
|
||||
</button>
|
||||
</nav>
|
||||
```
|
||||
|
||||
## Sizes
|
||||
|
||||
You can also change the size of the segmented control. To do this, add the `nav-sm` or `nv-lg` class to the `nav` element. The `nav-sm` class will make the segmented control smaller, while the `nav-lg` class will make it larger.
|
||||
|
||||
```html
|
||||
<nav class="nav nav-segmented nav-sm" role="tablist">
|
||||
...
|
||||
</nav>
|
||||
```
|
||||
|
||||
The results can be seen in the examples below.
|
||||
|
||||
```html example vertical centered background="white" separated
|
||||
<nav class="nav nav-segmented nav-sm" role="tablist">
|
||||
<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
|
||||
List
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
Kanban
|
||||
</button>
|
||||
<button class="nav-link disabled" role="tab" data-bs-toggle="tab" aria-selected="false" aria-disabled="true" tabindex="-1">
|
||||
Calendar
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
Files
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<nav class="nav nav-segmented nav-lg" role="tablist">
|
||||
<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
|
||||
List
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
Kanban
|
||||
</button>
|
||||
<button class="nav-link disabled" role="tab" data-bs-toggle="tab" aria-selected="false" aria-disabled="true" tabindex="-1">
|
||||
Calendar
|
||||
</button>
|
||||
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
||||
Files
|
||||
</button>
|
||||
</nav>
|
||||
```
|
||||
@@ -1,60 +1,20 @@
|
||||
import { readFileSync } from 'node:fs';
|
||||
import { readFileSync } from 'fs';
|
||||
import { EleventyRenderPlugin } from "@11ty/eleventy";
|
||||
import { join, dirname } from 'node:path';
|
||||
import { sync } from 'glob';
|
||||
|
||||
/*
|
||||
* Copy list
|
||||
*/
|
||||
const getCopyList = () => {
|
||||
let copy = {
|
||||
"node_modules/@tabler/core/dist": "dist",
|
||||
"pages/favicon.ico": "favicon.ico",
|
||||
"static": "static",
|
||||
}
|
||||
|
||||
const libs = JSON.parse(readFileSync('./pages/_data/libs.json'));
|
||||
|
||||
let files = []
|
||||
|
||||
Object.keys(libs.js).forEach((lib) => {
|
||||
files.push(Array.isArray(libs.js[lib]) ? libs.js[lib] : [libs.js[lib]])
|
||||
})
|
||||
|
||||
Object.keys(libs.css).forEach((lib) => {
|
||||
files.push(Array.isArray(libs.css[lib]) ? libs.css[lib] : [libs.css[lib]])
|
||||
})
|
||||
|
||||
Object.keys(libs['js-copy']).forEach((lib) => {
|
||||
files.push(libs['js-copy'][lib])
|
||||
})
|
||||
|
||||
files = files.flat()
|
||||
|
||||
files.forEach((file) => {
|
||||
if (!file.match(/^https?/)) {
|
||||
copy[`node_modules/${dirname(file)}`] = `libs/${dirname(file) }`;
|
||||
}
|
||||
})
|
||||
|
||||
return copy;
|
||||
}
|
||||
|
||||
/** @type {import('@11ty/eleventy').LocalConfig} */
|
||||
export default function (eleventyConfig) {
|
||||
const environment = process.env.NODE_ENV || "production";
|
||||
const env = process.env.NODE_ENV || "development";
|
||||
const isDevelopment = env === "development";
|
||||
|
||||
eleventyConfig.setInputDirectory("pages");
|
||||
eleventyConfig.setOutputDirectory("dist");
|
||||
eleventyConfig.setInputDirectory("src/pages");
|
||||
eleventyConfig.setOutputDirectory(process.env.DIST_DIR || "demo");
|
||||
|
||||
eleventyConfig.setLayoutsDirectory("_layouts");
|
||||
eleventyConfig.setIncludesDirectory("_includes");
|
||||
|
||||
// eleventyConfig.addWatchTarget("../core/dist/**");
|
||||
// eleventyConfig.setWatchThrottleWaitTime(100);
|
||||
eleventyConfig.setWatchThrottleWaitTime(100);
|
||||
|
||||
eleventyConfig.addPassthroughCopy(getCopyList());
|
||||
eleventyConfig.setServerPassthroughCopyBehavior("passthrough");
|
||||
eleventyConfig.addPassthroughCopy("src/pages/favicon.ico");
|
||||
|
||||
eleventyConfig.addPlugin(EleventyRenderPlugin, {
|
||||
accessGlobalData: true,
|
||||
@@ -66,33 +26,20 @@ export default function (eleventyConfig) {
|
||||
dynamicPartials: true,
|
||||
jekyllWhere: true,
|
||||
});
|
||||
/**
|
||||
* Server
|
||||
*/
|
||||
if (process.env.ELEVENTY_RUN_MODE === "serve") {
|
||||
eleventyConfig.setServerPassthroughCopyBehavior("passthrough");
|
||||
}
|
||||
|
||||
if (isDevelopment) {
|
||||
eleventyConfig.addWatchTarget("dist");
|
||||
}
|
||||
|
||||
/**
|
||||
* Data
|
||||
*/
|
||||
eleventyConfig.addGlobalData("environment", environment);
|
||||
eleventyConfig.addGlobalData("environment", env);
|
||||
|
||||
eleventyConfig.addGlobalData("package", JSON.parse(readFileSync(join("..", "core", "package.json"), "utf-8")));
|
||||
eleventyConfig.addGlobalData("readme", readFileSync(join("..", "README.md"), "utf-8"));
|
||||
eleventyConfig.addGlobalData("license", readFileSync(join("..", "LICENSE"), "utf-8"));
|
||||
eleventyConfig.addGlobalData("changelog", readFileSync(join("..", "CHANGELOG.md"), "utf-8"));
|
||||
|
||||
eleventyConfig.addGlobalData("pages", () => {
|
||||
return sync('pages/**/*.html').filter((file) => {
|
||||
return !file.includes('pages/_') && !file.includes('pages/docs/index.html');
|
||||
}).map((file) => {
|
||||
return {
|
||||
url: file.replace(/^pages\//, '/')
|
||||
}
|
||||
});
|
||||
});
|
||||
eleventyConfig.addGlobalData("package", JSON.parse(readFileSync("package.json", "utf-8")));
|
||||
eleventyConfig.addGlobalData("readme", readFileSync("README.md", "utf-8"));
|
||||
eleventyConfig.addGlobalData("license", readFileSync("LICENSE", "utf-8"));
|
||||
eleventyConfig.addGlobalData("changelog", readFileSync("CHANGELOG.md", "utf-8"));
|
||||
|
||||
eleventyConfig.addGlobalData("site", {
|
||||
title: "Tabler",
|
||||
@@ -105,7 +52,7 @@ export default function (eleventyConfig) {
|
||||
githubSponsorsUrl: "https://github.com/sponsors/codecalm",
|
||||
changelogUrl: "https://github.com/tabler/tabler/releases",
|
||||
sponsorUrl: "https://github.com/sponsors/codecalm",
|
||||
previewUrl: "https://preview.tabler.io",
|
||||
previewUrl: "https://tabler.io/demo",
|
||||
docsUrl: "https://tabler.io/docs",
|
||||
|
||||
mapboxKey: "pk.eyJ1IjoidGFibGVyIiwiYSI6ImNscHh3dnhndjB2M3QycW85bGd0NXRmZ3YifQ.9LfHPsNoEXQH-xzz-81Ffw",
|
||||
@@ -429,10 +376,6 @@ export default function (eleventyConfig) {
|
||||
}
|
||||
});
|
||||
|
||||
eleventyConfig.addFilter("contains", (items, item) => {
|
||||
return items && Array.isArray(items) && items.includes(item);
|
||||
});
|
||||
|
||||
eleventyConfig.addFilter("concat_objects", function (object, object2) {
|
||||
if (
|
||||
object &&
|
||||
400
gulpfile.js
Normal file
400
gulpfile.js
Normal file
@@ -0,0 +1,400 @@
|
||||
const gulp = require('gulp'),
|
||||
debug = require('gulp-debug'),
|
||||
clean = require('gulp-clean'),
|
||||
sass = require('gulp-sass')(require('sass')),
|
||||
postcss = require('gulp-postcss'),
|
||||
header = require('gulp-header'),
|
||||
cleanCSS = require('gulp-clean-css'),
|
||||
rtlcss = require('gulp-rtlcss'),
|
||||
minifyJS = require('gulp-terser'),
|
||||
rename = require('gulp-rename'),
|
||||
purgecss = require('gulp-purgecss'),
|
||||
rollupStream = require('@rollup/stream'),
|
||||
rollupBabel = require('rollup-plugin-babel'),
|
||||
rollupCleanup = require('rollup-plugin-cleanup'),
|
||||
{ nodeResolve } = require('@rollup/plugin-node-resolve'),
|
||||
rollupCommonjs = require('@rollup/plugin-commonjs'),
|
||||
rollupReplace = require('@rollup/plugin-replace'),
|
||||
vinylSource = require('vinyl-source-stream'),
|
||||
vinylBuffer = require('vinyl-buffer'),
|
||||
browserSync = require('browser-sync'),
|
||||
spawn = require('cross-spawn'),
|
||||
path = require('path'),
|
||||
yargs = require('yargs/yargs'),
|
||||
cp = require('child_process'),
|
||||
pkg = require('./package.json'),
|
||||
year = new Date().getFullYear(),
|
||||
replace = require('gulp-replace'),
|
||||
argv = yargs(process.argv).argv
|
||||
|
||||
let BUILD = false,
|
||||
distDir = './dist',
|
||||
demoDir = './demo',
|
||||
srcDir = './src'
|
||||
|
||||
/**
|
||||
* Enable BUILD mode and set directories
|
||||
*/
|
||||
gulp.task('build-on', (cb) => {
|
||||
BUILD = true
|
||||
cb()
|
||||
})
|
||||
|
||||
/**
|
||||
* Return banner added to CSS and JS dist files
|
||||
*/
|
||||
const getBanner = () => {
|
||||
return `/*!
|
||||
* Tabler v${pkg.version} (${pkg.homepage})
|
||||
* @version ${pkg.version}
|
||||
* @link ${pkg.homepage}
|
||||
* Copyright 2018-${year} The Tabler Authors
|
||||
* Copyright 2018-${year} codecalm.net Paweł Kuna
|
||||
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
|
||||
*/
|
||||
`
|
||||
}
|
||||
|
||||
/**
|
||||
* Clean `dist` folder before build
|
||||
*/
|
||||
gulp.task('clean-dirs', () => {
|
||||
return gulp
|
||||
.src(`{${distDir}/*,${demoDir}/*}`, { read: false })
|
||||
.pipe(clean())
|
||||
})
|
||||
|
||||
/**
|
||||
* Compile SASS to CSS and move it to dist directory
|
||||
*/
|
||||
gulp.task('sass', () => {
|
||||
return gulp
|
||||
.src(`${srcDir}/scss/!(_)*.scss`)
|
||||
.pipe(debug())
|
||||
.pipe(sass({
|
||||
includePaths: ['node_modules'],
|
||||
style: 'expanded',
|
||||
precision: 7,
|
||||
importer: (url, prev, done) => {
|
||||
if (url[0] === '~') {
|
||||
url = path.resolve('node_modules', url.substr(1))
|
||||
}
|
||||
|
||||
return { file: url }
|
||||
},
|
||||
}))
|
||||
.on('error', function (err) {
|
||||
throw err;
|
||||
})
|
||||
.pipe(postcss([
|
||||
require('autoprefixer'),
|
||||
]))
|
||||
.pipe(gulp.dest(`${distDir}/css/`))
|
||||
.pipe(browserSync.reload({
|
||||
stream: true,
|
||||
}));
|
||||
})
|
||||
|
||||
gulp.task('css-rtl', function () {
|
||||
return gulp.src(`${distDir}/css/*.css`)
|
||||
.pipe(rtlcss())
|
||||
.pipe(rename((path) => {
|
||||
path.basename += '.rtl'
|
||||
}))
|
||||
.pipe(gulp.dest(`${distDir}/css/`))
|
||||
});
|
||||
|
||||
/**
|
||||
* CSS minify
|
||||
*/
|
||||
gulp.task('css-minify', function () {
|
||||
return gulp.src(`${distDir}/css/!(*.min).css`)
|
||||
.pipe(debug())
|
||||
.pipe(cleanCSS())
|
||||
.pipe(rename((path) => {
|
||||
path.basename += '.min'
|
||||
}))
|
||||
.pipe(gulp.dest(`${distDir}/css/`))
|
||||
})
|
||||
|
||||
/**
|
||||
* Compile JS files to dist directory
|
||||
*/
|
||||
let cache = {}
|
||||
|
||||
const compileJs = function (name, mjs = false) {
|
||||
if (!cache[name]) {
|
||||
cache[name] = null
|
||||
}
|
||||
|
||||
const g = rollupStream({
|
||||
input: `${srcDir}/js/${name}.js`,
|
||||
cache: cache[name],
|
||||
output: {
|
||||
name: `${name}.js`,
|
||||
format: mjs ? 'es' : 'umd',
|
||||
...(mjs ? { exports: 'named' } : {})
|
||||
},
|
||||
plugins: [
|
||||
rollupReplace({
|
||||
'process.env.NODE_ENV': JSON.stringify(BUILD ? 'production' : 'development'),
|
||||
preventAssignment: false
|
||||
}),
|
||||
rollupBabel({
|
||||
exclude: 'node_modules/**'
|
||||
}),
|
||||
nodeResolve(),
|
||||
rollupCommonjs(),
|
||||
rollupCleanup()
|
||||
]
|
||||
})
|
||||
.on('bundle', (bundle) => {
|
||||
cache[name] = bundle
|
||||
})
|
||||
.pipe(vinylSource(`${name}.js`))
|
||||
.pipe(vinylBuffer())
|
||||
.pipe(rename((path) => {
|
||||
path.dirname = ''
|
||||
}))
|
||||
.pipe(gulp.dest(`${distDir}/js/`))
|
||||
.pipe(browserSync.reload({
|
||||
stream: true,
|
||||
}))
|
||||
|
||||
if (BUILD) {
|
||||
g.pipe(minifyJS())
|
||||
.pipe(rename((path) => {
|
||||
path.extname = '.min.js'
|
||||
}))
|
||||
.pipe(gulp.dest(`${distDir}/js/`))
|
||||
}
|
||||
|
||||
return g
|
||||
}
|
||||
|
||||
/**
|
||||
* Compile JS files to dist directory
|
||||
*/
|
||||
gulp.task('js', () => {
|
||||
return compileJs('tabler')
|
||||
})
|
||||
|
||||
gulp.task('js-demo', () => {
|
||||
return compileJs('demo')
|
||||
})
|
||||
|
||||
gulp.task('js-demo-theme', () => {
|
||||
return compileJs('demo-theme')
|
||||
})
|
||||
|
||||
/**
|
||||
* Compile JS module files to dist directory
|
||||
*/
|
||||
gulp.task('mjs', () => {
|
||||
return compileJs('tabler.esm', true)
|
||||
})
|
||||
|
||||
let cacheEsm
|
||||
gulp.task('mjs', () => {
|
||||
const g = rollupStream({
|
||||
input: `${srcDir}/js/tabler.esm.js`,
|
||||
cache: cacheEsm,
|
||||
output: {
|
||||
name: 'tabler.esm.js',
|
||||
format: 'es',
|
||||
exports: 'named'
|
||||
},
|
||||
plugins: [
|
||||
rollupReplace({
|
||||
'process.env.NODE_ENV': JSON.stringify(BUILD ? 'production' : 'development'),
|
||||
preventAssignment: false
|
||||
}),
|
||||
rollupBabel({
|
||||
exclude: 'node_modules/**'
|
||||
}),
|
||||
nodeResolve(),
|
||||
rollupCommonjs(),
|
||||
rollupCleanup()
|
||||
]
|
||||
})
|
||||
.on('bundle', (bundle) => {
|
||||
cacheEsm = bundle
|
||||
})
|
||||
.pipe(vinylSource('tabler.esm.js'))
|
||||
.pipe(vinylBuffer())
|
||||
.pipe(rename((path) => {
|
||||
path.dirname = ''
|
||||
}))
|
||||
.pipe(gulp.dest(`${distDir}/js/`))
|
||||
.pipe(browserSync.reload({
|
||||
stream: true,
|
||||
}))
|
||||
|
||||
if (BUILD) {
|
||||
g.pipe(minifyJS())
|
||||
.pipe(rename((path) => {
|
||||
path.extname = '.min.js'
|
||||
}))
|
||||
.pipe(gulp.dest(`${distDir}/js/`))
|
||||
}
|
||||
|
||||
return g
|
||||
})
|
||||
|
||||
/**
|
||||
* Watch eleventy files and build it to demo directory
|
||||
*/
|
||||
gulp.task('watch-eleventy', (cb) => {
|
||||
browserSync.notify('Building eleventy')
|
||||
return spawn('pnpm', ['run', 'watch:html'], { stdio: 'inherit' })
|
||||
.on('close', cb)
|
||||
})
|
||||
|
||||
/**
|
||||
* Build eleventy files do demo directory
|
||||
*/
|
||||
gulp.task('build-eleventy', (cb) => {
|
||||
var env = Object.create(process.env)
|
||||
|
||||
if (argv.preview) {
|
||||
env.eleventy_ENV = 'preview'
|
||||
} else {
|
||||
env.eleventy_ENV = 'production'
|
||||
}
|
||||
|
||||
return spawn('pnpm', ['run', 'build:html'], {
|
||||
env: env,
|
||||
stdio: 'inherit'
|
||||
})
|
||||
.on('close', cb)
|
||||
})
|
||||
|
||||
gulp.task('build-cleanup', () => {
|
||||
return gulp
|
||||
.src(`${demoDir}/redirects.json`, { read: false, allowEmpty: true })
|
||||
.pipe(clean())
|
||||
})
|
||||
|
||||
gulp.task('build-purgecss', (cb) => {
|
||||
if (argv.preview) {
|
||||
return gulp.src('demo/dist/{libs,css}/**/*.css')
|
||||
.pipe(purgecss({
|
||||
content: ['demo/**/*.html']
|
||||
}))
|
||||
.pipe(gulp.dest('demo/dist/css'))
|
||||
}
|
||||
|
||||
cb()
|
||||
})
|
||||
|
||||
|
||||
/**
|
||||
* Watch JS and SCSS files
|
||||
*/
|
||||
gulp.task('watch', (cb) => {
|
||||
gulp.watch('./src/scss/**/*.scss', gulp.series('sass'))
|
||||
gulp.watch('./src/js/**/*.js', gulp.parallel('js', 'mjs', gulp.parallel('js-demo', 'js-demo-theme')))
|
||||
cb()
|
||||
})
|
||||
|
||||
/**
|
||||
* Create BrowserSync server
|
||||
*/
|
||||
gulp.task('browser-sync', () => {
|
||||
browserSync({
|
||||
watch: true,
|
||||
server: {
|
||||
baseDir: demoDir,
|
||||
routes: {
|
||||
'/node_modules': 'node_modules',
|
||||
'/dist/img': `${srcDir}/img`,
|
||||
'/static': `${srcDir}/static`,
|
||||
'/dist': `${distDir}`,
|
||||
},
|
||||
},
|
||||
port: 3000,
|
||||
open: false,
|
||||
host: 'localhost',
|
||||
notify: false,
|
||||
reloadOnRestart: true
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
* Copy libs used in tabler from npm to dist directory
|
||||
*/
|
||||
gulp.task('copy-libs', (cb) => {
|
||||
const allLibs = require(`${srcDir}/pages/_data/libs`)
|
||||
|
||||
let files = []
|
||||
|
||||
Object.keys(allLibs.js).forEach((lib) => {
|
||||
files.push(Array.isArray(allLibs.js[lib]) ? allLibs.js[lib] : [allLibs.js[lib]])
|
||||
})
|
||||
|
||||
Object.keys(allLibs.css).forEach((lib) => {
|
||||
files.push(Array.isArray(allLibs.css[lib]) ? allLibs.css[lib] : [allLibs.css[lib]])
|
||||
})
|
||||
|
||||
Object.keys(allLibs['js-copy']).forEach((lib) => {
|
||||
files.push(allLibs['js-copy'][lib])
|
||||
})
|
||||
|
||||
files = files.flat()
|
||||
|
||||
files.forEach((file) => {
|
||||
if (!file.match(/^https?/)) {
|
||||
let dirname = path.dirname(file).replace('@', '')
|
||||
let cmd = `mkdir -p "${distDir}/libs/${dirname}" && cp -r node_modules/${path.dirname(file)}/* ${distDir}/libs/${dirname}`
|
||||
|
||||
cp.exec(cmd)
|
||||
}
|
||||
})
|
||||
|
||||
cb()
|
||||
})
|
||||
|
||||
/**
|
||||
* Copy static files (flags, payments images, etc) to dist directory
|
||||
*/
|
||||
gulp.task('copy-images', () => {
|
||||
return gulp
|
||||
.src(`${srcDir}/img/**/*`)
|
||||
.pipe(gulp.dest(`${distDir}/img`))
|
||||
})
|
||||
|
||||
/**
|
||||
* Copy static files (demo images, etc) to demo directory
|
||||
*/
|
||||
gulp.task('copy-static', () => {
|
||||
return gulp
|
||||
.src(`${srcDir}/static/**/*`)
|
||||
.pipe(gulp.dest(`${demoDir}/static`))
|
||||
})
|
||||
|
||||
/**
|
||||
* Copy Tabler dist files to demo directory
|
||||
*/
|
||||
gulp.task('copy-dist', () => {
|
||||
return gulp
|
||||
.src(`${distDir}/**/*`)
|
||||
.pipe(gulp.dest(`${demoDir}/dist/`))
|
||||
})
|
||||
|
||||
/**
|
||||
* Add banner to build JS and CSS files
|
||||
*/
|
||||
gulp.task('add-banner', () => {
|
||||
return gulp.src(`${distDir}/{css,js}/**/*.{js,css}`)
|
||||
.pipe(header(getBanner()))
|
||||
.pipe(replace(/^([\s\S]+)(@charset "UTF-8";)\n?/, '$2\n$1'))
|
||||
.pipe(gulp.dest(`${distDir}`))
|
||||
})
|
||||
|
||||
gulp.task('clean', gulp.series('clean-dirs'))
|
||||
|
||||
gulp.task('start', gulp.series('clean', 'sass', 'js', gulp.parallel('js-demo', 'js-demo-theme'), 'mjs', 'build-eleventy', gulp.parallel('watch-eleventy', 'watch', 'browser-sync')))
|
||||
|
||||
gulp.task('build-core', gulp.series('build-on', 'clean', 'sass', 'css-rtl', 'css-minify', 'js', gulp.parallel('js-demo', 'js-demo-theme'), 'mjs', 'copy-images', 'copy-libs', 'add-banner'))
|
||||
gulp.task('build-demo', gulp.series('build-on', 'build-eleventy', 'copy-static', 'copy-dist', 'build-cleanup', 'build-purgecss'))
|
||||
gulp.task('build', gulp.series('build-core', 'build-demo'))
|
||||
287
package.json
287
package.json
@@ -1,38 +1,275 @@
|
||||
{
|
||||
"private": true,
|
||||
"name": "@tabler/core",
|
||||
"version": "1.0.1",
|
||||
"description": "Premium and Open Source dashboard template with responsive and high quality UI.",
|
||||
"homepage": "https://tabler.io",
|
||||
"scripts": {
|
||||
"build": "turbo build",
|
||||
"dev": "turbo dev",
|
||||
"clean": "turbo clean",
|
||||
"bundlewatch": "turbo bundlewatch",
|
||||
"dev": "pnpm run start",
|
||||
"start": "gulp start",
|
||||
"build": "gulp build",
|
||||
"build-docs": "mkdir public && touch public/index.html && echo 'ok'",
|
||||
"preview": "gulp build --preview",
|
||||
"svg-optimize": "svgo -f svg/brand --pretty",
|
||||
"unused-files": "node .build/unused-files.js",
|
||||
"version": "changeset version",
|
||||
"publish": "changeset publish",
|
||||
"reformat-mdx": "node build/reformat-mdx.mjs"
|
||||
"svg-icons": "node .build/import-icons.js",
|
||||
"bundlewatch": "bundlewatch",
|
||||
"storybook": "start-storybook -p 6006",
|
||||
"changelog": "node .build/changelog.js",
|
||||
"icons": "git checkout dev && BRANCH_NAME=\"dev-tabler-icons-`pnpm info @tabler/icons version`\" && git branch $BRANCH_NAME && git checkout $BRANCH_NAME && ncu -u @tabler/icons && pnpm install && pnpm run svg-icons && git add . && git commit -am \"update icons to v`pnpm info @tabler/icons version`\" && git push origin $BRANCH_NAME && git checkout dev",
|
||||
"download-images": "node .build/download-images.js",
|
||||
"optimize-images": "for i in ./src/static/photos/*.jpg; do convert \"$i\" -quality 80% \"${i%.jpg}.jpg\"; done",
|
||||
"format:check": "prettier --check src/**/*.{js,scss} --cache",
|
||||
"format:write": "prettier --write src/**/*.{js,scss} --cache",
|
||||
"illustrations": "node .build/import-illustrations.js",
|
||||
"build:html": "eleventy",
|
||||
"watch:html": "eleventy --watch --incremental",
|
||||
"zip": "mkdir -p packages-zip && zip -r packages-zip/tabler-$(node -p \"require('./package.json').version\").zip demo/*"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/tabler/tabler.git"
|
||||
},
|
||||
"keywords": [
|
||||
"css",
|
||||
"sass",
|
||||
"mobile-first",
|
||||
"responsive",
|
||||
"front-end",
|
||||
"framework",
|
||||
"web"
|
||||
],
|
||||
"author": "codecalm",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/tabler/tabler/issues"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/codecalm"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20"
|
||||
},
|
||||
"files": [
|
||||
"docs/**/*",
|
||||
"dist/**/*",
|
||||
"src/js/**/*.{js,map}",
|
||||
"src/img/**/*.{svg}",
|
||||
"src/scss/**/*.scss"
|
||||
],
|
||||
"style": "dist/css/tabler.css",
|
||||
"sass": "src/scss/tabler.scss",
|
||||
"unpkg": "dist/js/tabler.min.js",
|
||||
"umd:main": "dist/js/tabler.min.js",
|
||||
"module": "dist/js/tabler.esm.js",
|
||||
"main": "dist/js/tabler.js",
|
||||
"bundlewatch": {
|
||||
"files": [
|
||||
{
|
||||
"path": "./dist/css/tabler.css",
|
||||
"maxSize": "75 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler.min.css",
|
||||
"maxSize": "70 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler.rtl.css",
|
||||
"maxSize": "75 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler.rtl.min.css",
|
||||
"maxSize": "70 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler-flags.css",
|
||||
"maxSize": "2 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler-flags.min.css",
|
||||
"maxSize": "2 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler-payments.css",
|
||||
"maxSize": "2 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler-payments.min.css",
|
||||
"maxSize": "2 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler-socials.css",
|
||||
"maxSize": "2 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler-socials.min.css",
|
||||
"maxSize": "2 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler-vendors.css",
|
||||
"maxSize": "7.5 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/tabler-vendors.min.css",
|
||||
"maxSize": "6.5 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/js/tabler.js",
|
||||
"maxSize": "60 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/js/tabler.min.js",
|
||||
"maxSize": "45 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/js/tabler.esm.js",
|
||||
"maxSize": "60 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/js/tabler.esm.min.js",
|
||||
"maxSize": "45 kB"
|
||||
}
|
||||
]
|
||||
},
|
||||
"packageManager": "pnpm@9.15.4",
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-babel": "^6.0.4",
|
||||
"@rollup/plugin-commonjs": "^28.0.2",
|
||||
"@rollup/plugin-node-resolve": "^16.0.0",
|
||||
"@rollup/plugin-replace": "^6.0.2",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"bundlewatch": "^0.4.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"nodemon": "^3.1.9",
|
||||
"postcss": "^8.5.1",
|
||||
"postcss-cli": "^11.0.0",
|
||||
"rollup": "4.34.4",
|
||||
"rtlcss": "^4.3.0",
|
||||
"sass": "1.71.0",
|
||||
"clean-css-cli": "^5.6.3",
|
||||
"terser": "^5.38.1",
|
||||
"@11ty/eleventy": "^3.0.0",
|
||||
"@babel/core": "^7.26.7",
|
||||
"@babel/preset-env": "^7.26.7",
|
||||
"@changesets/changelog-github": "^0.5.0",
|
||||
"@changesets/cli": "^2.27.12",
|
||||
"glob": "^11.0.1",
|
||||
"@rollup/plugin-commonjs": "^24.1.0",
|
||||
"@rollup/plugin-node-resolve": "^15.3.1",
|
||||
"@rollup/plugin-replace": "^5.0.7",
|
||||
"@rollup/stream": "^2.0.0",
|
||||
"apexcharts": "^4.4.0",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"autosize": "^6.0.1",
|
||||
"browser-sync": "^2.29.3",
|
||||
"bundlewatch": "^0.4.0",
|
||||
"choices.js": "^11.0.3",
|
||||
"countup.js": "^2.8.0",
|
||||
"cross-spawn": "^7.0.6",
|
||||
"dropzone": "^6.0.0-beta.2",
|
||||
"flatpickr": "^4.6.13",
|
||||
"fslightbox": "^3.4.2",
|
||||
"glob": "^10.4.5",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-clean": "^0.4.0",
|
||||
"gulp-clean-css": "^4.3.0",
|
||||
"gulp-debug": "^4.0.0",
|
||||
"gulp-header": "^2.0.9",
|
||||
"gulp-postcss": "^9.1.0",
|
||||
"gulp-purgecss": "^5.0.0",
|
||||
"gulp-rename": "^2.0.0",
|
||||
"gulp-replace": "^1.1.4",
|
||||
"gulp-rtlcss": "^2.0.0",
|
||||
"gulp-sass": "^5.1.0",
|
||||
"gulp-terser": "^2.1.0",
|
||||
"html-minifier": "^4.0.0",
|
||||
"imageoptim-cli": "^3.1.9",
|
||||
"imask": "^7.6.1",
|
||||
"js-beautify": "^1.15.1",
|
||||
"prettier": "^3.4.2",
|
||||
"turbo": "^2.4.0"
|
||||
"jsvectormap": "^1.6.0",
|
||||
"list.js": "^2.3.1",
|
||||
"litepicker": "^2.0.12",
|
||||
"nouislider": "^15.8.1",
|
||||
"plyr": "^3.7.8",
|
||||
"postcss": "^8.5.1",
|
||||
"prettier": "^2.8.8",
|
||||
"request": "^2.88.2",
|
||||
"rollup": "2.79.2",
|
||||
"rollup-plugin-babel": "^4.4.0",
|
||||
"rollup-plugin-cleanup": "^3.2.1",
|
||||
"sass": "1.71.0",
|
||||
"star-rating.js": "^4.3.1",
|
||||
"tinymce": "^7.6.0",
|
||||
"tom-select": "^2.4.1",
|
||||
"typed.js": "^2.1.0",
|
||||
"vinyl-buffer": "^1.0.1",
|
||||
"vinyl-source-stream": "^2.0.0",
|
||||
"yargs": "^17.7.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@tabler/icons": "^3.29.0",
|
||||
"bootstrap": "5.3.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@melloware/coloris": "^0.19.1",
|
||||
"apexcharts": "^3.40.0",
|
||||
"autosize": "^6.0.1",
|
||||
"choices.js": "^10.2.0",
|
||||
"countup.js": "^2.6.2",
|
||||
"dropzone": "^6.0.0-beta.2",
|
||||
"flatpickr": "^4.6.13",
|
||||
"fslightbox": "^3.4.1",
|
||||
"imask": "^6.6.1",
|
||||
"jsvectormap": "^1.5.3",
|
||||
"list.js": "^2.3.1",
|
||||
"litepicker": "^2.0.12",
|
||||
"nouislider": "^15.7.0",
|
||||
"plyr": "^3.7.8",
|
||||
"star-rating.js": "^4.3.0",
|
||||
"tinymce": "^6.4.2 || ^7.0.0",
|
||||
"tom-select": "^2.2.2",
|
||||
"typed.js": "^2.1.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@melloware/coloris": {
|
||||
"optional": true
|
||||
},
|
||||
"apexcharts": {
|
||||
"optional": true
|
||||
},
|
||||
"autosize": {
|
||||
"optional": true
|
||||
},
|
||||
"choices.js": {
|
||||
"optional": true
|
||||
},
|
||||
"countup.js": {
|
||||
"optional": true
|
||||
},
|
||||
"dropzone": {
|
||||
"optional": true
|
||||
},
|
||||
"flatpickr": {
|
||||
"optional": true
|
||||
},
|
||||
"fslightbox": {
|
||||
"optional": true
|
||||
},
|
||||
"imask": {
|
||||
"optional": true
|
||||
},
|
||||
"jsvectormap": {
|
||||
"optional": true
|
||||
},
|
||||
"list.js": {
|
||||
"optional": true
|
||||
},
|
||||
"litepicker": {
|
||||
"optional": true
|
||||
},
|
||||
"nouislider": {
|
||||
"optional": true
|
||||
},
|
||||
"plyr": {
|
||||
"optional": true
|
||||
},
|
||||
"tinymce": {
|
||||
"optional": true
|
||||
},
|
||||
"tom-select": {
|
||||
"optional": true
|
||||
},
|
||||
"star-rating.js": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"directories": {
|
||||
"doc": "docs"
|
||||
}
|
||||
}
|
||||
5096
pnpm-lock.yaml
generated
5096
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,4 +0,0 @@
|
||||
packages:
|
||||
- core
|
||||
- preview
|
||||
- 'shared/*'
|
||||
@@ -1,21 +0,0 @@
|
||||
import fs from 'node:fs/promises'
|
||||
import path from 'node:path'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
const pkgJson = path.join(__dirname, '../package.json')
|
||||
const pkg = JSON.parse(await fs.readFile(pkgJson, 'utf8'))
|
||||
|
||||
const year = new Date().getFullYear()
|
||||
|
||||
function getBanner(pluginFilename) {
|
||||
return `/*!
|
||||
* Tabler${pluginFilename ? ` ${pluginFilename}` : ''} v${pkg.version} (${pkg.homepage})
|
||||
* Copyright 2018-${year} The Tabler Authors
|
||||
* Copyright 2018-${year} codecalm.net Paweł Kuna
|
||||
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
|
||||
*/`
|
||||
}
|
||||
|
||||
export default getBanner
|
||||
@@ -1,59 +0,0 @@
|
||||
// #!/usr/bin/env node
|
||||
|
||||
// import { readFileSync, createWriteStream, existsSync, writeFileSync } from 'node:fs'
|
||||
// import { join, dirname } from 'node:path'
|
||||
// import request, { head } from 'request'
|
||||
// import { fileURLToPath } from 'node:url';
|
||||
|
||||
// const __dirname = dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
// const filePath = join(__dirname, '..', 'preview', 'pages', '_data', 'photos.json')
|
||||
|
||||
// const photos = JSON.parse(readFileSync(filePath, 'utf8'))
|
||||
|
||||
// const urlTitle = (str) => {
|
||||
// str = str
|
||||
// .toLowerCase()
|
||||
// .replaceAll('&', 'and')
|
||||
// .replace(/[^[a-z0-9-]/g, '-')
|
||||
// .replace(/-+/g, '-')
|
||||
|
||||
// return str
|
||||
// }
|
||||
|
||||
// const download = function (uri, filename, callback, error) {
|
||||
// head(uri, function (err, res, body) {
|
||||
// request(uri).pipe(createWriteStream(filename))
|
||||
// .on('close', callback)
|
||||
// .on('error', error)
|
||||
// })
|
||||
// }
|
||||
|
||||
// async function downloadPhotos() {
|
||||
// for (const key in photos) {
|
||||
// const photo = photos[key]
|
||||
|
||||
// let filename, i = 1;
|
||||
|
||||
// do {
|
||||
// filename = `${urlTitle(photo['title'])}${i > 1 ? `-${i}` : ''}.jpg`
|
||||
// i++
|
||||
// } while (existsSync(join(__dirname, `../preview/static/photos/${filename}`)))
|
||||
|
||||
// await new Promise((resolve, reject) => {
|
||||
// download(photo['path'], join(__dirname, `../preview/static/photos/${filename}`), function () {
|
||||
// resolve()
|
||||
// }, function () {
|
||||
// reject()
|
||||
// });
|
||||
// })
|
||||
|
||||
// photos[key]['file'] = filename
|
||||
// photos[key]['horizontal'] = photo['width'] > photo['height']
|
||||
// }
|
||||
|
||||
// writeFileSync(filePath, JSON.stringify(photos))
|
||||
// }
|
||||
|
||||
// downloadPhotos();
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
import { readFileSync, writeFileSync } from 'node:fs';
|
||||
import { join, dirname } from 'node:path';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
const iconsTags = JSON.parse(readFileSync(join(__dirname, '../node_modules/@tabler/icons/icons.json'), 'utf8'));
|
||||
const { version } = JSON.parse(readFileSync(join(__dirname, '../node_modules/@tabler/icons/package.json'), 'utf8'))
|
||||
|
||||
const prepareSvgFile = (svg) => {
|
||||
return svg.replace(/\n/g, '').replace(/>\s+</g, '><').replace(/\s+/g, ' ')
|
||||
}
|
||||
|
||||
let svgList = {}
|
||||
for (let iconName in iconsTags) {
|
||||
let iconData = iconsTags[iconName]
|
||||
svgList[iconName] = {
|
||||
name: iconName,
|
||||
svg: {
|
||||
outline: iconData.styles.outline ? prepareSvgFile(readFileSync(join(__dirname, `../node_modules/@tabler/icons/icons/outline/${iconName}.svg`), 'utf8')) : null,
|
||||
filled: iconData.styles.filled ? prepareSvgFile(readFileSync(join(__dirname, `../node_modules/@tabler/icons/icons/filled/${iconName}.svg`), 'utf8')) : null,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
writeFileSync(
|
||||
join(__dirname, `../pages/_data/icons-info.json`),
|
||||
JSON.stringify({
|
||||
version,
|
||||
count: Object.values(svgList).reduce((acc, icon) => {
|
||||
return acc + (icon.svg.outline ? 1 : 0) + (icon.svg.filled ? 1 : 0)
|
||||
}, 0)
|
||||
})
|
||||
)
|
||||
|
||||
writeFileSync(join(__dirname, `../pages/_data/icons.json`), JSON.stringify(svgList))
|
||||
@@ -1,18 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
import { writeFileSync } from 'node:fs';
|
||||
import { join, basename, dirname } from 'node:path';
|
||||
import { sync } from 'glob';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
const illustrations = sync(join(__dirname, `../static/illustrations/light/*.png`))
|
||||
.map((file) => {
|
||||
return basename(file, '.png')
|
||||
})
|
||||
|
||||
writeFileSync(
|
||||
join(__dirname, `../pages/_data/illustrations.json`),
|
||||
JSON.stringify(illustrations)
|
||||
)
|
||||
@@ -1,42 +0,0 @@
|
||||
import path from 'node:path'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import { babel } from '@rollup/plugin-babel'
|
||||
import { nodeResolve } from '@rollup/plugin-node-resolve'
|
||||
import replace from '@rollup/plugin-replace'
|
||||
import banner from '@repo/banner'
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
const external = []
|
||||
const plugins = [
|
||||
babel({
|
||||
exclude: 'node_modules/**',
|
||||
babelHelpers: 'bundled'
|
||||
})
|
||||
]
|
||||
|
||||
plugins.push(
|
||||
replace({
|
||||
'process.env.NODE_ENV': '"production"',
|
||||
preventAssignment: true
|
||||
}),
|
||||
nodeResolve()
|
||||
)
|
||||
|
||||
const rollupConfig = {
|
||||
input: [
|
||||
path.resolve(__dirname, `../js/demo.js`),
|
||||
path.resolve(__dirname, `../js/demo-theme.js`)
|
||||
],
|
||||
output: {
|
||||
name: 'demo',
|
||||
banner: banner('Demo'),
|
||||
dir: path.resolve(__dirname, `../dist/preview/js`),
|
||||
format: 'esm',
|
||||
generatedCode: 'es2015'
|
||||
},
|
||||
external,
|
||||
plugins
|
||||
}
|
||||
|
||||
export default rollupConfig
|
||||
@@ -1,31 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
import { sync } from 'glob';
|
||||
import { readFileSync } from 'node:fs';
|
||||
import { join, dirname } from 'node:path';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
const srcDir = join(__dirname, '..')
|
||||
|
||||
let foundFiles = []
|
||||
sync(`${srcDir}/pages/**/*.{html,md}`).forEach((file) => {
|
||||
let fileContent = readFileSync(file)
|
||||
|
||||
fileContent.toString().replace(/\{% include(_cached)? "([a-z0-9\/_-]+\.html)"/g, (f, c, filename) => {
|
||||
filename = `${srcDir}/pages/_includes/${filename}`
|
||||
|
||||
if (!foundFiles.includes(filename)) {
|
||||
foundFiles.push(filename)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
let includeFiles = sync(`${srcDir}/pages/_includes/**/*.html`)
|
||||
|
||||
includeFiles.forEach((file) => {
|
||||
if (!foundFiles.includes(file)) {
|
||||
console.log('file', file)
|
||||
}
|
||||
})
|
||||
@@ -1,59 +0,0 @@
|
||||
{
|
||||
"name": "preview",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run html",
|
||||
"dev": "pnpm run clean && pnpm run watch",
|
||||
"watch": "pnpm run watch-html & pnpm run watch-css & pnpm run watch-js",
|
||||
"watch-html": "NODE_ENV=development eleventy --serve --port=3000 --incremental",
|
||||
"watch-js": "nodemon --watch js/ --ext js --exec 'pnpm run js'",
|
||||
"watch-css": "nodemon --watch scss/ --ext scss --exec 'pnpm run css'",
|
||||
"css": "pnpm run css-compile && pnpm run css-prefix && pnpm run css-minify",
|
||||
"css-compile": "sass scss/:dist/preview/css/ --no-source-map --load-path=node_modules",
|
||||
"css-prefix": "postcss --config build/postcss.config.mjs --replace 'dist/preview/css/*.css' '!dist/preview/css/*.rtl*.css' '!dist/preview/css/*.min.css'",
|
||||
"css-minify": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/preview/css/ --batch --batch-suffix '.min' 'dist/preview/css/*.css' '!dist/preview/css/*.min.css' '!dist/preview/css/*rtl*.css'",
|
||||
"js": "pnpm run js-compile && pnpm run js-minify",
|
||||
"js-compile": "rollup --config build/rollup.config.mjs --sourcemap",
|
||||
"js-minify": "pnpm run js-minify-demo && pnpm run js-minify-theme",
|
||||
"js-minify-demo": "terser --compress passes=2 --mangle --comments '/^!/' --source-map 'content=dist/preview/js/demo.js.map,includeSources,url=demo.min.js.map' --output dist/preview/js/demo.min.js dist/preview/js/demo.js",
|
||||
"js-minify-theme": "terser --compress passes=2 --mangle --comments '/^!/' --source-map 'content=dist/preview/js/demo-theme.js.map,includeSources,url=demo-theme.min.js.map' --output dist/preview/js/demo-theme.min.js dist/preview/js/demo-theme.js",
|
||||
"clean": "rm -rf dist demo",
|
||||
"html": "eleventy",
|
||||
"svg-optimize": "svgo -f svg/brand --pretty",
|
||||
"unused-files": "node build/unused-files.mjs",
|
||||
"download-images": "node build/download-images.mjs",
|
||||
"optimize-images": "for i in ./src/static/photos/*.jpg; do convert \"$i\" -quality 80% \"${i%.jpg}.jpg\"; done",
|
||||
"svg-icons": "node build/import-icons.mjs",
|
||||
"import-illustrations": "node build/import-illustrations.mjs",
|
||||
"import-icons": "git checkout dev && BRANCH_NAME=\"dev-tabler-icons-`pnpm info @tabler/icons version`\" && git branch $BRANCH_NAME && git checkout $BRANCH_NAME && ncu -u @tabler/icons && pnpm install && pnpm run svg-icons && git add . && git commit -am \"update icons to v`pnpm info @tabler/icons version`\" && git push origin $BRANCH_NAME && git checkout dev",
|
||||
"zip": "mkdir -p packages-zip && zip -r packages-zip/tabler-$(node -p \"require('./package.json').version\").zip demo/*"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tabler/core": "workspace:*",
|
||||
"@tabler/icons": "^3.29.0",
|
||||
"@melloware/coloris": "^0.24.0",
|
||||
"apexcharts": "^4.4.0",
|
||||
"star-rating.js": "^4.3.1",
|
||||
"tinymce": "^7.6.1",
|
||||
"tom-select": "^2.4.2",
|
||||
"typed.js": "^2.1.0",
|
||||
"imask": "^7.6.1",
|
||||
"jsvectormap": "^1.6.0",
|
||||
"list.js": "^2.3.1",
|
||||
"litepicker": "^2.0.12",
|
||||
"nouislider": "^15.8.1",
|
||||
"plyr": "^3.7.8",
|
||||
"dropzone": "^6.0.0-beta.2",
|
||||
"flatpickr": "^4.6.13",
|
||||
"fslightbox": "^3.4.2",
|
||||
"choices.js": "^11.0.3",
|
||||
"countup.js": "^2.8.0",
|
||||
"autosize": "^6.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"request": "^2.88.2",
|
||||
"imageoptim-cli": "^3.1.9",
|
||||
"@11ty/eleventy": "^3.0.0",
|
||||
"@repo/banner": "workspace:*"
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
{% assign breadcrumb-pages = "Tabler,Pages," %}
|
||||
{% assign breadcrumb-pages = breadcrumb-pages | append: page.page-header %}
|
||||
|
||||
<div class="d-flex">
|
||||
{% include "ui/breadcrumb.html" pages=breadcrumb-pages class="breadcrumb-arrows" %}
|
||||
</div>
|
||||
@@ -1,28 +0,0 @@
|
||||
{% assign segmented-items = include.items | default: "" | split: "," %}
|
||||
{% assign segmented-icons = include.icons | default: "" | split: "," %}
|
||||
{% assign segmented-disabled = include.disabled | default: "" | split: "," %}
|
||||
{% assign segmented-hover = include.hover | default: "" %}
|
||||
|
||||
{% assign segmented-items-count = segmented-items | size %}
|
||||
{% assign segmented-icons-count = segmented-icons | size %}
|
||||
{% assign segmented-all-count = segmented-items-count %}
|
||||
|
||||
{% if segmented-icons-count > segmented-all-count %}{% assign segmented-all-count = segmented-icons-count %}{% endif %}
|
||||
|
||||
<nav class="nav nav-segmented{% if include.vertical %} nav-segmented-vertical{% endif %}{% if include.size %} nav-{{ include.size }}{% endif %}{% if include.full-width %} w-100{% endif %}{% if include.class %} {{ include.class }}{% endif %}" role="tablist">
|
||||
{% for i in (1..segmented-all-count) %}
|
||||
{% assign index = forloop.index | append: "" %}
|
||||
{% assign disabled = segmented-disabled | contains: index %}
|
||||
|
||||
{% if include.name %}<input type="radio" class="nav-link-input" name="segmented" id="segmented-{{include.name }}-{{ index }}" {% if forloop.index == 1 %}checked{% endif %} />{% endif %}
|
||||
|
||||
<{% if include.name %}label for="segmented-{{include.name }}-{{ index }}"{% else %}button{% endif %} class="nav-link{% if forloop.index == 1 %}{% unless include.name %} active{% endunless %}{% endif %}{% if disabled %} disabled{% endif %}{% if segmented-hover == index %} hover{% endif %}" role="tab"{% unless include.name %} data-bs-toggle="tab"{% endunless %} aria-selected="{% if forloop.index == 1 %}true{% else %}false{% endif %}" {% if disabled %} aria-disabled="true"{% endif %}{% if forloop.index == 1 %} aria-current="page"{% endif %}>
|
||||
{% if segmented-icons[forloop.index0] %}
|
||||
{% include "ui/icon.html" icon=segmented-icons[forloop.index0] class="nav-link-icon" %}
|
||||
{% endif %}
|
||||
{% if segmented-items[forloop.index0] %}
|
||||
{{ segmented-items[forloop.index0] }}
|
||||
{% endif %}
|
||||
</{% if include.name %}label{% else %}button{% endif %}>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
@@ -1,15 +0,0 @@
|
||||
{% assign value = include.value | default: 25 %}
|
||||
{% if value > 0 %}
|
||||
{% assign trending-color = 'green' %}
|
||||
{% assign trending-icon = 'trending-up' %}
|
||||
{% elsif value == 0 %}
|
||||
{% assign trending-color = 'yellow' %}
|
||||
{% assign trending-icon = 'minus' %}
|
||||
{% else %}
|
||||
{% assign trending-color = 'red' %}
|
||||
{% assign trending-icon = 'trending-down' %}
|
||||
{% endif %}
|
||||
|
||||
<span class="text-{{ trending-color }} d-inline-flex align-items-center lh-1{% if include.class %} {{ include.class }}{% endif %}">
|
||||
{{ value }}% {% include "ui/icon.html" icon=trending-icon class="ms-1" %}
|
||||
</span>
|
||||
@@ -1,43 +0,0 @@
|
||||
---
|
||||
title: Orders
|
||||
page-header: Orders
|
||||
page-menu: extra.orders
|
||||
layout: default
|
||||
permalink: orders.html
|
||||
---
|
||||
|
||||
<div class="card">
|
||||
<table class="table table-vcenter card-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-1">
|
||||
<input type="checkbox" class="form-check-input" />
|
||||
</th>
|
||||
<th>Order ID</th>
|
||||
<th>Customer</th>
|
||||
<th>Amount</th>
|
||||
<th>Status</th>
|
||||
<th class="w-1">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for i in (1..15) %}
|
||||
<tr>
|
||||
<th>
|
||||
<input type="checkbox" class="form-check-input" />
|
||||
</th>
|
||||
<td>{{ '96039' | plus: i }}</td>
|
||||
<td>John Doe</td>
|
||||
<td>$100</td>
|
||||
<td><span class="badge badge-success">Completed</span></td>
|
||||
<td>
|
||||
<div class="btn-list btn-list-nowrap">
|
||||
<a href="#" class="btn">View</a>
|
||||
<a href="#" class="btn btn-danger">Delete</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -1,13 +0,0 @@
|
||||
---
|
||||
layout: null
|
||||
permalink: robots.txt
|
||||
---
|
||||
Sitemap: {% if environment != 'development' %}{{ site.previewUrl }}{% endif %}/sitemap.xml
|
||||
|
||||
{% if environment == 'preview' %}
|
||||
User-agent: *
|
||||
Disallow:
|
||||
{% else %}
|
||||
User-agent: *
|
||||
Disallow: /
|
||||
{% endif %}
|
||||
@@ -1,109 +0,0 @@
|
||||
---
|
||||
layout: default
|
||||
title: Segmented control
|
||||
permalink: /segmented-control.html
|
||||
page-header: Segmented control
|
||||
page-menu: base.segmented-control
|
||||
---
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% include "ui/nav-segmented.html" items="1,2,3,4" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% include "ui/nav-segmented.html" items="👦,👦🏿,👦🏾,👦🏽,👦🏼,👦🏻" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% include "ui/nav-segmented.html" icons="home,star,clock,ghost,bold,italic,underline" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% include "ui/nav-segmented.html" items="List,Kanban,Calendar,Files" icons="list,layout,calendar,files" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% include "ui/nav-segmented.html" items="List,Kanban,Calendar,Files" icons="list,layout,calendar,files" vertical %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% include "ui/nav-segmented.html" icons="home,star,clock,ghost,bold,italic,underline" vertical disabled="3" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% include "ui/nav-segmented.html" items="Daily,Weekly,Monthly,Quarterly,Yearly" disabled="4,5" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% include "ui/nav-segmented.html" items="Daily,Weekly,Monthly,Quarterly,Yearly" vertical=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% include "ui/nav-segmented.html" items="Daily,Weekly,Monthly,Quarterly,Yearly" name="checkbox" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% include "ui/nav-segmented.html" items="Daily,Weekly,Monthly,Quarterly,Yearly" full-width=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="space-y">
|
||||
<div>{% include "ui/nav-segmented.html" items="Overview,Analytics,Reports,Notifications" full-width=true %}</div>
|
||||
<div>{% include "ui/nav-segmented.html" items="Account,Password" full-width=true %}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="space-y">
|
||||
<div>{% include "ui/nav-segmented.html" items="List,Kanban,Calendar,Files" disabled="3,5" size="sm" %}</div>
|
||||
<div>{% include "ui/nav-segmented.html" items="List,Kanban,Calendar,Files" disabled="3,5" %}</div>
|
||||
<div>{% include "ui/nav-segmented.html" items="List,Kanban,Calendar,Files" disabled="3,5" size="lg" %}</div>
|
||||
|
||||
<div>{% include "ui/nav-segmented.html" items="List,Kanban,Calendar,Files" icons="list,layout,calendar,files" disabled="3,5" size="sm" %}</div>
|
||||
<div>{% include "ui/nav-segmented.html" items="List,Kanban,Calendar,Files" icons="list,layout,calendar,files" disabled="3,5" %}</div>
|
||||
<div>{% include "ui/nav-segmented.html" items="List,Kanban,Calendar,Files" icons="list,layout,calendar,files" disabled="3,5" size="lg" %}</div>
|
||||
|
||||
<div>{% include "ui/nav-segmented.html" icons="list,layout,calendar,files" disabled="3,5" size="sm" %}</div>
|
||||
<div>{% include "ui/nav-segmented.html" icons="list,layout,calendar,files" disabled="3,5" %}</div>
|
||||
<div>{% include "ui/nav-segmented.html" icons="list,layout,calendar,files" disabled="3,5" size="lg" %}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,14 +0,0 @@
|
||||
---
|
||||
layout: null
|
||||
permalink: sitemap.xml
|
||||
---
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
|
||||
{% for page in pages %}
|
||||
<url>
|
||||
<loc>{% if environment != 'development' %}{{ site.previewUrl }}{% endif %}{{ page.url | replace: 'index.html', '' | xml_escape }}</loc>
|
||||
<lastmod>{{ page.last_modified_at | default: 'now' | date_to_xmlschema }}</lastmod>
|
||||
</url>
|
||||
{% endfor %}
|
||||
</urlset>
|
||||
@@ -1,21 +0,0 @@
|
||||
import fs from 'node:fs/promises'
|
||||
import path from 'node:path'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
const pkgJson = path.join(__dirname, 'package.json')
|
||||
const pkg = JSON.parse(await fs.readFile(pkgJson, 'utf8'))
|
||||
|
||||
const year = new Date().getFullYear()
|
||||
|
||||
function getBanner(pluginFilename) {
|
||||
return `/*!
|
||||
* Tabler${pluginFilename ? ` ${pluginFilename}` : ''} v${pkg.version} (${pkg.homepage})
|
||||
* Copyright 2018-${year} The Tabler Authors
|
||||
* Copyright 2018-${year} codecalm.net Paweł Kuna
|
||||
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
|
||||
*/`
|
||||
}
|
||||
|
||||
export default getBanner
|
||||
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"name": "@repo/banner",
|
||||
"version": "1.0.0",
|
||||
"homepage": "https://tabler.io",
|
||||
"exports": {
|
||||
".": {
|
||||
"default": "./index.mjs"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 507 B After Width: | Height: | Size: 507 B |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 877 B After Width: | Height: | Size: 877 B |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 6.3 KiB |
|
Before Width: | Height: | Size: 611 B After Width: | Height: | Size: 611 B |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 584 B After Width: | Height: | Size: 584 B |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 572 B After Width: | Height: | Size: 572 B |
|
Before Width: | Height: | Size: 992 B After Width: | Height: | Size: 992 B |
|
Before Width: | Height: | Size: 970 B After Width: | Height: | Size: 970 B |
|
Before Width: | Height: | Size: 842 B After Width: | Height: | Size: 842 B |
|
Before Width: | Height: | Size: 384 B After Width: | Height: | Size: 384 B |
|
Before Width: | Height: | Size: 387 B After Width: | Height: | Size: 387 B |
|
Before Width: | Height: | Size: 711 B After Width: | Height: | Size: 711 B |
|
Before Width: | Height: | Size: 611 B After Width: | Height: | Size: 611 B |
|
Before Width: | Height: | Size: 450 B After Width: | Height: | Size: 450 B |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 426 B After Width: | Height: | Size: 426 B |
|
Before Width: | Height: | Size: 387 B After Width: | Height: | Size: 387 B |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 8.5 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 577 B After Width: | Height: | Size: 577 B |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 407 B After Width: | Height: | Size: 407 B |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 634 B After Width: | Height: | Size: 634 B |
|
Before Width: | Height: | Size: 633 B After Width: | Height: | Size: 633 B |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 757 B After Width: | Height: | Size: 757 B |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user