CDN & διανομή ​

pantoken δημοσιεύει κάθε πακέτο στο npm, οπότε μπορείτε να τραβήξετε tokens, components και web components απευθείας από ένα CDN — χωρίς βήμα build, χωρίς bundler. Αυτή η σελίδα καλύπτει το URL συνδυασμού CSS (με έναν διαδραστικό builder), καθώς και τα web-component drop-ins.

Το θεμέλιο των tokens ​

Κάθε pantoken component διαβάζει --instui-* custom properties από ένα token sheet στη σελίδα. Δύο παραλλαγές παρέχονται:

  • @pantoken/css/dist/style.lean.css — το συνιστώμενο CDN θεμέλιο. Φέρει κάθε token εκτός του πλήρους συνόλου εικονιδίων, οπότε είναι περίπου 23 KB gzipped.
  • @pantoken/css/dist/style.css — το πλήρες sheet, που περιλαμβάνει όλα τα ~1,777 icon glyph tokens (--instui-icon-*). Περίπου 140 KB gzipped. Φορτώστε το αν αναφέρετε εικονίδια ευρέως μέσω var(--instui-icon-*).

Η κλίμακα elevation και οι μεταβλητές focus-ring υπάρχουν και στα δύο sheets, οπότε οι σκιές και ο δακτύλιος εστίασης δουλεύουν με μόνο το θεμέλιο φορτωμένο.

Επιλέξτε τα components και τα icons σας ​

Ο interactive CDN picker κατασκευάζει jsDelivr combine URLs για CSS και αποσπάσματα για πακέτα JavaScript. Ανοίξτε το, επιλέξτε ό,τι χρειάζεστε και αντιγράψτε την παραγόμενη έξοδο.

  • Components tab — επιλέξτε μεμονωμένα stylesheets component ή το ολόκληρο βαρέλι components.css. Προσθέστε το base reset ή τα utilities spacing/color αν τα χρειάζεστε.
  • JS tab — αντιγράψτε ένα ESM import snippet για @pantoken/interactions.
  • Icons tab — επιλέξτε μεμονωμένα icons από το σύνολο InstUI (~1,800 icons) ή από τα Simple Icons (~3,300 brand glyphs). Ο picker παράγει ξεχωριστό combine URL για τα icon CSS αρχεία ώστε να φορτώνετε μόνο τα icons που πραγματικά χρησιμοποιείτε.
  • Web Components tab — δημιουργήστε @pantoken/web-components αποσπάσματα (ESM selective register ή classic script bootstrap).

Κάθε αρχείο component είναι μικρό — τα περισσότερα είναι γύρω στα 2 KB. Ένα component που εμφανίζει icons (alert, checkbox, και μερικά άλλα) χρειάζεται αυτά τα glyphs, οπότε ο builder προσθέτει @pantoken/components/dist/component-icons.css (περίπου 0.5 KB gzipped — τα 11 icons που χρησιμοποιεί το σύνολο component) όποτε επιλέγετε το lean sheet. Το πλήρες sheet τα περιέχει ήδη.

Σειρά φόρτωσης και γραμματοσειρές ​

Φορτώστε πρώτα το token foundation, μετά το προαιρετικό base reset, μετά τα αρχεία component, και τέλος τα utilities — είναι override utilities, οπότε πραγματικά υπερισχύουν του κανόνα ενός component μόνο όταν προσγειωθούν μετά από αυτό στην cascade. Το combine URL παραπάνω τα έχει ήδη τακτοποιήσει για εσάς. Οι γραμματοσειρές είναι η μόνη εξαίρεση: @pantoken/components/dist/fonts.css δείχνει σε αρχεία γραμματοσειρών με σχετική διαδρομή, οπότε το combine δεν μπορεί να τα ξαναγράψει — φορτώστε το ως το δικό του <link>:

html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@pantoken/components/dist/fonts.css" />

Όλα μαζί ​

Επιλέξτε All components στο picker για να το αλλάξετε σε barrel, ή δείξτε το εσείς (περίπου 141 KB gzipped) δίπλα στο token sheet:

html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/combine/npm/@pantoken/css/dist/style.css,npm/@pantoken/components/dist/components.css"
/>

Web components ​

@pantoken/web-components καταγράφει framework-agnostic <instui-*> custom elements. Ενσωματώνουν το δικό τους CSS, αλλά εξακολουθούν να διαβάζουν tokens από ένα sheet στη σελίδα, οπότε φορτώστε και ένα token foundation.

ES modules (συνιστώμενο) ​

Ένα ESM CDN επιλύει τις εξαρτήσεις του πακέτου για εσάς. Αυτό καταγράφει κάθε στοιχείο:

html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@pantoken/css/dist/style.css" />
<script type="module">
  import "https://esm.sh/@pantoken/web-components";
</script>

Χρησιμοποιήστε το πλήρες token sheet (ή το lean sheet συν component-icons.css) ώστε τα στοιχεία που αποδίδουν εικονίδια όπως <instui-alert> να επιλύουν τα glyphs τους.

Για να καταγράψετε μόνο μερικά στοιχεία — και τις εμφωλευμένες εξαρτήσεις τους — εισάγετε register και περάστε only:

html
<script type="module">
  import { register } from "https://esm.sh/@pantoken/web-components";
  // Pulls in date-input and calendar automatically.
  register(customElements, { only: ["date-time-input"] });
</script>

Κλασικό script tag ​

Για ένα drop-in χωρίς modules, φορτώστε το IIFE build. Πακετάρει τις εξαρτήσεις του και αυτοκαταγράφει κάθε στοιχείο κατά τη φόρτωση, εκθέτοντας ένα PantokenWebComponents global:

html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@pantoken/css/dist/style.css" />
<script src="https://cdn.jsdelivr.net/npm/@pantoken/web-components/dist/web-components.iife.js"></script>

Είναι μεγαλύτερο από το ESM μονοπάτι — ενσωματώνει @pantoken/components και @pantoken/icons — οπότε χρησιμοποιήστε το μόνο όταν δεν μπορείτε να χρησιμοποιήσετε modules.

Καρφίτσωμα εκδόσεων (Pinning versions) ​

Τα URLs παραπάνω — και αυτά που γράφει ο picker — παρακολουθούν την τελευταία release. Καρφιτσώστε μια major (ή ακριβή) έκδοση για παραγωγή — για παράδειγμα @pantoken/css@0 — έτσι ώστε μια αναβάθμιση να μην σας εκπλήσσει.