mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 18:04:26 +04:00
Compare commits
1 Commits
dev-docs-a
...
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": "rimraf 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;
|
||||
}
|
||||
1
docs/.gitignore
vendored
1
docs/.gitignore
vendored
@@ -1 +0,0 @@
|
||||
_site
|
||||
@@ -1,5 +0,0 @@
|
||||
<div class="p-6 border rounded mb-4 d-flex align-items-center justify-content-center">
|
||||
<div>
|
||||
{{ include.html }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,4 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="110" height="32" viewBox="0 0 232 68" class="navbar-brand-image">
|
||||
<path d="M64.6 16.2C63 9.9 58.1 5 51.8 3.4 40 1.5 28 1.5 16.2 3.4 9.9 5 5 9.9 3.4 16.2 1.5 28 1.5 40 3.4 51.8 5 58.1 9.9 63 16.2 64.6c11.8 1.9 23.8 1.9 35.6 0C58.1 63 63 58.1 64.6 51.8c1.9-11.8 1.9-23.8 0-35.6zM33.3 36.3c-2.8 4.4-6.6 8.2-11.1 11-1.5.9-3.3.9-4.8.1s-2.4-2.3-2.5-4c0-1.7.9-3.3 2.4-4.1 2.3-1.4 4.4-3.2 6.1-5.3-1.8-2.1-3.8-3.8-6.1-5.3-2.3-1.3-3-4.2-1.7-6.4s4.3-2.9 6.5-1.6c4.5 2.8 8.2 6.5 11.1 10.9 1 1.4 1 3.3.1 4.7zM49.2 46H37.8c-2.1 0-3.8-1-3.8-3s1.7-3 3.8-3h11.4c2.1 0 3.8 1 3.8 3s-1.7 3-3.8 3z" fill="#066fd1" style="fill: var(--tblr-primary, #066fd1)"></path>
|
||||
<path d="M105.8 46.1c.4 0 .9.2 1.2.6s.6 1 .6 1.7c0 .9-.5 1.6-1.4 2.2s-2 .9-3.2.9c-2 0-3.7-.4-5-1.3s-2-2.6-2-5.4V31.6h-2.2c-.8 0-1.4-.3-1.9-.8s-.9-1.1-.9-1.9c0-.7.3-1.4.8-1.8s1.2-.7 1.9-.7h2.2v-3.1c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v3.1h3.4c.8 0 1.4.3 1.9.8s.8 1.2.8 1.9-.3 1.4-.8 1.8-1.2.7-1.9.7h-3.4v13c0 .7.2 1.2.5 1.5s.8.5 1.4.5c.3 0 .6-.1 1.1-.2.5-.2.8-.3 1.2-.3zm28-20.7c.8 0 1.5.3 2.1.8.5.5.8 1.2.8 2.1v20.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2-.8-.8-1.2-.8-2.1c-.8.9-1.9 1.7-3.2 2.4-1.3.7-2.8 1-4.3 1-2.2 0-4.2-.6-6-1.7-1.8-1.1-3.2-2.7-4.2-4.7s-1.6-4.3-1.6-6.9c0-2.6.5-4.9 1.5-6.9s2.4-3.6 4.2-4.8c1.8-1.1 3.7-1.7 5.9-1.7 1.5 0 3 .3 4.3.8 1.3.6 2.5 1.3 3.4 2.1 0-.8.3-1.5.8-2.1.5-.5 1.2-.7 2-.7zm-9.7 21.3c2.1 0 3.8-.8 5.1-2.3s2-3.4 2-5.7-.7-4.2-2-5.8c-1.3-1.5-3-2.3-5.1-2.3-2 0-3.7.8-5 2.3-1.3 1.5-2 3.5-2 5.8s.6 4.2 1.9 5.7 3 2.3 5.1 2.3zm32.1-21.3c2.2 0 4.2.6 6 1.7 1.8 1.1 3.2 2.7 4.2 4.7s1.6 4.3 1.6 6.9-.5 4.9-1.5 6.9-2.4 3.6-4.2 4.8c-1.8 1.1-3.7 1.7-5.9 1.7-1.5 0-3-.3-4.3-.9s-2.5-1.4-3.4-2.3v.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.5-.8-1.2-.8-2.1V18.9c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v10c.8-1 1.8-1.8 3.2-2.5 1.3-.7 2.8-1 4.3-1zm-.7 21.3c2 0 3.7-.8 5-2.3s2-3.5 2-5.8-.6-4.2-1.9-5.7-3-2.3-5.1-2.3-3.8.8-5.1 2.3-2 3.4-2 5.7.7 4.2 2 5.8c1.3 1.6 3 2.3 5.1 2.3zm23.6 1.9c0 .8-.3 1.5-.8 2.1s-1.3.8-2.1.8-1.5-.3-2-.8-.8-1.3-.8-2.1V18.9c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v29.7zm29.3-10.5c0 .8-.3 1.4-.9 1.9-.6.5-1.2.7-2 .7h-15.8c.4 1.9 1.3 3.4 2.6 4.4 1.4 1.1 2.9 1.6 4.7 1.6 1.3 0 2.3-.1 3.1-.4.7-.2 1.3-.5 1.8-.8.4-.3.7-.5.9-.6.6-.3 1.1-.4 1.6-.4.7 0 1.2.2 1.7.7s.7 1 .7 1.7c0 .9-.4 1.6-1.3 2.4-.9.7-2.1 1.4-3.6 1.9s-3 .8-4.6.8c-2.7 0-5-.6-7-1.7s-3.5-2.7-4.6-4.6-1.6-4.2-1.6-6.6c0-2.8.6-5.2 1.7-7.2s2.7-3.7 4.6-4.8 3.9-1.7 6-1.7 4.1.6 6 1.7 3.4 2.7 4.5 4.7c.9 1.9 1.5 4.1 1.5 6.3zm-12.2-7.5c-3.7 0-5.9 1.7-6.6 5.2h12.6v-.3c-.1-1.3-.8-2.5-2-3.5s-2.5-1.4-4-1.4zm30.3-5.2c1 0 1.8.3 2.4.8.7.5 1 1.2 1 1.9 0 1-.3 1.7-.8 2.2-.5.5-1.1.8-1.8.7-.5 0-1-.1-1.6-.3-.2-.1-.4-.1-.6-.2-.4-.1-.7-.1-1.1-.1-.8 0-1.6.3-2.4.8s-1.4 1.3-1.9 2.3-.7 2.3-.7 3.7v11.4c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.6-.8-1.3-.8-2.1V28.8c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v.6c.7-1.3 1.8-2.3 3.2-3 1.3-.7 2.8-1 4.3-1z" fill-rule="evenodd" clip-rule="evenodd" fill="#4a4a4a"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.0 KiB |
@@ -1,7 +0,0 @@
|
||||
<div class="p-6">
|
||||
{% for collection in collections.all %}
|
||||
<div>
|
||||
<a href="{{ collection.url }}">{{ collection.data.title }} {{ collection.url }}</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -1 +0,0 @@
|
||||
../../../preview/pages/_includes/ui
|
||||
@@ -1,47 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ title }}</title>
|
||||
|
||||
<link rel="stylesheet" href="/core/css/tabler.min.css" />
|
||||
</head>
|
||||
<body class="d-flex flex-column" style="background: var(--tblr-bg-surface)">
|
||||
<div class="navbar navbar-expand-md">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-brand">
|
||||
{% include "logo.html" %}
|
||||
</div>
|
||||
<div class="navbar-nav flex-row order-md-last">
|
||||
<a href="/ui">UI</a>
|
||||
<a href="/illustrations">Illustrations</a>
|
||||
<!-- <a href="/emails">Emails</a> -->
|
||||
<a href="/icons">Icons</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<div class="row g-0 h-full">
|
||||
<div class="col-2">{% include "menu.html" %}</div>
|
||||
<div class="col border-start" style="background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--tblr-primary) 4%, transparent), transparent 80%) no-repeat 0 0 / 800px 800px !important;">
|
||||
<div class="container-md">
|
||||
<div class="p-6">
|
||||
<div class="markdown fs-3">
|
||||
<h1>
|
||||
{{ title }}
|
||||
</h1>
|
||||
|
||||
<p>{{ summary }}</p>
|
||||
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/core/js/tabler.esm.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,79 +0,0 @@
|
||||
|
||||
import { appConfig } from "@repo/e11ty"
|
||||
import { createHash } from 'crypto';
|
||||
import flatCache from 'flat-cache';
|
||||
import { resolve } from 'node:path';
|
||||
|
||||
/** @type {import('@11ty/eleventy').LocalConfig} */
|
||||
export default function (eleventyConfig) {
|
||||
appConfig(eleventyConfig);
|
||||
|
||||
eleventyConfig.addPassthroughCopy({
|
||||
"node_modules/@tabler/core/dist": "core",
|
||||
"pages/favicon.ico": "favicon.ico",
|
||||
});
|
||||
|
||||
eleventyConfig.setIncludesDirectory("_e11ty/includes");
|
||||
eleventyConfig.setDataDirectory("_e11ty/data");
|
||||
eleventyConfig.setOutputDirectory("dist");
|
||||
eleventyConfig.setLayoutsDirectory("_e11ty/layouts");
|
||||
|
||||
eleventyConfig.addPairedLiquidShortcode("example", function (content, ...params) {
|
||||
return '<div class="example p-5 border mb-6 rounded">' + params + content + '</div>';
|
||||
})
|
||||
|
||||
eleventyConfig.amendLibrary('md', () => { });
|
||||
|
||||
eleventyConfig.on('eleventy.before', async () => {
|
||||
|
||||
const shiki = await import('shiki');
|
||||
const highlighter = await shiki.createHighlighter({
|
||||
themes: ['github-dark', 'github-light'],
|
||||
langs: [
|
||||
'html',
|
||||
'svelte',
|
||||
'blade',
|
||||
'php',
|
||||
'yaml',
|
||||
'js',
|
||||
'jsx',
|
||||
'ts',
|
||||
'shell',
|
||||
'diff',
|
||||
'vue',
|
||||
'scss',
|
||||
'css'
|
||||
],
|
||||
});
|
||||
|
||||
eleventyConfig.amendLibrary('md', function (mdLib) {
|
||||
return mdLib.set({
|
||||
highlight: function (code, lang) {
|
||||
// const hash = createHash('md5').update(code).digest('hex');
|
||||
// const cache = flatCache.load(hash, resolve('./.cache/shiki'));
|
||||
// const cachedValue = cache.getKey(hash);
|
||||
|
||||
// if (cachedValue) {
|
||||
// return cachedValue;
|
||||
// }
|
||||
|
||||
let highlightedCode = highlighter.codeToHtml(code.trim(), {
|
||||
lang: lang,
|
||||
themes: {
|
||||
light: 'github-light',
|
||||
dark: 'github-dark',
|
||||
}
|
||||
});
|
||||
|
||||
// cache.setKey(hash, highlightedCode);
|
||||
// cache.save();
|
||||
|
||||
return highlightedCode;
|
||||
},
|
||||
});
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
return {}
|
||||
};
|
||||
@@ -3,7 +3,6 @@ title: Tabler Icons
|
||||
summary: Tabler Icons is a powerful and versatile icon library that offers a huge collection of high quality icons suitable for a wide range of applications. With its clean and modern aesthetic, extensive customisation options, and user-friendly website and plugins, Tabler Icons is an excellent resource for designers and developers looking to enhance their projects with high-quality icons.
|
||||
order: 2
|
||||
description: Over 5000 pixel-perfect icons for web design and development
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Browse icons
|
||||
@@ -2,5 +2,4 @@
|
||||
title: Libraries
|
||||
description: Explore Tabler Icons libraries.
|
||||
summary: The libraries section offers various integrations of Tabler Icons for popular frameworks and technologies, making it easy to incorporate icons into any project.
|
||||
layout: default
|
||||
---
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Preact
|
||||
description: Tabler Icons library for Preact framework.
|
||||
summary: Tabler Icons for Preact provides an optimized collection of icons specifically designed for use with Preact. These lightweight and scalable icons are easy to integrate into Preact-based projects.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: React
|
||||
description: Tabler Icons library for React framework.
|
||||
summary: Tabler Icons for React offers a robust set of icons tailored for React applications, providing developers with a seamless way to enhance their user interfaces with high-quality, scalable graphics.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: SolidJS
|
||||
description: Tabler Icons library for SolidJS framework.
|
||||
summary: Tabler Icons for SolidJS is a lightweight library offering a vast selection of high-quality icons. It is designed for seamless integration with SolidJS, enabling developers to build visually appealing interfaces.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Svelte
|
||||
description: Tabler Icons library for Svelte framework.
|
||||
summary: Tabler Icons for Svelte provides a clean and efficient way to use Tabler's comprehensive icon set in Svelte applications, helping developers deliver polished, user-friendly designs.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
@@ -18,7 +17,7 @@ or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
It's build with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
|
||||
|
||||
```jsx
|
||||
```sveltehtml
|
||||
<script lang="ts">
|
||||
import { IconHeart } from '@tabler/icons-svelte';
|
||||
</script>
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Vue
|
||||
description: Tabler Icons library for Vue framework.
|
||||
summary: Tabler Icons for Vue offers a collection of customizable and scalable icons designed for use in Vue applications, providing a powerful tool for creating modern and engaging interfaces.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
@@ -18,7 +17,7 @@ or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
All icons are Vue components that contain SVG elements. So any icon can be imported and used as a component. It also helps to use threeshaking, so you only import the icons you use.
|
||||
|
||||
```html
|
||||
```vue
|
||||
<template>
|
||||
<IconHome />
|
||||
</template>
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Webfont
|
||||
description: Tabler Icons as a webfont.
|
||||
summary: Tabler Icons as a webfont allows you to easily include icons in your projects using simple CSS classes, offering a lightweight and scalable solution for web development.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Figma plugin
|
||||
description: Use Tabler Icons directly in Figma.
|
||||
summary: The Tabler Figma plugin allows designers to seamlessly integrate Tabler Icons into their Figma projects, providing quick access to a vast library of customizable icons that enhance the design workflow.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
title: Plugins
|
||||
description: Icon plugins for seamless integration.
|
||||
layout: default
|
||||
---
|
||||
@@ -1,7 +1,6 @@
|
||||
---
|
||||
title: EPS version
|
||||
description: Download Tabler Icons in EPS format.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
@@ -2,5 +2,4 @@
|
||||
title: Static files
|
||||
description: Download static file formats of icons.
|
||||
summary: Static files provide multiple formats of Tabler Icons, including EPS, PDF, PNG, and SVG, offering flexibility for different design and development workflows.
|
||||
layout: default
|
||||
---
|
||||
@@ -1,7 +1,6 @@
|
||||
---
|
||||
title: PDF version
|
||||
description: Download Tabler Icons in PDF format.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
---
|
||||
title: PNG version
|
||||
description: Download Tabler Icons in PNG format.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
---
|
||||
title: SVG version
|
||||
description: Download Tabler Icons in SVG format.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
@@ -3,7 +3,6 @@ title: Tabler Illustrations
|
||||
order: 3
|
||||
description: Customizable illustrations for modern web and mobile designs.
|
||||
summary: Tabler Illustrations is a collection of customizable SVG illustrations for your web project. Explore our library of illustrations to enhance your web development experience.
|
||||
layout: default
|
||||
---
|
||||
|
||||
! [ ] (/docs/cover-illustrations.png)
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Contents
|
||||
description: Explore Tabler Illustrations folder structure
|
||||
summary: The Tabler Illustrations package is thoughtfully structured to provide designers and developers with an array of high-quality assets. This guide explores the various folders and their contents, helping users make the most of these resources.
|
||||
layout: default
|
||||
---
|
||||
|
||||
The Tabler Illustrations package offers a wide range of visual assets designed to meet the needs of modern web and graphic design. These illustrations are not only aesthetically pleasing but also highly versatile, supporting various formats and themes for seamless integration into different projects.
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Customization
|
||||
description: Customize the illustrations to match your brand.
|
||||
summary: Learn how to tailor Tabler Illustrations by adjusting colors, sizes, and formats. This section provides insights into seamlessly integrating illustrations to align with your design and branding.
|
||||
layout: default
|
||||
---
|
||||
|
||||
```html example columns={1} centered vertical height="25rem"
|
||||
@@ -2,5 +2,4 @@
|
||||
title: Introduction
|
||||
description: Introduction to Tabler Illustrations and their key features.
|
||||
summary: Tabler Illustrations is a collection of high-quality, customizable illustrations designed to enhance the visual appeal of your projects. These illustrations align seamlessly with the Tabler design system, making it easy to create engaging and cohesive designs for websites, apps, and presentations
|
||||
layout: default
|
||||
---
|
||||
@@ -1,6 +1,5 @@
|
||||
---
|
||||
title: Tabler Illustrations License
|
||||
layout: default
|
||||
---
|
||||
|
||||
### Personal License
|
||||
@@ -27,9 +26,7 @@ You **cannot**:
|
||||
|
||||
#### Example usage
|
||||
|
||||
Examples of usage **allowed** by the license:
|
||||
|
||||
* Creating a personal website by yourself.
|
||||
Examples of usage **allowed** by the license:* Creating a personal website by yourself.
|
||||
* Creating a website or web application for a client that will be owned by that client.
|
||||
* Creating a commercial SaaS application (like an invoicing app for example) where end users have to pay a fee to use the application.
|
||||
* Creating a commercial self-hosted web application that is sold to end users for a one-time fee.
|
||||
@@ -88,7 +85,6 @@ Examples of use **not allowed** by the license:
|
||||
* Giving someone access to Tabler Illustrations when they purchase a product from you. For example, you can't use a Team License as a way to give someone access to Tabler Illustrations when they purchase an online course from you.
|
||||
* Selling access to your team account to people who don't work for you company.
|
||||
|
||||
layout: default
|
||||
---
|
||||
|
||||
In case of differences between above license agreements and the license agreements provided with the product, the license agreement provided with the product shall prevail.
|
||||
@@ -1,7 +1,6 @@
|
||||
---
|
||||
title: Welcome to Tabler Documentation
|
||||
summary: Tabler Docs provides a comprehensive guide to help you get started with the Tabler ecosystem, including its UI components, plugins, and icons. Explore detailed documentation to understand and leverage the full potential of Tabler in your projects.
|
||||
layout: default
|
||||
---
|
||||
|
||||
<ResponsiveImage src="/docs/tabler.png" src-dark="/docs/tabler-dark.png" alt="Tabler" width="816" height="620" className="mb-4" />
|
||||
@@ -1,21 +0,0 @@
|
||||
{
|
||||
"name": "docs",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"dev": "eleventy --serve --port=3010"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@tabler/core": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^3.0.0",
|
||||
"@repo/e11ty": "workspace:*",
|
||||
"flat-cache": "^6.1.6",
|
||||
"shiki": "^2.3.2"
|
||||
}
|
||||
}
|
||||
16
docs/test.md
16
docs/test.md
@@ -1,16 +0,0 @@
|
||||
---
|
||||
title: Test
|
||||
layout: default
|
||||
---
|
||||
|
||||
test
|
||||
|
||||
{% capture html %}
|
||||
{% include "ui/avatar.html" icon="heart" color="red" placeholder="as" %}
|
||||
{% include "ui/avatar.html" %}
|
||||
{% endcapture %}
|
||||
{% include "example.html" html=html %}
|
||||
|
||||
```html
|
||||
{% include "ui/avatar.html" icon="heart" color="red" placeholder="as" %}
|
||||
```
|
||||
@@ -3,7 +3,6 @@ title: Colors
|
||||
summary: The choice of colors for a website or app interface has an big influence on how users interact with the product and what decisions they make. Harmonic colors can contribute to a nice first impression and encourage users to engage with your product, so it's a very important aspect of a successful design, which needs to be well thought out.
|
||||
bootstrapLink: utilities/colors/
|
||||
description: Impact of colors on user interface design.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Base colors
|
||||
@@ -3,5 +3,4 @@ title: Base
|
||||
order: 2
|
||||
description: Foundational elements for UI design.
|
||||
summary: The base section includes foundational elements such as colors, typography, and spacing that form the building blocks of a cohesive and consistent user interface.
|
||||
layout: default
|
||||
---
|
||||
@@ -3,7 +3,6 @@ title: Typography
|
||||
summary: Typography plays an important role in creating an attractive and clear interface design. Good typography will make the content easy to follow and improve the usability of your website.
|
||||
bootstrapLink: content/typography/
|
||||
description: Role of typography in interface design.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Headings
|
||||
@@ -3,7 +3,6 @@ title: Alerts
|
||||
summary: Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app.
|
||||
bootstrapLink: components/alerts/
|
||||
description: Alert messages for user notifications.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -3,7 +3,6 @@ title: Autosize
|
||||
summary: The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.
|
||||
libs: autosize
|
||||
description: Auto-adjusting textarea for better usability.
|
||||
layout: default
|
||||
---
|
||||
|
||||
To be able to use the autosize in your application you will need to install the autosize dependency with `npm install autosize`.
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Avatars
|
||||
summary: Avatars help customise various elements of a user interface and make the product experience more personalised. They are often used in communication apps, collaboration tools and social media.
|
||||
description: Personalize UI with user avatars.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -3,7 +3,6 @@ title: Badges
|
||||
summary: Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info.
|
||||
description: Add extra information with badges.
|
||||
bootstrapLink: components/badge/
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -3,7 +3,6 @@ title: Breadcrumb
|
||||
summary: Breadcrumbs are used to show the current website or app location and reduce the number of actions users have to take. Thanks to breadcrumbs, they can easily navigate within the website hierarchy and better understand its structure.
|
||||
bootstrapLink: components/breadcrumb/
|
||||
description: Navigation aid for better structure.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -3,7 +3,6 @@ title: Buttons
|
||||
summary: Use button styles that best suit your designs and encourage users to take the desired actions. You can customize the button's properties to improve the user experience of your website or system, changing the size, shape, color and many more.
|
||||
bootstrapLink: components/buttons/
|
||||
description: Customizable buttons for user actions.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Button tag
|
||||
@@ -92,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.
|
||||
@@ -100,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.
|
||||
@@ -108,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.
|
||||
@@ -123,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.
|
||||
@@ -145,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" />
|
||||
@@ -154,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" />
|
||||
@@ -176,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">
|
||||
<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" />
|
||||
<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 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">
|
||||
<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" />
|
||||
<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 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" />
|
||||
@@ -230,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" />
|
||||
@@ -247,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" />
|
||||
@@ -263,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" />
|
||||
@@ -272,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" />
|
||||
@@ -288,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" />
|
||||
@@ -296,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" />
|
||||
@@ -304,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" />
|
||||
@@ -316,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">
|
||||
<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" />
|
||||
<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="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" />
|
||||
@@ -355,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" />
|
||||
@@ -372,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" />
|
||||
@@ -388,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" />
|
||||
@@ -397,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" />
|
||||
@@ -413,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" />
|
||||
@@ -421,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" />
|
||||
@@ -429,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" />
|
||||
@@ -441,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>
|
||||
```
|
||||
@@ -451,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" />
|
||||
@@ -473,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" />
|
||||
@@ -491,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" />
|
||||
@@ -501,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" />
|
||||
@@ -515,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>
|
||||
```
|
||||
@@ -523,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" />
|
||||
@@ -544,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" />
|
||||
@@ -572,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>
|
||||
```
|
||||
@@ -586,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>
|
||||
@@ -595,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
|
||||
@@ -669,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>
|
||||
```
|
||||
@@ -3,7 +3,6 @@ title: Cards
|
||||
summary: Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content.
|
||||
bootstrapLink: components/card/
|
||||
description: Organize content with flexible cards.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default card
|
||||
@@ -3,7 +3,6 @@ title: Carousel
|
||||
summary: A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information.
|
||||
bootstrapLink: components/carousel/
|
||||
description: Display visual content with carousels.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -3,7 +3,6 @@ title: Charts
|
||||
libs: apexcharts
|
||||
summary: Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.
|
||||
description: Interactive data visualizations with ApexCharts.
|
||||
layout: default
|
||||
---
|
||||
|
||||
To be able to use the charts in your application you will need to install the apexcharts dependency with `npm install apexcharts`.
|
||||
@@ -3,7 +3,6 @@ title: Countup
|
||||
summary: A countup element is used to display numerical data in an interesting way and make the interface more interactive.
|
||||
libs: countup
|
||||
description: Display numbers dynamically with countups.
|
||||
layout: default
|
||||
---
|
||||
|
||||
The countup component is used to display numbers dynamically. It is a great way to make the interface more interactive and engaging. The countup component is a simple and easy way to animate numbers in your application.
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Data grid
|
||||
summary: Use the data grid component to display detailed information about your product. The data is displayed as a column of items consisting of a title and content.
|
||||
description: Detailed product information in grids.
|
||||
layout: default
|
||||
---
|
||||
|
||||
```html example vcentered height="460px"
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Divider
|
||||
summary: Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.
|
||||
description: Separate content with clear dividers.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -3,7 +3,6 @@ title: Dropdowns
|
||||
summary: Use dropdowns to display lists of options or include more positions in a menu without overwhelming users with too many buttons and long lists. Dropdowns facilitate users' interaction with your website or software and make your design look clear.
|
||||
bootstrapLink: components/dropdowns
|
||||
description: Organize options with dropdown menus.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default dropdown
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Dropzone
|
||||
summary: Dropzone is a simple JavaScript library that helps you add file drag and drop functionality to your web forms. It is one of the most popular drag and drop library on the web and is used by millions of people.
|
||||
description: Drag-and-drop file upload tool.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Basic usage
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Empty states
|
||||
summary: Empty states or blank pages are commonly used as placeholders for first-use, empty data or error screens. Their aim is to engage users when there is no content to display and that is why their design is extremely important from the point of view of the user experience of your website or app.
|
||||
description: Engage users in empty or error screens.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -3,7 +3,6 @@ title: Icons
|
||||
summary: Use one of over 5000 icons created specifically for Tabler and make your dashboard look even more attractive. All icons are under MIT license, so you can use them without any problem both in private and commercial projects.
|
||||
banner: icons
|
||||
description: Enhance dashboards with custom icons.
|
||||
layout: default
|
||||
---
|
||||
|
||||
If you need to add icons to your website, you can use the Tabler Icons library. It contains over 5000 icons that you can use in your projects. All icons are under the MIT license, so you can use them without any problem both in private and commercial projects. You can find the Tabler Icons library [here](https://tabler-icons.io/).
|
||||
@@ -3,7 +3,6 @@ title: Inline player
|
||||
libs: plyr
|
||||
summary: A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.
|
||||
description: Lightweight media player for websites.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Modals
|
||||
summary: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
|
||||
description: Dialogs for notifications and content.
|
||||
layout: default
|
||||
---
|
||||
|
||||
Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the `<body>` so that modal content scrolls instead.
|
||||
@@ -1,6 +1,5 @@
|
||||
---
|
||||
title: Offcanvas
|
||||
layout: default
|
||||
---
|
||||
|
||||
Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript.
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Placeholder
|
||||
summary: Placeholder is used to reserve space for content that soon will appear in a layout.
|
||||
description: Reserve space for upcoming content.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Placeholder line
|
||||
@@ -3,7 +3,6 @@ title: Popovers
|
||||
summary: Popovers are used to provide additional information on elements where a simple tooltip is not sufficient.
|
||||
bootstrapLink: components/popovers
|
||||
description: Provide extra information with popovers.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -3,7 +3,6 @@ title: Progress bars
|
||||
summary: Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated.
|
||||
bootstrapLink: components/progress
|
||||
description: Track and display progress visually.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -3,7 +3,6 @@ title: Range slider
|
||||
libs: nouislider
|
||||
description: Adjust values with range sliders.
|
||||
summary: Range sliders allow users to select a range of values by adjusting two handles along a track, providing an intuitive and space-efficient input method.
|
||||
layout: default
|
||||
---
|
||||
|
||||
To be able to use the range slider in your application you will need to install the nouislider dependency with `npm install nouislider`.
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Ribbons
|
||||
summary: Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out.
|
||||
description: Highlight elements with graphical ribbons.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -1,202 +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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
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>
|
||||
```
|
||||
@@ -3,7 +3,6 @@ title: Spinners
|
||||
summary: Spinners are used to show the loading state of a component or page. They provide feedback for an action a user has taken, when it takes a bit longer to complete.
|
||||
bootstrapLink: components/spinners/
|
||||
description: Indicate loading state with spinners.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Statuses
|
||||
summary: Status dots are particularly useful if you want to make an interface element more noticeable regardless of limited space.
|
||||
description: Highlight interface elements with status dots.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -3,7 +3,6 @@ title: Steps
|
||||
summary: Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully.
|
||||
new: true
|
||||
description: Simplify complex processes with steps.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -3,7 +3,6 @@ title: Switch icon
|
||||
summary: The Switch Icon component is used to create a transition between two icons. You can use any icon, both line and filled version.
|
||||
banner: icons
|
||||
description: Transition between two icons smoothly.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -3,7 +3,6 @@ title: Tables
|
||||
summary: Tables are a useful interface element that allows to visualise data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity.
|
||||
bootstrapLink: content/tables/
|
||||
description: Visualize data clearly with tables.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Basic Table
|
||||
@@ -3,7 +3,6 @@ title: Tabs
|
||||
summary: Tabs allow users to alternate between equally important views within the same context. By dividing content into meaningful sections, they improve its organization and make it easy for users to navigate.
|
||||
bootstrapLink: components/navs/
|
||||
description: Organize content with interactive tabs.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user