圖示 - Tocas UI

初入上手

開始使用 Getting Started 主題色系 Colors 響應式設計 Responsive

格局設計

箱型容器 Box 絕對置中 Center 界限容器 Container 內容區塊 Content 表單控制項 Control 網格系統 Grid 空白間隔 Space 水平排列 Row 間隔容器 Wrap

表單

按鈕 Button 核取方塊 Checkbox 欄位分組 Fieldset 檔案上傳 File 輸入欄位 Input 選項按鈕 Radio 下拉式選擇 Select 項目切換 Selection 指撥開關 Switch

文字與段落

分隔線 Divider 標題 Header 內容遮罩 Mask 引言 Quote 片段 Segment 文字 Text

視覺回饋

圓形量測計 Gauge 讀取狀態 Loading 彈出視窗 Modal 提示訊息 Notice 預置內容 Placeholder 步驟指示器 Procedure 進度條 Progress 簡短通知 Snackbar

多媒體與圖示

大頭貼 Avatar 國家旗幟 Flag 圖示 Icon 圖示項目 Iconset 多媒體圖片 Image 圖片組合 Imageset

資料顯示

可折疊內容 Accordion 計數徽章 Badge 檢查清單 Checklist 關聯標籤 Chip 關閉按鈕 Close 交談會話 Conversation 清單 List 中繼資料 Meta 評分 Rating 統計數據 Statistic 表格 Table

導覽

導覽標記 Breadcrumb 選單 Menu 頁數導覽列 Pagination 分頁籤 Tab

應用程式

格局劃分 App Layout 導航列 App Navbar 側邊欄 App Sidebar

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

<span class="ts-icon is-user-icon"></span>
<span class="ts-icon is-video-icon"></span>
<span class="ts-icon is-camera-icon"></span>

概要

Tocas UI 的圖示來自 Font Awesome 6.x，其名稱可以直接沿用至元件中（用法為：is-名稱-icon）。

狀態

停用的

以淡化的方式表示某個圖示並不是主體。

<span class="ts-icon is-disabled is-users-icon"></span>

外觀

另類的

在 Font Awesome 裡某些圖示會有另一個版本，這個版本偏向非實心的。

<span class="ts-icon is-regular is-heart-icon"></span>
<span class="ts-icon is-heart-icon"></span>
<span class="ts-icon is-regular is-user-icon"></span>
<span class="ts-icon is-user-icon"></span>

負面的

告訴使用者這個圖示可能帶有錯誤或負面意味。

<span class="ts-icon is-negative is-trash-icon"></span>

次要的

較不重要的圖示會以更淡的顏色呈現。

<span class="ts-icon is-secondary is-star-icon"></span>

旋轉的

使一個圖示不停地旋轉。

<span class="ts-icon is-spinning is-circle-notch-icon"></span>
<span class="ts-icon is-spinning is-spinner-icon"></span>

領頭的

圖示可能會作為某個段落的領頭象徵，這個圖示會特別大，適合用於與標題一起置中顯示。

<span class="ts-icon is-heading is-gift-icon"></span>

尺寸

更改圖示的大小。

<span class="ts-icon is-small is-house-icon"></span>
<span class="ts-icon is-house-icon"></span>
<span class="ts-icon is-large is-house-icon"></span>
<span class="ts-icon is-big is-house-icon"></span>
<span class="ts-icon is-huge is-house-icon"></span>

圓形的

圖示可以是圓形外框描繪的。

<span class="ts-icon is-circular is-house-icon"></span>
<span class="ts-icon is-circular is-twitter-icon"></span>
<span class="ts-icon is-circular is-facebook-icon"></span>

圓角的

圖示可以由一個圓角外框描繪。

<span class="ts-icon is-rounded is-users-icon"></span>
<span class="ts-icon is-rounded is-heart-icon"></span>
<span class="ts-icon is-rounded is-star-icon"></span>

間隔的

在前或後新增間隔以避免與其他元件相鄰太近。

準備起飛

Tesla

透過搜尋功能可以找到你要的事物。

準備起飛 <span class="ts-icon is-start-spaced is-plane-departure-icon"></span>
<span class="ts-icon is-end-spaced is-car-icon"></span> Tesla
透過搜尋 <span class="ts-icon is-spaced is-magnifying-glass-icon"></span> 功能可以找到你要的事物。

圖示組

astronomy

globe

meteor

moon

satellite

satellite-dish

shuttle-space

user-astronaut

design

bezier-curve

brush

circle-half-stroke

circle-nodes

clone

compass-drafting

copy

crop

crop-simple

crosshairs

cube

cubes

draw-polygon

droplet

droplet-slash

eraser

eye

eye-dropper

eye-slash

fill

fill-drip

floppy-disk

font-awesome

highlighter

icons

layer-group

lines-leaning

marker

object-group

object-ungroup

paint-roller

paintbrush

palette

paste

pen

pen-clip

pen-fancy

pen-nib

pen-ruler

pen-to-square

pencil

ruler-combined

ruler-horizontal

ruler-vertical

scissors

splotch

spray-can

stamp

swatchbook

vector-square

wand-magic

wand-magic-sparkles

science

atom

biohazard

brain

capsules

circle-radiation

clipboard-check

disease

dna

eye-dropper

filter

fire

fire-flame-curved

fire-flame-simple

flask

flask-vial

frog

magnet

microscope

mortar-pestle

pills

prescription-bottle

radiation

seedling

skull-crossbones

square-virus

syringe

tablets

temperature-high

temperature-low

vial

vial-circle-check

vial-virus

vials

transportation

accessible-icon

baby-carriage

bicycle

bus

bus-simple

car

car-burst

car-rear

car-side

car-tunnel

cart-shopping

ferry

helicopter

horse

jet-fighter

jet-fighter-up

motorcycle

mound

paper-plane

plane

plane-slash

plane-up

road

road-barrier

road-spikes

rocket

sailboat

ship

shuttle-space

sleigh

snowplow

taxi

tractor

train

train-subway

train-tram

truck

truck-arrow-right

truck-droplet

truck-field

truck-field-un

truck-front

truck-medical

truck-monster

truck-pickup

truck-plane

van-shuttle

wheelchair

wheelchair-move

text-formatting

align-center

align-justify

align-left

align-right

bold

border-all

border-none

border-top-left

check

check-double

circle-check

filter-circle-xmark

font

heading

highlighter

i-cursor

icons

indent

italic

list

list-check

list-ol

list-ul

outdent

paragraph

rectangle-list

spell-check

square-check

strikethrough

subscript

superscript

table

table-cells

table-cells-large

table-columns

table-list

text-height

text-slash

text-width

underline

weather

bolt

bolt-lightning

cloud

cloud-bolt

cloud-meatball

cloud-moon

cloud-moon-rain

cloud-rain

cloud-showers-heavy

cloud-showers-water

cloud-sun

cloud-sun-rain

house-tsunami

hurricane

icicles

meteor

moon

poo-storm

rainbow

smog

snowflake

sun

sun-plant-wilt

temperature-arrow-down

temperature-arrow-up

temperature-empty

temperature-full

temperature-half

temperature-high

temperature-low

temperature-quarter

temperature-three-quarters

tornado

umbrella

volcano

water

wind

accessibility

accessible-icon

audio-description

braille

circle-info

circle-question

closed-captioning

ear-deaf

ear-listen

eye

eye-low-vision

fingerprint

hands

hands-asl-interpreting

handshake-angle

person-cane

person-walking-with-cane

phone-volume

question

tty

universal-access

wheelchair

wheelchair-move

animals

bugs

cat

cow

crow

dog

dove

dragon

feather

feather-pointed

fish

fish-fins

frog

hippo

horse

horse-head

kiwi-bird

locust

mosquito

otter

paw

shield-cat

shield-dog

shrimp

spider

worm

connectivity

bluetooth

circle-nodes

cloud

cloud-arrow-down

cloud-arrow-up

globe

house-signal

rss

satellite-dish

signal

tower-broadcast

tower-cell

wifi

editing

arrows-rotate

bandage

bars

brush

chart-simple

check

check-double

circle-check

circle-half-stroke

crop

crop-simple

cube

delete-left

ellipsis

ellipsis-vertical

eye-dropper

eye-slash

grip

grip-lines

grip-lines-vertical

grip-vertical

link

link-slash

minus

paintbrush

pen

pen-clip

pen-fancy

pen-nib

pen-ruler

pen-to-square

pencil

plus

rotate

scissors

signature

sliders

square-check

square-pen

trash

trash-arrow-up

trash-can

trash-can-arrow-up

wand-magic

wand-magic-sparkles

xmark

files

box-archive

clone

copy

file

file-arrow-down

file-arrow-up

file-audio

file-circle-check

file-circle-exclamation

file-circle-minus

file-circle-plus

file-circle-question

file-circle-xmark

file-code

file-csv

file-excel

file-export

file-image

file-import

file-lines

file-pdf

file-pen

file-powerpoint

file-shield

file-video

file-word

file-zipper

floppy-disk

folder

folder-closed

folder-open

note-sticky

paste

photo-film

scissors

business

address-book

address-card

arrows-spin

arrows-to-dot

arrows-to-eye

bars-progress

bars-staggered

book

box-archive

boxes-packing

briefcase

building

bullhorn

bullseye

business-time

cake-candles

calculator

calendar

calendar-days

certificate

chart-line

chart-pie

chart-simple

city

clipboard

clipboard-question

compass

copy

envelope

envelope-circle-check

envelope-open

eraser

fax

file

file-circle-plus

file-lines

floppy-disk

folder

folder-minus

folder-open

folder-plus

folder-tree

glasses

globe

highlighter

house-laptop

industry

landmark

laptop-file

list-check

magnifying-glass-arrow-right

magnifying-glass-chart

marker

mug-saucer

network-wired

note-sticky

paperclip

paste

pen

pen-clip

pen-fancy

pen-nib

pen-to-square

pencil

percent

person-chalkboard

phone

phone-flip

phone-slash

phone-volume

registered

scale-balanced

scale-unbalanced

scale-unbalanced-flip

scissors

signature

sitemap

socks

square-envelope

square-pen

square-phone

square-phone-flip

square-poll-horizontal

square-poll-vertical

table

table-columns

tag