Tips on enlarging the header size in ion-action-sheet within the VueJS framework of Ionic

Recently I started using Vue along with the ionic framework. This is a snippet of code from my application:

<ion-action-sheet
  :is-open="isActionSheetOpen"
  header="Choose Payment"
  mode="ios"
  :buttons="buttons"
  @didDismiss="setOpen(false)"
  class="my-custom-class"
></ion-action-sheet>

I am looking to make the font size of the 

header="Choose Payment"
text to be 25px, but I haven't been able to find any official documentation on how to do this.

Any suggestions on how I can achieve this?

I have attempted to add custom CSS for the class shown below:

ion-action-sheet.my-custom-class {
  --font-size: 25px;   
}
javascripttypescriptvue.jsionic-frameworkvue-component

Answer №1

When setting a cssClass for the action sheet, simply targeting the title element's css class should suffice:

ion-action-sheet.my-custom-class .action-sheet-title {
  font-size: 25px;
}

To see an example that fits your use case, refer to the IonActionSheet documentation or check out this modified version of the example in the docs here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Typescript's Nested Type Assignments

Simply put, I'm making an API call and receiving the following data: { getUserInfo: { country: 'DE', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c48594f487c59445d514c5059125f5351">[e ...

javascriptnode.jstypescript

Aligning a navigation bar with a hamburger menu in the center

I recently implemented a hamburger menu with some cool animations into my site for mobile devices. Now, I am facing the challenge of centering the menu on desktop screens and it's proving to be tricky. The positioning is off, and traditional methods l ...

javascripthtmlcssresponsive-design

An error occurred in the ngrx store with Angular during production build: TypeError - Unable to access property 'release' of undefined

After deploying my application and running it, I encountered an issue that seems to be happening only during production build at runtime. At this point, I am uncertain whether this is a bug or if there is a mistake in my code. The error "TypeError: Cannot ...

angulartypescriptngrxngrx-store

Utilizing Conditional Logic to Create a Dynamic Menu

I have a navigation menu on my website that is divided into two sections. There is a left panel and a right panel which slide in from the side when their respective buttons are clicked, covering the browser window. The functionality of sliding in the pan ...

javascripttoggleconditional-statements

Tips for preventing recursion when utilizing scrollIntoView() in a scroll event handler

My goal is to break down my website into screen-sized sections that automatically scroll to the next section when a user begins scrolling. I attempted to accomplish this by using the following code: $(window).scroll(function() { getElementToScroll().s ...

javascriptjqueryrecursionscroll

Customize styles for a specific React component in a Typescript project using MaterialUI and JSS

I'm currently exploring how to customize the CSS, formatting, and theme for a specific React component in a Typescript/React/MaterialUI/JSS project. The code snippet below is an example of what I've tried so far, but it seems like the {classes.gr ...

reactjstypescriptmaterial-uijss

Creating various containers in React JS for different components

I am faced with the task of rendering multiple DOM elements from my JavaScript code. Imagine I have div elements like this: <div id="div1"><div> //Some Html tags <div id="div2"><div> //Some Html tags <div id="div3" ...

javascriptdomreactjs

Is it possible to create a combined header/declaration file in Golang within a single file?

My goal is to automatically generate Golang declaration files based on .json data. While with TypeScript I can consolidate types/declarations in one file using namespaces, it seems more complex to achieve the same with Golang packages and namespacing. In ...

typescriptgo

What steps can be taken to create a build that organizes files into separate folders based on their file types?

Can someone assist me with Vite? How can I create a build that organizes files by their type into separate folders? The desired output should look like this: /dist /styles/*.css /scripts/*.js /images/[*.png|*.jpg|*.gif] index.html ...

vue.jsbuildvite

When the Angular Reactive form control does not show any errors, it is designated as ng-invalid

Currently, I am working on an (Angular 10) reactive form that includes multiple dynamically-created input components within an ngFor loop. Here is an example of one of these input components: <div [id]="this.getDivElementId()" class="text ...

angulartypescriptvalidationangular-reactive-formsangular10

utilize ng-include in angularjs to include a page

For some reason, I am having trouble including a file using ng-include. The file is supposed to be included when a button is pressed: <button type="submit" class="btn btn-primary" ng-click="getPartial()">Compare</button> This is the function ...

javascriptangularjsangularjs-ng-include

Determine whether a component is linked to an event listener

If a <Form> component is called with a @cancel event listener attached to it, the cancel button that triggers this event should be visible. If no @cancel event is present, the cancel button should not be displayed. Is there a method to verify if a c ...

javascriptvue.jsvuejs2vue-component

Error encountered with Node.js clustering

Hey there! I'm currently diving into the world of node.js and javascript. My goal is to build a cluster.js using the nodejs cluster module, where at the end of my if statement I invoke server.js to kickstart the application. Here's my cluster.js ...

javascriptnode.jsexpressnode-cluster

Handling Errors in Asynchronous Functions with JavaScriptLet's explore the best practices for

I am a beginner in javascript and recently delved into async/await. After going through various resources, I gained a basic understanding. However, while experimenting with some code examples, I encountered unexpected results which left me puzzled about wh ...

javascriptasynchronousasync-await

What causes the difference in inference for unspecified generics between a simple function call and a null-coalescing operator in TypeScript?

What causes the different types of a and b in the given code snippet? function empty<T>() { return [] as T[] } const defEmpty = empty() function test1(abc: number[]|null) { const a = abc ?? defEmpty const b = abc ?? empty() } Upon testing on t ...

typescripttypescript-types

Using JavaScript to Filter JSON Objects

After making a php ajax call, I have received the following JSON data that needs to be displayed to the users: JSON {"headers":{},"body":"{\"comuni\":[{\"datapresub\":\"08\/08 ...

javascriptjqueryjson

Do not ask for confirmation when reloading the page with onbeforeunload

I am setting up an event listener for the onbeforeunload attribute to show a confirmation message when a user attempts to exit the page. The issue is that I do not want this confirmation message to appear when the user tries to refresh the page. Is there ...

javascripthtml

Removing items dynamically from a list created using ng-repeat

I have an array of nested JSON objects and I am using ng-repeat to create a list with the nested arrays. My goal is to dynamically delete items from this list upon button click by calling a function in the controller: $scope.remove= function(path){ va ...

javascriptangularjs

Having trouble establishing a connection with the socket.io server on the local network

After successfully setting up communication between my nodeJS server and a vueJS app via socket.io on my main computer, I encountered a challenge. While running my node server and vue app in dev mode, the socket connection works when I access the app throu ...

node.jsvue.jswebsocketsocket.iovue-socket.io

Extracting the URL of the @font-face declaration in CSS with the use of JavaScript

Currently, my CSS file contains numerous @font-face tags. Each tag specifies a unique font-family and src URL. @font-face{ font-family: Garamond; src: url('ePrintFonts/pcl_91545.ttf'); } @font-face{ font-family: C ...

javascriptjqueryhtmlcss