Skip to main content

Customization Style

Component is build on top of web component and using CSS-Parts and CSS-Variables to allow customization.

CSS-Parts​

You can customize the component style by using the following CSS-Parts:

  • btn - The button element
  • spinner - The spinner element
  • result - The results display element
  • toast - The toast display element nv

Code example​

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@fazio/ipfs-upload-button';

@Component({
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  selector: 'app-root',
  template: `
  <div>
    <web3-upload-btn token="{{token}}"></web3-upload-btn>
  </div>
  `,
  styles: [`
    web3-upload-btn::part(btn) {
      background-color: rgb(0, 162, 255);
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 8px 16px;
      font-size: 16px;
      cursor: pointer;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
    }
  `]
})
export class AppComponent {
  token = 'WEB3STORAGE_APIKEY'
}

Preview result​

Upload to IPFS